Cómo construir una aplicación web usando Python's Flask y Google App Engine

Este es un pequeño proyecto tutorial para aprender Flask, API y Google App Engine para principiantes.

Si desea crear aplicaciones web en muy poco tiempo usando Python, Flask es una opción fantástica.

Flask es un marco web pequeño y potente (también conocido como "microframework"). También es muy fácil de aprender y de codificar. Según mi experiencia personal, fue fácil comenzar como principiante.

Antes de este proyecto, mi conocimiento de Python se limitaba principalmente a la ciencia de datos. Sin embargo, pude construir esta aplicación y crear este tutorial en solo unas horas.

En este tutorial, le mostraré cómo crear una aplicación meteorológica simple con contenido dinámico utilizando una API. Este tutorial es un excelente punto de partida para principiantes. Aprenderá a crear contenido dinámico a partir de API y a implementarlo en Google Cloud.

El producto final se puede ver aquí.

Para crear una aplicación meteorológica, necesitaremos solicitar una clave API de Open Weather Map. La versión gratuita permite hasta 60 llamadas por minuto, que es más que suficiente para esta aplicación. Los iconos de condiciones de Open Weather Map no son muy bonitos. En su lugar, los reemplazaremos con algunos de los más de 200 íconos meteorológicos de Erik Flowers.

Este tutorial también cubrirá: (1) diseño CSS básico, (2) HTML básico con Jinja y (3) implementación de una aplicación Flask en Google Cloud.

Los pasos que seguiremos se enumeran a continuación:

  • Paso 0: Instalación de Flask (este tutorial no cubre la instalación de Python y PIP)
  • Paso 1: construir la estructura de la aplicación
  • Paso 2: creación del código de la aplicación principal con la solicitud de API
  • Paso 3: Creación de las 2 páginas para la aplicación (principal y resultado) con Jinja, HTML y CSS
  • Paso 4: implementación y prueba en su computadora portátil local
  • Paso 5: implementación en Google Cloud.

Paso 0 - Instalar Flask y las bibliotecas que usaremos en un entorno virtual.

Construiremos este proyecto utilizando un entorno virtual. Pero, ¿por qué necesitamos uno?

Con los entornos virtuales, creas un entorno local específico para cada proyecto. Puede elegir las bibliotecas que desea utilizar sin afectar el entorno de su computadora portátil. A medida que codifique más proyectos en su computadora portátil, cada proyecto necesitará diferentes bibliotecas. Con un entorno virtual diferente para cada proyecto, no tendrá conflictos entre su sistema y sus proyectos o entre proyectos.

  • Ejecute el símbolo del sistema (cmd.exe) con privilegios de administrador. No usar privilegios de administrador le impedirá usar pip.
  • (Opcional) Instale virtualenv y virtualenvwrapper-win con PIP. Si ya tiene estas bibliotecas del sistema, vaya al paso siguiente.
#Optionalpip install virtualenvwrapper-winpip install virtualenv
  • Crea tu carpeta con el nombre "WeatherApp" y crea un entorno virtual con el nombre "venv" (puede llevar un poco de tiempo)
#Mandatorymkdir WeatherAppcd WeatherAppvirtualenv venv
  • Active su entorno virtual con "llamar" en Windows (lo mismo que "fuente" para Linux). Este paso cambia su entorno del sistema al entorno local del proyecto.
call venv\Scripts\activate.bat
  • Cree un archivo requirements.txt que incluya Flask y las otras bibliotecas que necesitaremos en su carpeta WeatherApp, luego guarde el archivo. El archivo de requisitos es una gran herramienta para realizar un seguimiento de las bibliotecas que está utilizando en su proyecto.
Flask==0.12.3click==6.7gunicorn==19.7.1itsdangerous==0.24Jinja2==2.9.6MarkupSafe==1.0pytz==2017.2requests==2.13.0Werkzeug==0.12.1
  • Instale los requisitos y sus dependencias. Ahora está listo para construir su WeatherApp. Este es el paso final para crear su entorno local.
pip install -r requirements.txt

Paso 1: construcción de la estructura de la aplicación

Has cuidado el medio ambiente local. Ahora puede concentrarse en desarrollar su aplicación. Este paso es para asegurarse de que la carpeta y la estructura de archivos adecuadas estén en su lugar. El siguiente paso se ocupará del código de backend.

  • Cree dos archivos Python (main.py, weather.py) y dos carpetas (estáticas con una subcarpeta img, plantillas).

Paso 2: creación del código de la aplicación principal con la solicitud de API (backend)

Con la estructura configurada, puede comenzar a codificar el backend de su aplicación. El ejemplo "Hola mundo" de Flask solo usa un archivo de Python. Este tutorial utiliza dos archivos para que se sienta cómodo con la importación de funciones a su aplicación principal.

Main.py es el servidor que dirige al usuario a la página de inicio y a la página de resultados. El archivo weather.py crea una función con API que recupera los datos meteorológicos en función de la ciudad seleccionada. La función llena la página resultante.

  • Edite main.py con el siguiente código y guarde
#!/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)
  • Solicite una clave API gratuita en Open Weather Map
  • Edite weather.py con el siguiente código (actualizando API_KEY) y guarde
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

Paso 3: creación de páginas con Jinja, HTML y CSS (frontend)

Este paso consiste en crear lo que verá el usuario.

El clima y el resultado de las páginas HTML son a los que el backend main.py enrutará y le dará la estructura visual. El archivo CSS traerá el toque final. No hay Javascript en este tutorial (la interfaz es HTML y CSS puro).

Fue la primera vez que usé la biblioteca de plantillas Jinja2 para completar el archivo HTML. Me sorprendió lo fácil que era traer imágenes dinámicas o usar funciones (por ejemplo, redondear el tiempo). Definitivamente un motor de plantillas fantástico.

  • Cree el primer archivo HTML en la carpeta de plantillas (weather.html)

Weather in a City

 {% for o in data %} {{ o.name }} {% endfor %} Go
  • Cree el segundo archivo HTML en la carpeta de plantillas (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 %}
  • Agregue un archivo CSS en la carpeta estática (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;}
  • Descargue las imágenes en la subcarpeta img en estático

Enlace con las imágenes en Github:

Paso 4: implementación y prueba 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.