Gyakorlat – Alkalmazás létrehozása
Az alkalmazást lépcsőzetesen fogja létrehozni, közben az egyes fogalmakra fókuszálva. Először az alkalmazás kezdőlapját hozza létre, amely a felhasználó által használandó űrlapot jeleníti meg.
Egy Flask-alkalmazás belépési pontja általában egy app.py nevű fájl. Ezt a konvenciót fogja követni az alkalmazás alapjainak létrehozásakor. Az alábbi lépéseket fogja végrehajtani:
- Az alapalkalmazás létrehozása
- Az alkalmazás útvonalának megadása
- A webhely HTML-sablonjának létrehozása
- Az alkalmazás tesztelése
Az alapalkalmazás létrehozása
A Visual Studio Code korábban használt példányához visszatérve hozzon létre egy új, app.py nevű fájlt úgy, hogy az Explorer lap Új fájl elemét választja.
Fontos
Ha ebben a gyakorlatban használja először a Visual Studio Code-ot Python-alkalmazás létrehozására, üzeneteket fog kapni a Python-bővítmény és a pylint linter telepítésével kapcsolatban. Válassza a Telepítés lehetőséget ezeknek a kiegészítőknek a telepítéséhez.
Hozza a létre a Flask-alkalmazást a kód beillesztésével
from flask import Flask, redirect, url_for, request, render_template, session app = Flask(__name__)
Az importálási utasítás Flask-hivatkozásokat tartalmaz, amelyek minden Flask-alkalmazás alapjai. Hamarosan sor kerül a render_template használatára, amikor vissza akarja adni a HTML-t.
Az app lesz az alapalkalmazás. Ezt használja majd, amikor a következő lépésben regisztrálja az útvonalakat.
Az útvonal megadása
Az alkalmazás egyetlen útvonalat használ – /. Ezt nevezik alapértelmezett útvonalnak vagy index-útvonalnak is, mert ez lesz használva, ha a felhasználó semmit sem ad meg a tartomány vagy a kiszolgáló neve után.
Szúrja be az alábbi kódot az app.py fájl végére.
@app.route('/', methods=['GET'])
def index():
return render_template('index.html')
A @app.route rész a létrehozni kívánt útvonalat adja meg. Ez az útvonal a /, tehát az alapértelmezett útvonal lesz. Meg van adva, hogy ez lesz használatos a GET műveletekhez. Ha GET kérés érkezik a / útvonalra, a Flask automatikusan a deklaráció alatti függvényt hívja meg, amely ebben az esetben az index. Az index törzsében van megadva, hogy egy index.html nevű HTML-sablon lesz visszaadva a felhasználónak.
Az űrlap HTML-sablonjának létrehozása
A Flask sablonkezelő motorja, a Jinja erősen HTML-alapú. Ennek köszönhetően az összes HTML-lel kapcsolatos ismeretét és eszközét hasznosíthatja. Itt Bootstrap használatával alakítja ki az oldalt, hogy mutatósabb legyen. A Bootstrap használatával különböző CSS-osztályokat használhat a HTML-ben. Ha nem jártas a Bootstrap használatában, figyelmen kívül hagyhatja az osztályokat, elég a HTML-lel foglalkoznia (amely az igazán fontos rész).
Fontos
A HTML (Hypertext Markup Language) egy szabványos korrektúranyelv, amellyel weblapokat hozhat létre. A HTML címkék és attribútumok sorozatából áll, amelyek címsorokat, bekezdéseket, listákat, képeket, hivatkozásokat és más, weblapot alkotó elemeket hoznak létre. Amikor egy felhasználó weblapot kér, a böngésző felolvassa a HTML-kódot, és vizuális weblapként jeleníti meg, amellyel a felhasználó kommunikálhat. A HTML-ről további információt a HTML alapjai című témakörben talál.
A Flask-sablonokat egy beszédes nevű templates könyvtárban kell létrehozni. Hozza létre a könyvtárat és a szükséges fájlt, majd illessze be a HTML-t.
Hozzon létre egy új, templates nevű könyvtárat a Visual Studio Code Explorer eszközének Új könyvtár menüpontját választva
Lépjen a létrehozott templates könyvtárra, és válassza az Új fájl lehetőséget, amellyel új fájlt ad a könyvtárhoz
A fájl neve legyen index.html
Illessze be az alábbi HTML-t
<!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>
A fenti HTML két fő összetevője a felhasználó által lefordíttatni kívánt szöveghez kínált textarea, és a legördülő lista (select), amellyel a felhasználó a célnyelvet adhatja meg. Ha ide további nyelveket is fel szeretne venni, tekintse meg a lehetőségeket a támogatott nyelvek listájában. Állítsa be a nyelv kódjára a value attribútumot. Ez a lengyel nyelv esetében például pl.
Az alkalmazás tesztelése
Ideje tesztelni a létrehozott kiindulási webhelyet! A Visual Studio Code-on belüli integrált terminált fogja használni, így valamivel könnyebb dolga lesz.
Nyissa meg az integrált terminált a Ctrl-' vagy a Cmd-' billentyűkombinációval Mac gépen
Futtassa az alábbi parancsot a FLask-futtatókörnyezet beállításához, ami azt jelenti, hogy a kiszolgáló minden módosításkor újra betölt
# Windows set FLASK_ENV=development # Linux/macOS export FLASK_ENV=developmentFuttassa az alkalmazást!
flask runNyissa meg az alkalmazást a böngészőben a http://localhost:5000 cím megnyitásával
Azt kell látnia, hogy megnyílik az űrlap. Gratulálunk!