Ćwiczenie — tworzenie aplikacji
Aplikację będziemy tworzyć iteracyjnie, koncentrując się na konkretnych koncepcjach. Na początku utworzymy stronę docelową dla naszej aplikacji, która będzie wyświetlać formularz używany przez użytkownika.
Zwykle punktem wejścia dla aplikacji Flask jest plik o nazwie app.py. Będziemy przestrzegać tej konwencji i utworzymy rdzeń naszej aplikacji. Wykonamy następujące czynności:
- Tworzenie rdzenia aplikacji
- Dodawanie trasy dla naszej aplikacji
- Tworzenie szablonu HTML dla naszej witryny
- Testowanie aplikacji
Tworzenie rdzenia aplikacji
Wracając do wystąpienia Visual Studio Code, którego użyto wcześniej, utworzymy nowy plik o nazwie app.py, klikając pozycję New File na karcie Explorer
Ważne
Jeśli to ćwiczenie jest wykonywane po raz pierwszy w programie Visual Studio Code do tworzenia aplikacji w języku Python, zostaną wyświetlone komunikaty o zainstalowaniu rozszerzenia Python oraz lintera pylint. Wybierz pozycję Install, aby zainstalować każdy z tych dodatków.
Dodawanie kodu w celu utworzenia aplikacji Flask
from flask import Flask, redirect, url_for, request, render_template, session app = Flask(__name__)
Instrukcja import zawiera odwołania do Flask, czyli rdzenia każdej aplikacji Flask. render_template używamy, gdy chcemy zwrócić nasz kod HTML.
app będzie naszym rdzeniem aplikacji. Będziemy używać go podczas rejestrowania naszych tras w następnym kroku.
Dodawanie trasy
Nasza aplikacja będzie używać jednej trasy — /. Ta trasa jest czasami nazywana domyślną lub indeksem trasy, ponieważ jest to trasa, która będzie używana, jeśli użytkownik nie poda nazwy domeny lub serwera.
Na końcu pliku app.py dodaj następujący kod
@app.route('/', methods=['GET'])
def index():
return render_template('index.html')
Za pomocą @app.route wskazujemy trasę, którą chcemy utworzyć. Ścieżką będzie /, która jest trasą domyślną. Wskazujemy, że będzie ona używana w metodzie GET. Jeśli żądanie GET dotyczy /, aplikacja Flask automatycznie wywoła funkcję zadeklarowaną bezpośrednio poniżej dekoratora (w naszym przypadku index). W treści index wskazujemy, że do użytkownika będziemy odsyłać szablon HTML o nazwie index. html.
Tworzenie szablonu HTML dla naszego formularza
Jinja, aparat tworzenia szablonów dla aplikacji Flask, koncentruje się dość mocno na kodzie HTML. W związku z tym możemy używać wszystkich umiejętności i narzędzi HTML, którymi obecnie dysponujemy. Zamierzamy użyć ładowania początkowego (Bootstrap), aby zaprojektować naszą stronę w taki sposób, aby była nieco ładniejsza. W ładowaniu początkowym użyjemy innych klas CSS w naszym kodzie HTML. Jeśli nie masz doświadczenia z funkcją ładowania początkowego, możesz zignorować klasy i skoncentrować się na kodzie HTML (co jest naprawdę istotne).
Ważne
HTML (Hypertext Markup Language) to standardowy język znaczników używany do tworzenia stron internetowych. Kod HTML składa się z serii tagów i atrybutów do tworzenia nagłówków, akapitów, list, obrazów, linków i innych elementów tworzących stronę internetową. Gdy użytkownik żąda strony internetowej, przeglądarka odczytuje kod HTML i renderuje go jako wizualną stronę internetową, z którą użytkownik może korzystać. Aby dowiedzieć się więcej na temat języka HTML, zobacz Podstawy języka HTML.
Szablony dla aplikacji Flask muszą zostać utworzone w odpowiednim folderze o nazwie templates. Utwórzmy folder, wymagany plik i dodajmy kod HTML.
Utwórz nowy folder o nazwie templates, wybierając pozycję New Folder w narzędziu Explorer w programie Visual Studio Code
Wybierz utworzony folder templates i wybierz pozycję New File, aby dodać plik do folderu
Nadaj plikowi nazwę index.html
Dodaj następujący kod 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>
Podstawowe składniki kodu HTML to: textarea dla tekstu, który użytkownik chce przetłumaczyć oraz lista rozwijana (select), która będzie używana przez użytkownika w celu wskazania języka docelowego. Jeśli chcesz dodać więcej języków, możesz zapoznać się z listą obsługiwanych języków dla innych opcji. Ustaw atrybut value na kod języka, na przykład pl dla języka polskiego.
Testowanie aplikacji
Po utworzeniu witryny początkowej już czas na jej przetestowanie! Będziemy używać zintegrowanego terminalu w programie Visual Studio Code, co powinno ułatwić pracę.
Otwórz zintegrowany terminal, wybierając klawisze Ctrl-' lub Cmd-' na komputerze Mac
Uruchom następujące polecenie, aby ustawić środowisko uruchomieniowe Flask na tryb programowania, co oznacza, że serwer zostanie automatycznie ponownie załadowany przy każdej zmianie
# Windows set FLASK_ENV=development # Linux/macOS export FLASK_ENV=developmentUruchom aplikację!
flask runOtwórz aplikację w przeglądarce, przechodząc do http://localhost:5000
Powinien zostać wyświetlony formularz! Gratulacje!