de Tristan Ganry
Acesta este un mic proiect tutorial pentru învățarea Flask, API-urilor și Google App Engine pentru începători.
Dacă doriți să creați aplicații web într-un timp foarte scurt folosind Python, atunci Balon este o opțiune fantastică.
Flask este un cadru web mic și puternic (cunoscut și ca „microframe”). De asemenea, este foarte ușor de învățat și simplu de codat. Pe baza experienței mele personale, a fost ușor să încep ca începător.
Înainte de acest proiect, cunoștințele mele despre Python erau în mare parte limitate la știința datelor. Cu toate acestea, am reușit să construiesc această aplicație și să creez acest tutorial în doar câteva ore.
În acest tutorial, vă voi arăta cum să creați o aplicație meteo simplă cu un conținut dinamic folosind un API. Acest tutorial este un punct de plecare excelent pentru începători. Veți învăța să creați conținut dinamic din API-uri și să îl implementați pe Google Cloud.
Produsul final poate fi vizualizat aici.
Pentru a crea o aplicație meteo, va trebui să solicităm o cheie API de la Deschideți harta meteo. Versiunea gratuită permite până la 60 de apeluri pe minut, ceea ce este mai mult decât suficient pentru această aplicație. Pictogramele condițiilor pentru Harta Meteo Deschisă nu sunt foarte frumoase. Le vom înlocui cu unele dintre cele peste 200 de icoane meteo de la Erik Flowers in schimb.
Acest tutorial va acoperi, de asemenea: (1) proiectarea CSS de bază, (2) HTML de bază cu Jinja și (3) implementarea unei aplicații Flask pe Google Cloud.
Pașii pe care îi vom face sunt enumerați mai jos:
- Pasul 0: Instalarea Flask (acest tutorial nu acoperă instalarea Python și PIP)
- Pasul 1: Construirea structurii aplicației
- Pasul 2: Crearea codului principal al aplicației cu solicitarea API
- Pasul 3: Crearea celor 2 pagini pentru aplicație (principal și rezultat) cu Jinja, HTML și CSS
- Pasul 4: Implementarea și testarea pe laptopul local
- Pasul 5: Implementarea pe Google Cloud.
Pasul 0 – Instalarea Flask și a bibliotecilor pe care le vom folosi într-un mediu virtual.
Vom construi acest proiect folosind un mediu virtual. Dar de ce avem nevoie de unul?
Cu mediile virtuale, creați un mediu local specific fiecărui proiect. Puteți alege bibliotecile pe care doriți să le utilizați fără a afecta mediul laptopului. Pe măsură ce codați mai multe proiecte pe laptop, fiecare proiect va avea nevoie de biblioteci diferite. Cu un mediu virtual diferit pentru fiecare proiect, nu veți avea conflicte între sistemul dvs. și proiectele dvs. sau între proiecte.
- Rulați promptul de comandă (cmd.exe) cu privilegii de administrator. Dacă nu utilizați privilegii de administrator vă va împiedica să utilizați pip.
- (Opțional) Instalați virtualenv și virtualenvwrapper-win cu PIP. Dacă aveți deja aceste biblioteci de sistem, treceți la pasul următor.
#Optionalpip install virtualenvwrapper-winpip install virtualenv
- Creați-vă dosarul cu numele „WeatherApp” și creați un mediu virtual cu numele „venv” (poate dura puțin timp)
#Mandatorymkdir WeatherAppcd WeatherAppvirtualenv venv
- Activați-vă mediul virtual cu „apel” pe Windows (la fel ca „sursă” pentru Linux). Acest pas vă schimbă mediul din sistem în mediul local al proiectului.
call venvScriptsactivate.bat
- Creați un fișier requirements.txt care include Flask și celelalte biblioteci de care vom avea nevoie în folderul dvs. WeatherApp, apoi salvați fișierul. Fișierul de cerințe este un instrument excelent pentru a ține evidența bibliotecilor pe care le utilizați în proiect.
Flask==0.12.3click==6.7gunicorn==19.7.1itsdangerous==0.24Jinja2==2.9.6MarkupSafe==1.0pytz==2017.2requests==2.13.0Werkzeug==0.12.1
- Instalați cerințele și dependențele acestora. Acum sunteți gata să vă construiți WeatherApp. Acesta este ultimul pas pentru a vă crea mediul local.
pip install -r requirements.txt
Pasul 1 – Construirea structurii aplicației
V-ați îngrijit de mediul local. Acum vă puteți concentra asupra dezvoltării aplicației dvs. Acest pas este să vă asigurați că structura corectă a fișierelor și folderelor este la locul lor. Următorul pas se va ocupa de codul backend.
- Creați două fișiere Python (main.py, weather.py) și două foldere (static cu un subfolder img, șabloane).
Pasul 2 – Crearea codului principal al aplicației cu cererea API (Backend)
Cu structura configurată, puteți începe să codificați backend-ul aplicației dvs. Exemplul „Hello world” al lui Flask folosește doar un fișier Python. Acest tutorial utilizează două fișiere pentru a vă simți confortabil cu importul funcțiilor în aplicația dvs. principală.
Main.py este serverul care direcționează utilizatorul către pagina de pornire și către pagina de rezultate. Fișierul weather.py creează o funcție cu API care preia datele meteo pe baza orașului selectat. Funcția completează pagina rezultată.
- Editați main.py cu următorul cod și salvați
#!/usr/bin/env pythonfrom pprint import pprint as ppfrom flask import Flask, flash, redirect, render_template, request, url_forfrom weather import query_apiapp = 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)- Solicitați o cheie API gratuită pe Open Weather Map
- Editați weather.py cu următorul cod (actualizarea API_KEY) și salvați
from datetime import datetimeimport osimport pytzimport requestsimport mathAPI_KEY = 'XXXXXXXXXXXXXXXXXXXXXXXXXXX'API_URL = ('http://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 dataPasul 3 – Crearea paginilor cu Jinja, HTML și CSS (Frontend)
Acest pas este despre crearea a ceea ce va vedea utilizatorul.
Vremea și rezultatul paginilor HTML sunt cele către care backend main.py va direcționa și va da structura vizuală. Fișierul CSS va aduce atingerea finală. Nu există Javascript în acest tutorial (partea frontală este HTML pur și CSS).
A fost prima dată când foloseam Jinja2 bibliotecă de șabloane pentru a completa fișierul HTML. M-a surprins cât de ușor a fost să aduc imagini dinamice sau să folosesc funcții (de exemplu, rotunjirea vremii). Cu siguranță un motor de șabloane fantastic.
- Creați primul fișier HTML în folderul șabloane (weather.html)
<!doctype html><link rel="stylesheet" type="text/css" href="https://www.freecodecamp.org/news/how-to-build-a-web-app-using-pythons-flask-and-google-app-engine-52b1bb82b221/{{ url_for("static', filename="style.css") }}"><div class="center-on-page"> <h1>Weather in a City</h1><form class="form-inline" method="POST" action="https://www.freecodecamp.org/news/how-to-build-a-web-app-using-pythons-flask-and-google-app-engine-52b1bb82b221/{{ url_for("result') }}"> <div class="select"> <select name="comp_select" class="selectpicker form-control"> {% for o in data %} <option value="{{ o.name }}">{{ o.name }}</option> {% endfor %} </select> </div> <button type="submit" class="btn">Go</button></form>- Creați al doilea fișier HTML în folderul șabloane (result.html)
<!doctype html><link rel="stylesheet" type="text/css" href="https://www.freecodecamp.org/news/how-to-build-a-web-app-using-pythons-flask-and-google-app-engine-52b1bb82b221/{{ url_for("static', filename="style.css") }}"><div class="center-on-page">{% for d in data %} {% set my_string = "static/img/" + d['weather'][0]['icon']+ ".svg" %} <h1> <img src="https://www.freecodecamp.org/news/how-to-build-a-web-app-using-pythons-flask-and-google-app-engine-52b1bb82b221/{{ my_string }}" class="svg" fill="white" height="100" vertical-align="middle" width="100"> </h1> <h1>Weather</h1> <h1>{{ d['name'] }}, {{ d['sys']['country'] }}</h1> <h1>{{ d['main']['temp']|round|int}} °C</h1>{% endfor %}
- Adăugați un fișier CSS în folderul static (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;}- Descărcați imaginile din subfolderul img în format static
Legătură cu imaginile de pe Github:
Pasul 4 – Implementarea și testarea locală
În această etapă, ați configurat mediul, structura, backend-ul și frontend-ul. Singurul lucru rămas este să lansați aplicația și să vă bucurați de ea pe localhost.
- Doar lansați main.py cu Python
python main.py- Accesați linkul localhost propus pe cmd cu browserul dvs. web (Chrome, Mozilla etc.). Ar trebui să vedeți noua aplicație meteo live pe laptopul local 🙂
Pasul 5 – Implementarea pe Google Cloud
Acest ultim pas este pentru partajarea aplicației dvs. cu lumea. Este important să rețineți că există o mulțime de furnizori de aplicații web construite folosind Flask. Google Cloud este doar unul dintre multele. Acest articol nu acoperă unele dintre celelalte, cum ar fi AWS, Azure, Heroku …
Dacă comunitatea este interesată, pot oferi pașii celorlalți furnizori de cloud într-un alt articol și unele comparații (prețuri, limitări etc.).
Pentru a implementa aplicația pe Google Cloud va trebui să 1) Instalați kitul SDK, 2) Creați un proiect nou, 3) Creați 3 fișiere locale, 4) Implementați și testați online.
- Instalați SDK-ul următor Instrucțiunile Google
- Conectați-vă la contul dvs. Google Cloud (utilizați un cupon de 300 USD daca nu ai facut-o deja)
- Creați un proiect nou și salvați ID-ul proiectului (așteptați puțin până când noul proiect este furnizat)
- Creați un fișier app.yaml în folderul principal cu următorul cod:
runtime: python27api_version: 1threadsafe: truehandlers:- url: /static static_dir: static- url: /.* script: main.app libraries: - name: ssl version: latest- Creați un fișier appengine_config.py în folderul principal cu următorul cod:
from google.appengine.ext import vendor# Add any libraries installed in the "lib" folder.vendor.add('lib')- Replică dependențele bibliotecii în folderul lib
pip install -t lib -r requirements.txt- Implementați pe Google Cloud folosind ID-ul de proiect de salvare (poate dura 10 minute). Urmați pașii următori:
gcloud auth application-default logingcloud config set project <PROJECT_ID>gcloud initgcloud app deploy app.yaml- Bucurați-vă gratuit de aplicația dvs. web live. Al meu e aici.
Codul complet este disponibil pe Github. Mulțumesc că mi-ai citit postarea. A fost prima mea aplicație web folosind Flask și primul tutorial pe Routech. Dacă vi s-a părut util acest articol, dați-mi câteva aplauze? A fost mult mai ușor decât am crezut, provenind dintr-un context de știință a datelor cu Python și R.
Nu ezitați să contactați pe mine dacă doriți să creați o aplicație Flask simplă sau mai complexă.
