Come creare un'app Web utilizzando Flask di Python e Google App Engine

Questo è un piccolo progetto tutorial per l'apprendimento di Flask, API e Google App Engine per principianti.

Se desideri creare app Web in un brevissimo lasso di tempo utilizzando Python, Flask è un'opzione fantastica.

Flask è un piccolo e potente framework web (noto anche come "microframework"). È anche molto facile da imparare e semplice da codificare. Sulla base della mia esperienza personale, è stato facile iniziare come principiante.

Prima di questo progetto, la mia conoscenza di Python era per lo più limitata alla Data Science. Tuttavia, sono stato in grado di creare questa app e creare questo tutorial in poche ore.

In questo tutorial, ti mostrerò come creare una semplice app meteo con alcuni contenuti dinamici utilizzando un'API. Questo tutorial è un ottimo punto di partenza per i principianti. Imparerai a creare contenuto dinamico dalle API e a distribuirlo su Google Cloud.

Il prodotto finale può essere visualizzato qui.

Per creare un'app meteo, dovremo richiedere una chiave API da Open Weather Map. La versione gratuita consente fino a 60 chiamate al minuto, il che è più che sufficiente per questa app. Le icone delle condizioni di Open Weather Map non sono molto belle. Li sostituiremo invece con alcune delle oltre 200 icone meteo di Erik Flowers.

Questo tutorial tratterà anche: (1) progettazione CSS di base, (2) HTML di base con Jinja e (3) distribuzione di un'app Flask su Google Cloud.

I passaggi che eseguiremo sono elencati di seguito:

  • Passaggio 0: installazione di Flask (questo tutorial non copre l'installazione di Python e PIP)
  • Passaggio 1: creazione della struttura dell'app
  • Passaggio 2: creazione del codice dell'app principale con la richiesta API
  • Passaggio 3: creazione delle 2 pagine per l'app (principale e dei risultati) con Jinja, HTML e CSS
  • Passaggio 4: distribuzione e test sul laptop locale
  • Passaggio 5: distribuzione su Google Cloud.

Passaggio 0: installazione di Flask e delle librerie che utilizzeremo in un ambiente virtuale.

Costruiremo questo progetto utilizzando un ambiente virtuale. Ma perché ne abbiamo bisogno?

Con gli ambienti virtuali, crei un ambiente locale specifico per ogni progetto. Puoi scegliere le librerie che desideri utilizzare senza influire sull'ambiente del tuo laptop. Man mano che codifichi più progetti sul tuo laptop, ogni progetto avrà bisogno di librerie diverse. Con un ambiente virtuale diverso per ogni progetto, non avrai conflitti tra il tuo sistema e i tuoi progetti o tra progetti.

  • Esegui il prompt dei comandi (cmd.exe) con privilegi di amministratore. Il mancato utilizzo dei privilegi di amministratore ti impedirà di utilizzare pip.
  • (Facoltativo) Installa virtualenv e virtualenvwrapper-win con PIP. Se disponi già di queste librerie di sistema, salta al passaggio successivo.
#Optionalpip install virtualenvwrapper-winpip install virtualenv
  • Crea la tua cartella con il nome "WeatherApp" e crea un ambiente virtuale con il nome "venv" (può volerci un po 'di tempo)
#Mandatorymkdir WeatherAppcd WeatherAppvirtualenv venv
  • Attiva il tuo ambiente virtuale con "call" su Windows (uguale a "source" per Linux). Questo passaggio cambia l'ambiente dal sistema all'ambiente locale del progetto.
call venv\Scripts\activate.bat
  • Crea un file requirements.txt che includa Flask e le altre librerie di cui avremo bisogno nella tua cartella WeatherApp, quindi salva il file. Il file dei requisiti è un ottimo strumento per tenere traccia anche delle librerie che stai utilizzando nel tuo progetto.
Flask==0.12.3click==6.7gunicorn==19.7.1itsdangerous==0.24Jinja2==2.9.6MarkupSafe==1.0pytz==2017.2requests==2.13.0Werkzeug==0.12.1
  • Installa i requisiti e le loro dipendenze. Ora sei pronto per creare la tua WeatherApp. Questo è il passaggio finale per creare il tuo ambiente locale.
pip install -r requirements.txt

Passaggio 1: creazione della struttura dell'app

Ti sei preso cura dell'ambiente locale. Ora puoi concentrarti sullo sviluppo della tua applicazione. Questo passaggio serve per assicurarsi che siano presenti la cartella e la struttura dei file corrette. Il passaggio successivo si occuperà del codice di backend.

  • Crea due file Python (main.py, weather.py) e due cartelle (statiche con una sottocartella img, modelli).

Passaggio 2: creazione del codice dell'app principale con la richiesta API (backend)

Con la struttura impostata, puoi iniziare a codificare il backend della tua applicazione. L'esempio "Hello world" di Flask utilizza solo un file Python. Questo tutorial utilizza due file per familiarizzare con l'importazione delle funzioni nella tua app principale.

Il main.py è il server che indirizza l'utente alla homepage e alla pagina dei risultati. Il file weather.py crea una funzione con API che recupera i dati meteo in base alla città selezionata. La funzione popola la pagina risultante.

  • Modifica main.py con il codice seguente e salva
#!/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)
  • Richiedi una chiave API gratuita su Open Weather Map
  • Modifica weather.py con il seguente codice (aggiornando API_KEY) e salva
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

Passaggio 3: creazione di pagine con Jinja, HTML e CSS (frontend)

Questo passaggio riguarda la creazione di ciò che l'utente vedrà.

Il meteo e il risultato delle pagine HTML sono quelli verso cui il backend main.py indirizzerà e darà la struttura visiva. Il file CSS porterà il tocco finale. Non c'è Javascript in questo tutorial (il front-end è puro HTML e CSS).

Era la prima volta che utilizzavo la libreria di modelli Jinja2 per popolare il file HTML. Mi ha sorpreso quanto fosse facile portare immagini dinamiche o utilizzare funzioni (ad es. Sicuramente un fantastico motore di template.

  • Crea il primo file HTML nella cartella dei modelli (weather.html)

Weather in a City

 {% for o in data %} {{ o.name }} {% endfor %} Go
  • Crea il secondo file HTML nella cartella dei modelli (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 %}
  • Aggiungi un file CSS nella cartella statica (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;}
  • Scarica le immagini nella sottocartella img in statico

Link con le immagini su Github:

Passaggio 4: distribuzione e test in locale

At this stage, you have set up the environment, the structure, the backend, and the frontend. The only thing left is to launch your app and to enjoy it on your localhost.

  • Just launch the main.py with Python
python main.py
  • Go to the localhost link proposed on cmd with your Web Browser (Chrome, Mozilla, etc.). You should see your new weather app live on your local laptop :)

Step 5 — Deploying on Google Cloud

This last step is for sharing your app with the world. It’s important to note that there are plenty of providers for web apps built using Flask. Google Cloud is just one of many. This article does not cover some of the others like AWS, Azure, Heroku…

If the community is interested, I can provide the steps of the other cloud providers in another article and some comparison (pricing, limitations, etc.).

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.