Comment créer une application Web à l'aide de Flask de Python et de Google App Engine

Il s'agit d'un petit projet de didacticiel pour apprendre Flask, les API et Google App Engine pour les débutants.

Si vous souhaitez créer des applications Web en très peu de temps à l'aide de Python, Flask est une option fantastique.

Flask est un petit et puissant framework Web (également appelé «microframework»). Il est également très facile à apprendre et simple à coder. D'après mon expérience personnelle, il était facile de commencer en tant que débutant.

Avant ce projet, ma connaissance de Python était principalement limitée à la science des données. Pourtant, j'ai pu créer cette application et créer ce tutoriel en quelques heures seulement.

Dans ce didacticiel, je vais vous montrer comment créer une application météo simple avec du contenu dynamique à l'aide d'une API. Ce tutoriel est un excellent point de départ pour les débutants. Vous apprendrez à créer du contenu dynamique à partir d'API et à le déployer sur Google Cloud.

Le produit final peut être consulté ici.

Pour créer une application météo, nous devrons demander une clé API à Open Weather Map. La version gratuite permet jusqu'à 60 appels par minute, ce qui est plus que suffisant pour cette application. Les icônes de conditions Open Weather Map ne sont pas très jolies. Nous les remplacerons par quelques-unes des 200 icônes météo d'Erik Flowers à la place.

Ce didacticiel couvrira également: (1) la conception CSS de base, (2) le HTML de base avec Jinja et (3) le déploiement d'une application Flask sur Google Cloud.

Les étapes que nous prendrons sont énumérées ci-dessous:

  • Étape 0: Installation de Flask (ce tutoriel ne couvre pas l'installation de Python et PIP)
  • Étape 1: Construire la structure de l'application
  • Étape 2: création du code de l'application principale avec la demande d'API
  • Étape 3: Création des 2 pages de l'application (principale et résultat) avec Jinja, HTML et CSS
  • Étape 4: déploiement et test sur votre ordinateur portable local
  • Étape 5: déploiement sur Google Cloud.

Étape 0 - Installation de Flask et des bibliothèques que nous utiliserons dans un environnement virtuel.

Nous allons construire ce projet en utilisant un environnement virtuel. Mais pourquoi en avons-nous besoin?

Avec les environnements virtuels, vous créez un environnement local spécifique à chaque projet. Vous pouvez choisir les bibliothèques que vous souhaitez utiliser sans affecter l'environnement de votre ordinateur portable. Au fur et à mesure que vous codez plus de projets sur votre ordinateur portable, chaque projet aura besoin de bibliothèques différentes. Avec un environnement virtuel différent pour chaque projet, vous n'aurez pas de conflits entre votre système et vos projets ou entre projets.

  • Exécutez l'invite de commandes (cmd.exe) avec les privilèges d'administrateur. Ne pas utiliser de privilèges d'administrateur vous empêchera d'utiliser pip.
  • (Facultatif) Installez virtualenv et virtualenvwrapper-win avec PIP. Si vous disposez déjà de ces bibliothèques système, veuillez passer à l'étape suivante.
#Optionalpip install virtualenvwrapper-winpip install virtualenv
  • Créez votre dossier avec le nom «WeatherApp» et créez un environnement virtuel avec le nom «venv» (cela peut prendre un peu de temps)
#Mandatorymkdir WeatherAppcd WeatherAppvirtualenv venv
  • Activez votre environnement virtuel avec «appel» sur Windows (identique à «source» pour Linux). Cette étape change votre environnement du système à l'environnement local du projet.
call venv\Scripts\activate.bat
  • Créez un fichier requirements.txt qui inclut Flask et les autres bibliothèques dont nous aurons besoin dans votre dossier WeatherApp, puis enregistrez le fichier. Le fichier des exigences est un excellent outil pour suivre également les bibliothèques que vous utilisez dans votre projet.
Flask==0.12.3click==6.7gunicorn==19.7.1itsdangerous==0.24Jinja2==2.9.6MarkupSafe==1.0pytz==2017.2requests==2.13.0Werkzeug==0.12.1
  • Installez les exigences et leurs dépendances. Vous êtes maintenant prêt à créer votre WeatherApp. C'est la dernière étape pour créer votre environnement local.
pip install -r requirements.txt

Étape 1 - Construire la structure de l'application

Vous avez pris soin de l'environnement local. Vous pouvez maintenant vous concentrer sur le développement de votre application. Cette étape consiste à vous assurer que la structure de dossier et de fichier appropriée est en place. L'étape suivante s'occupera du code backend.

  • Créez deux fichiers Python (main.py, weather.py) et deux dossiers (statiques avec un sous-dossier img, templates).

Étape 2 - Création du code de l'application principale avec la requête API (Backend)

Une fois la structure mise en place, vous pouvez commencer à coder le backend de votre application. L'exemple «Hello world» de Flask n'utilise qu'un seul fichier Python. Ce didacticiel utilise deux fichiers pour vous familiariser avec l'importation de fonctions dans votre application principale.

Le main.py est le serveur qui dirige l'utilisateur vers la page d'accueil et vers la page de résultats. Le fichier weather.py crée une fonction avec l'API qui récupère les données météorologiques en fonction de la ville sélectionnée. La fonction remplit la page résultante.

  • Modifiez main.py avec le code suivant et enregistrez
#!/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)
  • Demandez une clé API gratuite sur Open Weather Map
  • Modifiez weather.py avec le code suivant (mise à jour de l'API_KEY) et enregistrez
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

Étape 3 - Création de pages avec Jinja, HTML et CSS (Frontend)

Cette étape consiste à créer ce que l'utilisateur verra.

La météo et le résultat des pages HTML sont ceux vers lesquels le backend main.py acheminera et donnera la structure visuelle. Le fichier CSS apportera la touche finale. Il n'y a pas de Javascript dans ce tutoriel (le front-end est pur HTML et CSS).

C'était la première fois que j'utilisais la bibliothèque de modèles Jinja2 pour remplir le fichier HTML. Cela m'a surpris à quel point il était facile d'apporter des images dynamiques ou d'utiliser des fonctions (par exemple, arrondir la météo). Certainement un moteur de modèle fantastique.

  • Créez le premier fichier HTML dans le dossier des modèles (weather.html)

Weather in a City

 {% for o in data %} {{ o.name }} {% endfor %} Go
  • Créez le deuxième fichier HTML dans le dossier des modèles (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 %}
  • Ajouter un fichier CSS dans le dossier statique (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éléchargez les images dans le sous-dossier img en statique

Lien avec les images sur Github:

Étape 4 - Déploiement et test local

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.