Как да създадем уеб приложение с помощта на Python's Flask и Google App Engine

Това е малък урок проект за изучаване на Flask, API и Google App Engine за начинаещи.

Ако искате да създадете уеб приложения за много кратък период от време, използвайки Python, тогава Flask е фантастична опция.

Колбата е малка и мощна уеб рамка (известна още като „микрорамка“). Също така е много лесно да се научи и лесно да се кодира. Въз основа на личния ми опит беше лесно да започна като начинаещ.

Преди този проект познанията ми за Python бяха ограничени най-вече до Data Science. И все пак успях да създам това приложение и да създам този урок само за няколко часа.

В този урок ще ви покажа как да създадете просто приложение за времето с малко динамично съдържание с помощта на API. Този урок е чудесна отправна точка за начинаещи. Ще се научите да изграждате динамично съдържание от API и да го внедрявате в Google Cloud.

Крайният продукт може да видите тук.

За да създадем приложение за времето, ще трябва да поискаме API ключ от Open Weather Map. Безплатната версия позволява до 60 разговора в минута, което е повече от достатъчно за това приложение. Иконите на условията за отворена метеорологична карта не са много красиви. Вместо това ще ги заменим с някои от над 200 икони за времето от Erik Flowers.

Този урок ще обхваща също: (1) основен дизайн на CSS, (2) основен HTML с Jinja и (3) внедряване на приложение Flask в Google Cloud.

Стъпките, които ще предприемем, са изброени по-долу:

  • Стъпка 0: Инсталиране на Flask (този урок не обхваща инсталирането на Python и PIP)
  • Стъпка 1: Изграждане на структурата на приложението
  • Стъпка 2: Създаване на основния код на приложението с заявката за API
  • Стъпка 3: Създаване на 2 страници за приложението (основно и резултат) с Jinja, HTML и CSS
  • Стъпка 4: Внедряване и тестване на вашия локален лаптоп
  • Стъпка 5: Внедряване в Google Cloud.

Стъпка 0 - Инсталиране на Flask и библиотеките, които ще използваме във виртуална среда.

Ще изградим този проект, използвайки виртуална среда. Но защо се нуждаем от такъв?

С виртуалните среди създавате локална среда, специфична за всеки проект. Можете да изберете библиотеки, които искате да използвате, без да влияете на средата на вашия лаптоп. Докато кодирате повече проекти на вашия лаптоп, всеки проект ще се нуждае от различни библиотеки. С различна виртуална среда за всеки проект няма да имате конфликти между вашата система и вашите проекти или между проекти.

  • Изпълнете командния ред (cmd.exe) с администраторски права. Неизползването на администраторски права ще ви попречи да използвате pip.
  • (По избор) Инсталирайте virtualenv и virtualenvwrapper-win с PIP. Ако вече имате тези системни библиотеки, моля, преминете към следващата стъпка.
#Optionalpip install virtualenvwrapper-winpip install virtualenv
  • Създайте папката си с името „WeatherApp“ и направете виртуална среда с името „venv“ (може да отнеме малко време)
#Mandatorymkdir WeatherAppcd WeatherAppvirtualenv venv
  • Активирайте виртуалната си среда с „повикване“ в Windows (същото като „източник“ за Linux). Тази стъпка променя вашата среда от системата към локалната среда на проекта.
call venv\Scripts\activate.bat
  • Създайте файл requirements.txt, който включва Flask и другите библиотеки, от които ще се нуждаем, във вашата папка WeatherApp, след което запазете файла. Файлът с изисквания е чудесен инструмент за проследяване на библиотеките, които използвате във вашия проект.
Flask==0.12.3click==6.7gunicorn==19.7.1itsdangerous==0.24Jinja2==2.9.6MarkupSafe==1.0pytz==2017.2requests==2.13.0Werkzeug==0.12.1
  • Инсталирайте изискванията и техните зависимости. Вече сте готови да изградите вашия WeatherApp. Това е последната стъпка за създаване на вашата местна среда.
pip install -r requirements.txt

Стъпка 1 - Изграждане на структурата на приложението

Погрижили сте се за местната среда. Вече можете да се съсредоточите върху разработването на вашето приложение. Тази стъпка е да се уверите, че правилната структура на папките и файловете е на място. Следващата стъпка ще се погрижи за бекенд кода.

  • Създайте два Python файла (main.py, weather.py) и две папки (статични с подпапка img, шаблони).

Стъпка 2 - Създаване на основния код на приложението с заявката за API (Backend)

С настройката на структурата можете да започнете да кодирате бекенда на вашето приложение. Примерът „Здравей, свят“ на Flask използва само един файл на Python. Този урок използва два файла, за да ви осигури комфорт при импортиране на функции в основното ви приложение.

Main.py е сървърът, който насочва потребителя към началната страница и към страницата с резултати. Файлът weather.py създава функция с API, която извлича данните за времето въз основа на избрания град. Функцията попълва получената страница.

  • Редактирайте main.py със следния код и запазете
#!/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)
  • Заявете безплатен API ключ на Open Weather Map
  • Редактирайте weather.py със следния код (актуализиране на API_KEY) и запазете
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

Стъпка 3 - Създаване на страници с Jinja, HTML и CSS (Frontend)

Тази стъпка е свързана със създаването на това, което потребителят ще види.

Времето и резултатът на HTML страниците са този, към който ще се насочи backkend main.py и ще даде визуалната структура. CSS файлът ще донесе последния щрих. В този урок няма Javascript (предният край е чист HTML и CSS).

За първи път използвах библиотеката с шаблони Jinja2 за попълване на HTML файла. Изненада ме колко лесно беше да донесете динамични изображения или да използвате функции (например закръгляване на времето). Определено фантастичен механизъм за шаблони.

  • Създайте първия HTML файл в папката за шаблони (weather.html)

Weather in a City

 {% for o in data %} {{ o.name }} {% endfor %} Go
  • Създайте втория HTML файл в папката за шаблони (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 %}
  • Добавете CSS файл в статичната папка (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;}
  • Изтеглете изображенията в подпапката img в статично състояние

Връзка с изображенията в Github:

Стъпка 4 - Локално внедряване и тестване

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.