4.4 Миграции базы данных

После реализации моделей и API для базовых сущностей необходимо синхронизировать код с базой данных. В данном проекте используется PostgreSQL, с которой фреймворк умеет работать без установки дополнительных модулей.

Django использует миграции для переноса изменений в моделях (добавление поля, удаление модели и т.д.) на структуру базы данных. Миграции создавались в основном для автоматической работы и позволяют совершать большинство операция с базой данных через ORM [25].

PostgreSQL дает огромное число возможностей с целью миграции БД. Однако, существует ряд ограничений таких как добавление столбцов со значениями по умолчанию, так как это заставляет перезаписать таблицу и затратить период времени в зависимости от размера. Именно из - за этого рекомендуется добавлять новые столбцы null = True.

Для создания миграций моделей базовых сущностей воспользуемся базовым набором команд Django:

# Создает миграции для моделей всех приложений

python manage.py makemigrations

После этого произойдет сканирование моделей и сравнение с файлами миграции. Далее произойдет обновление старых миграций на новые. Необходимо применить их к БД, с целью проверки работоспособности.

# Синхронизация миграций с версией в базе данных

python manage.py migrate

5. Реализация клиентской составляющей портала

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

4.5 Создание базовых прототипов страниц

Макеты страниц для каждой сущности представляют собой схематичные изображения расположения элементов на Web-странице с описанием основных функциональных особенностей. Далее последовательно приведены макеты основных страниц Web-портала:

Рис. 8 Стартовая страница.

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

Video player - видео содержащее в себе информацию о цели сайта, возможностях и изменениях в портале и боте.

Text area - контакты для быстрой связи с администраторами.

Рис. 9 О нас.

Button 1 - линк на стартовую страницу

Button 2 - выпадающее меню для доступа на любую страницу сайта

Button 3 - обратная связь

Text box - описание авторов проекта и ключевых возможностях их проекта, перечисление достижение и прямая ссылка на бота.

Line graph - статистика активных пользователей.

Рис. 10 Новостная лента

Rectangle (Rounded) 1,2,3 - краткая аннотация новости и дата события

Pagination - ссылки на предыдущую и последующую страницу

Star ratings - рейтинг новости для дальнейшего анализа

Рис. 11 Telegram - бот.

Image - изображение бота с меню

Link - прямая ссылка на бота

Рис. 12 Расписание.

Tree list - выбор факультета и группы

Data picker - указание выбора дат

Rectangle and Vertical Scrollbar - сетка расписания

Рис. 13 События.

Search box - поиск по новостям

Data picker - дата события

Banner ad - фото события

Text box - описание события

Checkbox - чек-ин похода на событие

Рис. 14 Документы.

Search box - поиск по названию документа

Tree list - выборка по группам

Link и Text box - наиболее актуальные документы (заявления на каинкулы, материальную помощь, парковочное место и т.п.)

Button + Link list - фильтр по разделам и линк лист с подразделами

Рис. 15 Сессия.

Link - ссылка на всю сетку

Text и Button - Номер группы и линк на файл excel

Horizontal scroolbar - ползунок для поиска группы

Image и Text - вводное слово для первокурсников

Рис. 16 Контакты.

Upside button -Share, RSS, Распечатать, Ссылка, Поделиться на фейсбуке, отправить e-mail

Map - карта с указанием главного корпуса

Text - Адрес и номер телефона

4.6 Вёрстка основного набора страниц

Блочная система Bootstrap дает возможность горизонтального разделение страницы на 12 частей. В случае отсутствия необходимости использования всех столбцов их можно группировать [26]. Процентной соотношение на столбец равняется 8.3%.

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

Рис.17 пример того, как можно разделить страницу при помощи Bootstrap.

Рис. 17 Работа Bootstrap.

Блочная структура в Bootstrap рассчитана также на мобильные устройства и планшеты. Блоки будут автоматически перестраиваться в зависимости от размера экрана.

Далее перейдем к классам для ячеек, которые являются основным звеном библиотеки и позволяют создавать отзывчивые адаптивные страницы. В блочной верстке Bootstrap есть четыре основных класса:

? xs (extra small) - для мобильных телефонов, до 767 пикс. Включительно

? sm (small) - для планшетов, размер экрана 768-991 пикс.

? md (middle) - для десктопов, 992 - 1199 пикс.

? lg (large) - для больших экранов, от 1200 пикс.

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

Ниже дан пример кода для верстик макета, используя блочную систему Bootstrap:

Для начала создайте строку с ячейками: <div class="row"> и далее добавьте в нее нужное количество столбцов с соответствующими классами .col-*-*. [27]

Еще имеется возможность указывать, какой отступ будет у колонки, если вы хотите “отодвинуть” ее вправо. Для этого используйте класс .col-md-offset-*. Такой класс увеличит отступ слева на количество колонок, указанное в *.

Можно указывать, в каком порядке будут отображаться ячейки, при помощи классов .col-md-push-* и .col-md-pull-*.

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

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

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

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

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

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

4.7 Настройка синхронизации клиента с API

Для вывода информации из ядра проекта используются асинхронные подгрузки, которые реализуются через технологию AJAX. AJAX - совокупность технологий, появившиеся в момент основания Web. Возможности предоставляемые AJAX:

· Стандартно-базированная презентация с использованием XHTML и CSS;

· Динамическое отображение и взаимодействие с использованием объектной модели документа;

· Взаимообмен данными и манипуляция с задействованием XML и XSLT;

· Асинхронное извлечение данных с использованием XMLHttpRequest;

· JavaScript, связывающий все вместе.

AJAX дает возможность написание веб-приложения с быстрым откликом, исключая необходимость постоянного обновления страницы. Эта технология достаточно проста и поддерживается большинством основных браузеров. Как можно вкратце отметить, единственным предварительным условием для внедрения AJAX является знание JavaScript [28].

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

Имеется два варианта использования:

jQuery.ajax(url,[settings]) - стандартная реализация, принимает поля:

1. url - адрес запроса.

2. settings - в этом параметре можно задать настройки для данного запроса. Задается с помощью объекта в формате {имя:значение, имя:значение...}. Ни одна из настроек не является обязательной. Установить настройки по умолчанию можно с помощью метода $.ajaxSetup().

jQuery.ajax(settings) - отличие от предыдущего варианта метода заключается лишь в том, что свойство url здесь является частью настроек, а не отдельным параметром. Мы будем использовать первый вариант с передачей адреса и параметров запроса:

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

4.8 Реализация представлений для подготовленных страниц

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

Далее следует описание трех классов. Они обладают большим числом набором функциональности, с целью создания представления Django. Имеется возможность рассмотрения в виде родительского представления, которые можно использовать как непосредственно, так и в наследовании [29].

Множество из встроенных CBV в Django наследуют другие представления-классы или классы-примеси. Это цепочка наследований (и порядок классов) очень важна, поэтому информация о классах-предках находится в разделе Ancestors (MRO). MRO - это акроним для Method Resolution Order.

Самый главный класс в CBV. Все остальные представления-классы наследуются от него.

Далее будут использоваться базовые представления, основной функцией которых это вывод страниц и получения статичных данных. Переход к представлениям выполняется через urls.py где располагается массив описания путей таб. 8:

Таб. 8 Массив описания

5 Реализация контроллера для Telegram - бота

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

Рис. 18 Схема взаимодействия

5.5 Создание пустого бота через интерфейс Telegram

Процедура регистрации бота довольна проста. Для начала необходимо найти @BotFather (Рис. 98) и начать с ним беседу. Далее следует отправить команду /newbot и следовать инструкциям. В результате мы получим:

1. Специальный токен бота;

2. Адрес Telegram API (https://api.telegram.org/bot);

3. Ссылку на документацию.

Рис. 19 Botfather

Необходимо заново начать беседу с ботом, выбрать его и ввести команду /start. Далее следует разобраться с тем, что такое API. Перейдя в любой web - браузер и введя в поисковой строке: https://api.telegram.org/bot<ваш_токен>/getUpdates произойдет отправка запроса на сервер Telegram, взамен придет ответ в формате JSON:

После изучения раздела метод /sendmessage в документации, становится понятно, что он принимает всего два параметра: chat_id и text. Вы можете создавать цепочки параметров в адресной строке браузера, используя ? для первого и & для всех последующих. Команда для отправки сообщения будет выглядеть так:

/sendMessage?chat_id=303262877&text=test

В случае если подставить в качестве chat_id значение, полученное после вызова /getUpdates, то получим первый ответ от бота. Запрос выглядит так: https://api.telegram.org/bot<token>/sendMessage?chat_id=303262877&text=Hello

5.6 Реализация обработки базовых типов сообщений от Telegram

Теперь следует написать код, который будет обрабатывать входящие сообщения от бота. Телеграмм умеет сообщать боту о действиях пользователя двумя способами: через ответ на запрос сервера (Long Poll), и через Webhook, когда сервер Телеграмма сам присылает сообщение о том, что кто-то написал боту. Второй способ явно выглядит лучше, но требует выделенного IP-адреса, и установленного SSL на сервере. В этом проекте будет пользоваться Long Poll методом.

Для начала следует импортировать нашу библиотеку и подключить токен бота:

Теперь объявим метод для получения текстовых сообщений:

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

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

# Код обработки сообщения и формирования ответа

Для запуска кода требуется выполнить метод polling у объекта Bot. Скрипт будет висеть фоновым процессом и постоянно обрабатывать пользовательские сообщения от клиентов к боту.

5.7 Обеспечение корректной обработки данных от Telegram

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

1. message_id (int) - Уникальный идентификатор сообщения в этом чате.

2. from_user (telegram.User, необязательно) - Отправитель, может быть пустым для сообщений, отправляемых на каналы.

3. date (datetime.datetime) - дата, когда сообщение было отправлено в формате Unix. Преобразовано в datetime.datetime.

4. chat (telegram.Chat) - чат, которому принадлежит сообщение.

5. forward_from (telegram.User, необязательно) - для пересылаемых сообщений - отправитель исходного сообщения.

6. forward_from_chat (telegram.Chat, необязательно) - для сообщений, пересылаемых с канала, информация об исходном канале.

7. forward_from_message_id (int, необязательно) - для переадресованных сообщений канала - идентификатор исходного сообщения в канале.

8. forward_date (datetime.datetime, необязательно) - для переадресованных сообщений указывается дата, когда оригинальное сообщение было отправлено во время Unix. Преобразовано в datetime.datetime.

9. reply_to_message (telegram.Message, необязательно) - для ответов оригинальное сообщение. Обратите внимание, что объект Message в этом поле не будет содержать дополнительные поля reply_to_message, даже если он сам является ответом.

10. edit_date (datetime.datetime, необязательно) - дата последнего редактирования сообщения во время Unix. Преобразовано в datetime.datetime.

11. media_group_id (str, необязательно) - уникальный идентификатор группы мультимедийных сообщений, к которой относится это сообщение.

12. text (str, необязательно) - для текстовых сообщений - фактический текст сообщения в формате UTF-8, 0-4096 символов. Также встречается как telegram.constants.MAX_MESSAGE_LENGTH.

13. entity (List [telegram.MessageEntity], необязательно) - для текстовых сообщений в тексте отображаются специальные объекты, такие как имена пользователей, URL-адреса, команды ботов и т. д. См. Методы attr: parse_entity и attr: parse_entities для правильного использования.

14. caption_entities (List [telegram.MessageEntity]) - Необязательно. Для сообщений с подписью. Специальные объекты, такие как имена пользователей, URL-адреса, команды ботов и т. Д., Которые отображаются в подписи. Посмотрите методы Message.parse_caption_entity и parse_caption_entities для того, как правильно использовать.

15. audio (telegram.Audio, необязательно) - Сообщение представляет собой аудиофайл, информацию о файле.

16. document (telegram.Document, не обязательно) - сообщение представляет собой общий файл, информацию о файле.

17. animation (telegram.Animation, необязательно) - сообщение представляет собой анимацию, информацию об анимации. Для обратной совместимости, когда установлено это поле, поле документа также будет установлено.

18. game (telegram.Game, необязательно) - сообщение игры, информация об игре.

19. photo (Список [telegram.PhotoSize], необязательно) - Сообщение представляет собой фотографию, доступны размеры фотографии.

20. sticker (telegram.Sticker, необязательно) - сообщение представляет собой стикер, информация о стикере.

21. video (telegram.Video, опционально) - сообщение представляет собой видео, информацию о видео.

22. voice (telegram.voice, необязательно) - сообщение - это голосовое сообщение, информация о файле.

23. video_note (telegram.VideoNote, необязательно) - Сообщение - это видео-заметка, информация о видео-сообщении.

24. new_chat_members (List [telegram.User], необязательно) - новые участники, которые были добавлены в группу или супергруппу, и информация о них (сам бот может быть одним из этих членов).

25. title (str, необязательно) - заголовок для документа, фото или видео, 0-200 символов.

26. contact (telegram.Contact, необязательно) - сообщение является общим контактом, информация о контакте.

27. location (telegram.Location, необязательно) - сообщение является общим местоположением, информация о местоположении.

28. left_chat_member (telegram.User, необязательно) - участник был удален из группы, информация о нем (этот участник может быть самим ботом).

29. new_chat_title (str, необязательно) - заголовок чата был изменен на это значение.

30. new_chat_photo (List [telegram.PhotoSize], необязательно) - фотография чата была изменена на это значение.

31. delete_chat_photo (bool, необязательно) - служебное сообщение: фотография в чате была удалена.

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

Класс BotController выступает в роли полностью самодостаточного контроллера и имеет набор необходимых методов для реализации поставленных задач, далее представлен список методов с описанием входных параметров Таб. 9.

Таб. 9. Список методов