Веб-приложения на Python: Разверните свой скрипт как приложение Flask

Оглавление

Освежите в памяти основы
Создайте базовое веб-приложение на Python
Разверните свое веб-приложение на Python
Преобразование скрипта в веб-Приложение
Улучшите пользовательский интерфейс Вашего веб-приложения
Заключение

Вы написали скрипт на Python, которым гордитесь, и теперь хотите показать его миру. Но как? Большинство .py людей не будут знать, что делать с вашим файлом. Преобразование вашего скрипта в веб-приложение на Python - отличное решение, позволяющее сделать ваш код доступным для широкой аудитории.

В этом руководстве вы узнаете, как перейти от локального скрипта на Python к полностью развернутому веб-приложению Flask, которым вы можете поделиться со всем миром.

К концу этого урока вы будете знать:

Что такое веб-приложения и как вы можете размещать их в Сети
Как преобразовать скрипт на Python в веб-приложение на основе Flask
Как улучшить взаимодействие с пользователем, добавив HTML в свой код на Python
Как развернуть ваше веб-приложение на Python в Google App Engine

В дополнение к ознакомлению с примерами проектов, в руководстве вы найдете ряд упражнений. Они дадут вам возможность закрепить полученные знания с помощью дополнительной практики. Вы также можете загрузить исходный код, который будете использовать для создания своего веб-приложения, перейдя по ссылке ниже:

Получите пример кода: Нажмите здесь, чтобы получить пример кода, который вы будете использовать, чтобы узнать о создании веб-приложений на Python с помощью Flask в этом руководстве.

Познакомимся с основами

В этом разделе вы получите теоретические знания по различным темам, с которыми вы будете работать во время практической части этого руководства:

Какие существуют типы распространения кода на Python
Почему создание веб-приложения может быть хорошим выбором
Что такое веб-приложение
Как контент доставляется через Интернет
Что такое веб-хостинг
Какие хостинг-провайдеры существуют и какой из них использовать

Ознакомление с этими темами поможет вам чувствовать себя более уверенно при написании кода на Python для Интернета. Однако, если вы уже знакомы с ними, то можете не торопиться, установите Google Cloud SDK и приступайте к созданию своего веб-приложения на Python.

Распространяйте свой код на Python

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

Библиотека Python
Автономная программа
Веб-приложение на Python

Ниже вы более подробно рассмотрите каждый из этих подходов.

Библиотека Python

Если вы работали с обширной экосистемой пакетов Python, то, скорее всего, вы устанавливали Пакеты Python с помощью pip. Как программист, вы, возможно, захотите опубликовать свой пакет Python на PyPI, чтобы другие пользователи могли получить доступ к вашему коду и использовать его, установив его с помощью pip:

$ python3 -m pip install <your-package-name>

После того, как вы успешно опубликуете свой код в PyPI, эта команда установит ваш пакет, включая его зависимости, на любой из компьютеров ваших пользователей, при условии, что у них есть подключение к Интернету.

Если вы не хотите публиковать свой код в виде пакета PyPI, вы все равно можете использовать встроенную в Python команду sdist для создания дистрибутива с исходным кодом или Python wheel для создания встроенного дистрибутива, которым можно поделиться со своими пользователями.

При таком распространении ваш код остается близким к исходному сценарию, который вы написали, и добавляет только то, что необходимо для его запуска другими пользователями. Однако использование этого подхода также означает, что вашим пользователям придется запускать ваш код на Python. У многих людей, которые хотят использовать функциональность вашего скрипта, не установлен Python или они не знакомы с процессами, необходимыми для непосредственной работы с вашим кодом.

Более удобный способ представить свой код потенциальным пользователям - это создать отдельную программу.

Автономная программа

Компьютерные программы бывают разных форм, и существует множество вариантов преобразования ваших скриптов на Python в самостоятельные программы. Ниже вы прочтете о двух возможностях:

Упаковка вашего кода
Создание графического интерфейса пользователя

Такие программы, как PyInstaller, py2app, py2exe или Briefcase, могут помочь с упаковкой вашего кода. Они превращают скрипты Python в исполняемые программы, которые можно использовать на разных платформах, не требуя от ваших пользователей явного запуска интерпретатора Python.

Примечание: Чтобы узнать больше об упаковке вашего кода, ознакомьтесь с Использование PyInstaller для простого распространения приложений на Python или послушайте настоящий Python Эпизод подкаста Варианты упаковки вашего приложения на Python.

Хотя упаковка вашего кода может решить проблемы с зависимостями, ваш код по-прежнему выполняется только в командной строке. Большинство людей привыкли работать с программами, которые предоставляют графический интерфейс пользователя (GUI). Вы можете сделать свой код на Python доступным для большего числа людей, создав для него графический интерфейс.

Примечание: Существуют различные пакеты, которые могут помочь вам в создании графического интерфейса, включая Tkinter, wxPython и PySimpleGUI. Если вы хотите создать собственное приложение для настольных компьютеров, ознакомьтесь с учебным пособием по Программированию с графическим интерфейсом на Python.

Хотя автономная настольная программа с графическим интерфейсом может сделать ваш код доступным для более широкой аудитории, она по-прежнему представляет собой препятствие для начала работы. Перед запуском вашей программы потенциальным пользователям необходимо выполнить несколько шагов. Им нужно найти подходящую версию своей операционной системы, загрузить ее и успешно установить. Некоторые могут сдаться, не пройдя весь путь до конца.

Вполне логично, что многие разработчики вместо этого создают веб-приложения, к которым можно быстро получить доступ и запустить в интернет-браузере.

Веб-приложение на Python

Преимущество веб-приложений заключается в том, что они не зависят от платформы и могут запускаться любым пользователем, у которого есть доступ к Интернету. Их код реализован на внутреннем сервере, где программа обрабатывает входящие запросы и отвечает по общему протоколу, понятному всем браузерам.

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

Однако, вместо описанного выше подхода, основанного на использовании веб-технологий, вы собираетесь использовать другой подход. В конце концов, вы не планировали создавать веб-приложение. Вы только что создали полезный скрипт на Python и теперь хотите поделиться им со всем миром. Чтобы сделать его доступным для широкого круга пользователей, вы преобразуете его в веб-приложение, а затем развернете в Интернете.

Пришло время рассказать о том, что такое веб-приложение и чем оно отличается от другого контента в Интернете.

Узнайте больше о веб-приложениях на Python

Исторически веб-сайты содержали фиксированный контент, который был одинаковым для каждого пользователя, заходившего на эту страницу. Такие веб-страницы называются статическими, потому что их содержимое не меняется при взаимодействии с ними. При обслуживании статической веб-страницы веб-сервер отвечает на ваш запрос, отправляя обратно содержимое этой страницы, независимо от того, кто вы и какие другие действия вы предприняли.

Вы можете просмотреть пример статического веб-сайта по первому URL-адресу, который когда-либо был размещен в Сети, а также страницы, на которые он ссылается:

История создания Всемирной паутины

Такие статичные веб-сайты не считаются приложениями, поскольку их контент не генерируется динамически с помощью кода. Если раньше весь Интернет состоял из статичных сайтов, то сегодня большинство веб-сайтов представляют собой настоящие веб-приложения, которые предлагают динамические веб-страницы, которые могут изменять предоставляемый ими контент.

Например, приложение веб-почты позволяет вам взаимодействовать с ним различными способами. В зависимости от ваших действий оно может отображать различные типы информации, часто оставаясь на одной странице:

Одностраничное почтовое приложение

Веб-приложения, управляемые на Python, используют код на Python для определения того, какие действия следует предпринять и какой контент показывать. Ваш код запускается веб-сервером, на котором размещен ваш веб-сайт, что означает, что вашим пользователям не нужно ничего устанавливать. Все, что им нужно для взаимодействия с вашим кодом, - это браузер и подключение к Интернету.

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

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

Просмотрите цикл HTTP-запроса-ответа

Обслуживание динамического контента через Интернет включает в себя множество различных компонентов, и все они должны взаимодействовать друг с другом для правильной работы. Вот общий обзор того, что происходит, когда пользователь взаимодействует с веб-приложением:

Отправка: Сначала ваш пользователь делает запрос на определенную веб-страницу в вашем веб-приложении. Они могут сделать это, например, введя URL-адрес в свой браузер.
Получение: Этот запрос поступает на веб-сервер, на котором размещен ваш веб-сайт.
Соответствие: Теперь ваш веб-сервер использует программу для сопоставления запроса пользователя с определенной частью вашего скрипта на Python.
Запуск: Эта программа вызывает соответствующий код на Python. Когда ваш код выполняется, он выводит веб-страницу в качестве ответа.
Доставка: Затем программа отправляет этот ответ обратно вашему пользователю через веб-сервер.
Просмотр: Наконец, пользователь может просмотреть ответ веб-сервера. Например, результирующая веб-страница может быть отображена в браузере.

Это общий процесс доставки контента через Интернет. Язык программирования, используемый на сервере, а также технологии, используемые для установления соединения, могут отличаться. Однако концепция, используемая для обмена данными по протоколу HTTP запросы и ответы, остается прежней и называется цикл HTTP запрос-ответ.

Примечание: Flask справится с большей частью этой сложности за вас, но это может помочь сохранить общее представление об этом процессе.

Чтобы позволить Flask обрабатывать запросы на стороне сервера, вам нужно найти место, где ваш код на Python может работать в режиме онлайн. Хранение вашего кода в Интернете для запуска веб-приложения называется веб-хостингом, и существует ряд провайдеров, предлагающих как платный, так и бесплатный веб-хостинг.

Выберите хостинг-провайдера: Google App Engine

При выборе веб-хостинг-провайдера вам необходимо подтвердить, что он поддерживает запуск кода на Python. Многие из них стоят денег, но в этом руководстве мы остановимся на бесплатном варианте, который является профессиональным и масштабируемым, но при этом разумным в настройке: Google App Engine.

Примечание: Google App Engine ежедневно устанавливает квоты для каждого приложения. Если ваше веб-приложение превысит эти квоты, Google начнет выставлять вам счета. Если вы являетесь новым клиентом Google Cloud, то при регистрации вы можете получить бесплатных баллов по акции.

Существует ряд других бесплатных опций, таких как PythonAnywhere, Repl.it или Heroku, которые вы можете изучить позже. Использование Google App Engine даст вам хороший старт в изучении развертывания кода на Python в Интернете, поскольку обеспечивает баланс между минимизацией сложности и возможностью настройки параметров.

Google App Engine является частью Google Cloud Platform (GCP), которая находится под управлением Google и представляет собой одного из крупнейших облачных провайдеров, наряду с Microsoft Azure и Веб-сервисы Amazon (AWS).

Чтобы начать работу с GCP, загрузите и установите Google Cloud SDK для вашей операционной системы. Для получения дополнительных указаний, помимо того, что вы найдете в этом руководстве, вы можете обратиться к документации Google App Engine .

Примечание: Вы будете работать со стандартной средой Python 3. Стандартная среда Google App Engine поддерживает среду выполнения на Python 3 и предлагает бесплатный уровень поддержки.

В комплект поставки Google Cloud SDK также входит программа командной строки под названием gcloud, которую вы позже будете использовать для развертывания своего веб-приложения. Как только вы закончите установку, вы можете убедиться, что все заработало, введя следующую команду в свою консоль:

$ gcloud --version

В вашем терминале должен появиться текстовый вывод, похожий на приведенный ниже:

app-engine-python 1.9.91
bq 2.0.62
cloud-datastore-emulator 2.1.0
core 2020.11.13
gsutil 4.55

Номера ваших версий, вероятно, будут отличаться, но если программа gcloud успешно найдена на вашем компьютере, значит, установка прошла успешно.

Ознакомившись с этим высокоуровневым обзором концепций и установив Google Cloud SDK, вы можете приступить к созданию проекта на Python, который впоследствии будет развернут в Интернете.

Создайте базовое веб-приложение на Python

Google App Engine требует, чтобы вы использовали веб-фреймворк для создания своего веб-приложения в среде Python 3. Поскольку вы пытаетесь использовать минимальные настройки для размещения вашего локального кода на Python в Интернете, хорошим выбором будет микрокредит, такой как Flask. Минимальная реализация Flask настолько мала, что вы можете даже не заметить, что используете веб-фреймворк.

Примечание: Если вы ранее работали с Google App Engine в среде Python 2.7, то вы заметите, что процесс значительно изменился.

Два заметных изменения заключаются в том, что webapp2 был удален и что вы больше не можете указывать URL-адреса для динамического содержимого в файле app.yaml. Причина обоих этих изменений заключается в том, что Google App Engine теперь требует от вас использования веб-платформы Python.

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

Настройка Вашего проекта

Создайте папку проекта и дайте ей название, соответствующее вашему проекту. Для этого практического проекта назовите папку hello-app. Вам понадобятся три файла в этой папке:

main.py содержит ваш код на Python, завернутый в минимальную реализацию веб-фреймворка Flask.
requirements.txt содержит список всех зависимостей, необходимых вашему коду для правильной работы.
app.yaml помогает Google App Engine решить, какие настройки использовать на своем сервере.

Хотя три файла могут показаться большим количеством, вы увидите, что в этом проекте используется менее десяти строк кода во всех трех файлах. Это минимальная настройка, которую необходимо предоставить Google App Engine для любого проекта на Python, который вы можете запустить. Остальное будет вашим собственным кодом на Python. Вы можете загрузить полный исходный код, который будете использовать в этом руководстве, перейдя по ссылке ниже:

Далее вы ознакомитесь с содержимым каждого из файлов, начиная с самого сложного, main.py.

Создать `main.py`

main.py это файл, который Flask использует для доставки вашего контента. В верхней части файла вы импортируете класс Flask в строке 1, затем создаете экземпляр приложения Flask в строке 3:

 1from flask import Flask
 2
 3app = Flask(__name__)
 4
 5@app.route("/")
 6def index():
 7    return "Congratulations, it's a web app!"

После создания Flask app вы пишете Декоратор Python в строке 5 с именем @app.route, который Flask использует для подключения URL-адрес конечных точек с кодом, содержащимся в функциях. Аргумент @app.route определяет компонент пути URL-адреса, который в данном случае является корневым путем ("/").

Код в строках 6 и 7 составляет index(), который обрабатывается декоратором. Эта функция определяет, что должно выполняться, если пользователь запрашивает определенную конечную точку URL. Его возвращаемое значение определяет, что увидит пользователь при загрузке страницы.

Примечание: Название index() является лишь условным обозначением. Оно относится к тому, как часто называется главная страница веб-сайта index.html. Вы можете выбрать другое имя функции, если хотите.

Другими словами, если пользователь вводит базовый URL вашего веб-приложения в свой браузер, то Flask запускает index() и пользователь видит возвращаемый текст. В данном случае этот текст состоит всего из одного предложения: Congratulations, it's a web app!

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

Создать `requirements.txt`

Следующий файл, на который нужно обратить внимание, - это requirements.txt. Поскольку Flask является единственной зависимостью этого проекта, это все, что вам нужно указать:

Flask==2.1.2

Если у вашего приложения есть другие зависимости, вам также нужно будет добавить их в свой файл requirements.txt.

Google App Engine будет использовать requirements.txt для установки необходимых зависимостей Python для вашего проекта при его настройке на сервере. Это похоже на то, что вы сделали бы после создания и активации новой виртуальной среды локально.

Создать `app.yaml`

Третий файл, app.yaml, помогает Google App Engine настроить правильную серверную среду для вашего кода. В этом файле требуется всего одна строка, которая определяет среду выполнения Python:

runtime: python38

Приведенная выше строка поясняет, что подходящей средой выполнения для вашего кода на Python является Python 3.8. Этого достаточно, чтобы Google App Engine выполнил необходимую настройку на своих серверах.

Примечание: Убедитесь, что Среда выполнения Python 3, которую вы хотите использовать, доступна в Google App Engine.

Вы можете использовать файл Google App Engine app.yaml для дополнительных настроек, таких как добавление переменных среды в ваше приложение. Вы также можете использовать его для определения пути к статическому содержимому вашего приложения, такому как изображения, файлы CSS или JavaScript. В этом руководстве не будут рассмотрены эти дополнительные настройки, но вы можете ознакомиться с документацией Google App Engine по файлу конфигурации app.yaml, если хотите добавить такую функциональность.

Эти девять строк кода завершают необходимую настройку приложения. Теперь ваш проект готов к развертыванию.

Тем не менее, рекомендуется протестировать свой код перед запуском в производство, чтобы выявить возможные ошибки. Далее вы проверите, все ли работает должным образом на локальном уровне, прежде чем размещать свой код в Интернете.

Протестируйте локально

Flask поставляется в комплекте с веб-сервером разработки. Вы можете использовать этот сервер разработки, чтобы еще раз проверить, работает ли ваш код должным образом. Чтобы запустить сервер разработки Flask локально, вам необходимо выполнить два шага. Google App Engine выполнит те же действия на своих серверах, как только вы развернете свой код:

Настройка виртуальной среды.
Установите пакет flask.

Чтобы настроить виртуальную среду Python 3, перейдите в папку вашего проекта на вашем терминале и введите следующую команду:

$ python3 -m venv venv

При этом будет создана новая виртуальная среда с именем venv, использующая версию Python 3, установленную в вашей системе. Далее вам необходимо активировать виртуальную среду, используя сценарий активации:

$ source venv/bin/activate

После выполнения этой команды в вашем приглашении будет указано, что теперь вы работаете из виртуальной среды. После успешной настройки и активации виртуальной среды вы готовы к установке Flask:

$ python3 -m pip install -r requirements.txt

Эта команда извлекает все пакеты, перечисленные в requirements.txt, из PyPI и устанавливает их в вашей виртуальной среде. В этом случае единственным установленным пакетом будет Flask.

Дождитесь завершения установки, затем откройте main.py и добавьте следующие две строки кода в нижней части файла:

if __name__ == "__main__":
    app.run(host="127.0.0.1", port=8080, debug=True)

Эти две строки указывают Python на запуск сервера разработки Flask при выполнении скрипта из командной строки. Это будет использоваться только при локальном запуске скрипта. При развертывании кода в Google App Engine приложение будет работать на профессиональном веб-сервере, таком как Gunicorn. Для этого вам не нужно ничего менять.

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

$ python3 main.py

Flask запустит сервер разработки, и на вашем терминале отобразятся выходные данные, похожие на текст, показанный ниже:

 * Serving Flask app "main" (lazy loading)
 * Environment: production
   WARNING: This is a development server.
   Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: on
 * Running on http://127.0.0.1:8080/ (Press CTRL+C to quit)
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: 315-059-987

Этот вывод содержит три важные части информации:

WARNING: Это сервер разработки Flask, что означает, что вы не хотите использовать его для обработки вашего кода в рабочей среде. Google App Engine сделает это за вас.
Running on http://127.0.0.1:8080/: Это URL-адрес, по которому вы можете найти свое приложение. Это URL-адрес вашего локального хостинга, что означает, что приложение запущено на вашем компьютере. Перейдите по этому URL-адресу в вашем браузере, чтобы увидеть свой код в реальном времени.
Press CTRL+C to quit: В этой же строке также сообщается, что вы можете выйти из сервера разработки, нажав Ctrl+C на клавиатуре.

Следуйте инструкциям и откройте вкладку браузера по адресу http://127.0.0.1:8080/. Вы должны увидеть страницу с текстом, который возвращает ваша функция: Congratulations, it's a web app!

примечание: Адрес 127.0.0.1 называют локальный, что означает, что он указывает на ваш собственный компьютер. Число 8080, которое следует за двоеточием (:), называется номером порта. Порт можно рассматривать как определенный канал, аналогичный трансляции телевизионного или радиоканала.

Вы определили эти значения в app.run() в вашем main.py файле. Запуск приложения на порту 8080 означает, что вы можете настроиться на этот номер порта и получать сообщения от сервера разработки. Порт 8080 обычно используется для локального тестирования, но вы также можете использовать другой номер.

Вы можете использовать сервер разработки Flask для проверки любых изменений, которые вы вносите в код вашего приложения на Python. Сервер отслеживает изменения, которые вы вносите в код, и автоматически перезагружается, чтобы отобразить их. Если ваше приложение не отображается так, как вы ожидаете, на сервере разработки, оно также не будет работать в рабочей среде. Поэтому перед развертыванием убедитесь, что оно хорошо выглядит.

Также имейте в виду, что даже если он хорошо работает локально, после развертывания он может работать не совсем так же. Это связано с тем, что при развертывании вашего кода в Google App Engine учитываются другие факторы. Однако для базового приложения, подобного тому, которое вы создаете в этом руководстве, вы можете быть уверены, что оно будет работать в рабочей среде, если оно хорошо работает локально.

Измените возвращаемое значение на index() и убедитесь, что изменения отображаются в вашем браузере. Поиграйте с этим. Что произойдет, если вы измените возвращаемое значение index() на HTML-код, например <h1>Hello</h1>, вместо использования обычной текстовой строки?

После проверки настроек и функциональности кода на локальном сервере разработки вы готовы к его развертыванию в Google App Engine.

Разверните свое веб-приложение на Python

Наконец-то пришло время перевести ваше приложение в онлайн-режим. Но сначала вашему коду нужно разместить его на серверах Google, и вы должны убедиться, что он попадет туда в целости и сохранности. В этом разделе руководства вы поработаете над выполнением необходимых настроек развертывания как в облаке, так и локально.

Настройка в Google App Engine

Ознакомьтесь с процессом настройки, приведенным ниже, шаг за шагом. Вы можете сравнить то, что вы видите в своем браузере, со скриншотами. В примере скриншотов используется название проекта hello-app.

Начните с входа в Облачную платформу Google. Перейдите в панель инструментов, где в верхней части окна вы увидите панель инструментов. Нажмите кнопку со стрелкой, направленную вниз, в левой части панели инструментов. Откроется окно, содержащее список ваших проектов Google:

В модальном окне отображается список ваших проектов. Список может быть пустым, если вы еще не создали ни одного проекта. В правом верхнем углу этого модального окна найдите кнопку НОВЫЙ ПРОЕКТ и нажмите на нее:

Нажав НОВЫЙ ПРОЕКТ, вы перейдете на новую страницу, где сможете выбрать название для своего проекта. Это название появится в URL-адресе вашего приложения, который будет выглядеть примерно так: http://your-application-name.nw.r.appspot.com. Используйте hello-app в качестве названия для этого проекта, чтобы соответствовать руководству:

Вы можете увидеть свой идентификатор проекта под полем ввода Название проекта. Идентификатор проекта состоит из введенного вами имени и номера, который добавляет Google App Engine. В случае с этим руководством вы можете видеть, что идентификатор проекта равен hello-app-295110. Скопируйте свой личный идентификатор проекта, поскольку он понадобится вам позже для развертывания.

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

Теперь вы можете нажать СОЗДАТЬ и дождаться настройки проекта на стороне Google App Engine. Как только это будет сделано, появится уведомление о том, что создан новый проект. Это также дает вам возможность выбрать его. Продолжайте и сделайте это, нажав ВЫБЕРИТЕ ПРОЕКТ:

Нажав ВЫБЕРИТЕ ПРОЕКТ, вы будете перенаправлены на главную страницу вашего нового проекта Google Cloud Platform. Это выглядит следующим образом:

Отсюда вы хотите перейти на панель мониторинга Google App Engine. Вы можете сделать это, щелкнув меню "Гамбургер" в левом верхнем углу, прокрутив вниз, чтобы выбрать App Engine в первом списке, затем выбрав Панель мониторинга в верхней части списка. следующий всплывающий список:

Это, наконец, перенаправит вас на панель управления вашего нового проекта Google App Engine. Поскольку проект пока пуст, страница будет выглядеть примерно так:

Когда вы видите эту страницу, это означает, что вы завершили настройку нового проекта в Google App Engine. Теперь вы готовы вернуться к терминалу на вашем компьютере и выполнить локальные действия, необходимые для развертывания вашего приложения в этом проекте.

Настройка локально для развертывания

После успешной установки Google Cloud SDK у вас появится доступ к gcloud интерфейсу командной строки. К этой программе прилагаются полезные инструкции, которые помогут вам развернуть веб-приложение. Для начала введите команду, которая была предложена вам при создании нового проекта на веб-сайте Google App Engine:

Как вы можете видеть в правом нижнем углу страницы, Google App Engine предлагает команду терминала для развертывания вашего кода в этом проекте. Откройте свой терминал, перейдите в папку вашего проекта, затем выполните предложенную команду:

$ gcloud app deploy

Когда вы выполните эту команду без каких-либо предварительных настроек, программа выдаст сообщение об ошибке:

ERROR: (gcloud.app.deploy)
You do not currently have an active account selected.
Please run:

  $ gcloud auth login

to obtain new credentials.

If you have already logged in with a different account:

    $ gcloud config set account ACCOUNT

to select an already authenticated account to use.

Вы получаете это сообщение об ошибке, поскольку не можете внедрить какой-либо код в свою учетную запись Google App Engine, пока не докажете Google, что вы являетесь владельцем этой учетной записи. Вам необходимо пройти аутентификацию с помощью вашей учетной записи Google App Engine на локальном компьютере.

Приложение командной строки gcloud уже предоставило вам команду, которую необходимо выполнить. Введите ее в свой терминал:

$ gcloud auth login

После этого начнется процесс аутентификации путем создания URL-адреса для подтверждения и открытия его в вашем браузере. Завершите процесс, выбрав свою учетную запись Google в окне браузера и предоставив Google Cloud SDK необходимые привилегии. После того, как вы сделаете это, вы можете вернуться к своему терминалу, где увидите некоторую информацию о процессе аутентификации:

Your browser has been opened to visit:

    https://accounts.google.com/o/oauth2/auth?client_id=<yourid>

You are now logged in as [<your@email.com>].
Your current project is [None].  You can change this setting by running:
  $ gcloud config set project PROJECT_ID

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

В нем сообщается, что в настоящее время нет набора проектов и что вы можете установить его, выполнив команду gcloud config set project PROJECT_ID. Теперь вам понадобится идентификатор проекта, который вы указали ранее.

Примечание: Вы всегда можете получить идентификатор своего проекта, перейдя на веб-сайт Google App Engine и нажав на стрелку, направленную вниз, которая открывает режим отображения всех ваших проектов Google. Идентификатор проекта указан справа от названия вашего проекта и обычно состоит из названия проекта и шестизначного номера.

Обязательно замените hello-app-295110 на свой собственный идентификатор проекта при выполнении предложенной команды:

$ gcloud config set project hello-app-295110

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

Запустите процесс развертывания

Теперь вы готовы выполнить команду начального развертывания во второй раз:

$ gcloud app deploy

Приложение gcloud извлекает ваши учетные данные для аутентификации, а также информацию об идентификаторе проекта из конфигурации по умолчанию, которую вы только что настроили, и позволяет вам продолжить. Далее вам нужно выбрать регион, в котором должно быть размещено ваше приложение:

You are creating an app for project [hello-app-295110].
WARNING: Creating an App Engine application for a project is
irreversible and the region cannot be changed.
More information about regions is at
<https://cloud.google.com/appengine/docs/locations>.

Please choose the region where you want your App Engine application
located:

 [1] asia-east2
 [2] asia-northeast1
 [3] asia-northeast2
 [4] asia-northeast3
 [5] asia-south1
 [6] asia-southeast2
 [7] australia-southeast1
 [8] europe-west
 [9] europe-west2
 [10] europe-west3
 [11] europe-west6
 [12] northamerica-northeast1
 [13] southamerica-east1
 [14] us-central
 [15] us-east1
 [16] us-east4
 [17] us-west2
 [18] us-west3
 [19] us-west4
 [20] cancel
Please enter your numeric choice:

Введите одно из чисел, перечисленных слева, и нажмите Введите.

Примечание: Не имеет значения, какой регион вы выберете для этого приложения. Однако, если вы создаете крупное приложение, которое получает значительный объем трафика, вам захочется развернуть его на сервере, который физически находится близко к тому месту, где находится большинство ваших пользователей.

После того, как вы введете номер, интерфейс командной строки продолжит процесс установки. Перед развертыванием вашего кода в Google App Engine вам будет показан общий обзор того, как будет выглядеть развертывание, и будет запрошено окончательное подтверждение:

Creating App Engine application in project [hello-app-295110]
and region [europe-west]....done.
Services to deploy:

descriptor:      [/Users/realpython/Documents/helloapp/app.yaml]
source:          [/Users/realpython/Documents/helloapp]
target project:  [hello-app-295110]
target service:  [default]
target version:  [20201109t112408]
target url:      [https://hello-app-295110.ew.r.appspot.com]


Do you want to continue (Y/n)?

После того, как вы подтвердите установку, набрав Y, ваше развертывание, наконец, начнется. Пока Google App Engine будет настраивать ваш проект на своих серверах, ваш терминал покажет вам дополнительную информацию и небольшую анимацию загрузки:

Beginning deployment of service [default]...
Created .gcloudignore file. See `gcloud topic gcloudignore` for details.
╔════════════════════════════════════════════════════════════╗
╠═ Uploading 3 files to Google Cloud Storage                ═╣
╚════════════════════════════════════════════════════════════╝
File upload done.
Updating service [default]...⠼

Поскольку это первое развертывание вашего веб-приложения, оно может занять несколько минут. После завершения развертывания вы увидите в консоли еще один полезный вывод. Он будет выглядеть примерно так, как показано ниже:

Deployed service [default] to [https://hello-app-295110.ew.r.appspot.com]

You can stream logs from the command line by running:
  $ gcloud app logs tail -s default

To view your application in the web browser run:
  $ gcloud app browse

Теперь вы можете перейти по указанному URL-адресу в своем браузере или ввести предложенную команду gcloud app browse, чтобы получить доступ к вашему веб-приложению live. Вы должны увидеть тот же короткий текстовый ответ, который вы видели ранее при запуске приложения на вашем локальном хостинге: Congratulations, it's a web app!

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

Снова измените возвращаемое значение index() и разверните приложение во второй раз с помощью команды gcloud app deploy. Подтвердите, что изменения отображаются на веб-сайте в режиме реального времени в вашем браузере.

Таким образом, вы выполнили необходимые шаги для размещения вашего локального кода на Python в Интернете. Однако пока что единственная функциональность, которую вы внедрили в Интернете, - это печать текстовой строки.

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

Преобразование скрипта в веб-приложение

Поскольку в этом руководстве речь идет о создании и развертывании веб-приложений на Python на основе уже имеющегося у вас кода, код на Python для скрипта преобразования температуры приведен здесь:

def fahrenheit_from(celsius):
    """Convert Celsius to Fahrenheit degrees."""
    try:
        fahrenheit = float(celsius) * 9 / 5 + 32
        fahrenheit = round(fahrenheit, 3)  # Round to three decimal places
        return str(fahrenheit)
    except ValueError:
        return "invalid input"

if __name__ == "__main__":
    celsius = input("Celsius: ")
    print("Fahrenheit:", fahrenheit_from(celsius))

Это короткий скрипт, который позволяет пользователю преобразовать температуру по Цельсию в эквивалентную температуру по Фаренгейту.

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

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

Выполнение: Как веб-приложение узнает, когда запускать код?
Ввод данных пользователем: Как веб-приложение будет собирать данные, введенные пользователем?

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

Добавить код как функцию

Flask разделяет разные задачи на разные функции, каждой из которых назначается маршрут с помощью @app.route декоратора. Когда пользователь переходит по указанному маршруту через его URL, выполняется код внутри соответствующей функции.

Начните с добавления fahrenheit_from() в ваш main.py файл и оформления его с помощью @app.route декоратора:

from flask import Flask

app = Flask(__name__)

@app.route("/")
def index():
    return "Congratulations, it's a web app!"

@app.route("/")
def fahrenheit_from(celsius):
    """Convert Celsius to Fahrenheit degrees."""
    try:
        fahrenheit = float(celsius) * 9 / 5 + 32
        fahrenheit = round(fahrenheit, 3)  # Round to three decimal places
        return str(fahrenheit)
    except ValueError:
        return "invalid input"

if __name__ == "__main__":
    app.run(host="127.0.0.1", port=8080, debug=True)

Пока что вы только скопировали код вашего скрипта на Python в функцию в вашем приложении Flask и добавили @app.route декоратор.

Однако с этой настройкой уже возникла проблема. Что происходит, когда вы запускаете код на своем сервере разработки? Попробуйте.

В настоящее время обе ваши функции запускаются по одному и тому же маршруту ("/"). Когда пользователь переходит по этому маршруту, Flask выбирает первую соответствующую функцию и выполняет этот код. В вашем случае это означает, что fahrenheit_from() никогда не выполняется, потому что index() соответствует тому же маршруту и вызывается первым.

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

Передайте значения в свой код

Вы можете решить обе эти задачи, попросив Flask обработать любую оставшуюся часть URL-адреса, следующую за базовым URL-адресом, как значение и передать его вашей функции. Для этого требуется лишь небольшое изменение параметра @app.route декоратора, прежде чем fahrenheit_from():

@app.route("/<celsius>")
def fahrenheit_from(celsius):
    # -- snip --

Синтаксис угловых скобок (<>) указывает Flask захватывать любой текст, следующий за базовым URL-адресом ("/"), и передавать его функции, которую декоратор передает как переменную celsius. Обратите внимание, что для fahrenheit_from() требуется celsius в качестве входных данных.

Примечание: Убедитесь, что компонент URL-адреса, который вы записываете, имеет то же имя, что и параметр, который вы передаете своей функции. В противном случае Flask будет сбит с толку и сообщит вам об этом, выдав сообщение об ошибке.

Вернитесь к своему веб-браузеру и попробуйте новую функциональность с помощью сервера разработки Flask. Теперь вы можете получить доступ к обеим своим функциям через веб-приложение, используя разные конечные точки URL:

Индекс (/): Если вы перейдете по базовому URL-адресу, то увидите короткое ободряющее сообщение, которое вы видели ранее.
По Цельсию (/42): Если вы добавите цифру после косой черты, то в вашем браузере появится преобразованная температура.

Поиграйте с этим еще немного и попробуйте ввести разные входные данные. Даже обработка ошибок в вашем скрипте по-прежнему работает и отображает сообщение, когда пользователь вводит нечисловые данные. Ваше веб-приложение выполняет те же функции, что и ваш локальный скрипт на Python, только теперь вы можете развернуть его в Интернете.

Проведите рефакторинг Вашего кода

Flask - это зрелый веб-фреймворк, который позволяет вам передавать множество задач его внутренним компонентам. Например, вы можете позволить Flask позаботиться о проверке типа входных данных для вашей функции и возврате сообщения об ошибке, если оно не подходит. Все это можно сделать с помощью краткого синтаксиса внутри параметра, равного @app.route. Добавьте следующее в свой path capturer:

@app.route("/<int:celsius>")

Добавление int: перед именем переменной указывает Flask проверить, можно ли преобразовать входные данные, которые он получает из URL-адреса, в целое число. Если это возможно, содержимое передается в fahrenheit_from(). Если это не удается, то Flask отображает страницу с ошибкой Not Found.

Примечание: Ошибка Not Found означает, что Flask попытался сопоставить компонент path, который он вырезал из URL, с любой из известных ему функций.

Однако единственные известные ему на данный момент шаблоны - это пустой базовый путь (/) и базовый путь, за которым следует число, например /42. Поскольку текст, подобный /hello, не соответствует ни одному из этих шаблонов, он сообщает вам, что запрошенный URL-адрес не был найден на сервере.

После применения проверки типа Flask теперь вы можете безопасно удалить блокировку try ... except в fahrenheit_from(). Функция Flask всегда будет передавать только целые числа:

from flask import Flask

app = Flask(__name__)

@app.route("/")
def index():
    return "Congratulations, it's a web app!"

@app.route("/<int:celsius>")
def fahrenheit_from(celsius):
    """Convert Celsius to Fahrenheit degrees."""
    fahrenheit = float(celsius) * 9 / 5 + 32
    fahrenheit = round(fahrenheit, 3)  # Round to three decimal places
    return str(fahrenheit)

if __name__ == "__main__":
    app.run(host="127.0.0.1", port=8080, debug=True)

На этом вы завершили преобразование вашего сценария преобразования температуры в веб-приложение. Убедитесь, что локально все работает должным образом, а затем снова разверните приложение в Google App Engine.

Выполните рефакторинг index(). Должен быть возвращен текст, объясняющий, как использовать веб-приложение для преобразования температуры. Имейте в виду, что вы можете использовать HTML-теги в возвращаемой строке. HTML-код будет правильно отображаться на вашей целевой странице.

После успешного развертывания веб-приложения для преобразования температуры в Интернете у вас теперь есть ссылка, которой вы можете поделиться с другими пользователями и разрешить им переводить температуру по Цельсию в градусы Фаренгейта.

Однако интерфейс по-прежнему выглядит довольно простым, а веб-приложение функционирует скорее как API, чем как интерфейсное веб-приложение. Многие пользователи могут не знать, как взаимодействовать с вашим веб-приложением на Python в его текущем состоянии. Это показывает ограничения использования чистого Python для веб-разработки.

Если вы хотите создавать более интуитивно понятные интерфейсы, то вам нужно начать использовать хотя бы немного HTML.

В следующем разделе вы продолжите работу над своим кодом и с помощью HTML создадите поле ввода, которое позволит пользователям вводить число непосредственно на странице, а не через URL-адрес.

Улучшите пользовательский интерфейс Вашего веб-приложения

В этом разделе вы узнаете, как добавить элемент ввода HTML <form> в ваше веб-приложение, чтобы пользователи могли взаимодействовать с ним простым способом, к которому они привыкли в других онлайн-приложениях.

Чтобы улучшить пользовательский интерфейс и удобство работы с вашим веб-приложением, вам необходимо работать с языками, отличными от Python, а именно с интерфейсными языками, такими как HTML, CSS и JavaScript. В этом руководстве мы стараемся по возможности не вдаваться в подробности, чтобы сосредоточиться на использовании Python.

Примечание: Если вы хотите глубже погрузиться в интерфейсную разработку, ознакомьтесь с Создание интерфейса JavaScript для Flask API.

Однако, если вы хотите добавить поле ввода в свое веб-приложение, вам нужно будет использовать некоторый HTML. Вы реализуете только абсолютный минимум, чтобы ваше веб-приложение выглядело и ощущалось как веб-сайт, с которым пользователи будут знакомы. Вы будете использовать HTML <form> элемент для сбора их входных данных.

Примечание: Если вы хотите узнать больше о HTML, ознакомьтесь с книгой Real Python HTML и CSS для разработчиков на Python или MDN"Введение в HTML" .

После обновления вашего веб-приложения у вас появится текстовое поле, в котором пользователь может ввести температуру в градусах Цельсия. Появится кнопка Преобразовать для преобразования заданной пользователем температуры по Цельсию в градусы Фаренгейта.

Преобразованный результат будет отображен в следующей строке и будет обновляться всякий раз, когда пользователь нажимает Преобразовать.

Вы также измените функциональность приложения, чтобы и форма, и результат преобразования отображались на одной странице. Вы переработаете код таким образом, чтобы вам требовался только один конечный URL-адрес.

Сбор пользовательских данных

Начните с создания элемента <form> на вашей целевой странице. Скопируйте следующие несколько строк HTML-кода в инструкцию return из index(), заменив текстовое сообщение, приведенное ранее:

@app.route("/")
def index():
    return """<form action="" method="get">
                <input type="text" name="celsius">
                <input type="submit" value="Convert">
              </form>"""

Когда вы перезагрузите свою страницу по базовому URL-адресу, вы увидите поле ввода и кнопку. HTML отображается правильно. Поздравляем, вы только что создали форму ввода!

Примечание: Имейте в виду, что эти несколько строк HTML сами по себе не являются полноценной HTML-страницей. Однако современные браузеры разработаны таким образом, что они могут заполнить пробелы и создать недостающую структуру за вас.

Что происходит, когда вы вводите значение, а затем нажимаете Преобразовать? Хотя страница выглядит точно так же, вы можете заметить, что URL-адрес изменился. Теперь он отображает параметр запроса со значением после базового URL-адреса.

Например, если вы ввели 42 в текстовое поле и нажали на кнопку, то ваш URL-адрес будет выглядеть следующим образом: http://127.0.0.1:8080/?celsius=42. Это хорошая новость! Значение было успешно записано и добавлено в качестве параметра запроса к HTTP-запросу GET. Наличие этого URL-адреса означает, что вы снова запрашиваете базовый URL-адрес, но на этот раз с некоторыми дополнительными значениями, которые вы отправляете вместе с ним.

Однако в настоящее время с этим дополнительным значением ничего не происходит. Хотя форма настроена должным образом, она еще неправильно подключена к функциональному коду вашего веб-приложения на Python.

Чтобы понять, как установить эту связь, вы прочтете о каждой части элемента <form>, чтобы увидеть, из чего состоят различные части. Вы рассмотрите следующие три элемента и их атрибуты отдельно:

<form> элемент
Поле ввода
Кнопка отправки

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

`<form>` Элемент

Элемент <form> создает HTML-форму. Два других <input> элемента заключены в него:

<form action="" method="get">
  <input type="text" name="celsius" />
  <input type="submit" value="Convert" />
</form>

Элемент <form> также содержит два HTML-атрибута, которые называются action и method:

action определяет, куда будут отправлены данные, которые отправляет пользователь. Вы оставляете значение в виде пустой строки, что заставляет ваш браузер перенаправлять запрос на тот же URL, с которого он был вызван. В вашем случае это пустой базовый URL.
method определяет, какой тип HTTP-запроса генерирует форма. Используя значение по умолчанию "get", создается HTTP-запрос GET. Это означает, что отправленные пользователем данные будут видны в параметрах URL-запроса. Если вы отправляете конфиденциальные данные или взаимодействуете с базой данных, вам нужно будет использовать HTTP POST-запрос.

После проверки элемента <form> и его атрибутов ваш следующий шаг - более внимательно рассмотреть первый из двух элементов <input>.

Поле ввода

Вторым элементом HTML является элемент <input>, который вложен в элемент <form>:

<form action="" method="get">
  <input type="text" name="celsius" />
  <input type="submit" value="Convert" />
</form>

Первый элемент <input> имеет два HTML-атрибута:

type определяет, какой тип элемента <input> должен быть создан. Есть из чего выбирать, например, флажки и выпадающие элементы. В этом случае вы хотите, чтобы пользователь ввел число в виде текста, поэтому вы устанавливаете тип в "text".
name определяет, как будет называться значение, введенное пользователем. Вы можете рассматривать это как ключ к словарю, где значение равно тому, что пользователь вводит в текстовое поле. Вы видели, что это имя отображается в URL в качестве ключа параметра запроса. Этот ключ понадобится вам позже, чтобы получить отправленное пользователем значение.

HTML <input> элементы могут иметь различную форму, и для некоторых из них требуются разные атрибуты. Вы увидите пример этого при просмотре второго элемента <input>, который создает кнопку Отправить и является последним HTML-элементом, составляющим фрагмент вашего кода.

Кнопка отправки

Второй элемент <input> создает кнопку, которая позволяет вашим пользователям отправлять свои данные:

<form action="" method="get">
  <input type="text" name="celsius" />
  <input type="submit" value="Convert" />
</form>

Этот элемент также имеет два HTML-атрибута, которые называются type и value:

type определяет, какой тип входного элемента будет создан. Используя значение "submit", вы создаете кнопку, которая позволяет вам отправлять данные формы в комплекте в дальнейшем.
value определяет, какой текст должен отображаться на кнопке. Не стесняйтесь изменять его, чтобы увидеть, как кнопка отображает измененный текст.

Имея в виду этот краткий обзор различных HTML-элементов и их атрибутов, вы теперь лучше понимаете, что вы добавляете в свой код на Python и для чего эти элементы используются.

Информация, которая вам понадобится для привязки отправки формы к вашему коду Flask, - это первое значение <input> элемента name, celsius, которое вы будете использовать для доступа к отправленному значению в вашей функции.

Далее вы узнаете, как изменить свой код на Python для корректной обработки введенных данных в форме.

Получать вводимые пользователем данные

В атрибуте action вашего элемента <form> вы указали, что данные вашей HTML-формы должны быть отправлены обратно на тот же URL, с которого они были получены. Теперь вам нужно включить функциональность для получения значения в index(). Для этого вам нужно выполнить два шага:

Импортируйте объект Flask request: Как и многие веб-фреймворки, Flask передает HTTP-запросы как глобальные объекты. Чтобы иметь возможность использовать этот глобальный request объект, вам сначала необходимо его импортировать.
Извлеките значение: Объект request содержит переданное значение и предоставляет вам доступ к нему с помощью синтаксиса словаря Python. Вам нужно извлечь его из глобального объекта, чтобы иметь возможность использовать в своей функции.

Перепишите свой код и внесите эти два изменения прямо сейчас. Вы также захотите добавить записанное значение в конец строки формы, чтобы оно отображалось после формы:

from flask import Flask
from flask import request

app = Flask(__name__)

@app.route("/")
def index():
    celsius = request.args.get("celsius", "")
    return (
        """<form action="" method="get">
                <input type="text" name="celsius">
                <input type="submit" value="Convert">
            </form>"""
        + celsius
    )

@app.route("/<int:celsius>")
def fahrenheit_from(celsius):
    """Convert Celsius to Fahrenheit degrees."""
    fahrenheit = float(celsius) * 9 / 5 + 32
    fahrenheit = round(fahrenheit, 3)  # Round to three decimal places
    return str(fahrenheit)

if __name__ == "__main__":
    app.run(host="127.0.0.1", port=8080, debug=True)

Словарь request.args содержит все данные, отправленные с помощью HTTP-запроса GET. Если ваш базовый URL-адрес будет вызван изначально, без отправки формы, то словарь будет пустым, и вместо него вы вернете пустую строку в качестве значения по умолчанию. Если страница будет вызвана через отправку формы, то словарь будет содержать значение под ключом celsius, и вы сможете успешно извлечь его и добавить в возвращаемую строку.

Попробуйте! Теперь вы можете ввести номер и увидеть, как он отображается прямо под кнопкой формы. Если вы введете новый номер, старый будет заменен. Вы правильно отправляете и получаете данные, которые отправляют ваши пользователи.

Прежде чем вы перейдете к интеграции переданного значения с вашим кодом преобразователя температуры, есть ли какие-либо потенциальные проблемы, о которых вы можете подумать в связи с этой реализацией?

Что происходит, когда вы вводите строку вместо числа? Попробуйте.

Теперь введите короткий HTML-код <marquee>BUY USELESS THINGS!!!</marquee> и нажмите Преобразовать.

В настоящее время ваше веб-приложение принимает любые входные данные, будь то число, строка или даже HTML или Код на JavaScript. Это чрезвычайно опасно, поскольку ваши пользователи могут случайно или намеренно нарушить работу вашего веб-приложения, введя определенные типы контента.

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

Экранировать вводимые пользователем данные

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

Попробуйте взломать вашу неэкранированную форму ввода, добавив в нее немного HTML-текста. Вместо того чтобы вводить число, скопируйте следующую строку HTML-кода, вставьте ее в поле ввода и нажмите Преобразовать:

<marquee><a href="https://www.realpython.com">CLICK ME</a></marquee>

Flask вставляет текст непосредственно в HTML-код, что приводит к тому, что вводимый текст интерпретируется как HTML-теги. Благодаря этому ваш браузер автоматически отображает код, как это было бы с любым другим HTML-кодом. Вместо того, чтобы отображать вводимые данные в виде текста, вам внезапно приходится иметь дело со стильной образовательной спам-ссылкой, которая попала сюда прямо из 90-х.

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

Чтобы избежать этого, вы можете использовать встроенную программу Flask escape(),, которая преобразует специальные HTML-символы <, > и & в эквивалентные представления, которые могут корректно отображаться.

Сначала вам нужно будет импортировать escape в ваш скрипт на Python, чтобы использовать эту функциональность. Затем, когда вы отправляете форму, вы можете преобразовать любые специальные HTML–символы и сделать свой ввод в форму защищенным от взлома в стиле 90-х:

from flask import Flask
from flask import request, escape

app = Flask(__name__)

@app.route("/")
def index():
    celsius = str(escape(request.args.get("celsius", "")))
    return (
        """<form action="" method="get">
                <input type="text" name="celsius">
                <input type="submit" value="Convert">
            </form>"""
        + celsius
    )

@app.route("/<int:celsius>")
def fahrenheit_from(celsius):
    """Convert Celsius to Fahrenheit degrees."""
    fahrenheit = float(celsius) * 9 / 5 + 32
    fahrenheit = round(fahrenheit, 3)  # Round to three decimal places
    return str(fahrenheit)

if __name__ == "__main__":
    app.run(host="127.0.0.1", port=8080, debug=True)

Обновите свой сервер разработки и попробуйте отправить HTML-код. Теперь он будет отображен в виде текстовой строки, которую вы ввели.

Примечание: Необходимо преобразовать экранированную последовательность обратно в Python str. В противном случае Flask также с жадностью преобразует элемент <form>, возвращаемый вашей функцией, в экранированные строки.

При создании больших веб-приложений вам не придется сталкиваться с экранированием вводимых данных, поскольку весь HTML-код будет обрабатываться с использованием шаблонов. Если вы хотите узнать об этом больше, то ознакомьтесь с Flask на примере.

После того, как вы узнаете, как собирать данные, введенные пользователем, а также как их избежать, вы, наконец, будете готовы реализовать функцию преобразования температуры и показывать пользователю температуру по Фаренгейту, эквивалентную введенной им температуре по Цельсию.

Обрабатывать вводимые пользователем данные

Поскольку в этом подходе используется только одна конечная точка URL, вы не можете полагаться на Flask для проверки ввода пользователем с помощью компонента захвата пути к URL, как вы делали ранее. Это означает, что вы захотите повторно ввести свой try ... except блок из начального fahrenheit_from() из исходного кода.

Примечание: Поскольку вы проверяете тип пользовательского ввода в fahrenheit_from(), вам не нужно реализовывать flask.escape(), и это не будет частью вашего окончательного кода. Вы можете безопасно удалить импорт escape и вернуть вызов request.args.get() в исходное состояние.

На этот раз fahrenheit_from() не будет связан с @app.route декоратором. Продолжайте и удалите эту строку кода. Вы будете вызывать fahrenheit_from() явно из index() вместо того, чтобы просить Flask выполнить его при обращении к определенной конечной точке URL.

После удаления декоратора из fahrenheit_from() и повторного введения блока try ... except, вы затем добавите условный оператор к index(), который проверяет, содержит ли глобальный объект request ключ celsius. Если это так, то вы хотите вызвать fahrenheit_from() для вычисления соответствующих градусов по Фаренгейту. Если это не так, то вместо этого вы присваиваете переменной fahrenheit пустую строку.

Это позволит вам добавить значение fahrenheit в конец вашей HTML-строки. Пустая строка не будет видна на вашей странице, но если пользователь ввел значение, то оно появится под формой.

После внесения этих окончательных изменений вы вводите код для своего приложения temperature converter Flask:

 1from flask import Flask
 2from flask import request
 3
 4app = Flask(__name__)
 5
 6@app.route("/")
 7def index():
 8    celsius = request.args.get("celsius", "")
 9    if celsius:
10        fahrenheit = fahrenheit_from(celsius)
11    else:
12        fahrenheit = ""
13    return (
14        """<form action="" method="get">
15                Celsius temperature: <input type="text" name="celsius">
16                <input type="submit" value="Convert to Fahrenheit">
17            </form>"""
18        + "Fahrenheit: "
19        + fahrenheit
20    )
21
22def fahrenheit_from(celsius):
23    """Convert Celsius to Fahrenheit degrees."""
24    try:
25        fahrenheit = float(celsius) * 9 / 5 + 32
26        fahrenheit = round(fahrenheit, 3)  # Round to three decimal places
27        return str(fahrenheit)
28    except ValueError:
29        return "invalid input"
30
31if __name__ == "__main__":
32    app.run(host="127.0.0.1", port=8080, debug=True)

Поскольку изменений было внесено довольно много, вот пошаговый обзор отредактированных строк:

Строка 2: Вы больше не используете flask.escape(), поэтому вы можете удалить его из инструкции import.
Строки 8, 11 и 12: Как и прежде, вы извлекаете отправленное пользователем значение через глобальный объект Flask request. Используя метод словаря .get(), вы гарантируете, что в случае, если ключ не найден, будет возвращена пустая строка. Это произойдет, если страница загружена изначально, а пользователь еще не отправил форму. Это реализовано в строках 11 и 12.
Строка 19: Возвращая форму с пустой строкой по умолчанию в конце, вы избегаете отображения чего-либо до отправки формы.
Строки 9 и 10: После того, как ваши пользователи введут значение и нажмут Преобразовать, та же страница загрузится снова. На этот раз request.args.get("celsius", "") находит ключ celsius и возвращает соответствующее значение. Это приводит к тому, что условный оператор вычисляется как True, а предоставленное пользователем значение передается в fahrenheit_from().
Строки с 24 по 29: fahrenheit_from() проверяет, правильно ли пользователь ввел данные. Если указанное значение может быть преобразовано в float, то функция применяет код преобразования температуры и возвращает температуру в градусах Фаренгейта. Если преобразовать его не удается, то возникает ValueError исключение, и функция возвращает строку "invalid input" вместо этого.
Строка 19: На этот раз, когда вы соединяете переменную fahrenheit с концом HTML-строки, она указывает на возвращаемое значение fahrenheit_from(). Это означает, что в ваш HTML-код будет добавлена либо преобразованная температура, либо строка сообщения об ошибке.
Строки 15 и 18: Чтобы упростить использование страницы, вы также добавляете описательные надписи Celsius temperature и Fahrenheit в эту же HTML-строку.

Ваша страница будет отображаться корректно, даже если способ добавления этих строк не соответствует действительному HTML. Это работает благодаря возможностям современных браузеров.

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

Теперь вы сможете использовать свой скрипт преобразования температуры в вашем браузере. Вы можете ввести температуру по Цельсию в поле ввода, нажать кнопку и увидеть результат преобразования по Фаренгейту на той же веб-странице. Поскольку вы используете HTTP-запрос GET по умолчанию, вы также можете увидеть, как отправленные данные отображаются в URL-адресе.

Примечание: На самом деле, вы даже можете обойти форму и указать свое собственное значение для celsius, указав соответствующий адрес, аналогично тому, как вы смогли использовать преобразование, когда вы создавали скрипт без HTML-формы.

Например, попробуйте ввести URL-адрес localhost:8080/?celsius=42 непосредственно в вашем браузере, и вы увидите, как на вашей странице появится результат преобразования температуры.

Повторно разверните готовое приложение в Google App Engine с помощью команды gcloud app deploy. После завершения развертывания перейдите по указанному URL-адресу или запустите gcloud app browse, чтобы увидеть ваше веб-приложение на Python в режиме реального времени в Интернете. Протестируйте его, добавив различные типы входных данных. Как только вы будете удовлетворены, поделитесь своей ссылкой со всем миром.

URL-адрес вашего веб-приложения для преобразования температуры по-прежнему выглядит примерно как https://hello-app-295110.ew.r.appspot.com/. Это не отражает текущую функциональность вашего приложения.

Ознакомьтесь с инструкциями по развертыванию, создайте новый проект в Google App Engine с более подходящим названием и разверните там свое приложение. Это поможет вам попрактиковаться в создании проектов и развертывании приложений Flask в Google App Engine.

На данный момент вы успешно преобразовали свой скрипт на Python в веб-приложение на Python и развернули его в Google App Engine для онлайн-хостинга. Вы можете использовать тот же процесс для преобразования других ваших скриптов на Python в веб-приложения.

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

Если вы хотите узнать больше о том, что можно сделать с Google App Engine, то вы можете прочитать о использовании статических файлов и добавлении CSS добавьте файл в ваше веб-приложение на Python, чтобы улучшить его общий внешний вид.

Размещение вашего кода в Интернете может сделать его доступным для большего числа людей через Интернет. Преобразуйте ваши любимые скрипты в приложения Flask и покажите их миру.

Заключение

В этом руководстве вы многое рассказали! Вы начали с локального скрипта на Python и превратили его в удобное, полностью развернутое приложение Flask, которое теперь размещено на Google App Engine.

Работая с этим руководством, вы узнали:

Как веб-приложения предоставляют данные через Интернет
Как реорганизовать ваш скрипт на Python, чтобы вы могли разместить его онлайн
Как создать базовое приложение Flask
Как вручную экранировать пользовательский ввод
Как внедрить ваш код в Google App Engine

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

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