Ćwiczenie — Tworzenie aplikacji internetowej Python za pomocą programu Visual Studio Code

Ukończone

Za pomocą środowisk Node.js i Express.js można bardzo szybko utworzyć aplikację internetową.

Załóżmy, że poproszono Cię o utworzenie witryny internetowej w celu promowania wydania nowej gry wideo. Postanawiasz użyć środowiska Node.js do uruchamiania kodu po stronie serwera, a w celu umożliwienia jak najszybszego opracowania zamierzasz użyć struktury Express.js na potrzeby aplikacji internetowych. Chcesz szybko utworzyć aplikację internetową weryfikacji koncepcji, która wyświetla odliczanie do daty wydania.

W tym miejscu zainstalujesz wymagane oprogramowanie, a następnie użyjesz programu Visual Studio Code, aby utworzyć i przetestować witrynę internetową.

Uwaga

Przed rozpoczęciem tego ćwiczenia na komputerze musisz mieć zainstalowany program Visual Studio Code i środowisko Node.js.

Tworzenie folderu aplikacji

Za pomocą programu Visual Studio Code możesz uruchamiać wszystkie polecenia i edytować cały kod dla swojej aplikacji internetowej. Tutaj użyjesz zintegrowanego terminalu, aby skonfigurować folder z zainstalowaną strukturą Express.js:

  1. Uruchom program Visual Studio Code.

  2. W menu View (Widok) kliknij pozycję Terminal.

  3. Aby utworzyć nowy folder, wpisz następujące polecenia:

    cd ~
    mkdir countdownExpressApp
    cd countdownExpressApp
    
  4. W menu Plik wybierz pozycję Otwórz folder, a następnie przejdź do folderu countdownExpressApp.

Tworzenie szkieletu aplikacji Express.js

Za pomocą narzędzia Express Generator możesz utworzyć wszystkie składniki standardowej aplikacji internetowej Express.js:

  1. W oknie eksploratora programu Visual Studio Code zwróć uwagę, że folder countdownExpressApp jest pusty.

  2. Jeśli zintegrowany terminal nie jest widoczny, w menu View (Widok) kliknij pozycję Terminal.

  3. Aby uruchomić narzędzie Express Generator, wykonaj to polecenie w terminalu:

    npx express-generator
    
  4. Sprawdź zawartość okna eksploratora, aby wyświetlić pliki utworzone przez narzędzie Generator.

    Pliki wygenerowane przez narzędzie Express Generator.

Obliczanie odliczania

Masz już działającą aplikację internetową, którą można uruchomić w środowisku Node.js. Zmodyfikujmy jej kod, aby wyświetlać odliczanie:

  1. W oknie eksploratora programu Visual Studio Code rozwiń węzeł routes (trasy), a następnie wybierz plik index.js. Ten plik JavaScript definiuje trasy dla strony głównej aplikacji. Tutaj możemy dodać nasz kod, aby obliczyć odliczanie.

  2. Dodaj następujący kod bezpośrednio po wierszu var router = express.Router();. W pierwszym wierszu wstawionego kodu określ własną datę w miesiącu w przyszłości w formacie MM/DD/YYYY HH:MM (w tym przykładzie używana jest data 12/29/2019 10:00):

    let launchTime = new Date("12/29/2019 10:00").getTime();
    
  3. Znajdź następujący wiersz kodu:

    res.render('index', { title: 'Express' });
    
  4. Zastąp ten pojedynczy wiersz następującymi trzema wierszami kodu:

    let currentTime = new Date().getTime();
    let numberOfMilliseconds = parseInt(launchTime - currentTime);
    res.render('index', { title: 'Countdown to Launch', countDown: numberOfMilliseconds });
    
  5. W menu Plik wybierz pozycję Zapisz, a następnie zamknij plik index.js.

Uwaga

W przypadku tej wersji początkowej satysfakcjonuje nas wyświetlanie odliczania w milisekundach. Później zaktualizujemy kod, aby wyświetlać liczbę pełnych dni, tak jak może się tego spodziewać użytkownik.

Renderowanie odliczania

Teraz zmodyfikuj domyślną stronę główną dla aplikacji internetowej, aby wyświetlać odliczanie:

  1. W oknie eksploratora programu Visual Studio Code rozwiń węzeł views (widoki), a następnie wybierz pozycję index.jade. Ten plik definiuje widok strony głównej aplikacji. Tutaj możemy dodać kod, aby wyświetlać odliczanie.

  2. Znajdź następujący wiersz kodu:

    p Welcome to #{title}
    
  3. Zastąp ten wiersz następującym kodem:

    p Only a few days left until our new game launch!
    
  4. Na końcu pliku dodaj następujący nowy wiersz kodu:

    p Countdown: #{countDown} milliseconds
    
  5. W menu Plik wybierz pozycję Zapisz, a następnie zamknij plik index.jade.

Uruchamianie aplikacji internetowej

Teraz aplikacja jest już skończona, więc uruchom ją na komputerze lokalnym i sprawdź, czy pokazuje odliczanie:

  1. Narzędzie Express Generator tworzy aplikację internetową, która zależy od kilku innych pakietów środowiska Node.js. Przed uruchomieniem aplikacji internetowej należy upewnić się, że są one zainstalowane. Aby zainstalować zależności aplikacji internetowej, w terminalu zintegrowanym z programem Code uruchom następujące polecenie:

    npm install
    

    Uwaga

    W danych wyjściowych tego polecenia mogą pojawić się ostrzeżenia o lukach w zabezpieczeniach. Dla naszych celów rozwiązywanie tych luk nie jest teraz konieczne.

  2. Aby uruchomić aplikację internetową na komputerze lokalnym, uruchom następujące polecenie w terminalu:

    npm start
    

    To polecenie mówi narzędziu npm, aby uruchomiło polecenie we właściwości scripts.start pakietu. Narzędzie Express Generator ustawia tę właściwość tak, aby środowisko Node.js było uruchamiane w folderze/bin/www. Dzięki temu aplikacja internetowa zostanie uruchomiona lokalnie.

  3. Otwórz przeglądarkę internetową i przejdź do adresu http://localhost:3000.

    Przeglądanie ukończonej aplikacji internetowej.

  4. Zamknij przeglądarkę internetową. W terminalu zintegrowanym z programem Code naciśnij klawisze Ctrl+C, aby zatrzymać aplikację internetową. Jeśli zostanie wyświetlony monit Terminate batch job (Y/N)?, wpisz literę Y i naciśnij klawisz Enter.

Jak widzisz, korzystając z platformy Python i narzędzia py w celu zainstalowania platformy Flask można bardzo szybko utworzyć aplikację internetową.

Załóżmy, że poproszono Cię o utworzenie witryny internetowej w celu promowania wydania nowej gry wideo. Postanawiasz użyć platformy Flask do uruchamiania kodu po stronie serwera, a w celu umożliwienia jak najszybszego opracowania zamierzasz użyć domyślnego aparatu tworzenia szablonów Jinja. Chcesz szybko utworzyć aplikację internetową weryfikacji koncepcji, która wyświetla odliczanie do daty wydania.

W tym miejscu zainstalujesz wymagane oprogramowanie, a następnie użyjesz programu Visual Studio Code, aby utworzyć i przetestować witrynę internetową.

Uwaga

Przed rozpoczęciem tego ćwiczenia na komputerze musisz mieć zainstalowany program Visual Studio Code i środowisko Python.

Tworzenie folderu aplikacji

Za pomocą programu Visual Studio Code możesz uruchamiać wszystkie polecenia i edytować cały kod dla swojej aplikacji internetowej. Tutaj użyjesz zintegrowanego terminala, aby skonfigurować folder na potrzeby projektu:

  1. Uruchom program Visual Studio Code.

  2. W menu View (Widok) kliknij pozycję Terminal.

  3. Aby utworzyć nowy folder, wpisz następujące polecenia:

    mkdir countdownFlaskApp
    cd countdownFlaskApp
    
  4. W menu File (Plik) wybierz pozycję Open File... (Otwórz plik...) lub Open... (Otwórz...) w systemie macOS, przejdź do folderu countdownFlaskApp, a następnie wybierz przycisk Open (Otwórz). W programie Visual Studio Code powinien zostać załadowany nowy folder w widoku eksploratora.

Tworzenie i aktywowanie środowiska wirtualnego na potrzeby programowania na platformie Flask

Użycie środowiska wirtualnego pozwala uniknąć instalowania platformy Flask w globalnym środowisku Python i zapewnia dokładną kontrolę nad bibliotekami używanymi w aplikacji.

  1. Jeśli zintegrowany terminal nie jest widoczny, w menu View (Widok) kliknij pozycję Terminal.

  2. Aby utworzyć środowisko wirtualne o nazwie env, w systemie Windows wpisz następujące polecenie w terminalu:

    py -m venv env
    

    Natomiast w systemie macOS wpisz następujące polecenie w terminalu:

    python3 -m venv env
    

    Nie zostanie wyświetlony komunikat o powodzeniu ani inna informacja zwrotna.

  3. Otwórz paletę poleceń za pomocą kombinacji klawiszy Ctrl+Shift+P w systemach Windows i Linux lub kombinacji klawiszy Command+Shift+P w systemie macOS, a następnie wykonaj polecenie Python: Select Interpreter.

    W programie Visual Studio Code wyświetlana jest lista dostępnych środowisk globalnych, na której znajduje się właśnie utworzone środowisko wirtualne. Na liście powinno znajdować się środowisko wirtualne o nazwie env. Użyj klawiszy strzałek, aby zaznaczyć wpis env, a następnie naciśnij klawisz Enter (lub return w systemie macOS).

    Zrzut ekranu przedstawiający projekt w przeglądarce internetowej.

  4. Zamknij zintegrowany terminal.

  5. Uruchom polecenie Terminal: Create New Integrated Terminal (Ctrl+Shift+`) z palety poleceń, które służy do tworzenia terminala i automatycznego aktywowania środowiska wirtualnego przez uruchomienie jego skryptu aktywacji.

    Powinien zostać wyświetlony monit wiersza polecenia z prefiksem (env).

    Zrzut ekranu przedstawiający terminal programu Visual Studio Code z wyświetlonym wierszem polecenia z prefiksem (env).

    Ważne

    Jeśli nie widzisz prefiksu (env) w wierszu polecenia, oznacza to, że nie pracujesz w środowisku wirtualnym.

    Ważne

    Jeśli w systemie Windows domyślnym typem terminala jest program PowerShell, może zostać wyświetlony komunikat o błędzie informujący, że nie można uruchomić pliku activate.ps1, ponieważ uruchomione skrypty są wyłączone w systemie. Ten błąd zawiera link do informacji na temat sposobu zezwalania na skrypty. W przeciwnym razie użyj pozycji Terminal: Select Default Shell, aby zamiast tego ustawić wartość „Command Prompt” („Wiersz polecenia”) lub „Git Bash” („Powłoka Git”).

    Po utworzeniu i aktywowaniu środowiska wirtualnego możliwe jest zainstalowanie platformy Flask w ramach tego środowiska.

Instalowanie platformy Flask w środowisku wirtualnym

  1. Jeśli zintegrowany terminal nie jest widoczny, w menu View (Widok) kliknij pozycję Terminal.

  2. Aby zainstalować platformę Flask w środowisku wirtualnym, upewnij się, że wiersz polecenia jest poprzedzony znakiem (env), a następnie wykonaj następujące polecenie w terminalu:

    pip3 install flask
    

    Po zakończeniu działania narzędzia pip3 powinien zostać wyświetlony komunikat o powodzeniu podobny do następującego:

    Successfully installed Jinja2-2.11.2 MarkupSafe-1.1.1 Werkzeug-1.0.1 click-7.1.1 flask-1.1.2 itsdangerous-1.1.0
    

Dodawanie plików kodu

  1. W widoku eksploratora programu Visual Studio Code użyj ikony New file (Nowy plik), aby utworzyć nowy plik o nazwie app.py. Będzie to miejsce, w którym napiszemy kod w języku Python w celu utworzenia aplikacji Flask, utworzymy funkcję do obsługi żądań przychodzących i wykonamy logikę dla naszej aplikacji.

  2. Użyj ikony New folder (Nowy folder) w celu utworzenia nowego folderu o nazwie templates.

  3. Wybierz folder templates, użyj ikony New file (Nowy plik), aby dodać nowy plik o nazwie countdown.html.

Dodawanie logiki w celu obliczania odliczania

Teraz, gdy istnieje już struktura plików, możemy skupić się na logice aplikacji.

Naszym celem jest:

  • Dodanie instrukcji import służących do pobierania różnych pakietów, które będą potrzebne do obsługi naszej aplikacji internetowej.
  • Utwórz wystąpienie obiektu platformy Flask, który zasadniczo uruchamia aplikację internetową.
  • Zdefiniuj funkcję, która będzie obsługiwać trasę domyślną. Ponieważ jest to prosta aplikacja, wykonamy całą naszą logikę biznesową (tj. operacje obliczeniowe na datach i godzinach) i wyślemy liczbę milisekund do naszego szablonu Jinja.
  1. W oknie eksploratora programu Visual Studio Code wybierz pozycję app.py i dodaj następujący kod:

    from flask import Flask
    from flask import render_template
    from datetime import datetime
    

    Te pierwsze wiersze kodu służą po prostu do zaimportowania biblioteki platformy Flask. Pakiet render_template zapewnia obsługę tworzenia szablonów Jinja. Na koniec będziemy potrzebować pakietu datetime do pracy z datami i godzinami.

  2. Następnie utwórz wystąpienie obiektu platformy Flask, dodając następujący kod do pliku app.py:

    app = Flask(__name__)
    
  3. Na koniec utwórz funkcję, która będzie obsługiwać trasę domyślną.

    @app.route("/")
    def countdown():
    
        launchTime = datetime(2020, 6, 1)
        currentTime = datetime.now()
        diff = launchTime - currentTime
        numberOfMilliseconds = int(diff.total_seconds() * 1000)
    
        return render_template(
            "countdown.html",
            time=numberOfMilliseconds
        )
    

    Przeanalizujmy zawartość tej funkcji.

    Nad definicją funkcji używamy funkcji @app.route(), aby powiązać funkcję przy użyciu atrybutu trasy w celu określenia, który wzorzec adresu URL ma być kierowany do tej funkcji. W tym przypadku obsługujemy tylko trasę dla katalogu głównego witryny.

    Najpierw tworzysz dwie zmienne, launchTime i currentTime, które służą do przechowywania odpowiednio daty w przyszłości i daty bieżącej.

    Następnie tworzysz zmienną diff, która będzie przechowywać różnicę między dwiema datami. Spowoduje to zwrócenie wartości w mikrosekundach, dlatego należy pomnożyć tę wartość przez 1000. Następnie, aby wyeliminować wszystkie ułamki milisekund, konwertujesz liczbę zmiennoprzecinkową na liczbę całkowitą przy użyciu funkcji int(). Ta wartość jest przechowywana w nowej zmiennej o nazwie numberOfMilliseconds.

    Na koniec wywołujesz funkcję render_template(), przekazując nazwę szablonu znajdującego się w folderze szablonów oraz wartość, którą chcesz wstrzyknąć do szablonu. Wkrótce utworzymy szablon i użyjemy kodu zastępczego szablon o nazwie time w szablonie, dlatego ustawimy tutaj zmienną time na wartość przechowywaną w zmiennej numberOfMilliseconds.

    Cały plik app.py powinien być zgodny z następującą listą kodu:

    from flask import Flask
    from flask import render_template
    from datetime import datetime
    
    app = Flask(__name__)
    
    @app.route("/")
    def countdown():
    
        launchTime = datetime(2020, 6, 1)
        currentTime = datetime.now()
        diff = launchTime - currentTime
        numberOfMilliseconds = int(diff.total_seconds() * 1000)
    
        return render_template(
            "countdown.html",
            time=numberOfMilliseconds
        )
    
  4. W menu File (Plik) wybierz pozycję Save (Zapisz), a następnie zamknij plik app.py.

    Uwaga

    W przypadku tej wersji początkowej satysfakcjonuje nas wyświetlanie odliczania w milisekundach. Później zaktualizujemy kod, aby wyświetlać liczbę pełnych dni, tak jak może się tego spodziewać użytkownik.

Renderowanie odliczania

Teraz utworzymy szablon w celu wyświetlenia odliczania:

  1. W oknie eksploratora programu Visual Studio Code rozwiń węzeł templates, a następnie wybierz plik countdown.html. Ten plik definiuje szablon Jinja strony głównej aplikacji. Tutaj możemy dodać kod, aby wyświetlać odliczanie.

  2. Dodaj następujący kod HTML:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>Countdown to Launch</title>
            <style>
                body {
                    margin-top: 100px;
                    margin-left: 60px;
                    font-family: Arial, Helvetica, sans-serif;
                }
            </style>
        </head>
        <body>
            <h1>Countdown to Launch</h1>
            <p>Only a few days left until our new game launch!</p>
            <p>Countdown: x milliseconds</p>
        </body>
    </html>
    
  3. Zastąp następujący wiersz:

    <p>Countdown: x milliseconds</p>
    

    ... następującym wierszem kodu:

    <p>Countdown: {{ time }} milliseconds</p>
    

    W tym miejscu używana jest składnia zastępcza {{ }} oraz kod zastępczy time, do którego tworzyliśmy odwołanie w poprzedniej sekcji. Pamiętasz, że wywołaliśmy funkcję render_template() i ustawiliśmy zmienną time na wartość ustawioną w zmiennej numberOfMilliseconds. W czasie wykonywania platforma Flask dynamicznie zamieni ciąg {{ time }} na wartość liczbową typu long.

  4. W menu File (Plik) wybierz pozycję (Zapisz), a następnie zamknij plik countdown.html.

Uruchamianie aplikacji internetowej

Teraz aplikacja jest już skończona, więc uruchom ją na komputerze lokalnym i sprawdź, czy pokazuje odliczanie:

  1. W terminalu programu Visual Studio Code w systemie Windows uruchom następujące polecenie:

    py -m flask run
    

    W systemach macOS i Linux uruchom następujące polecenie:

    python3 -m -flask run
    

    W terminalu powinna zostać wyświetlona informacja z potwierdzeniem, że na serwerze deweloperskim aplikacja działa prawidłowo:

    * Environment: production
    WARNING: This is a development server. Do not use it in a production deployment.
    Use a production WSGI server instead.
    * Debug mode: off
    * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
    
  2. Otwórz przeglądarkę internetową i przejdź do adresu http://localhost:5000.

Zrzut ekranu przedstawiający ukończony projekt w przeglądarce internetowej.

  1. Zamknij przeglądarkę internetową. W terminalu programu Visual Studio Code w systemach Windows i Linux naciśnij kombinację klawiszy Ctrl+C, aby zamknąć serwer deweloperski. W systemie macOS naciśnij kombinację klawiszy Command+C, aby zamknąć serwer deweloperski.