Разрабатываем Telegram Mini Web App на примере личного таск трекера

Всем привет! В этой стате я покажу и расскажу как создать Mini App в телеграме на примере разработки домашнего таск-трекера. В его функционал входят: личные задачи, работа в команде, назначение исполнителей, смена статуса и приоритеты. Цель трекера простая -- ведение семейного списка дел -- что купить, убрать и т.д.;).

И в завершении мы разместим проект на специализированном под такие проекты хостинге - Amvera, где

- TG-боты работают, несмотря на географические ограничения ТГ. Есть прокси и серверы в Европе.

- Получим бесплатный https домен без необходимости настройки SSL. Это пригодится для фронта Mini App.

- Опубликуем проект в интернете за минуту и три команды в терминале (или загрузив файлы в интерфейсе), используя встроенный CI/CD (простая публикация без настройки VPS - главная фишка сервиса).

- Получим 111 р приветственного баланса для бесплатного тестирования, и возможность редактирования кода AI-агентом во встроенной онлайн ИИ-IDE.

На выходе мы получаем бота, с которым можно работать как в чате, так и через Mini App.

Поддерживаются статусы разные статусы (в работе, готово...) и есть поддержка командной работы: можно создавать команды, добавлять участников, создавать задачи и назначать исполнителей, также значенные пользователю задачи видны в разделе «Назначено».

Любой Web App содержит в своем составе бэкенд (бот) и фронт. Иногда, это может быть реализовано как два разных проекта, иногда можно создать один.

В нашем примере бэкенд написан на Python, а фронтенд на JavaScript без использования дополнительных фреймворков.

Структура проекта:

templates/index.html # клиентская часть Mini App (фронт) app.py # API проекта на Flask bot.py # запуск бота database.py # работа с SQLite handlers.py # логика бота main.py # одновременный запуск бота и API requirements.txt # зависимости amvera.yml # конфигурация для деплоя

Ключевая особенность: бот и Mini App используют одну базу данных и запускаются одновременно через один файл.

Как уже написал выше, фронт можно реализовать как отдельный проект. Но в нашем случае было проще сделать один index.html файл.

Полный код проекта доступен в GitHub.

Бот и Mini App работают с общей базой данных SQLite3. Используются 4 таблицы:

- `users` - пользователи

- `teams` - команды

- `members`

- участники команд

- `todos` - задачи

Схема таблиц:

CREATE TABLE IF NOT EXISTS users ( id INTEGER PRIMARY KEY, username TEXT, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); CREATE TABLE IF NOT EXISTS teams ( id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT NOT NULL, owner_id INTEGER NOT NULL, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, FOREIGN KEY (owner_id) REFERENCES users(id) ); CREATE TABLE IF NOT EXISTS members ( id INTEGER PRIMARY KEY AUTOINCREMENT, team_id INTEGER NOT NULL, user_id INTEGER NOT NULL, role TEXT DEFAULT 'member', joined_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, FOREIGN KEY (team_id) REFERENCES teams(id) ON DELETE CASCADE, FOREIGN KEY (user_id) REFERENCES users(id), UNIQUE(team_id, user_id) ); CREATE TABLE IF NOT EXISTS todos ( id INTEGER PRIMARY KEY AUTOINCREMENT, team_id INTEGER, user_id INTEGER NOT NULL, text TEXT NOT NULL, priority TEXT DEFAULT 'средний', assigned_to INTEGER, status TEXT DEFAULT 'backlog', created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, FOREIGN KEY (team_id) REFERENCES teams(id) ON DELETE CASCADE, FOREIGN KEY (user_id) REFERENCES users(id), FOREIGN KEY (assigned_to) REFERENCES users(id) );

Для Mini App было реализовано API на Flask. Имеются следующие эндпоинты:

- `GET /api/bootstrap` - данные пользователя и счетчики

- `GET/POST /api/my-tasks` - личные задачи

- `GET /api/assigned` - назначенные задачи

- `GET/POST /api/teams` - список команд и создание команды

- `GET /api/teams/` - детали команды

- `POST /api/todos//status` - смена статуса задачи

Запускать будем на хостинге Amvera. Это даст нам бесплатный домен с настроенным SSL и возможность не думать о настройке VPS -- достаточно загрузить файлы проекта и сервис все сам запустит и настроит.

В репозитории уже есть для этого файл конфигурации `amvera.yml`:

meta: environment: python toolchain: name: pip version: 3.12 build: requirementsPath: requirements.txt useCache: true run: persistenceMount: /data scriptName: main.py containerPort: 80

Для начала создаем приложение, даем ему имя (например, «miniapp»), и выбираем тариф. Далее загружаем файлы в проект.

Если загружаете через интерфейс - скачайте архив из GitHub, распакуйте и загрузите файлы:

Если загружаете через Git, то выполните эти команды в терминале:

git clone https://github.com/Dimentiy-cmd/Task-tracker-on-Mini App . git remote add amvera https://git.msk0.amvera.ru/<имя_пользователя>/<имя_проекта> git push amvera master

После этого добавьте переменные окружения:

Добавляем наш токен, который мы получили у @Botfather

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

Убедитесь, что конфигурация успешно применилась:

Завершите создание, начните сборку и дождитесь запуска приложения.

Наш бот успешно запустился и мы можем это проверить командой `/start`:

Далее нужно подключить фронт Mini App к боту. Сначала создайте домен в разделе «Домены»:

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

Затем откройте @BotFather и введите команду `/setmenubutton`. Выберите бота, задайте название кнопки (например, «Открыть интерфейс») и укажите ссылку на ваш Mini App (домен из предыдущего шага).

Вуаля, у бота появилась кнопка по нажатию которой, откроется веб-интерфейс:

Ура, наш Mini App опубликован и работает!

В итоге получился домашний таск-треккер, который объединяет бота и Mini App в одном проекте: личные и командные задачи, приоритеты, статусы и назначения исполнителей. Такой проект удобно развивать дальше под свои процессы: добавить дедлайны, напоминания, фильтры и расширенные роли доступа.

Уточнение: проект mini app частично написан нейронкой и доведен до ума своими руками).

Разрабатываем Telegram Mini Web App на примере личного таск трекера

Итог создания Mini App

Архитектура нашего TG Web App

Архитектура базы данных

API для Mini App

Публикация созданного Web App на хостинге

Заключение