flask с нуля на практике
Создание веб-приложения с помощью Flask в Python 3
Published on May 13, 2020
Автор выбрал фонд Free and Open Source Fund для получения пожертвования в рамках программы Write for DOnations.
Введение
Flask — это небольшой и легкий веб-фреймворк, написанный на языке Python, предлагающий полезные инструменты и функции для облегчения процесса создания веб-приложений с использованием Python. Он обеспечивает гибкость и является более доступным фреймворком для новых разработчиков, так как позволяет создать веб-приложение быстро, используя только один файл Python. Flask — это расширяемая система, которая не обязывает использовать конкретную структуру директорий и не требует сложного шаблонного кода перед началом использования.
В рамках этого обучающего руководства вы будете использовать инструментарий Bootstrap, чтобы сделать ваше приложение визуально привлекательным. Bootstrap поможет вам включить в ваше веб-приложение быстрые веб-страницы, чтобы приложение можно было использовать на мобильных браузерах без написания для этого собственных кодов HTML, CSS и JavaScript. Инструментарий дает возможность изучить работу Flask.
Flask использует механизм шаблонов Jinja для динамического создания HTML-страниц с использованием знакомых понятий в Python, таких как переменные, циклы, списки и т. д. Вы будете использовать эти шаблоны в рамках этого проекта.
С помощью этого обучающего руководства вы создадите небольшой веб-блог с использованием Flask и SQLite в Python 3. Пользователи приложения могут видеть все посты в вашей базе данных и нажимать на заголовки постов для просмотра их содержания. Кроме того, присутствует возможность добавлять новый пост в базу данных и редактировать или удалять существующий пост.
Предварительные требования
Перед началом выполнения этого руководства вам потребуется:
Шаг 1 — Установка Flask
Если вы еще не активировали среду программирования, убедитесь, что находитесь в директории проекта ( flask_blog ), и с помощью следующей команды активируйте среду:
Данный префикс служит индикатором того, что среда env активна (имя среды может быть другим, в зависимости от того, как вы назвали ее при создании).
Примечание. Вы можете использовать Git, систему контроля версий, для эффективного управления и отслеживания процесса разработки вашего проекта. О том, как использовать Git, вы можете узнать из нашей статьи Введение в Git: установка, использование и ответвления.
Чтобы установить Flask, запустите следующую команду:
После завершения установки запустите следующую команду, чтобы подтвердить установку:
В результате вы увидите номер версии, который будет выглядеть примерно так:
Вы создали папку проекта, виртуальную среду и установили Flask. Теперь вы готовы переходить к настройке базового приложения.
Шаг 2 — Создание базового приложения
Теперь, когда вы настроили среду программирования, можно начинать использовать Flask. На этом этапе вы создадите небольшое веб-приложение внутри файла Python и запустите его для начала работы сервера, который отобразит определенную информацию в браузере.
В директории flask_blog откройте файл с именем hello.py для редактирования. Используйте nano или любой другой текстовый редактор:
Этот файл hello.py будет служить минимальным примером того, как обрабатывать запросы HTTP. Внутри него импортируйте объект Flask и создайте функцию, которая возвращает ответ HTTP. Напишите следующий код внутри файла hello.py :
Функция просмотра hello() возвращает строку ‘Hello, World!’ в качестве ответа.
Сохраните и закройте файл.
Для запуска вашего веб-приложения сначала укажите Flask, где искать приложение (в вашем случае файл hello.py ) с помощью переменной среды FLASK_APP :
Затем запустите его в режиме разработки с помощью переменной среды FLASK_ENV :
И наконец, запустите приложение, используя команду flask run :
После запуска приложения вы увидите примерно следующее:
В предыдущем выводе представлена следующая информация:
Откройте браузер и введите URL http://127.0.0.1:5000/ . Вы получите строку Hello, World! в качестве ответа. Это подтверждает то, что ваше приложение успешно работает.
Внимание. Flask использует простой веб-сервер для обслуживания нашего приложения в среде разработки, что также означает, что отладчик Flask работает для облегчения работы по обнаружению ошибок. Этот сервер для разработки не должен использоваться при развертывании в производственной среде. Дополнительную информацию можно найти в документации Flask на странице Опции развертывания или в обучающем руководстве по развертыванию Flask.
Теперь у вас есть небольшое веб-приложение Flask. Вы запустили ваше приложение и вывели информацию в браузере. Далее вы будете использовать файлы HTML в вашем приложении.
Шаг 3 — Использование шаблонов HTML
Сейчас ваше приложение отображает только простое сообщение без какого-либо HTML. Веб-приложения в основном используют HTML для отображения информации для посетителя, поэтому теперь вы можете заняться включением в ваше приложение файлов HTML, которые можно отобразить в браузере.
На этом этапе вы создадите свое основное приложение Flask в новом файле.
Функция просмотра index() возвращает результат вызова render_template() с index.html в качестве аргумента. Это дает указание render_template() искать файл с именем index.html в папке шаблонов. И папка, и файл еще отсутствуют. Вы получите сообщение об ошибке, если запустите приложение на этом этапе. Тем не менее при запуске вы уже будете знать об этой часто встречающейся ошибке. Затем вы сможете исправить ошибку, создав необходимые папку и файл.
Сохраните и закройте файл.
Если вы нажмете на эту строку, отладчик откроет код, и у вас будет дополнительный контекст для понимания и решения проблемы.
После этого добавьте следующий код HTML внутри index.html :
Сохраните файл и используйте свой браузер для перехода на http://127.0.0.1:5000/ или обновите страницу. Теперь браузер должен отобразить текст Welcome to FlaskBlog в теге
Помимо папки templates веб-приложения Flask также обычно имеют папку static для хостинга статичных файлов, таких как файлы CSS, файлы JavaScript и изображения, которые использует приложение.
После этого откройте файл style.css в директории css для редактирования:
Добавьте следующее правило CSS в файл style.css :
Код CSS добавит границу, изменит цвет на коричневый, выравняет текст по центру и добавит небольшое дополнение к меткам
Сохраните и закройте файл.
Далее откройте файл шаблона index.html для редактирования:
Добавьте ссылку в файл style.css внутри раздела файла шаблона index.html :
Для этого вы используете вспомогательную функцию url_for() для генерирования подходящего расположения файла. Первый аргумент указывает, что вы связаны со статичным файлом, а второй — это путь файла внутри статичной директории.
Сохраните и закройте файл.
После обновления страницы индекса вашего приложения вы увидите, что цвет текста Welcome to FlaskBlog теперь коричневый, расположен по центру и добавлен внутри границы.
Используйте язык CSS для оформления стиля приложения и придавайте ему более привлекательный вид с помощью своего собственного дизайна. Однако, если вы не веб-дизайнер или не знакомы с CSS, воспользуйтесь инструментарием Bootstrap, который предлагает простые в использовании компоненты для оформления приложения. В данном проекте мы будем использовать Bootstrap.
Для создания базового шаблона сначала необходимо создать файл с именем base.html внутри директории templates :
Введите следующий код в шаблоне base.html :
Сохраните и закройте файл после редактирования.
Мега-Учебник Flask, Часть 1: «Привет, Мир!»
Это первая статья в серии, где я буду документировать мой опыт написания веб-приложения на Python, используя микрофреймворк Flask.
Моя предыстория
Приложение
Приложение, которое я собираюсь разрабатывать как часть этого руководства, является сервером микроблогов, и я решил назвать его microblog. Довольно креативно, я знаю.
Во время нашего прогресса я затрону следующие темы:
Как видите, я весьма значительно берусь за все это. Надеюсь, что это приложение, когда я его закончу, станет чем-то вроде шаблона для написания других веб-приложений.
Требования
Если ваш компьютер поддерживает Python 2.6/2.7, то все, вероятно, пойдет хорошо. Приложение из руководства должно нормально работать на Windows, OS X и Linux.
Это руководство подразумевает, что вы знакомы с окном терминала (командной консолью в случае Windows), и вы знаете основные команды для работы с файлами вашей ОС. Если это не так, то перед тем как продолжить, я рекомендую вам ознакомиться с тем, как создавать директории, копировать файлы и т.д., используя консоль.
Наконец, вы должны чувствовать себя свободно в написании кода на Python. Знакомство с модулями и пакетами этого языка также не помешает.
Установка Flask
Ну что ж, приступим!
Если у вас еще не установлен Python 2.7, то берем его отсюда.
Теперь нам нужно установить Flask и несколько расширений, которые мы будем использовать. Я предпочитаю создание виртуального окружения, где все это будет установлено таким образом, что ваша основная установка Python затронута не будет. В качестве бонуса, вам не нужен будет root доступ для установки таким способом.
Далее скачиваем virtualenv.py и кладем его внутрь новой папки.
Чтобы создать новое окружение введите следующую команду:
Эта команда создаст полноценное окружение Python внутри папки flask
Виртуальные окружения могут быть активированы и деактивированы по желанию. Активированное окружение добавляет путь своей папки bin в path системы, например, когда вы вызываете интерпретатор python, то получаете версию текущего окружения, а не системную. Лично я никогда не любил это свойство, поэтому ни разу не активировал ни одно из моих окружений, вместо этого я просто вызывал тот интерпретатор, который хотел, печатая его путь.
Прим. пер.: Перед тем как вы начнете вводить команды, хочу отметить, что в комментариях к девятой части отметится баг в flask-whooshalchemy, исправленную версию можнонужно скачать отсюда (репозиторий автора)
Если вы пользователь Linux, OS x или Cygwin, установите flask и расширения, вводя следующие команды одну за одной:
Я не буду вдаваться в подробности, поэтому если вы хотите узнать больше, прочтите документацию к flask-mail.
«Hello, World!» в Flask
Давайте начнем с создания простого скрипта инициализации нашего пакета app (файл app/__init__.py )
Скрипт выше просто создает объект приложения (наследуя Flask ), затем импортирует модуль представлений, который мы еще не написали.
Представления — это обработчики, которые отвечают на запросы веб-браузера. Представления в Flask пишутся как Python функции. Каждая функция представления сопоставляется с одним или несколькими запросами URL.
Напишем нашу первую функцию представления (файл app/views.py )
Это весьма простое представление, которое просто возвращает строку для отображения в пользовательском браузере. Два декоратора route создают привязку адресов / и /index к этой функции.
Последним шагом для получения полностью работающего веб-приложения будет создание скрипта, который стартует веб-сервер нашего приложения. Давайте назовем скрипт run.py и положим его в корневой каталог ( microblog/ ):
Для запуска вашего приложения просто запустите скрипт. На OS X, Linux и Cygwin вам следует пометить файл исполняемым перед тем как вы сможете его запустить.
Тогда скрипт может быть вызван просто:
В Windows процесс немного отличается. Нет необходимости помечать файл исполняемым. Вместо этого вам нужно запустить скрипт как аргумент интерпретатора Python:
После старта сервер будет прослушивать порт 5000, ожидая соединений. Теперь откроем браузер и введем следующий URL в адресную строку:
Или же вы можете использовать эту ссылку:
Когда вы закончите играть с сервером вы можете просто нажать Ctrl-C, чтобы остановить его.
И этим я хочу закончить первую часть этого руководства.
Те из вас, кто поленился печатать, могут скачать код из этого руководства ниже:
Обратите внимание, что вам нужно установить Flask, чтобы запустить приложение из архива выше.
Что дальше
В следующей части серии мы изменим наше маленькое приложение для использования HTML шаблонов.
Flask – полное руководство
Оглавление 1 часть. Настройка проекта Настройка Heroku Постановочный / производственный процесс Настройки конфигурации Локальные настройки Настройки Heroku Вывод 2 часть….
Добро пожаловать! Сегодня мы собираемся приступить к созданию приложения Flask, которое вычисляет пары частотности слов на основе текста из заданного URL. Это полное руководство.
Полный код находится в репозитории
1 часть. Настройка проекта
Мы начнем с простого приложения Hello World на Heroku с промежуточной (или предпроизводственной) и производственной средами. Для первоначальной настройки вы должны иметь некоторое представление о следующих инструментах:
Сперва, давайте настроим рабочий каталог:
Инициализируйте новое репозиторий git в своем рабочем каталоге:
Настройте виртуальную среду для использования в нашем приложении:
Теперь вы должны увидеть (env) слева от приглашения в терминале, указывая, что теперь вы работаете в виртуальной среде.
Далее мы собираемся создать нашу базовую структуру для нашего приложения. Добавьте следующие файлы в папку «flask-by-example»:
Это даст вам следующую структуру:
Обязательно обновите файл .gitignore из репозитория.
Добавляем установленные библиотеки в наш файл requirements.txt:
Откройте app.py в своем любимом редакторе и добавьте следующий код:
Далее мы собираемся настроить наши среды Heroku как для производственного, так и для тестового приложения.
Настройка Heroku
После этого создайте Procfile в корневом каталоге вашего проекта:
Добавьте следующую строку в ваш вновь созданный файл
Нам также необходимо указать версию Python, чтобы Heroku использовал правильную среду выполнения Python для запуска нашего приложения. Просто создайте файл с именем runtime.txt со следующим кодом:
Зафиксируйте свои изменения в git (и, возможно, отправьте их на Github), затем создайте два новых приложения Heroku.
Один для производства:
И еще один для постановки:
Эти имена теперь заняты, поэтому вам нужно сделать свое имя приложения Heroku уникальным.
Добавьте свои новые приложения в свой git. Обязательно назовите один удаленный pro (для «production»), а другой stage (для «staging»):
Теперь мы можем отправить оба наших приложения в Heroku.
После того, как оба они были отправлены, откройте URL-адреса в своем веб-браузере, и, если все прошло хорошо, вы должны увидеть свое приложение в обеих средах.
Постановочный/производственный процесс
Давайте внесем изменения в наше приложение и продвинемся только до стадии:
Запустите приложение локально, чтобы убедиться, что все работает – python app.py
Теперь, если вы перейдете в промежуточную среду, вы сможете использовать новый URL-адрес, то есть «/mike», и получить «Hello NAME» в зависимости от того, что вы поместили в URL-адрес в качестве вывода в браузере. Однако, если вы попробуете то же самое на производственном сайте, вы получите ошибку. Таким образом, мы можем создавать вещи и тестировать их в тестовой среде, а затем, когда мы будем довольны изменениями, мы можем запустить их в производство.
Теперь, когда мы довольны этим, давайте перейдем к рабочей версии нашего сайта – git push pro master
Теперь у нас есть такая же функциональность на нашем рабочем сайте.
Этот рабочий процесс подготовки/производства позволяет нам вносить изменения, показывать вещи клиентам, экспериментировать и т. д. – и все это на изолированном сервере, не вызывая каких-либо изменений на действующем производственном сайте, который, в общем, используется пользователями
Настройки конфигурации
Последнее, что мы собираемся сделать, это настроить разные среды конфигурации для нашего приложения. Часто есть вещи, которые будут отличаться в ваших локальных, промежуточных и производственных установках. Вам нужно подключиться к разным базам данных, иметь разные ключи AWS и т. д. Давайте создадим файл конфигурации для работы с разными средами.
Добавьте файл config.py в корень вашего проекта:
В нашем файле конфигурации мы собираемся кое-что позаимствовать из того, как настраивается конфигурация Django. У нас будет базовый класс конфигурации, от которого наследуются другие классы конфигурации. Затем мы импортируем соответствующий класс конфигурации по мере необходимости.
Добавьте следующее в ваш вновь созданный файл config.py :
Локальные настройки
Теперь, если вы переместите каталог вверх, а затем снова войдете в него cd, виртуальная среда будет автоматически запущена и будет объявлена переменная APP_SETTINGS.
Настройки Heroku
Точно так же мы собираемся установить переменные среды на Heroku.
Для staging выполните следующую команду
Чтобы убедиться, что мы используем правильную среду, измените app.py:
Зафиксируйте и отправьте изменения как в промежуточную, так и в рабочую среду (и Github, если он у вас настроен).
Хотите проверить переменные среды, чтобы убедиться, что она определяет правильную среду (проверка работоспособности!)? Добавьте оператор печати в app.py:
Теперь, когда вы запустите приложение, оно покажет, какие настройки конфигурации оно импортирует:
Local:
Зафиксируйте и снова подтолкните к staging и production. А теперь давайте проверим …
Staging:
Production:
Обязательно удалите print (os.environ [‘APP_SETTINGS’]), когда закончите, зафиксируйте и отправьте обратно в различные среды.
Вывод первой части
Завершив настройку, мы приступим к созданию функции подсчета слов в этом приложении. Попутно мы добавим очередь задач для настройки фоновой обработки части подсчета слов, а также углубимся в нашу настройку Heroku, настроив конфигурацию и миграции для нашей базы данных, которую мы будем использовать для хранения наши результаты подсчета слов.
2 часть. Настройка Postgres, SQLAlchemy и Alembic
В этой части мы собираемся настроить базу данных Postgres для хранения результатов подсчета слов, а также SQLAlchemy, Object Relational Mapper и Alembic для обработки миграции базы данных.
Установка всего необходимого
Инструменты, используемые в этой части:
Для начала установите Postgres на свой локальный компьютер, если у вас его еще нет. Поскольку Heroku использует Postgres, нам будет хорошо разрабатывать локально в той же базе данных. Если у вас не установлен Postgres, Postgres.app – это простой способ начать работу для пользователей Mac OS X. Посетите страницу загрузки для получения дополнительной информации.
Чтобы использовать нашу недавно созданную базу данных в приложении Flask, нам нужно установить несколько вещей:
Обновление конфигурации
Добавьте поле SQLALCHEMY_DATABASE_URI в класс Config() в файле config.py, чтобы настроить приложение для использования вновь созданной базы данных при разработке (локальной), промежуточной и производственной:
Ваш файл config.py теперь должен выглядеть так:
Теперь, когда наша конфигурация загружается в наше приложение, к ней также будет подключена соответствующая база данных.
Подобно тому, как мы добавляли переменную среды в предыдущем посте, мы собираемся добавить переменную DATABASE_URL. Запустите это в терминале:
В вашем файле app.py импортируйте SQLAlchemy и подключитесь к базе данных:
Модель данных
Настройте базовую модель, добавив файл models.py:
Здесь мы создали таблицу для хранения результатов подсчета слов.
Сначала мы импортируем соединение с базой данных, созданное в нашем файле app.py, а также JSON из диалектов PostgreSQL SQLAlchemy. Столбцы JSON довольно новы для Postgres и доступны не во всех базах данных, поддерживаемых SQLAlchemy, поэтому нам нужно импортировать их специально.
Затем мы создали класс Result () и присвоили ему имя таблицы результатов. Затем мы устанавливаем атрибуты, которые хотим сохранить для результата –
Локальная миграция
Примечание: Flask-Migrate использует новый инструмент CLI Flasks. Однако в этой статье используется интерфейс, предоставляемый Flask-Script, который ранее использовался Flask-Migrate. Чтобы использовать его, вам необходимо установить его через:
Создайте новый файл с именем manage.py:
Во-первых, мы настраиваем нашу конфигурацию так, чтобы наша среда – на основе переменной среды – создавала экземпляр migrate с app и db в качестве аргументов и настраивала команду менеджера для инициализации экземпляра Manager для нашего приложения. Наконец, мы добавили в manager команду db, чтобы мы могли запускать миграции из командной строки.
Для запуска миграции инициализируйте Alembic:
После запуска инициализации базы данных вы увидите в проекте новую папку с именем «migrations». Это содержит настройку, необходимую Alembic для выполнения миграций проекта. Вы увидите, что внутри «миграции» есть папка «версии», в которой будут храниться сценарии миграции по мере их создания.
Давайте создадим нашу первую миграцию, выполнив команду migrate.
Теперь вы заметите, что в папке «версии» есть файл миграции. Этот файл автоматически создается Alembic на основе модели. Вы можете создать (или отредактировать) этот файл самостоятельно; однако в большинстве случаев подойдет автоматически созданный файл.
Теперь мы применим обновления к базе данных с помощью команды db upgrade:
База данных теперь готова для использования в нашем приложении:
Удаленная миграция
Наконец, давайте применим миграции к базам данных на Heroku. Однако сначала нам нужно добавить детали промежуточной и производственной баз данных в файл config.py.
Чтобы проверить, настроена ли у нас база данных на промежуточном сервере, запустите:
Обязательно замените wordcount-stage названием вашего промежуточного приложения.
Поскольку мы не видим переменную среды базы данных, нам нужно добавить надстройку Postgres на промежуточный сервер. Для этого выполните следующую команду:
Теперь, когда мы снова запускаем heroku config –app wordcount-stage, мы должны увидеть настройки подключения для базы данных:
Затем нам нужно зафиксировать изменения, которые вы внесли в git, и отправить на промежуточный сервер:
Запустите миграции, которые мы создали для миграции нашей промежуточной базы данных, с помощью команды heroku run :
Обратите внимание на то, что мы выполнили только обновление, а не команды init или migrate, как раньше. Наш файл миграции уже настроен и готов к работе; нам просто нужно применить его к базе данных Heroku.
А теперь сделаем то же самое с производством.
Теперь и на нашем промежуточном, и на производственном сайтах базы данных настроены, они перенесены – и готовы к работе!
Когда вы применяете новую миграцию к производственной базе данных, может возникнуть время простоя. Если это проблема, вы можете настроить репликацию базы данных, добавив «подчиненную» (обычно известную как подчиненную) базу данных. Подробнее об этом читайте в официальной документации Heroku
Вывод второй части
Конец второй части. В части 3 мы собираемся создать функцию подсчета слов и отправить ее в очередь задач, чтобы иметь дело с более длительной обработкой подсчета слов.
3 часть. Обработка текста с помощью запросов, BeautifulSoup и NLTK
В этой части серии мы собираемся очистить содержимое веб-страницы, а затем обработать текст для отображения количества слов.
Установка всего необходимого
Перейдите в каталог проекта, чтобы активировать виртуальную среду через autoenv, а затем установите требования:
Рефакторинг Index Route
Для начала давайте избавимся от части “hello world” в Index Route в нашем файле app.py и настроим Route для отображения формы для приема URL-адресов. Сначала добавьте папку шаблонов для хранения наших шаблонов и добавьте в нее файл index.html.
Настройте очень простую HTML-страницу:
Мы использовали Bootstrap, чтобы добавить немного стиля, чтобы наша страница не выглядела полностью отвратительной. Затем мы добавили форму с полем ввода текста, в которое пользователи могут вводить URL. Кроме того, мы использовали цикл Jinja for для перебора списка ошибок, отображая каждую из них.
Обновите app.py для обслуживания шаблона:
Запустите приложение, чтобы проверить его:
Requests
Измените свой индексный маршрут следующим образом:
Не забудьте также обновить импорт:
Давайте проверим это:
Вы должны иметь возможность ввести действительную веб-страницу, и в терминале вы увидите текст возвращенной страницы.
Примечание. Убедитесь, что ваш URL-адрес включает http:// или https://. В противном случае наше приложение не обнаружит, что это действительный URL.
Обработка текста
Имея в руках HTML-код, давайте посчитаем частоту слов, которые появляются на странице, и покажем их конечному пользователю. Обновите свой код в app.py до следующего, и мы рассмотрим, что происходит:
Создайте новый файл с именем stop_words.py и добавьте следующий список:
Что творится?
Обработка текста
Затем перейдите на вкладку «Модели» и выберите «пункт» в столбце «Идентификатор». Нажмите «Загрузить». Дополнительную информацию можно найти в официальной документации.
Удаление знаков препинания, подсчет необработанных слов
Стоп-слова
Наш текущий вывод содержит множество слов, которые мы, вероятно, не хотим считать, например, «я», «меня», «тот» и так далее. Это так называемые стоп-слова.
Сохраните результаты
Наконец, мы использовали try/except для сохранения результатов поиска и последующих подсчетов в базе данных.
Показать результаты
Давайте обновим index.html, чтобы отобразить результаты:
Здесь мы добавили оператор if, чтобы увидеть, есть ли что-нибудь в нашем словаре результатов, а затем добавили цикл for для перебора результатов и отображения их в таблице. Запустите приложение, и вы должны иметь возможность ввести URL-адрес и вернуть количество слов на странице.
Что, если бы мы хотели отображать только первые десять ключевых слов?
Cводка
Хорошо, отлично. Имея URL-адрес, мы можем подсчитать количество слов на странице. Если вы используете сайт без большого количества слов, например https://realpython.com, обработка должна происходить довольно быстро. Но что будет, если на сайте много слов? Например, попробуйте https://gutenberg.ca. Вы заметите, что это занимает больше времени.
Если у вас есть несколько пользователей, которые одновременно заходят на ваш сайт, чтобы узнать количество слов, и некоторые из них пытаются подсчитать более крупные страницы, это может стать проблемой. Или, возможно, вы решите изменить функциональность, чтобы, когда пользователь вводит URL-адрес, мы рекурсивно очищали весь веб-сайт и вычисляли частоту слов на основе каждой отдельной страницы. При достаточном трафике это значительно замедлит работу сайта.
Вместо того, чтобы подсчитывать слова после того, как каждый пользователь делает запрос, нам нужно использовать очередь для обработки этого запроса в бэкэнде – именно с этого места мы начнем в следующий раз в Части 4.
На данный момент зафиксируйте свой код, но перед тем, как перейти к Heroku, вы должны удалить все языковые токенизаторы, кроме английского, вместе с zip-файлом. Это значительно уменьшит размер коммита. Однако имейте в виду, что если вы обрабатываете неанглийский сайт, он будет обрабатывать только английские слова.
Передайте его только в промежуточную среду, поскольку эта новая функция обработки текста завершена только наполовину:
Проверьте это на постановке.
Часть 5. Интеграция Flask и Angular
Добро пожаловать. С настройкой очереди задач Redis давайте воспользуемся AngularJS для опроса серверной части, чтобы увидеть, завершена ли задача, а затем обновим DOM, как только данные станут доступны.
Готовы? Давайте начнем с рассмотрения текущего состояния нашего приложения…
Текущая функциональность
Сначала запустите Redis в одном окне терминала:
В другом окне перейдите в каталог вашего проекта и запустите worker:
Наконец, откройте третье окно терминала, перейдите в каталог своего проекта и запустите основное приложение:
Откройте http: // localhost: 5000 / и проверьте URL-адрес https://realpython.com. В терминале должен быть выведен идентификатор задания. Возьмите идентификатор и перейдите по этому URL-адресу:
Вы должны увидеть аналогичный ответ JSON в своем браузере:
Теперь мы готовы добавить Angular.
Обновление index.html
Добавьте Angular в index.html:
Добавьте следующие директивы в index.html:
Frequencies
Во-вторых, обновите обработчик успеха в функции poller() :
Проверьте это. Если все прошло хорошо, вы должны увидеть объект в DOM. Не очень красиво, но это легко исправить с помощью Bootstrap: добавьте следующий код под div с id=results и удалите теги <% raw %>и <% endraw %>, которые обертывали div результатов из приведенного выше кода:
Заключение пятой части и дальнейшие шаги
Прежде чем перейти к построению графиков с помощью D3, нам все еще необходимо:
Часть 6. Обновление промежуточной среды
В этой части мы настроим Redis на Heroku и посмотрим, как запустить и веб-процесс, и рабочий процесс на одном динамометрическом стенде, обновляя промежуточную среду функцией подсчета слов.
Тестовый Push
Начните с pushing кода в его текущем состоянии и посмотрите, что нужно исправить:
Обязательно замените wordcount-stage названием вашего приложения.
Попробуйте выполнить быстрый тест, чтобы проверить, работает ли функция подсчета слов. Ничего не должно происходить. Зачем?
Что ж, если вы откроете вкладку «Сеть» в «Инструментах разработчика Chrome», вы увидите, что почтовый запрос к конечной точке /start вернул код состояния 500 (внутренняя ошибка сервера):
Подумайте о том, как мы запускали это приложение локально: мы запускали рабочий процесс и сервер Redis вместе с сервером разработки Flask. То же самое должно произойти и на Heroku.
Redis
Начните с добавления Redis в промежуточное приложение:
Вы можете проверить, установлен ли REDISTOGO_URL как переменная среды, с помощью следующей команды:
Нам нужно убедиться, что мы связываемся с Redis URI в нашем коде, который на самом деле уже настроен. Откройте worker.py и найдите этот код:
Здесь мы сначала попытались использовать URI, связанный с переменной окружения REDISTOGO_URL. И если эта переменная не существует (например, в нашей локальной среде), мы использовали URI redis://localhost:6379. Отлично.
Обязательно ознакомьтесь с официальной документацией Heroku, чтобы узнать больше о работе с Redis.
После установки Redis нам просто нужно запустить рабочий процесс.
Worker
Heroku позволяет запускать один бесплатный дино. И вы должны запускать один процесс на каждом динамометрическом стенде. В нашем случае веб-процесс должен работать на одном динамометрическом стенде, а рабочий процесс – на другом. Однако, поскольку мы работаем над небольшим проектом, есть обходной путь, который мы можем использовать для запуска обоих процессов на одном динамометрическом стенде. Имейте в виду, что этот метод не рекомендуется для крупных проектов, поскольку процессы не будут правильно масштабироваться при увеличении трафика.
Сначала добавьте в корневой каталог сценарий bash с именем heroku.sh:
Затем обновите Procfile следующим образом:
Теперь и web (демонизированный, в фоновом режиме), и worker (на переднем плане) процессы выполняются под веб-процессом в Procfile.
Обратите внимание, что на Heroku есть и другие способы бесплатно запустить веб и рабочий процесс. Мы рассмотрим альтернативный метод в следующей публикации (если будет интерес).
Давайте проверим это локально, прежде чем отправлять на промежуточный сервер. В новом окне терминала запустите сервер Redis – redis-server. Затем запустите heroku local:
Перейдите по адресу http://localhost:5000/ и протестируйте приложение. Он должен работать.
Зафиксируйте свои изменения, а затем отправьте в Heroku. Проверьте это.
Вывод шестой части
Домашнее задание! Хотя у нас есть еще много дел, приложение действительно работает – так что давайте сделаем итерацию, чтобы мир увидел. Обновите производственную среду, используя тот же рабочий процесс.
Часть 7. Обновление пользовательского интерфейса
В этой части руководства мы будем работать над пользовательским интерфейсом, чтобы сделать его более удобным для пользователя.
Давайте посмотрим на текущий пользовательский интерфейс…
Текущий пользовательский интерфейс
Запустите Redis в окне терминала:
Затем запустите своего рабочего в другом окне:
Наконец, в третьем окне запустите приложение:
Протестируйте приложение, чтобы убедиться, что оно по-прежнему работает. Вы должны увидеть что-то вроде:
Внесем некоторые изменения.
Смена кнопки
Измените кнопку в HTML на следующее:
Мы добавили директиву ng-disabled и прикрепили ее к загрузке. Это отключит кнопку, когда загрузка будет истинной. Затем мы добавили переменную submitButtonText для отображения пользователю. Таким образом, мы сможем изменить текст с «Отправить» на «Загрузка …», чтобы пользователь знал, что происходит.
Затем мы заключили кнопку в <% raw%>и <% endraw%>, чтобы Jinja знал, что это необработанный HTML. Если мы этого не сделаем, Flask попытается оценить <
Сопутствующий JavaScript довольно прост.
Вверху WordcountController в main.js добавьте следующий код:
Это устанавливает начальное значение загрузки равным false, чтобы кнопка не была отключена. Он также инициализировал текст кнопки как «Отправить».
Измените вызов POST на:
Мы добавили три строки, которые устанавливают…
Затем обновите функцию опроса:
Когда результат успешен, мы снова устанавливаем для загрузки значение false, чтобы кнопка снова была включена, и меняем текст кнопки обратно на «Отправить», чтобы пользователь знал, что он может отправить новый URL.
Добавление счетчика
Затем давайте добавим счетчик под секцией подсчета слов, чтобы пользователь знал, что происходит. Это достигается путем добавления анимированного gif под div результатов, как показано ниже:
Обязательно возьмите spinner.gif из репозитория.
Вы можете видеть, что ng-show прикрепляется к загрузке точно так же, как и кнопка. Таким образом, когда для загрузки установлено значение true, отображается гифка счетчика. Если для загрузки установлено значение false – например, когда процесс подсчета слов завершается – счетчик исчезает.
Работа с ошибками
Наконец, мы хотим разобраться в случае, когда пользователь отправляет неверный URL-адрес. Начните с добавления следующего HTML-кода под формой:
При этом используется класс предупреждений Bootstrap для отображения диалогового окна с предупреждением, если пользователь отправляет неверный URL. Мы использовали директиву Angular ng-show, чтобы отображать диалог только тогда, когда urlerror истинно.
Отловите ошибки в функции опроса:
Это зарегистрировало ошибку в консоли, изменило загрузку на false, снова установило текст кнопки отправки на «Отправить», чтобы пользователь мог попробовать отправить еще раз, и изменил urlerror на true, чтобы появилось предупреждение.
Наконец, в функции успеха для вызова POST для ‘/start’ установите для urlerror значение false:
Теперь диалоговое окно с предупреждением исчезнет, когда пользователь попытается отправить новый URL-адрес.
При этом мы немного очистили пользовательский интерфейс, чтобы пользователь знал, что происходит, пока мы негласно запускаем функцию подсчета слов. Проверьте это!
Вывод седьмой части
Что еще вы могли бы добавить или изменить, чтобы улучшить взаимодействие с пользователем? Внесите изменения самостоятельно или оставьте комментарии ниже. По завершении обязательно обновите как тестовую, так и производственную среду.
Пользовательская Angular директива с D3
Добро пожаловать. Настроив Angular вместе с индикатором загрузки и нашим переработанным контроллером Angular, давайте перейдем к последней части и создадим настраиваемую директиву Angular для отображения диаграммы распределения частот с помощью JavaScript и библиотеки D3.
Давайте посмотрим, что у нас сейчас есть …
Текущий пользовательский интерфейс
Запустите Redis в окне терминала:
Затем запустите своего рабочего процесса в другом окне:
Наконец, в третьем окне запустите приложение:
Вы должны увидеть, что ваш счетчик слов работает. Теперь мы можем добавить настраиваемую директиву Angular для отображения результатов на диаграмме D3.
Angular директива
Начните с добавления библиотеки D3 (v3) в файл index.html:
Теперь давайте создадим новую специальную директиву.
Angular директивы – это маркеры на элементе DOM, которые позволяют нам вставлять разделы HTML с определенными событиями и прикрепленными к ним атрибутами. Давайте создадим первую часть нашей Директивы, добавив следующий код чуть ниже контроллера в main.js:
restrict: «E» создает директиву, которая ограничена элементом HTML. replace: true просто заменяет директиву HTML на HTML в шаблоне. Функция ссылки дает нам доступ к переменным в области, определенной в контроллере.
Затем добавьте функцию отслеживания, чтобы «следить» за любыми изменениями переменных и реагировать соответствующим образом. Добавьте это в функцию ссылки следующим образом:
Наконец, добавьте директиву чуть ниже закрывающего разделителя в
Установив Директиву, давайте обратим наше внимание на библиотеку D3…
Гистограмма D3
D3 – это мощная библиотека, которая использует HTML, CSS и SVG для отображения данных в DOM и JavaScript, чтобы сделать их интерактивными. Мы будем использовать его для создания базовой гистограммы.
Шаг 1. Функциональная логика
Добавьте следующее к функции часов в директиве Angular:
Теперь, когда изменяется scope.wordcounts, эта функция запускается, что обновляет DOM. Поскольку объект возвращается из запроса AJAX, мы перебираем его, чтобы добавить определенные данные в диаграмму. По сути, каждое слово добавляется к новому div через data join.
Попробуйте запустить код.
Что случается? Ничего не появляется, правда? После отправки нового сайта проверьте модель DOM в инструментах разработчика Chrome. Вы должны увидеть несколько вложенных div. Нам просто нужно добавить стили…
Шаг 2. Стилизация гистограммы
Начнем с простого CSS:
Обязательно включите это в верхней части HTML-страницы после таблицы стилей Bootstrap:
Запустите приложение в нашем браузере. Что сейчас происходит?
Теперь при поиске веб-сайта вы должны увидеть серую область с тонкими синими полосами с левой стороны. Итак, вы можете видеть, что мы создаем полосу для каждого возвращаемого элемента данных – всего 10. Однако нам нужно изменить наш код D3, чтобы увеличить ширину каждой полосы, чтобы они были удобочитаемыми.
Шаг 3. Сделайте гистограмму более интерактивной
Мы можем связать это с нашим существующим кодом и использовать функцию стиля D3:
Теперь мы динамически создаем ширину на основе числового значения того, как часто слово появляется на веб-странице:
Стиль вычисляется путем возврата значения, связанного с каждым словом, умножения этого числа на 3 и последующего преобразования его в пиксели. Мы также можем добавить текст к каждому элементу панели, вставив строковое значение слова вместе с тем, как часто оно появляется на странице.
Попробуйте это. Вы должны увидеть что-то вроде:
Однако кое-чего еще не хватает. Что происходит, когда вы ищете новый веб-сайт? Попытайся. Новая диаграмма добавляется под предыдущей. Нам нужно очистить наш div диаграммы перед созданием нового.
Шаг 4. Очистите для следующего поиска URL
Обновите функцию ссылки в Директиве:
Заключение руководства и дальнейшие шаги
Это оно. Отправьте свои изменения на промежуточный и рабочий серверы. Давайте рассмотрим, над чем мы работали:
Мы начали с настройки и рабочего процесса, настройки промежуточных и производственных серверов.
Оттуда мы добавили базовые функции – парсинг веб-страниц, анализ данных – и настроили очередь задач с помощью Redis.
После настройки серверной функциональности внимание переключилось на интерфейсную часть, где мы добавили Angular, создали специальную директиву и добавили D3 в микс.
У нас есть MVP, но многое еще предстоит сделать: