Привет, Хабр! На связи участник профессионального сообщества NTA Владислав Рулев. Это первый пост в серии, где я буду рассказывать, как создавал свой собственный task manager. В настоящее время используются различные инструменты для управления задачами, от электронной почты и Excel‑таблиц до специальных программ. Первый подход — письма и таблички, затрудняет отслеживание статуса задач, распределение ресурсов и общую координацию работ. Второй — готовое решение, имеет как плюсы, так и минусы. Подробно сильные и слабые стороны доступных на рынке task‑менеджеров разобраны тут. Разработка собственного инструмента даст мне: Централизованное управление задачами.  Можно вести все задачи в одном месте, что облегчит их отслеживание, приоритизацию и распределение между сотрудниками. Каждый пользователь сможет видеть свои назначенные задачи и отслеживать их статус. Анализ производительности.  Позволит собирать данные о выполнении задач, времени, затраченном на каждую задачу, и других метриках производительности. Так инструмент поможет анализировать эффективность работы, выявлять узкие места и принимать меры для их устранения. Выбор инструментов Создание страницы «Авторизация» Создание страницы «Профиль» Создание страницы «Создание задачи» Создание страниц просмотра задач Планируемые доработки Заключение  Первым делом нужно определиться как конечный пользователь будет взаимодействовать с продуктом, а также какие тонкости стоит учесть: 1. Интуитивно понятный интерфейс. Нужно создать инструмент, использовать который может каждый, вне зависимости от уровня знаний.    2. Наличие единого шаблона создания задачи. Так можно сократить время создания задачи путём добавления выпадающих списков с готовыми данными. Пользователю останется лишь выбрать предложенные варианты и написать описание задачи.  Опираясь на требования к разработке рассмотрю варианты реализации инструмента: пошаговый скрипт в Jupyter Notebook; web-приложение. Изначально была идея сделать приложение в Jupyter Notebook используя для отрисовки интерфейса библиотеку ipywidgets, но из-за того, что на имеющейся версии библиотеки не получилось бы реализовать весь задуманный функционал, то фокус сместился на создание своего сайта.  С точки зрения пользователя сайт легче запустить и использовать, чем Jupyter Notebook, а с точки зрения разработки можно реализовать любой дизайн и почти неограниченный функционал. Следующим шагом после определения вида задачника, будет выбор инструментов. Так как у всех сотрудников установлен python, то и разработка будет вестись на нём. На старте использовать буду следующие библиотеки: Flask — легкий и гибкий фреймворк для разработки веб‑приложений; Flask‑WTF — расширение Flask, интегрирующее библиотеку WTForms, которая предоставляет полезные функции для простого создания и обработки форм в веб‑приложении;  Psycopg2 — адаптер базы данных PostgreSQL для Python, т.к. использую Greenplum; Pandas — программная библиотека для обработки и анализа данных. Для создания первой версии такого набора инструментов хватит.  Для начала разработки нужно установить основные библиотеки: Отлично, теперь есть необходимые библиотеки для разработки веб‑приложения, пора создавать проект в PyCharm'е и поднимать локальный сервер. Структура проекта на начальном этапе должна выглядеть так. Далее в файлы заполняются следующим образом: Код файла __init__.py Код файла routes.py Немного разберёмся что же делают декораторы @app.route. В данном случае декоратор создаёт связь между URL‑адресом, заданным в качестве аргумента, и функцией, которая написана ниже. Таким образом, когда браузер будет запрашивать адрес «/» или «/index», Flask выполнит функцию ниже и передаст обратно в браузер возвращаемое значение. Код файла startup.py Запущу проект и перейду на указанный локальный сервер. Сервер поднялся, теперь создам форму для авторизации. Для этого и была установлена библиотека Flask‑WTF.  В данный момент приложение простое и сильно беспокоится о конфигурации не требуется, но всё же стоит поставить секретный ключ. Для этого создам config в корневой директории приложения, а также обновлю __init__.py Код файла config.py Flask и некоторые его расширения используют значение секретного колюча в качестве криптографического ключа, который требуется для генерации подписей и токенов. Конкретно расширение Flask-WTF использует секретный ключ для защиты веб-формы от атаки Cross-Site Request Forgery (подделка межсайтовых запросов). Важно: при развертывании данного приложения на сервере нужно будет устанавливать уникальное и трудно подбираемое значение. Секретный ключ должен знать только доверенный круг лиц, которые сопровождают приложение! Код файла __init__.py Мне понадобилось создать ещё один файл и заполнить его следующим образом. Код файла forms.py StringField – поле ввода текста, в HTML равно тегу <input type=”text”>; PasswordField – поле ввода пароля, в HTML равно тегу <input type=”password”>; SubmitField – кнопка отправки формы на сервер, в HTML равно тегу <input type=”submit”>. Теперь нужно создать html страничку, куда будут передаваться переменные. Код файла index.html После этого доработаю файл routes следующим образом: Код файла routes.py Стартовая страница выглядит так: После того, как я сверстал форму, нужно настроить подключение к БД. Для подключения буду использовать библиотеку psycopg2, а для обработки и хранения возьму pandas.  Импортирую библиотеки: Создам метод для подключения к БД: Код файла routes.py Обновляю метод 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, который будет выглядеть следующим образом: Код файла base.html {% block … %} {% endblock %} – шаблон, куда из другого файла будет вставляться контент. Отдельное внимание стоит уделить подключению css файла (блок <link>). Для того, чтобы сервер мог получить css была создана структура проекта . Файл my_style.css содержит немного доработанную выгрузку bootstrap. Bootstrap понадобился мне для создания адаптивной верстки, чтобы приложение работало хорошо при разном разрешении экрана.  Теперь создаю страницу «Профиль» следующим образом: Код файла main.html {% extends «base.html»%} — использование созданного шаблона. {% block …%} {% endblock%} — все теги, написанные внутри такой конструкции, подставятся в шаблон. {{ … }} — использование переданного объекта. В данном случае я передаю Data Frame selected.  Но как получить данные для профиля? — Написать метод с запросом к БД. Выглядеть метод будет так: Код файла routes.py Осталось прописать route(‘/main’).  Теперь после успешной авторизации попадаю на страницу профиля. По ходу создания task manager у меня получилось подключиться БК и подтянуть из нее данные о пользователе. Применю этот опыт для получения данных о сотрудниках, текущих спринтах и типах задач. Как итог получу шаблон: Первым делом потребуется создать три новых функции для получения данных из таблиц. Код файла routes.py Следующим шагом будет создание формы с интересующими полями. Код файла forms.py DateTimeField – поле выбора даты и времени, в HTML равно тегу <input type=”datetime-local”>; TextAreaField – область ввода нескольких строк текста, в HTML равно тегу <textarea></textarea>; SelectField – выпадающий список, в HTML равно тегу <select ></select>. Функции и форма созданы, теперь пора вернуться к файлу routes.py, чтобы прописать обработку страницы создания задачи. Код файла routes.py Одним из важных шагов, на котором стоит остановиться подробнее, будет верстка самой страницы.  Разберу генерацию выпадающего списка Код файла create_task.html Для того, чтобы динамически сгенерировать список построчно переберу полученный Data Frame c данными о сотрудниках и выберу нужную информацию. Остальные списки (Спринт и тип задачи) делаются аналогичным образом. Теперь нужно прописать получение данных с формы и их обработку в файле routes.py.  Здесь идет присваивание переменным данных из формы, а также поля проверяются на пустоту и корректность данных. В случае, если не было обнаружено ошибок, то выполняется запрос на добавление строки в таблицу. Код файла routes.py Ниже будет приведён пример заполненной формы. 1. Выбор исполнителя. Выполняется поиск по фамилии. 2. Выбор спринта, в рамках которой назначается задача. Поиск можно выполнить по названию. 3. Далее нужно ввести название и описание задачи.   4. Следующим шагом будет выставление контрольной даты. 5. После выбора контрольной даты нужно выбрать подходящий тип задачи. 6. Последним шагом будет выбор приоритета задачи.  7. Проверка введенных данных 8. После проверки данных нажимаю кнопку «Создать задачу». Последним этапом будет создание страниц для просмотра созданных задач. Как и в прошлый раз сначала нужно определиться какие данные нужны и составить правильный запрос к БД. Запрос получился достаточно большой, поэтому стоит разобрать его подробнее. 1. Нужно получать информацию о пользователе, который создал (create_user), обновил (update_user) и является исполнителем задачи (assigned_user). 2. Нужна полная информация о спринте (select_check). 3. А также понадобится узнать статус (status) и тип (task_type) задачи Следующим шагом будет написание обработки страницы с задачами: Код файла routes.py Теперь преступлю к верстке самой страницы.  Карточка с заданием будет выглядеть так: А страница с задачами будет выглядеть  так: Полноценный просмотр задачи (в данный момент в стадии шаблона). Кнопки «Принять задачу» и «Завершить задачу» будут менять статус задачи на «В работе» и «Закрыта» соответственно. Кнопка «Переназначить задачу» будет открывать новую страницу с переназначением (в данный момент в стадии шаблона). При переназначении можно будет указать нового исполнителя и добавить комментарии. Сделать отдельную страницу, где пользователь мог бы просматривать задачи, которые отправил он (страница идентична «Просмотр задач», но имеет другие условия выборки). При раскрытии карточки задачи со страницы «Задачи, которые назначил я» будет немного другой интерфейс (в данный момент в стадии шаблона). Будет возможность редактировать отправленную задачу при помощи кнопки «Редактировать задачу». Данные на страницы будут заранее заполнены (в данный момент в стадии шаблона). Вот так я и сделал MVP своего task manager'а. В скором времени будет запущено ограниченное тестирование, чтобы улучшать получившееся ПО. Далее я планирую сделать более приятный глазу дизайн, реализовать пункты из раздела «Планируемые доработки», а также исправить первые баги, которые найдутся в первый день тестирования.  Как только я выпущу стабильную версию task manager'a, то сразу предоставлю к ней свободный доступ и инструкцию для настройки задачника под свою команду.  Профессиональное сообщество