Як створити веб-програму за допомогою Python's Flask та Google App Engine

Це невеликий навчальний проект для вивчення Flask, API та Google App Engine для початківців.

Якщо ви хочете створити веб-програми за дуже короткий проміжок часу за допомогою Python, то Flask - це фантастичний варіант.

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
  • Створіть файл вим. Файл вимог - чудовий інструмент для відстеження бібліотек, які ви використовуєте у своєму проекті.
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 (бекенд)

З налаштованою структурою ви можете розпочати кодування бекенда вашого додатка. Приклад Flask “Hello world” використовує лише один файл 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 погода та результат - це те, до чого буде спрямовано бекенд 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.