Cvičení – vytvoření aplikace

  • 10 min

Aplikaci budete vytvářet iterativním způsobem a průběžně se při tom zaměříte na určité principy. Nejprve vytvoříte cílovou stránku aplikace s formulářem, který bude používat uživatel.

Vstupním bodem aplikací Flasku je obvykle soubor s názvem app.py. Této konvence se přidržíte i vy při vytváření jádra aplikace. Provedete následující kroky:

  1. Vytvoření jádra aplikace
  2. Přidání trasy do aplikace
  3. Vytvoření šablony HTML webu
  4. Testování aplikace

Vytvoření jádra aplikace

  1. Vraťte se do dříve používané instance editoru Visual Studio Code a vytvořte nový soubor s názvem app.py tím, že na kartě Průzkumník kliknete na Nový soubor.

    Screenshot showing the Visual Studio Code New File dialog.

    Důležité

    V tomto cvičení poprvé použijete Visual Studio Code k vytvoření aplikace v Pythonu. Zobrazí se zprávy o instalaci rozšíření Python a linteru pylint. Pokud chcete oba doplňky nainstalovat, vyberte Nainstalovat.

  2. Přidání kódu a vytvoření aplikace Flask

    from flask import Flask, redirect, url_for, request, render_template, session

app = Flask(__name__)

Součástí příkazu k importu jsou odkazy na Flask, což je jádro každé aplikace Flask. Za chvíli použijete šablonu render_template, až budete chtít vrátit kód HTML.

Jádro aplikace bude app. Použijete ho k registraci tras v dalším kroku.

Přidání trasy

Aplikace bude používat jednu trasu /. Tato trasa se také někdy označuje jako výchozí nebo indexová, protože se použije v případě, že uživatel nezadá nic než název domény nebo serveru.

Na konec souboru app.py přidejte následující kód.

@app.route('/', methods=['GET'])
def index():
    return render_template('index.html')

K označení trasy, kterou chcete vytvořit, použijete @app.route. Cesta bude /, což je výchozí trasa. Označte, že tato trasa se použije pro požadavek GET. Pokud požadavek GET přijde pro /, zavolá Flask automaticky funkci deklarovanou bezprostředně pod dekorátorem. V našem případě index. V textu index uveďte, že uživateli vrátíte šablonu HTML pojmenovanou index.html.

Vytvoření šablony HTML formuláře

Šablonový modul Flasku, který se nazývá Jinja, je do značné míry zaměřený na HTML. Proto také můžete použít všechny stávající dovednosti a nástroje HTML, které už máte. K rozložení stránky, abyste zlepšili její vzhled, použijete Bootstrap. S Bootstrapem použijete v HTML jiné třídy šablon stylů CSS. Pokud Bootstrap neznáte, nemusíte se třídami zabývat a můžete se zaměřit na kód HTML (který je skutečně důležitý).

Důležité

HTML (Hypertext Markup Language) je standardní jazyk značek používaný k vytváření webových stránek. HTML se skládá z řady značek a atributů pro vytváření nadpisů, odstavců, seznamů, obrázků, odkazů a dalších prvků, které tvoří webovou stránku. Když uživatel požádá o webovou stránku, prohlížeč přečte kód HTML a vykreslí ho jako vizuální webovou stránku, se kterou může uživatel pracovat. Další informace o HTML najdete v základních informacích html.

Šablony Flasku je potřeba vytvořit ve složce, kterou pojmenujete templates. Vytvořte složku, potřebný soubor a přidejte HTML.

  1. Vytvořte novou složku s názvem templates tím, že v nástroji Průzkumník editoru Visual Studio Code vyberete Nová složka.

  2. Vyberte vytvořenou složku templates a přidejte do ní soubor příkazem Nový soubor.

  3. Pojmenujte soubor intex.html.

  4. Přidejte následující kód HTML:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
    <title>Translator</title>
</head>
<body>
    <div class="container">
        <h1>Translation service</h1>
        <div>Enter the text you wish to translate, choose the language, and click Translate!</div>
        <div>
            <form method="POST">
                <div class="form-group">
                    <textarea name="text" cols="20" rows="10" class="form-control"></textarea>
                </div>
                <div class="form-group">
                    <label for="language">Language:</label>
                    <select name="language" class="form-control">
                        <option value="en">English</option>
                        <option value="it">Italian</option>
                        <option value="ja">Japanese</option>
                        <option value="ru">Russian</option>
                        <option value="de">German</option>
                    </select>
                </div>
                <div>
                    <button type="submit" class="btn btn-success">Translate!</button>
                </div>
            </form>
        </div>
    </div>
</body>
</html>

Základními komponentami předchozího kódu HTML je textarea pro text, který chce uživatel přeložit, a rozevírací seznam (select), který uživatel použije k určení cílového jazyka. Pokud chcete přidat více jazyků, podívejte se na seznam podporovaných jazyků s dalšími možnostmi. Atribut value nastavte na kód jazyka, například pl znamená polštinu.

Testování aplikace

Počáteční web je hotový, a teď je čas ho otestovat. Abyste si testování trochu usnadnili, použijete integrovaný terminál editoru Visual Studio Code.

  1. Otevřete integrovaný terminál tak, že na Macu vyberete Ctrl nebo Cmd-'

  2. Spusťte následující příkaz, který nastaví modul runtime Flasku na vývoj. To znamená, že po každé změně se automaticky znovu načte server.

    # Windows
set FLASK_ENV=development

# Linux/macOS
export FLASK_ENV=development

  3. Spusťte aplikaci!

    flask run

  4. Otevřete aplikaci v prohlížeči tím, že přejdete na http://localhost:5000.

Měl by se zobrazit formulář. Blahopřejeme!

Prověřte si své znalosti

1.

Jaké je výchozí číslo portu používaného Flaskem pro zpracování požadavků HTTP na službu?

2.

V jakém podadresáři mají být standardně uloženy soubory šablon Jinja?