Упражнение. Создание приложения
Мы будем создавать приложение в несколько этапов, на каждом из которых уделим внимание определенным концепциям. Для начала мы создадим целевую страницу приложения, на которой будет отображаться форма для заполнения пользователем.
Обычно для приложений Flask точкой входа является файл с именем app.py. Мы будем следовать этому соглашению при создании основы нашего приложения. Сейчас мы выполним следующие действия:
- создание основного приложения;
- добавление маршрута для приложения;
- создание HTML-шаблона для сайта;
- Тестирование приложения
Создание основного приложения
Переключитесь на экземпляр Visual Studio Code, который мы использовали ранее, и создайте файл с именем app.py, нажав кнопку Новый файл на вкладке Проводник.
Важно!
Если вы впервые используете Visual Studio Code для создания приложения Python, вы увидите сообщение с предложением установить расширение Python и анализатор кода pylint. Щелкните Установить для каждой из этих надстроек.
Добавление кода в приложение Flask
from flask import Flask, redirect, url_for, request, render_template, session app = Flask(__name__)
Инструкция import содержит ссылки на библиотеку Flask, которая является ядром любого приложения Flask. render_template нам потребуется чуть позже, когда мы будем оформлять вывод в формат HTML.
А app станет нашим основным приложением. Его мы применим при регистрации маршрутов на следующем шаге.
Добавление маршрута
Наше приложение будет использовать один маршрут — /. Иногда его называют маршрутом по умолчанию или индексным. Именно он будет использоваться, если пользователь укажет только имя домена или сервера.
Добавьте приведенный ниже код в конец файла app.py.
@app.route('/', methods=['GET'])
def index():
return render_template('index.html')
С помощью @app.route мы укажем маршрут, который нужно создать. Он будет иметь путь /, который является маршрутом по умолчанию. Мы указываем, что он будет использоваться для запросов GET. Если поступает запрос GET с маршрутом /, Flask автоматически вызывает объявленную непосредственно под декоратором функцию, в нашем случае это index. В тексте index мы укажем, что пользователю возвращается HTML-шаблон с именем index.html.
Создание HTML-шаблона для формы
Механизм создания шаблонов Jinja, используемый платформой Flask, посвящен в первую очередь работе с HTML. Это позволяет нам применить все имеющиеся навыки и средства HTML. Для создания страницы мы применим Bootstrap, чтобы она выглядела привлекательно. С помощью Bootstrap мы будем использовать в HTML несколько классов CSS. Если вы еще не работали с Bootstrap, можете игнорировать эти классы и работать только с кодом HTML (где реализованы все основные возможности).
Важно!
HTML (язык гипертекстовой разметки) — это стандартный язык разметки, используемый для создания веб-страниц. HTML состоит из ряда тегов и атрибутов для создания заголовков, абзацев, списков, изображений, ссылок и других элементов, составляющих веб-страницу. Когда пользователь запрашивает веб-страницу, браузер считывает HTML-код и отображает его в виде визуальной веб-страницы, с которым пользователь может взаимодействовать. Дополнительные сведения о HTML см. в статье "Основы HTML".
Шаблоны для Flask следует создавать в папке с именем templates, что вполне логично. Давайте создадим эту папку, а затем обязательный файл с кодом HTML.
Создайте новую папку с именем templates с помощью действия Новая папка в средстве Проводник из Visual Studio Code.
Выберите только что созданную папку templates и щелкните Новый файл, чтобы добавить файл в эту папку.
Присвойте этому файлу имя index.html.
Добавьте в него следующий код HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous"> <title>Translator</title> </head> <body> <div class="container"> <h1>Translation service</h1> <div>Enter the text you wish to translate, choose the language, and click Translate!</div> <div> <form method="POST"> <div class="form-group"> <textarea name="text" cols="20" rows="10" class="form-control"></textarea> </div> <div class="form-group"> <label for="language">Language:</label> <select name="language" class="form-control"> <option value="en">English</option> <option value="it">Italian</option> <option value="ja">Japanese</option> <option value="ru">Russian</option> <option value="de">German</option> </select> </div> <div> <button type="submit" class="btn btn-success">Translate!</button> </div> </form> </div> </div> </body> </html>
В приведенном выше коде HTML определяются следующие компоненты: textarea для текста, который пользователю нужно перевести, и раскрывающийся список select, в котором пользователь может выбрать целевой язык. Если вы хотите добавить дополнительные языки, изучите возможные варианты в списке поддерживаемых языков. Задайте для атрибута value код языка, например pl для польского языка.
Тестирование приложения
Итак, создание начального сайта завершено и нам пора протестировать его. Чтобы немного упростить процесс, мы будем использовать встроенный терминал Visual Studio Code.
Откройте встроенный терминал, нажав клавиши CTRL+` (или CMD+` на компьютере Mac)
Выполните следующую команду, чтобы настроить для среды выполнения Flask режим разработки. Это означает, что сервер будет автоматически перезагружаться при каждом изменении.
# Windows set FLASK_ENV=development # Linux/macOS export FLASK_ENV=developmentЗапуск приложения
flask runОткройте приложение, перейдя в браузере по адресу http://localhost:5000.
Вы увидите форму для ввода данных. Поздравляем!