Разработка Task-manager при помощи библиотек Flask и psycopg2
Сегодня я, Рулев Владислав, буду рассказывать, как создавал свой собственный Task-manager. Что такое таск-менеджер? Это программное решение для управления проектами, с его помощью можно раздавать и контролировать поручения.
В настоящее время используются различные инструменты для управления задачами, такие как электронная почта, Excel-таблицы и живое общение. Однако такой подход затрудняет отслеживание статуса задач, распределение ресурсов и общую координацию работ.
Разработка собственного инструмента даст следующие преимущества:
1. Централизованное управление задачами.
Можно вести все задачи в одном месте, что облегчит их отслеживание, приоритизацию и распределение между сотрудниками. Каждый пользователь сможет видеть свои назначенные задачи и отслеживать их статус.
2. Анализ производительности.
Позволит собирать данные о выполнении задач, времени, затраченном на каждую задачу, и других метриках производительности. Так инструмент поможет анализировать эффективность работы, выявлять узкие места и принимать меры для их устранения.
Выбор инструментов
Первым делом нужно определиться как конечный пользователь будет взаимодействовать с продуктом, а также какие тонкости стоит учесть:
1. Интуитивно понятный интерфейс.
Нужно создать инструмент, использовать который может каждый, вне зависимости от уровня знаний.
2. Наличие единого шаблона создания задачи.
Так можно сократить время создания задачи путём добавления выпадающих списков с готовыми данными. Пользователю останется лишь выбрать предложенные варианты и написать описание задачи.
Опираясь на требования к разработке рассмотрю варианты реализации инструмента:
1. Пошаговый скрипт в Jupyter Notebook
2. Web-приложение
Изначально была идея сделать приложение в Jupyter Notebook используя для отрисовки интерфейса библиотеку ipywidgets, но из-за того, что на имеющейся версии библиотеки не получилось бы реализовать весь задуманный функционал, то фокус сместился на создание своего сайта.
С точки зрения пользователя сайт легче запустить и использовать, чем Jupyter Notebook, а с точки зрения разработки можно реализовать любой дизайн и почти неограниченный функционал.
Следующим шагом после определения вида задачника, будет выбор инструментов. Так как у всех сотрудников установлен python, то и разработка будет вестись на нём. На старте использовать буду следующие библиотеки:
1. Flask – легкий и гибкий фреймворк для разработки веб-приложений;
2. Flask-WTF – расширение Flask, интегрирующее библиотеку WTForms, которая предоставляет полезные функции для простого создания и обработки форм в веб-приложении.
3. Psycopg2 - адаптер базы данных PostgreSQL для Python, т.к. использую Greenplum;
4. Pandas - программная библиотека для обработки и анализа данных.
Для начала такого набора инструментов и создания первой версии task-manager хватит.
Создание страницы «Авторизация»
Для начала разработки нужно установить основные библиотеки при помощи следующих команд:
Отлично, теперь есть необходимые библиотеки для разработки веб-приложения, пора создавать проект в PyCharm-е и поднимать локальный сервер. Структура проекта на начальном этапе должна выглядеть как на Рис.1.
Далее в файлы заполняются следующим образом:
Немного разберёмся что же делают декораторы @app.route . В данном случае декоратор создаёт связь между URL-адресом, заданным в качестве аргумента, и функцией, которая написана ниже. Таким образом, когда браузер будет запрашивать адрес ‘/’ или ‘/index’, Flask выполнит функцию ниже и передаст обратно в браузер возвращаемое значение.
Запущу проект и перейду на указанный локальный сервер (Рис.2).
Сервер поднялся, теперь создам форму для авторизации. Для этого и была установлена библиотека Flask-WTF.
В данный момент приложение простое и сильно беспокоится о конфигурации не требуется, но всё же стоит поставить секретный ключ. Для этого создам config в корневой директории приложения, а также обновлю __init__.py
Flask и некоторые его расширения используют значение секретного колюча в качестве криптографического ключа, который требуется для генерации подписей и токенов. Конкретно расширение Flask-WTF использует секретный ключ для защиты веб-формы от атаки Cross-Site Request Forgery (подделка межсайтовых запросов).
Важно: при развертывании данного приложения на сервере нужно будет устанавливать уникальное и трудно подбираемое значение. Секретный ключ должен знать только доверенный круг лиц, которые сопровождают приложение!
Мне понадобилось создать ещё один файл и заполнить его следующим образом.
StringField – поле ввода текста, в HTML равно тегу .<input type=”text”>.
PasswordField – поле ввода пароля, в HTML равно тегу .<input type=”password”>.
SubmitField – кнопка отправки формы на сервер, в HTML равно тегу <input type=”submit”>.
Теперь нужно создать html страничку, куда будут передаваться переменные.
После этого доработаю файл routes следующим образом:
Стартовая страница выглядит как на Рис.3.
Создание страницы «Профиль»
После того, как я сверстал форму, нужно настроить подключение к БД. Для подключения буду использовать библиотеку psycopg2, а для обработки и хранения возьму pandas.
Импортирую библиотеки:
Создам метод для подключения к БД:
Обновляю метод login:
Чуть подробнее остановлюсь на этом моменте.
В дизайнере маршрутов я добавил аргумент methods. Этим аргументом я показываю, что функция принимает запросы GET и POST (по умолчанию принимаются только GET запросы).
GET-запросы – это запросы, которые возвращают информацию клиенту (в моем случае – страница в веб-браузере).
POST-запросы – это запросы, которые используются при отправке браузером формы на сервер (на примере данной страницы будут отправлены значения с полей ввода логина и пароля).
Рассмотрю метод form.validate_on_submit(). Данный метод выполняет обработку формы (POST-запрос). Когда пользователь только попадает на страницу, то отправляется GET-запрос и метод возвращает значение False, поэтому конструкция if пропускается, и пользователь видит стартовую страницу.
Когда браузер отправляет POST-запрос (после нажатия кнопки submit), метод собирает данные с формы, запускает валидаторы, которые я создал для полей, и если всё нормально, то возвращает True.
Проработаю следующую страницу «Профиль», на которую пользователь будет попадать после аутентификации, но для начала создам шаблон, по которому будут строиться дальнейшие странички.
Механизм шаблонов Jinja2 поставляется в комплекте с Flask. Jinja2 заменяет блоки {{…}} соответствующими значениями, заданными аргументами, указанными при вызове функции render_template().
Для чего же нужен шаблонизатор?
1. Сокращение лишней работы.
Вместо того, чтобы для каждой страницы заново писать одну и ту же повторяющуюся структуру (Тег head и header), напишу её один раз, динамически изменяя только основное содержимое страницы.
2. Удобная корректировка.
Если я решу внести какие-либо изменения в структуру или стиль страницы, то нужно будет изменить только один файл. (Пример: добавление нового элемента навигации).
3. Разделение логики и дизайна.
При помощи макета можно отдельно работать с поведением сайта и его визуальной составляющей. Это особенно удобно, если работать в паре «дизайнер-программист»
С плюсами использования шаблонизатора я разобрался, теперь создам файл base.html, который будет выглядеть следующим образом:
{% block … %} {% endblock %} – шаблон, куда из другого файла будет вставляться контент.
Отдельное внимание стоит уделить подключению css файла (блок )
Для того, чтобы сервер мог получить css была создана структура проекта как на Рис.4.
Файл my_style.css содержит немного доработанную выгрузку bootstrap. Bootstrap понадобился мне для создания адаптивной верстки, чтобы приложение работало хорошо при разном разрешении экрана.
Теперь создаю страницу «Профиль» следующим образом:
{% extends “base.html” %} – использование созданного шаблона.
{% block … %} {% endblock %} – все теги, написанные внутри такой конструкции, подставятся в шаблон.
{{ … }} – использование переданного объекта. В данном случае я передаю Data Frame selected.
Но как получить данные для профиля? – Написать метод с запросом к БД. Выглядеть метод будет так:
Осталось прописать route(‘/main’).
Теперь после успешной авторизации попадаю на страницу профиля (Рис.5).
Создание страницы «Создание задачи»
По ходу создания Task manager у меня получилось подключиться БК и подтянуть из нее данные о пользователе. Применю этот опыт для получения данных о сотрудниках, текущих спринтах и типах задач. Как итог получу шаблон, изображённый на Рис.6.
Рисунок 6
Первым делом потребуется создать три новых функции для получения данных из таблиц.
Следующим шагом будет создание формы с интересующими полями.
DateTimeField – поле выбора даты и времени, в HTML равно тегу <input type=”datetime-local”>.
TextAreaField – область ввода нескольких строк текста, в HTML равно тегу <textarea></textarea>.
SelectField – выпадающий список, в HTML равно тегу <select ></select>.
Функции и форма созданы, теперь пора вернуться к файлу routes.py, чтобы прописать обработку страницы создания задачи.
Одним из важных шагов, на котором стоит остановиться подробнее, будет верстка самой страницы.
Разберу генерацию выпадающего списка (Рис.6)
Для того, чтобы динамически сгенерировать список построчно переберу полученный Data Frame c данными о сотрудниках и выберу нужную информацию.
Остальные списки (Спринт и тип задачи) делаются аналогичным образом.
Теперь нужно прописать получение данных с формы и их обработку в файле routes.py
Здесь идет присваивание переменным данных из формы, а также поля проверяются на пустоту и корректность данных. В случае, если не было обнаружено ошибок, то выполняется запрос на добавление строки в таблицу.
Ниже будет приведён пример заполненной формы.
Пример создания задачи
1. Выбор исполнителя (Рис.7).
Выполняется поиск по фамилии.
2. Выбор спринта, в рамках которой назначается задача (Рис.8).
Поиск можно выполнить по названию.
3. Далее нужно ввести название и описание задачи (Рис.9).
4. Следующим шагом будет выставление контрольной даты (Рис.11).
5. После выбора контрольной даты нужно выбрать подходящий тип задачи (Рис.11).
6. Последним шагом будет выбор приоритета задачи (Рис.12).
7. Проверка введенных данных (Рис.13).
8. После проверки данных нажимаю кнопку «Создать задачу».
Создание страниц просмотра задач
Последним этапом будет создание страниц для просмотра созданных задач. Как и в прошлый раз сначала нужно определиться какие данные нужны и составить правильный запрос к БД.
Запрос получился достаточно большой, поэтому стоит разобрать его подробнее.
1. Нужно получать информацию о пользователе, который создал (create_user), обновил (update_user) и является исполнителем задачи (assigned_user).
2. Нужна полная информация о спринте (select_check).
3. А также понадобится узнать статус (status) и тип (task_type) задачи
Следующим шагом будет написание обработки страницы с задачами:
Теперь преступлю к верстке самой страницы.
Карточка с заданием будет выглядеть как на Рис.14.
А страница с задачами будет выглядеть как на Рис.15:
Планируемые доработки
1. Полноценный просмотр задачи Рис.16 (В данный момент в стадии шаблона).
Кнопки «Принять задачу» и «Завершить задачу» будут менять статус задачи на «В работе» и «Закрыта» соответственно.
2. Кнопка «Переназначить задачу» будет открывать новую страницу с переназначением Рис.17 (В данный момент в стадии шаблона). При переназначении можно будет указать нового исполнителя и добавить комментарии
3. Сделать отдельную страницу, где пользователь мог бы просматривать задачи, которые отправил он (Страница идентична «Просмотр задач», но имеет другие условия выборки)
4. При раскрытии карточки задачи со страницы «Задачи, которые назначил я» будет немного другой интерфейс Рис.18 (В данный момент в стадии шаблона).
Будет возможность редактировать отправленную задачу при помощи кнопки «Редактировать задачу». Данные на страницы будут заранее заполнены Рис.20 (В данный момент в стадии шаблона).
Вот так я и сделал MVP своего task manager-а. В скором времени будет запущено ограниченное тестирование, чтобы улучшать получившееся ПО. Далее я планирую сделать более приятный глазу дизайн, реализовать пункты из раздела «Планируемые доработки», а также исправить первые баги, которые найдутся в первый день тестирования.
Как только я выпущу стабильную версию task manager-a, то сразу предоставлю к ней свободный доступ и инструкцию для настройки задачника под свою команду.