Рубрики
Без рубрики

Как построить веб-приложение, используя колбу Python и двигатель Google App

Автор оригинала: FreeCodeCapm Team.

Тристан Ганри

Это небольшой учебный проект для изучения колбы, API и приложений Google App для начинающих.

Если вы хотите создать веб-приложения в очень короткое время с использованием Python, то Колбу это фантастический вариант.

Флэк – это небольшой и мощный веб-каркас (также известный как « Microframework »). Также очень легко учиться и просто для кода. Основываясь на моем личном опыте, было легко начать как новичок.

До этого проекта мои знания Python в основном ограничивали наукой данных. Тем не менее, я смог создать это приложение и создать этот учебник всего за несколько часов.

В этом руководстве я покажу вам, как построить простое приложение погоды с некотором динамическим контентом с помощью API. Это руководство – отличная отправная точка для начинающих. Вы научитесь создавать динамический контент от API и развертывание его в Google Cloud.

Конечный продукт можно просматривать здесь Отказ

Чтобы создать приложение погоды, нам нужно будет запросить ключ API из Открытая карта погоды Отказ Бесплатная версия позволяет до 60 звонков в минуту, что более чем достаточно для этого приложения. Открытая погода Карта Условия иконки не очень красивые. Мы заменим их с некоторыми из 200 иконок погоды в 200+ из Эрик Цветы вместо.

Этот учебник также будет охватывать: (1) основной дизайн CSS, (2) Basic HTML с Jinja и (3) развертывание приложения для колба в облаке Google.

Шаги, которые мы возьмем, перечислены ниже:

  • Шаг 0: Установка колбы (этот учебник не покрывает монтаж Python и PiP)
  • Шаг 1: Создание структуры приложения
  • Шаг 2: Создание основного кода приложения с запросом API
  • Шаг 3: Создание 2 страниц для приложения (главное и результат) с Jinja , HTML и CSS
  • Шаг 4: Развертывание и тестирование на вашем локальном ноутбуке
  • Шаг 5: Развертывание в Google Cloud.

Шаг 0 – Установка колбы и библиотек мы будем использовать в виртуальной среде.

Мы построим этот проект, используя виртуальную среду. Но почему нам нужно один?

С виртуальными средами вы создаете местную среду, специфичную для каждого проекта. Вы можете выбрать библиотеки, которые вы хотите использовать, не влияя на среду ноутбука. Когда вы кодируете больше проектов на вашем ноутбуке, каждый проект понадобится разные библиотеки. С другой виртуальной средой для каждого проекта у вас не будет конфликтов между вашей системой и вашими проектами или между проектами.

  • Запустите командную строку (cmd.exe) с привилегиями администратора. Не использование привилегий администратора предотвратит вас использовать PIP.
  • (Необязательно) Установите VirtualenV и VirtualenVwrapper-Win с PiP. Если у вас уже есть эти системные библиотеки, пожалуйста, перейдите на следующий шаг.
#Optionalpip install virtualenvwrapper-winpip install virtualenv
  • Создайте свою папку с именем «WeatherApp» и сделайте виртуальную среду с именем «Венв» (это может занять немного времени)
#Mandatorymkdir WeatherAppcd WeatherAppvirtualenv venv
  • Активируйте вашу виртуальную среду с помощью Windows «Call» в Windows (то же самое, что и «Источник» для Linux). Этот шаг изменяет вашу среду из системы в локальную среду проекта.
call venv\Scripts\activate.bat
  • Создайте файл требований .txt, который включает в себя колбу и другие библиотеки, нам понадобится в вашей папке 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 – Создание структуры приложения

Вы позаботились о местной среде. Теперь вы можете сосредоточиться на разработке вашего приложения. Этот шаг заключается в том, чтобы убедиться, что правильная папка и структура файла на месте. Следующий шаг позаботится о BackeND Code.

  • Создайте два файла Python (Main.py, Weather.py) и две папки (статические с подпапкой IMG, шаблонами).

Шаг 2 – Создание основного кода приложения с запросом API (Backend)

С помощью структуры установлена, вы можете начать кодировать бэкэнда вашего приложения. Пример «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 на карте открытой погоды
  • Редактировать Weather.py со следующим кодом (обновление API_KEY) и сохранить
from datetime import datetimeimport osimport pytzimport requestsimport mathAPI_KEY = 'XXXXXXXXXXXXXXXXXXXXXXXXXXX'API_URL = ('http://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
  • Создайте второй HTML-файл в папке шаблонов (Review.html)


{% for d in data %} {% set my_string = "static/img/" + d['weather'][0]['icon']+ ".svg" %}    
   
  
Weather
 
{{ d['name'] }}, {{ d['sys']['country'] }}
    
{{ d['main']['temp']|round|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 – Развертывание и тестирование локально

На этом этапе вы настроили среду, структуру, бэкэнда и интерфейс. Единственное, что осталось – запускать ваше приложение и наслаждаться этим на вашем localhost.

  • Просто запустите main.py с python
python main.py
  • Перейдите в Localhost Link, предложенную на CMD с вашим веб-браузером (Chrome, Mozilla и т. Д.). Вы должны увидеть ваше новое приложение погоды в прямом эфире на вашем местном ноутбуке:)

Шаг 5 – Развертывание в Google Cloud

Этот последний шаг предназначен для разделения вашего приложения с миром. Важно отметить, что существует множество поставщиков для веб-приложений, созданных с помощью колбы. Google Cloud – это только один из многих. Эта статья не покрывает некоторые другие, такие как AWS, Azure, Heroku …

Если сообщество заинтересовано, я могу предоставить шаги других облачных поставщиков в другой статье и некоторое сравнение (ценообразование, ограничения и т. Д.).

Чтобы развернуть ваше приложение на облако Google, вам нужно будет 1) Установите SDK, 2) Создать новый проект, 3) Создание 3 локальных файлов, 4) Развертывание и тестирование онлайн.

  • Установите SDK после Инструкции Google
  • Подключитесь к учетной записи Google Cloud (используйте купон в размере 300 долларов Если вы еще нешли)
  • Создайте новый проект и сохраните идентификатор проекта (подождите немного, пока не будет предоставлен новый проект)
  • Создайте файл App.yaml в основной папке со следующим кодом:
runtime: python27api_version: 1threadsafe: true
handlers:- url: /static  static_dir: static- url: /.*  script: main.app  libraries:  - name: ssl    version: latest
  • Создайте файл AppEngine_Config.py в основной папке со следующим кодом:
from google.appengine.ext import vendor
# Add any libraries installed in the "lib" folder.vendor.add('lib')
  • Реплицируйте зависимости библиотеки в папке Lib
pip install -t lib -r requirements.txt
  • Развертывание в области Google, используя идентификатор проекта сохранения (он может занять 10 минут). Используйте следующие шаги:
gcloud auth application-default logingcloud config set project gcloud initgcloud app deploy app.yaml
  • Наслаждайтесь своим Live Web App бесплатно. Мой это здесь Отказ

Полный код доступен на Github Отказ Спасибо за прочтение моего поста. Это было мое первое веб-приложение, использующее колбу и первый учебник на FreeCodecamp Отказ Если вы нашли эту статью полезную, дайте мне некоторые хлопья? Это было намного проще, чем я думал, что он, исходя из науки о науке данных с Python и R.

Не стесняйтесь обращаться к я Если вы хотите сделать простое или более сложное приложение для колба.

Читайте ещё по теме: