Лекция_18_введ_flask

1.

Разработка сетевых
информационных ресурсов
Обзорная лекция 18.
Web-приложения. Работа с API на Python.
Протокол HTTP. Введение во Flask
Глотова М.И.

2. Содержание

3.

API
3
В англоязычной терминологии Application Programming Interface или
сокращенно API. API существует у большого количества программных
продуктов: от операционной системы до интернет-сервисов. API — это
обычный этап развития программных продуктов.
Как правило, API появляется, когда аудитория, использующая программный
продукт, разрастается настолько, что своими силами команда-разработчик
уже не успевает реализовывать все запросы пользователей. Создавая API,
разработчики обязательно понимают, какие коммерческие цели они
преследуют. Можно просто предоставлять API за деньги: продавать разовую
лицензию или брать плату за обращение к функциям. Часто API — это
средство развития платформы. Например, Windows API. Все пишут
программы под ОС Windows, в результате чего выигрывает вся платформа.
API может решать и репутационные задачи — создавать лояльную
пользовательскую аудиторию.
Встречаются и смешанные решения: одновременно существует бесплатное
API с определенными ограничениями (использование только в бесплатных
открытых продуктах, с ограничением по количеству обращений) и его
платная версия без таковых. На этом принципе построено большинство API

4.

Варианты реализации API
4
Один из вариантов — это библиотека, собранная под одну или
несколько платформ. Она может либо содержать нужные нам функции или
объекты непосредственно в себе, либо использовать Интернет для доступа
к удаленному серверу с работающим на нем сервисом.
Ключ — это последовательность символов, для которой выполняется
какое-то условие.
Есть вариант, при котором скачивать не требуется ничего. Это
возможно, если сервис реализован как удаленный, использующий для
доступа какой-либо стандартный протокол. Например, HTTP. Обычно для
доступа к такому сервису требуется иметь ключ и передавать его при каждом
обращении к сервису. Ключ можно получить либо в автоматическом, либо
в полуавтоматическом режиме, как правило, заполнив форму и выразив
согласие с лицензионными соглашениями.
Протокол состоит из набора запросов и форматов ответов,
предоставляемых сервисом.

5.

Немного о протоколах взаимодействия
5
При
написании
webприложения
большинство
программистов не задумывается
о том, по каким физическим каналам
будет происходить взаимодействие.
Это стало возможным благодаря
стандартизации в этой области
и четкому разделению уровней
взаимодействия.
Сетевая модель OSI (Open
systems
interconnection
basic
reference model) представляет собой
набор
протоколов
(стандартов,
описывающих
правила
взаимодействия
разных
частей
систем при передаче данных),
каждый
из
которых
отвечает
за
определенный
уровень
взаимодействия. Модель имеет семь
уровней:

6.

Модель OSI
6
1.Физический, на котором происходит преобразование двоичных
данных в вид, пригодный для передачи в среде (USB, витая пара, WiFi).
2.Канальный, на котором происходит физическая адресация.
3.Сетевой, на котором происходит логическая адресация.
4.Транспортный — для обеспечения связи между конечными точками
и обеспечения надежности.
5.Сеансовый — для обеспечения сеанса связи.
6.Представительский (представления) для представления
и шифрования/дешифрования данных.
7.Прикладной, на котором происходит доступ к сетевым службам
(SMTP, FTP, HTTP).

7.

Модель OSI
7

8.

Подробнее о протоколе HTTP
8
HTTP - протокол, позволяющий отправлять запросы Интернет-сервису
и получать на них ответы.
В протоколе есть несколько разного вида запросов: GET, POST, HEAD,
DELETE и т. д.
Как правило, запросы используются следующим образом:
•GET — для получения каких-либо данных с сервера
•POST — для передачи большого объема данных на сервер и получения
ответа
•HEAD — для получения информации о данных с сервера
•DELETE — для удаления данных с сервера
Помимо вида запроса обычно требуется указать:
•Адрес сервера, которому запрос направлен
•Путь к конкретной странице на сервере, которую необходимо получить,
или к скрипту, который должен обработать запрос
•Дополнительные параметры запроса
•Вид ожидаемого ответа

9.

Подробнее о протоколе HTTP
9
Протокол HTTP используется браузерами при просмотре интернетстраниц. По умолчанию применяется метод GET, формат ответа — html, json
или какой-либо еще стандартный формат, и указывать это при каждом
запросе не требуется. Остальная часть запроса записывается в виде:
http://static-maps.yandex.ru/1.x/?ll=37.677751,55.757718&spn=0.016457,0.00619&l=ma

10.

Подробнее о протоколе HTTP
Коды состояния
HTTP:
•200 означает, что все
прошло успешно
•3xx — ошибки,
связанные
с перемещением
страницы и т. п.
•4xx — ошибки
клиента (например,
403 — не хватает
прав, 404 — файл
не найден)
•5xx — ошибки уровня
приложения (запрос
получен, а скрипт,
10

11.

Знакомство с Yandex.Maps API
11
Откуда брать информацию про пути, ключи и их значения, из которых состоят
запросы к API? Для этого используется документация API.
Содержание ресурса.
HTTP-API состоит из трех частей:
•Static API Карт (получить картинку с картой какой-то области с заданными
параметрами)
•Геокодер (поиск топонимов, то есть картографических объектов)
•ППО (Поиск По Организациям)
Кроме того, в документации указано, что ключ для доступа не нужен.
Лицензионное
соглашение
предписывает
использование
API
в некоммерческих общедоступных веб-приложениях.
Static API позволяет получить изображение нужного фрагмента карты,
которое можно разместить на сайте или в приложении. Такое изображение
оптимизировано, «весит» не очень много и загружается быстро даже при
медленном Интернете.

12.

Знакомство с Yandex.Maps API
12
Static API возвращает изображение карты в ответ на HTTPS-запрос
(HTTPS — защищенная разновидность HTTP). Добавляя в URL разные
параметры и задавая их значения, можно определить центр карты,
ее размер и область показа, отметить нужные объекты, отобразить пробки и
др. При этом при каждом новом запросе будет возвращаться изображение
с актуальными данными.
Документация для Static API:
https://tech.yandex.ru/maps/doc/staticapi/1.x/dg/concepts/input_params-docpage/
Пример запроса:
https://static-maps.yandex.ru/1.x/?ll=37.677751,55.757718&spn=0.016457,0.00619&l=map
В ответ придет картинка с картой запрошенной области.
Самостоятельно посмотреть в документации назначение параметров ll, spn, l.

13.

Знакомство с Yandex.Maps API
13
C помощью запросов к API через браузер получить:
1.Крупномасштабную схему МГУ им. Ломоносова
2.Спутниковый снимок Эйфелевой башни
3.Спутниковый снимок Авачинского вулкана
4.Спутниковый снимок космодрома Байконур
Для решения задачи в Я.Карты найти объекты через поиск и получить
координаты для параметра ll. Параметр spn можно подобрать
экспериментально.

14.

Геокодер (поиск топонимических объектов)
14
Геокодер помогает определить координаты объекта по его адресу или,
наоборот, установить адрес по координатам. К геокодеру можно также
обращаться по протоколу HTTPS.
Для обращения к этому API нужен ключ, бесплатный ключ имеет
ряд ограничений, но он полностью подойдет для учебных целей, получить
его можно тут. Можно самостоятельно ознакомиться с документацией.
Пример: Получить координаты Якутска и Магадана в формате JSON.
Выяснить, какой город находится севернее: Якутск или Магадан?
Запрос: https://geocode-maps.yandex.ru/1.x/?apikey=40d1649f-0493-4b7098ba-98533de7710b&geocode=Якутск&format=json
Якутск: "129.732555 62.028098" (севернее).
Магадан: "150.808541 59.568164".

15.

Обращение к HTTP-сервису на Python
15
Одной из самых популярных библиотек для этого является
библиотека requests. Библиотека requests не входит в стандартную
библиотеку Python, поэтому перед использованием ее надо установить.
import requests
response = requests.get("http://geocode-maps.yandex.ru/1.x/?apikey=40d1649f0493-4b70-98ba-98533de7710b&geocode=Якутск&format=json")
print(response, type(response))

16.

Обращение к HTTP-сервису на Python
16
Простейшая программа, выполняющая запрос к серверу, анализирующая код
ответа и в случае успешного запроса печатающая полученную страницу:
import requests # Готовим запрос.
geocoder_request = "http://geocode-maps.yandex.ru/1.x/?apikey=40d1649f-04934b70-98ba-98533de7710b&geocode=Якутск&format=json" # Выполняем запрос.
response = requests.get(geocoder_request)
if response: # Запрос успешно выполнен, печатаем полученные данные.
print(response.content)
else: # Произошла ошибка выполнения запроса. Обрабатываем http-статус.
print("Ошибка выполнения запроса:")
print(geocoder_request)
print("Http статус:", response.status_code, "(", response.reason, ")")
b'{"response":{"GeoObjectCollection":{"metaDataProperty":{"GeocoderResponseMetaData":{"request":"\xd0\xaf\xd0\xba\xd1\x
83\xd1\x82\xd1\x81\xd0\xba","found":"3","results":"10"}},"featureMember":[{"GeoObject":{"metaDataProperty":{"GeocoderMeta
Data":{"kind":"locality","text":"\xd0\xa0\xd0\xbe\xd1\x81\xd1\x81\xd0\xb8\xd1\x8f,
\xd0\xa0\xd0\xb5\xd1\x81\xd0\xbf\xd1\x83\xd0\xb1\xd0\xbb\xd0\xb8\xd0\xba\xd0\xb0 \xd0\xa1\xd0\xb0\xd1\x85\xd0\xb0
(\xd0\xaf\xd0\xba\xd1\x83\xd1\x82\xd0\xb8\xd1\x8f),
\xd0\xaf\xd0\xba\xd1\x83\xd1\x82\xd1\x81\xd0\xba","precision":"other","Address":{"country_code":"RU","formatted":"\xd0\xa0\x
d0\xb5\xd1\x81\xd0\xbf\xd1\x83\xd0\xb1\xd0\xbb\xd0\xb8\xd0\xba\xd0\xb0 \xd0\xa1\xd0\xb0\xd1\x85\xd0\xb0
(\xd0\xaf\xd0\xba\xd1\x83\xd1\x82\xd0\xb8\xd1\x8f), \xd0\xaf\xd0\xba\xd1\x83\xd1\x82\xd1\x81\xd0\xba","Components":...

17.

Обращение к HTTP-сервису на Python
17
import requests
geocoder_request = "http://geocode-maps.yandex.ru/1.x/?apikey=40d1649f-0493-4b70-98ba98533de7710b&geocode=Якутск&format=json" # Выполняем запрос.
response = requests.get(geocoder_request)
if response: # Преобразуем ответ в json-объект
json_response = response.json() # Получаем первый топоним из ответа
геокодера. # Согласно описанию ответа, он находится по следующему пути:
toponym =
json_response["response"]["GeoObjectCollection"]["featureMember"][0]["GeoObject"] #
Полный адрес топонима:
toponym_address = toponym["metaDataProperty"]["GeocoderMetaData"]["text"] #
Координаты центра топонима:
toponym_coodrinates = toponym["Point"]["pos"] # Печатаем извлечённые из
ответа поля:
print(toponym_address, "имеет координаты:", toponym_coodrinates)
else:
print("Ошибка выполнения запроса:")
print(geocoder_request)
print("Http статус:", response.status_code, "(", response.reason, ")")
Россия, Республика Саха (Якутия), Якутск имеет координаты: 129.731235
62.027757

18.

Обращение к HTTP-сервису на Python
18
Запросив изображение карты через Static API, мы можем отрисовать его в окне
программы

19.

Обращение к HTTP-сервису на Python
19

20.

Обращение к HTTP-сервису на Python
20

21.

Работа с протоколом HTTP
21
Задание параметров url
В более сложных задачах запрос приходится формировать в ходе
выполнения
программы,
основываясь
на
данных,
введенных
пользователем или полученных иным образом.
Для
удобства
формирования
запросов
в функциях requests.request() и requests.get() есть именованный параметр params,
представляющий собой словарь (dict). В нем содержится отображение из названий
параметров в их значения. Рассмотрим предыдущий пример:

22.

Работа с протоколом HTTP
22
Первый вариант использовать проще и быстрее, если нужно
выполнить всего один константный запрос. Второй вариант
предпочтительнее, когда надо формировать запрос «на лету».
Например, если координаты вводятся пользователем или их получают,
например, в ответе геокодера.

23.

API Поиска по организациям
23
Страница API: https://tech.yandex.ru/maps/geosearch/
Для этого API нужен ключ. Если нужен доступ к API поиска
по организациям, необходимо получить ключ. Для этого нужно заполнить
форму, указав данные для связи, а также сайт, на котором
предполагается использовать данное API.
Ключ для сервиса можно бесплатно получить по адресу:
https://developer.tech.yandex.ru/services/
Формат диалога с Поиском по организациям похож на формат
геокодера. Найдем ближайшую аптеку к вашему дому. Формат запроса
описан на странице.
Формат ответа на странице:
Формат ответа | Static API

24.

API Поиска по организациям
24

25.

API Поиска по организациям
25

26.

Инструменты для разработки
web-приложений
26
В настоящее время разрабатывать веб-приложения можно
практически на любом языке программирования, для каждого из которых
создано много библиотек, облегчающих те или иные аспекты написания
веб-приложений.
Одной из сильных областей Python является достаточно простое
создание веб-страниц. Веб-приложения на Python можно писать без
установки дополнительных библиотек, так как интерпретатор поставляется
со встроенным CGI (стандарт интерфейса, применяемого для связи
внешней программы с веб-сервером) сервером. Рассмотрим файл
server.py:

27.

Инструменты для разработки
web-приложений
27
Создадим рядом с сервером папку с именем cgi-bin, внутри которой
создадим скрипт с именем index.py. Перейдем по адресу
localhost:8000/cgi-bin/index.py, получим результат выполнения нашего
скрипта:
Для Python разработано достаточно большое количество библиотек,
которые значительно упрощают процесс создания веб-страниц. Некоторые
из этих библиотек большие (Django, Twisted), а некоторые (Bottle, Flask)
значительно меньше (их еще называют микро-фреймворками).
Самыми популярными фреймворками для создания веб-приложений
на Python на текущий момент являются Django и flask.

28.

Введение во flask
28
Flask не входит в стандартную библиотеку Python.

29.

Статический контент
29
Всю подобную информацию Flask по умолчанию ищет в директории
static, поэтому давайте ее создадим. Для более аккуратной организации
файлов рекомендуется создавать подпапки в static для каждого типа
статического контента, который у вас есть, например, static/img, static/fonts
и т. д.

30.

Статический контент
30
Обработчик return_sample_page, который возвращает пользователю
HTML-страницу. Добавим css-файл style.css в папку css внутри папки
со статическим контентом.

31.

Статический контент
31
Bootstrap — это свободный набор инструментов для создания сайтов
и веб-приложений, который включает в себя скрипты, стили, иконки
и многое другое. Набор расширяемый и достаточно гибкий. Кроме того,
у него огромное сообщество, которое предлагает большое количество уже
готовых тем и компонентов для Bootstrap, большая часть которых либо
свободно распространяемая, либо бесплатная, либо стоит не очень
много.
Инструкцию по подключению и использованию Bootstrap можно найти
на официальном сайте.
Само подключение состоит из нескольких частей:
•Подключение стилей
•Подключение JavaScript
Пример функции, которая отдает простую страничку с подключением
Bootstrap и несколькими элементами на ней.

32.

Статический контент
32

33.

Статический контент
33
Если функция будет возвращать просто
число, то получим страницу с ошибкой.

34.

Передача параметров в адресной строке
34
Взаимодействовать с пользователем веб-приложения можно несколькими
способами, например, средством передачи параметров в адресной строке.
Декоратор app.route умеет принимать на вход значение одного или нескольких
параметров.

35.

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

36.

Передача параметров в адресной строке
36
Всего конвертеров пять:
Передача параметров в адресе командной строки используется достаточно
часто для динамического формирования однотипных страниц. Например,
на сайте pypi.org такой способ применяется для формирования страниц
с информацией о каждом конкретном модуле.

37.

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

38.

Обработка форм
38
Рассмотрим форму с несколькими типами полей ввода, для их стилизации
будем использовать Bootstrap. Чтобы увидеть, в каком виде информация
из этих полей придет на сервер веб-приложения, напишем такой код
(предварительно импортировав request из Flask):

39.

Обработка форм
39

40.

Обработка форм
40

41.

Обработка форм
41

42.

Обработка форм
42
Декоратор
app.route
дополнен
параметром — списком методов
протокола
HTTP,
с
которыми
он
работает.
Наиболее
часто
используемые:

43.

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

44.

Обработка форм
44

45.

Шаблоны
45
Во Flask шаблоны записываются как отдельные файлы, хранящиеся
в папке templates, которая находится (по умолчанию) в корневой папке
приложения.

46.

Шаблоны
46
Импортируем render_template из flask.

47. Шаблоны

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

48. Условия в шаблонах

48
Шаблон odd_even.html и обработчик :

49. Условия в шаблонах

49
Синтаксис условного оператора в
шаблонах:
Допускаются вложенности условного оператора в шаблонах:

50. Циклы в шаблонах

50
Создадим тестовый json-файл со списком новостей:

51. Циклы в шаблонах

51
Обработчик и шаблон:

52. Циклы в шаблонах

52
Результат:

53. Циклы в шаблонах

53
Синтаксис:
Внутри цикла доступна переменная loop с рядом полезных атрибутов,
например:

54. Переменные в шаблонах

54
Синтаксис:
Пример создания шаблона с переменной:

55. Наследование в шаблонах

55
Базовый шаблон:

56. Наследование в шаблонах

56
Изменим файл index.html:
Официальная документация:
https://jinja.palletsprojects.com/en/stable/templates/#template-inheritance
https://jinja.palletsprojects.com/en/stable/

57. Модуль flask-wtf

57
Микрофреймворк Flask силен, в том числе, и своей расширяемостью,
которая позволяет значительно наращивать функциональность вебприложения за счет дополнительных модулей. Рассмотрим модуль flaskwtf для создания и обработки форм.
Эта настройка защитит наше приложение от межсайтовой подделки
запросов.

58. Модуль flask-wtf

58
Создадим форму авторизации для входа в приложение, которая будет
содержать текстовое поле для ввода логина, поле для ввода пароля,
чекбокс «Запомнить меня» и кнопку отправки формы на сервер.
Файл loginform.py

59. Модуль flask-wtf

59
Напишем обработчик:

60. Модуль flask-wtf

60
Шаблон login.html, который будет расширять уже существующий шаблон
base.html.

61. Модуль flask-wtf

61
Результата работы:

62.

Рекомендуемая литература:
1.
2.
3.
Изучаем программирование на Python / Берри Пол; [пер. с англ. М.А.
Райтман]. — Москва : Издательство «Э», 2017. — 624 с.
Изучаем Python: программирование игр, визуализация данных, вебприложения / Мэтиз Эрик; — СПб.: Питер, 2020. — 512 с.
Бенкен, Е.С. PHP, MySQL, XML: программирование для Интернета /
Е.С. Бенкен .- 2-изд., перераб. и доп. - СПб. : БВХ-Петербург, 2008. 321 с. : ил. + 1 электр. опт.диск (CD-ROM). - ISBN 978-5-9775-0280-1.