6.1. Quiz

Realizacja aplikacji internetowej Quiz w oparciu o framework Flask 3.1.x Na stronie wyświetlamy pytania, użytkownik zaznacza poprawne odpowiedzi, przesyła je na serwer i otrzymuje informację o wynikach.

6.1.1. Środowisko pracy

Do tworzenia aplikacji z użyciem Flaska możesz użyć dowolnych narzędzi, np. terminala i ulubionego edytora kodu. Sugerujemy jednak wykorzystanie środowiska PyCharm, ponieważ w dużym stopniu ułatwia pracę nad projektami w języku Python.

Przed rozpoczęciem pracy przygotuj w katalogu projekty_flask` wirtualne środowisko Pythona i w aktywnym środowisku zainstaluj pakiet Flask:

(.venv) ~/projekty_flask$ pip install flask

6.1.2. Projekt i aplikacja

W katalogu projekty_flask` tworzymy nowy katalog aplikacji o nazwie quiz:

Terminal nr

(.venv) ~/projekty_flask$ mkdir quiz
(.venv) ~/projekty_flask$ cd quiz

Utworzymy szkielet aplikacji Flask, co pozwoli na uruchomienie testowego serwera www. W katalogu aplikacji quiz dodajemy plik o nazwie app.py i umieszczamy w nim poniższy kod.

Plik app.py Kod nr

from flask import Flask

app = Flask(__name__)

@app.route('/')
def index():
    return 'Cześć, tu Python i Flask!'

with app.app_context():
    if __name__ == "__main__":
        app.run(debug=True)

Serwer uruchamiamy jednym z poleceń w terminalu w katalogu projektu: flask run --debug lub python3 app.py (py app.py w systemie Windows):

Terminal nr

(.venv) ~/projekty_flask/quiz$ flask run --debug

Domyślnie serwer uruchamia się pod adresem http://127.0.0.1:5000. Po otwarciu przeglądarki i wpisaniu tego adresu (można też kliknąć adres wyświetlony w terminalu z wciśniętym klawiszem CTLR) zobaczymy napis zwrócony przez aplikację: „Cześć, tu Python i Flask!”.

Wskazówka

Działanie serwera zatrzymujemy w terminalu skrótem CTRL+C.

6.1.3. Strona główna

Nasza aplikacja zwraca użytkownikowi stronę główną za pomocą widoku index(). Jest to funkcja Pythona powiązana z określonym w dekoratorze route('/') adresem / oznaczającym domyślny zasób serwera.

Widoki obsługują podstawowe żądania protokołu HTTP wysyłane przez przeglądarkę.

Informacja

Żądania typu GET występują wtedy, kiedy chcemy pobrać jakieś dane z serwera, np. stronę. Ewentualne dane przekazywane do serwera (np. parametry wyszukiwania) widoczne są w adresie URL, np.:

www.google.com/search?client=firefox-b-lm&channel=entpr&q=żądania+GET+i+POST

Żądanie typu POST służą natomiast do przesyłania na serwer danych niewidocznych w adresie URL, które mają zazwyczaj zmieniać stan aplikacji, np. dodać lub zalogować użytkownika. Do przesyłania danych metodą POST służą formularze.

W odpowiedzi na żądanie aplikacja może odsyłać różne dane, np. predefiniowany tekst, ale najczęściej będzie to strona HTML zawierająca różne w zależności od żądania informacje, np. formularz z pytaniami albo wyniki quizu.

Flask ułatwia tworzenie takich stron za pomocą tzw. szablonów (zob. szablon). Szablony umieścimy w katalogu quiz/templates, kóry należy utworzyć:

Terminal nr

(.venv) ~/projekty_flask/quiz$ mkdir templates

Następnie w utworzonym katalogu dodajemy plik index.html i umieszczamy w nim kod:

Plik index.html. Kod nr

<!-- projekty_flask/quiz/templates/index.html -->
<html>
  <head>
    <title>{{ config.SITE_NAME }}</title>
  </head>
<body>
  <h1>{{ config.SITE_NAME }}</h1>
</body>
</html>

W miejsce oznaczone tagiem {{ config.SITE_NAME }} wstawiona zostanie nazwa serwisu, którą zdefiniujemy w ustawieniach aplikacji.

Uzupełniamy i zmieniamy kod w pliku app.py:

Plik app.py Kod nr

from flask import Flask, render_template

app = Flask(__name__)

# konfiguracja aplikacji
app.config.update(dict(
    SECRET_KEY='bradzosekretnawartosc',
    SITE_NAME='Quiz Python'
))

@app.route('/')
def index():
    # return 'Cześć, tu Python i Flask!'
    return render_template('index.html')

with app.app_context():
    if __name__ == "__main__":
        app.run(debug=True)

Konfiguracja aplikacji przechowywana jest w słowniku config, do którego dodajemy sekretny klucz, wykorzystywany do obsługi sesji (zob sesja) oraz nazwę serwisu.

Do renderowania szablonu (zob: renderowanie szablonu) używamy zaimportowanej na początku pliku funkcji render_template('index.html'), która jako argument przyjmuje nazwę pliku szablonu.

Po otworzeniu strony głównej (http://127.0.0.1:5000) zobaczymy stronę:

6.1.4. Pytania i odpowiedzi

Dane aplikacji, a więc pytania i odpowiedzi, umieścimy w pliku app.py – to najprostsze rozwiązanie, żeby nie wprowadzać na razie obsługi bazy danych. Nowy kod wstawiamy po instrukcji app = Flask(__name__):

Plik app.py Kod nr

from flask import Flask, render_template

app = Flask(__name__)

# konfiguracja aplikacji
app.config.update(dict(
    SECRET_KEY='bradzosekretnawartosc',
    SITE_NAME='Quiz Python'
))

# lista pytań
dane = [{
    'pytanie': 'Stolica Hiszpani, to:',  # pytanie
    'odpowiedzi': ['Madryt', 'Warszawa', 'Barcelona'],  # możliwe odpowiedzi
    'odpok': 'Madryt'},  # poprawna odpowiedź
    {
    'pytanie': 'Objętość sześcianu o boku 6 cm, wynosi:',
    'odpowiedzi': ['36', '216', '18'],
    'odpok': '216'},
    {
    'pytanie': 'Symbol pierwiastka Helu, to:',
    'odpowiedzi': ['Fe', 'H', 'He'],
    'odpok': 'He'},
]

@app.route('/pytania')
def pytania():
    return render_template('pytania.html', pytania=dane)

@app.route('/')
def index():
    # return 'Cześć, tu Python i Flask!'
    return render_template('index.html')

with app.app_context():
    if __name__ == "__main__":
        app.run(debug=True)

Źródłem danych dla naszej aplikacji będzie lista dane, która zawiera trzy słowniki. W każdym słowniku umieszczamy treść pytania, możliwe odpowiedzi oraz odpowiedź poprawną.

Dalej definiujemy nowy adres URL /pytania, który będzie obsługiwany przez funkcję pytania(). W funkcji zwracamy szablon pytania.html, do którego przekazujemy listę dane w zmiennej pytania.

W katalogu templates tworzymy nowy plik pytania.html i wstawiamy do niego poniższy kod:

Plik pytania.html Kod nr

<!-- projekty_flask/quiz/templates/pytania.html -->
<html>
  <head>
    <title>Quiz Python</title>
  </head>
  <body>
    <h1>Quiz Python</h1>

    <!-- wyświetlamy komunikaty z funkcji flash -->
    <p>
      {% for komunikat in get_flashed_messages() %}
        {{ komunikat }}
      {% endfor %}
    </p>

    <!-- formularz z quizem -->
    <form method="POST" action="{{ url_for('pytania') }}">
        <!-- przeglądamy listę pytań -->
        {% for p in pytania %}
          <p>
            <!-- wyświetlamy treść pytania -->
            {{ p.pytanie }}
            <br>
            <!-- zapamiętujemy numer pytania licząc od zera -->
            {% set pnr = loop.index0 %}
            <!-- przeglądamy odpowiedzi dla danego pytania -->
            {% for o in p.odpowiedzi %}
              <label>
                <!-- odpowiedzi wyświetlamy jako pole typu radio -->
                <input type="radio" value="{{ o }}" name="{{ pnr }}">
                {{ o }}
              </label>
              <br>
            {% endfor %}
          </p>
        {% endfor %}

        <!-- przycisk wysyłający wypełniony formularz -->
        <button type="submit">Sprawdź odpowiedzi</button>
    </form>

  <p>
    <a href="{{ url_for('index') }}">Strona główna</a>
  </p>

  </body>
</html>

W szablonie używamy specjalnych tagów:

{% instrukcja %} – tak wstawiamy instrukcje sterujące typu for, set czy if;
{{ zmienna }} – tak wstawiamy wartości danych przekazanych do szablonu.

Pętla {% for komunikat in get_flashed_messages() %} odpowiada za wstawienie komunikatów, które przygotujemy dla użytkownika w widoku pytania().

Znacznik <form> tworzy formularz, który wysyłany będzie na adres URL zdefiniowany w atrybucie action. Adres ten generujemy przy użyciu funkcji url_for('pytania'). Jako argument przyjmuje ona nazwę widoku.

W formularzu wstawiamy pytania i możliwe odpowiedzi: z przekazanej do szablonu zmiennej pytania odczytujemy w pętli {% for p in pytania %} kolejne słowniki. Dalej w znacznikach akapitu <p> wyświetlamy treść pytania {{ p.pytanie }}, a w kolejnej pętli {% for o in p.odpowiedz %} – odpowiedzi jako grupy opcji typu radio <input type="radio">.

Każda grupa odpowiedzi nazywana jest dla odróżnienia numerem pytania liczonym od 0. Odpowiednią zmienną ustawiamy w instrukcji {% set pnr = loop.index0 %}, a używamy w postaci name="{{ pnr }}". Dzięki temu przyporządkujemy przesłane odpowiedzi do kolejnych pytań podczas ich sprawdzania.

Na końcu w znaczniku <a> generujemy adres strony głównej za pomocą wspomnianej funkcji url_for('index'), której argumentem jest nazwa widoku, czyli funkcji w tym przypadku obsługującej adres domyślny.

Po uruchomieniu serwera i wpisaniu w przeglądarce adresu http://127.0.0.1:5000/pytania powinniśmy zobaczyć:

6.1.5. Oceniamy odpowiedzi

Kod sprawdzający liczbę poprawnych odpowiedzi umieścimy w widoku pytania(). Na początku pliku app.py dodajemy potrzebne importy:

Plik app.py Kod nr

from flask import request, redirect, url_for, flash

– i uzupełniamy kod funkcji pytania():

Plik app.py Kod nr

@app.route('/pytania', methods=['GET', 'POST'])
def pytania():
    if request.method == 'POST':
        punkty = 0
        odpowiedzi = request.form

        for pnr, odp in odpowiedzi.items():
            if odp == dane[int(pnr)]['odpok']:
                punkty += 1

        flash('Liczba poprawnych odpowiedzi, to: {0}'.format(punkty))
        return redirect(url_for('pytania'))
    return render_template('pytania.html', pytania=dane)

methods=['GET', 'POST'] – dodajemy typy żądań, które chcemy obsługiwać, tj. GET (odesłanie zażądanej strony), jak i POST (przesłanie danych z formularza, tj. odpowiedzi, i odesłanie wyników);
request – obiekt zawierający informacje związane z żądaniem, m. in. typ żądania i ewentualne dane z formularza;
if request.method == 'POST': – instrukcja warunkowa, która wykrywa żądania POST i wykonuje blok kodu zliczający poprawne odpowiedzi;
odpowiedzi = request.form – przesyłane dane z formularza zapisujemy w zmiennej odpowiedzi;
for pnr, odp in odpowiedzi.items() – w pętli odczytujemy kolejne pary danych, czyli numer pytania i udzieloną odpowiedź;
if odp == dane[int(pnr)]['odpok']: – sprawdzamy, czy nadesłana odpowiedź jest zgodna z poprawną, którą odczytujemy z listy pytań.

Zwróćmy uwagę, że wartości zmiennej pnr, czyli numery pytań liczone od zera, ustaliliśmy wcześniej w szablonie.

Jeżeli nadesłana odpowiedź jest poprawna (if odp == dane[int(pnr)]['odpok']:), tzn. zgadza się z poprawną odpowiedzią zawartą w liście słowników – doliczamy punkt (punkty += 1).

Informacje o wyniku przekazujemy użytkownikowi za pomocą funkcji flash(). W szablonie wyświetlamy je we wspominanej pętli {% for komunikat in get_flashed_messages() %}.