de Tristan Ganry

Acesta este un mic proiect tutorial pentru învățarea Flask, API-urilor și Google App Engine pentru începători.

Cum sa creati o aplicatie web utilizand Flask ul Python si

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.

ad-banner
1611207428 444 Cum sa creati o aplicatie web utilizand Flask ul Python si
1611207428 899 Cum sa creati o aplicatie web utilizand Flask ul Python si

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.

1611207429 331 Cum sa creati o aplicatie web utilizand Flask ul Python si

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.
1611207429 625 Cum sa creati o aplicatie web utilizand Flask ul Python si
  • (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
1611207429 957 Cum sa creati o aplicatie web utilizand Flask ul Python si
  • 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
1611207429 307 Cum sa creati o aplicatie web utilizand Flask ul Python si
  • 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
1611207430 863 Cum sa creati o aplicatie web utilizand Flask ul Python si
  • 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
1611207430 176 Cum sa creati o aplicatie web utilizand Flask ul Python si
  • 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
1611207430 295 Cum sa creati o aplicatie web utilizand Flask ul Python si

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).
1611207430 146 Cum sa creati o aplicatie web utilizand Flask ul Python si

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_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)
  • Solicitați o cheie API gratuită pe Open Weather Map
1611207431 593 Cum sa creati o aplicatie web utilizand Flask ul Python si
  • 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 data

Pasul 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 %}
1611207431 414 Cum sa creati o aplicatie web utilizand Flask ul Python si
  • 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:

1611207431 735 Cum sa creati o aplicatie web utilizand Flask ul Python si
1611207431 153 Cum sa creati o aplicatie web utilizand Flask ul Python si

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 🙂
1611207432 938 Cum sa creati o aplicatie web utilizand Flask ul Python si
1611207432 452 Cum sa creati o aplicatie web utilizand Flask ul Python si

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)
1611207432 518 Cum sa creati o aplicatie web utilizand Flask ul Python si
1611207433 89 Cum sa creati o aplicatie web utilizand Flask ul Python si
  • Creați un fișier app.yaml în folderul principal cu următorul cod:
runtime: python27api_version: 1threadsafe: true
handlers:- 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 &lt;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ă.