Hogyan készítsünk webalkalmazást a Python lombikja és a Google App Engine használatával

Ez egy kis oktató projekt a lombik, az API-k és a Google App Engine tanulásához kezdőknek.

Ha nagyon rövid idő alatt szeretne webalkalmazásokat építeni a Python használatával, akkor a Lombik fantasztikus lehetőség.

A lombik egy kicsi és erőteljes webes keretrendszer (más néven „mikrokeret”). Nagyon könnyen megtanulható és egyszerűen kódolható is. Személyes tapasztalataim alapján könnyű volt kezdőként kezdeni.

A projekt előtt a Pythonról való tudásom többnyire csak az adattudományra korlátozódott. Mégis, néhány órán belül sikerült elkészítenem ezt az alkalmazást, és létrehozhattam ezt az oktatóanyagot.

Ebben az oktatóanyagban megmutatom, hogyan lehet egyszerű időjárás-alkalmazást létrehozni dinamikus tartalommal egy API segítségével. Ez a bemutató remek kiindulópont a kezdők számára. Megtanul dinamikus tartalmat építeni az API-kból, és telepíteni a Google Cloud szolgáltatásba.

A végtermék itt tekinthető meg.

Időjárás-alkalmazás létrehozásához API-kulcsot kell kérnünk az Open Weather Map oldalról. Az ingyenes verzió percenként akár 60 hívást is lehetővé tesz, ami ennél az alkalmazásnál több mint elegendő. A Nyitott időjárási térkép ikonok nem túl szépek. Helyette kicseréljük őket az Erik Flowers több mint 200 időjárási ikonjára.

Ez az oktatóanyag az alábbiakra is kiterjed: (1) alapvető CSS-tervezés, (2) alapvető HTML a Jinja-val és (3) egy lombik alkalmazás telepítése a Google Cloud szolgáltatásba.

Az alábbiakban felsoroljuk a lépéseket:

  • 0. lépés: A lombik telepítése (ez az oktatóanyag nem terjed ki a Python és a PIP telepítésére)
  • 1. lépés: Az alkalmazás struktúrájának kiépítése
  • 2. lépés: A fő alkalmazáskód létrehozása az API kéréssel
  • 3. lépés: Az alkalmazás két oldalának létrehozása (Fő és Eredmény) Jinja, HTML és CSS használatával
  • 4. lépés: Telepítés és tesztelés a helyi laptopon
  • 5. lépés: Telepítés a Google Cloud szolgáltatásban.

0. lépés - Telepítse a lombikot és a virtuális környezetben használt könyvtárakat.

Ezt a projektet egy virtuális környezet felhasználásával építjük fel. De miért van szükségünk rá?

Virtuális környezetekkel létrehozhat egy helyi környezetet az egyes projektekhez. Kiválaszthatja a használni kívánt könyvtárakat anélkül, hogy ez befolyásolná a laptop környezetét. Amint több projektet kódol a laptopján, minden projektnek külön könyvtárra lesz szüksége. Az egyes projektek számára eltérő virtuális környezettel nem ütközik a rendszer és a projektek, illetve a projektek között.

  • Futtassa a parancssort (cmd.exe) rendszergazdai jogosultságokkal. Ha nem használ rendszergazdai jogosultságokat, megakadályozhatja a pip használatát.
  • (Opcionális) Telepítse a virtualenv és a virtualenvwrapper-win programot PIP-vel. Ha már rendelkezik ilyen rendszerkönyvtárakkal, kérjük, ugorjon a következő lépésre.
#Optionalpip install virtualenvwrapper-winpip install virtualenv
  • Hozza létre a mappát a „WeatherApp” névvel, és hozzon létre egy virtuális környezetet „venv” névvel (ez eltarthat egy ideig)
#Mandatorymkdir WeatherAppcd WeatherAppvirtualenv venv
  • Aktiválja virtuális környezetét a „hívás” használatával a Windows rendszeren (ugyanaz, mint a Linux forráskódja). Ez a lépés megváltoztatja a környezetet a rendszerről a projekt helyi környezetére.
call venv\Scripts\activate.bat
  • Hozzon létre egy követelmények.txt fájlt, amely tartalmazza a Lombikot és a szükséges más könyvtárakat az WeatherApp mappában, majd mentse a fájlt. A követelményfájl nagyszerű eszköz a projektben használt könyvtárak nyomon követésére is.
Flask==0.12.3click==6.7gunicorn==19.7.1itsdangerous==0.24Jinja2==2.9.6MarkupSafe==1.0pytz==2017.2requests==2.13.0Werkzeug==0.12.1
  • Telepítse a követelményeket és azok függőségeit. Most már készen áll a WeatherApp elkészítésére. Ez a helyi környezet létrehozásának utolsó lépése.
pip install -r requirements.txt

1. lépés - Az alkalmazás struktúrájának kiépítése

Ön gondoskodott a helyi környezetről. Most az alkalmazás fejlesztésére koncentrálhat. Ez a lépés annak biztosítására szolgál, hogy a megfelelő mappa és fájlszerkezet a helyén legyen. A következő lépés gondoskodik a háttérkódról.

  • Hozzon létre két Python fájlt (main.py, weather.py) és két mappát (statikus egy almappával img, sablonok).

2. lépés - A fő alkalmazáskód létrehozása az API kéréssel (háttérkép)

A felépített struktúrával megkezdheti az alkalmazás háttérprogramjának kódolását. Lombik „Hello world” példája csak egy Python fájlt használ. Ez az oktatóprogram két fájlt használ, hogy kényelmesebbé tegye a funkciók importálását a fő alkalmazásba.

A main.py az a szerver, amely a felhasználót a kezdőlapra és az eredményoldalra irányítja. Az weather.py fájl API-val létrehoz egy funkciót, amely a kiválasztott város alapján beolvassa az időjárási adatokat. A függvény feltölti az eredményül kapott oldalt.

  • Szerkessze a main.py fájlt a következő kóddal, és mentse
#!/usr/bin/env pythonfrom pprint import pprint as ppfrom flask import Flask, flash, redirect, render_template, request, url_forfrom weather import query_api
app = Flask(__name__)
@app.route('/')def index(): return render_template( 'weather.html', data=[{'name':'Toronto'}, {'name':'Montreal'}, {'name':'Calgary'}, {'name':'Ottawa'}, {'name':'Edmonton'}, {'name':'Mississauga'}, {'name':'Winnipeg'}, {'name':'Vancouver'}, {'name':'Brampton'}, {'name':'Quebec'}])
@app.route("/result" , methods=['GET', 'POST'])def result(): data = [] error = None select = request.form.get('comp_select') resp = query_api(select) pp(resp) if resp: data.append(resp) if len(data) != 2: error = 'Bad Response from Weather API' return render_template( 'result.html', data=data, error=error)
if __name__=='__main__': app.run(debug=True)
  • Kérjen ingyenes API kulcsot a Nyitott időjárás térképen
  • Szerkessze az weather.py fájlt a következő kóddal (frissítse az API_KEY-t), és mentse
from datetime import datetimeimport osimport pytzimport requestsimport mathAPI_KEY = 'XXXXXXXXXXXXXXXXXXXXXXXXXXX'API_URL = ('//api.openweathermap.org/data/2.5/weather?q={}&mode=json&units=metric&appid={}')
def query_api(city): try: print(API_URL.format(city, API_KEY)) data = requests.get(API_URL.format(city, API_KEY)).json() except Exception as exc: print(exc) data = None return data

3. lépés - Oldalak létrehozása Jinja, HTML és CSS (Frontend) használatával

Ez a lépés annak megalkotásáról szól, amelyet a felhasználó látni fog.

A HTML oldalak időjárása és eredménye az, amelyre a backend main.py átirányítja és megadja a vizuális struktúrát. A CSS fájl hozza az utolsó simítást. Ebben az oktatóanyagban nincs Javascript (a kezelőfelület tiszta HTML és CSS).

Először használtam a Jinja2 sablon könyvtárat a HTML fájl feltöltésére. Meglepett, hogy milyen könnyű dinamikus képeket hozni vagy funkciókat használni (pl. Kerek időjárás). Mindenképpen fantasztikus sablonmotor.

  • Hozza létre az első HTML-fájlt a sablonok mappában (weather.html)

Weather in a City

 {% for o in data %} {{ o.name }} {% endfor %} Go
  • Hozza létre a második HTML-fájlt a sablonok mappában (result.html)
{% for d in data %} {% set my_string = "static/img/" + d['weather'][0]['icon']+ ".svg" %} 

Weather

{{ d['name'] }}, {{ d['sys']['country'] }}

{int} °C

{% endfor %}
  • Adjon hozzá egy CSS-fájlt a statikus mappába (style.css)
body { color: #161616; font-family: 'Roboto', sans-serif; text-align: center; background-color: currentColor;}.center-on-page { position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%);}h1 { text-align: center; color:#FFFFFF;}img { vertical-align: middle; }/* Reset Select */select { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none; outline: 0; box-shadow: none; border: 0 !important; background: #2c3e50; background-image: none;}/* Custom Select */.select { position: relative; display: block; width: 20em; height: 3em; line-height: 3; background: #2c3e50; overflow: hidden; border-radius: .25em;}select { width: 100%; height: 100%; margin: 0; padding: 0 0 0 .5em; color: #fff; cursor: pointer;}select::-ms-expand { display: none;}/* Arrow */.select::after { content: '\25BC'; position: absolute; top: 0; right: 0; bottom: 0; padding: 0 1em; background: #34495e; pointer-events: none;}/* Transition */.select:hover::after { color: #f39c12;}.select::after { -webkit-transition: .25s all ease; -o-transition: .25s all ease; transition: .25s all ease;}
button{ -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none; outline: 0; box-shadow: none; border: 0 !important; background: #2c3e50; background-image: none; width: 100%; height: 40px; margin: 0; margin-top: 20px; color: #fff; cursor: pointer; border-radius: .25em;}.button:hover{ color: #f39c12;}
  • Töltse le az img almappában lévő képeket statikus formában

Link a Github képeivel:

4. lépés - Helyi telepítés és tesztelés

Ebben a szakaszban beállította a környezetet, a struktúrát, a háttérrendszert és a kezelőfelületet. Csak annyi marad, hogy elindítja az alkalmazást, és élvezheti a helyi hoston.

  • Csak indítsa el a main.py-t a Python segítségével
python main.py
  • Lépjen a cmd-n javasolt localhost linkre a böngészőjével (Chrome, Mozilla stb.). Az új időjárási alkalmazást élőben kell látnia a helyi laptopon :)

5. lépés - Telepítés a Google Cloud szolgáltatásra

Ez az utolsó lépés az alkalmazás megosztása a világgal. Fontos megjegyezni, hogy rengeteg szolgáltató rendelkezik a lombik segítségével épített webalkalmazásokhoz. A Google Cloud csak egy a sok közül. Ez a cikk nem tér ki a többire, például az AWS-re, az Azure-ra, a Heroku-ra ...

Ha érdekli a közösség, akkor egy másik cikkben megadhatom a többi felhőszolgáltató lépéseit és néhány összehasonlítást (árképzés, korlátozások stb.).

To deploy your app on Google Cloud you will need to 1) Install the SDK, 2) Create a new project, 3) Create 3 local files, 4) Deploy and test online.

  • Install the SDK following Google’s instructions
  • Connect to your Google Cloud Account (use a $300 coupon if you haven’t already)
  • Create a new project and save the project id (wait a bit until the new project is provisioned)
  • Create an app.yaml file in your main folder with the following code:
runtime: python27api_version: 1threadsafe: true
handlers:- url: /static static_dir: static- url: /.* script: main.app libraries: - name: ssl version: latest
  • Create an appengine_config.py file in your main folder with the following code:
from google.appengine.ext import vendor
# Add any libraries installed in the "lib" folder.vendor.add('lib')
  • Replicate the library’s dependencies in lib folder
pip install -t lib -r requirements.txt
  • Deploy on Google Cloud using your save project ID (it can take 10 minutes). Use the following steps:
gcloud auth application-default logingcloud config set project gcloud initgcloud app deploy app.yaml
  • Enjoy your live web app for free. Mine is here.

The full code is available on Github. Thank you for reading my post. It was my first web app using Flask and first Tutorial on freeCodeCamp. If you found this article helpful, give me some claps ?. It was a lot easier than I thought it would, coming from a Data Science background with Python and R.

Feel free to contact me if you want to make a simple or more complex Flask App.