Sådan oprettes en webapp ved hjælp af Pythons Flask og Google App Engine

Dette er et lille tutorial-projekt til læring af Flask, API'er og Google App Engine for begyndere.

Hvis du vil bygge webapps på meget kort tid ved hjælp af Python, er Flask en fantastisk mulighed.

Flask er en lille og kraftfuld webramme (også kendt som “microframework”). Det er også meget let at lære og nemt at kode. Baseret på min personlige erfaring var det let at starte som begynder.

Før dette projekt var min viden om Python for det meste begrænset til Data Science. Alligevel var jeg i stand til at oprette denne app og oprette denne tutorial på få timer.

I denne vejledning viser jeg dig, hvordan du bygger en simpel vejr-app med noget dynamisk indhold ved hjælp af en API. Denne vejledning er et godt udgangspunkt for begyndere. Du lærer at opbygge dynamisk indhold fra API'er og implementere det på Google Cloud.

Slutproduktet kan ses her.

For at oprette en vejr-app skal vi anmode om en API-nøgle fra Open Weather Map. Den gratis version tillader op til 60 opkald pr. Minut, hvilket er mere end nok til denne app. Ikonerne for åben vejrkortforhold er ikke særlig smukke. Vi erstatter dem med nogle af de 200+ vejrikoner fra Erik Flowers i stedet.

Denne vejledning vil også dække: (1) grundlæggende CSS-design, (2) grundlæggende HTML med Jinja og (3) implementering af en Flask-app på Google Cloud.

De trin, vi tager, er anført nedenfor:

  • Trin 0: Installation af kolbe (denne vejledning dækker ikke Python- og PIP-installation)
  • Trin 1: Opbygning af App-strukturen
  • Trin 2: Oprettelse af hovedapp-koden med API-anmodningen
  • Trin 3: Oprettelse af de 2 sider til appen (hoved og resultat) med Jinja, HTML og CSS
  • Trin 4: Implementering og test på din lokale bærbare computer
  • Trin 5: Implementering på Google Cloud.

Trin 0 - Installation af Flask og de biblioteker, vi bruger i et virtuelt miljø.

Vi bygger dette projekt ved hjælp af et virtuelt miljø. Men hvorfor har vi brug for en?

Med virtuelle miljøer opretter du et lokalt miljø, der er specifikt for hvert projekt. Du kan vælge biblioteker, du vil bruge uden at påvirke dit bærbare miljø. Når du koder flere projekter på din bærbare computer, skal hvert projekt have forskellige biblioteker. Med et andet virtuelt miljø for hvert projekt har du ikke konflikter mellem dit system og dine projekter eller mellem projekter.

  • Kør kommandoprompt (cmd.exe) med administratorrettigheder. Brug ikke administratorrettigheder forhindrer dig i at bruge pip.
  • (Valgfrit) Installer virtualenv og virtualenvwrapper-win med PIP. Hvis du allerede har disse systembiblioteker, skal du springe til næste trin.
#Optionalpip install virtualenvwrapper-winpip install virtualenv
  • Opret din mappe med navnet "WeatherApp" og lav et virtuelt miljø med navnet "venv" (det kan tage lidt tid)
#Mandatorymkdir WeatherAppcd WeatherAppvirtualenv venv
  • Aktivér dit virtuelle miljø med "opkald" på Windows (samme som "kilde" til Linux). Dette trin ændrer dit miljø fra systemet til projektets lokale miljø.
call venv\Scripts\activate.bat
  • Opret en krav.txt-fil, der inkluderer Flask og de andre biblioteker, vi har brug for i din WeatherApp-mappe, og gem derefter filen. Kravfilen er et fantastisk værktøj til også at holde styr på de biblioteker, du bruger i dit projekt.
Flask==0.12.3click==6.7gunicorn==19.7.1itsdangerous==0.24Jinja2==2.9.6MarkupSafe==1.0pytz==2017.2requests==2.13.0Werkzeug==0.12.1
  • Installer kravene og deres afhængighed. Du er nu klar til at opbygge din WeatherApp. Dette er det sidste trin for at skabe dit lokale miljø.
pip install -r requirements.txt

Trin 1 - Opbygning af App-strukturen

Du har taget sig af det lokale miljø. Du kan nu fokusere på at udvikle din applikation. Dette trin er at sikre, at den korrekte mappe og filstruktur er på plads. Det næste trin tager sig af backend-koden.

  • Opret to Python-filer (main.py, weather.py) og to mapper (statisk med en undermappe img, skabeloner).

Trin 2 - Oprettelse af hovedapp-koden med API-anmodningen (Backend)

Med strukturen opsat kan du begynde at kode backend af din applikation. Flaskens “Hello world” -eksempel bruger kun en Python-fil. Denne tutorial bruger to filer til at gøre dig fortrolig med at importere funktioner til din hovedapp.

Main.py er den server, der dirigerer brugeren til startsiden og til resultatsiden. Weather.py-filen opretter en funktion med API, der henter vejrdataene baseret på den valgte by. Funktionen udfylder den resulterende side.

  • Rediger main.py med følgende kode, og gem
#!/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)
  • Anmod om en gratis API-nøgle på Open Weather Map
  • Rediger weather.py med følgende kode (opdatering af API_KEY) og gem
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

Trin 3 - Oprettelse af sider med Jinja, HTML og CSS (Frontend)

This step is about creating what the user will see.

The HTML pages weather and result are the one the backend main.py will route to and give the visual structure. The CSS file will bring the final touch. There is no Javascript in this tutorial (the front end is pure HTML and CSS).

It was my first time using the Jinja2 template library to populate the HTML file. It surprised me how easy it was to bring dynamic images or use functions (e.g. rounding weather). Definitely a fantastic template engine.

  • Create the first HTML file in the templates folder (weather.html)

Weather in a City

 {% for o in data %} {{ o.name }} {% endfor %} Go
  • Create the second HTML file in the templates folder (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 %}
  • Add a CSS file in the static folder (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;}
  • Download the images in the img subfolder in static

Link with the images on Github:

Step 4 — Deploying and testing locally

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.

Den fulde kode er tilgængelig på Github. Tak fordi du læste mit indlæg. Det var min første webapp ved hjælp af Flask og første tutorial på freeCodeCamp. Giv mig nogle klapper, hvis du fandt denne artikel nyttig. Det var meget lettere, end jeg troede, det kom fra en datalogisk baggrund med Python og R.

Du er velkommen til at kontakte mig, hvis du vil lave en enkel eller mere kompleks Flask-app.