Создание Mini App для Telegram на React

Однажды моему другу пришла идея сделать медицинский инструмент внутри Telegram. Сначала мы думали о создании простого бота для прохождения медицинских тестов, но затем решили пойти дальше и создать полноценного “Медицинского помощника” внутри Telegram. Этот помощник будет тестировать пациентов и рассчитывать медицинские формулы. Для этого мы решили использовать относительно новую функцию Telegram — “Mini Apps”. Это небольшой сайт, упакованный в бота. В этой статье я поделюсь с вами этапами разработки.

Создание бота

Для создания Mini App необходимо сначала создать обычного бота в Telegram. Для этого переходим к @BotFather и вводим команду /newbot, затем вводим название бота и придумываем логин.

Теперь создаем Mini App командой /newapp.

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

На этом публикация Mini App в Telegram завершается.

Стек

Мы использовали стандартные технологии:

• HTML - разметка
• CSS (LESS) - стили
• Framework7 - UI фреймворк
• React - компонентный подход

Главная страница

На главной странице размещены блоки с ссылками на инструменты и страницы авторов.

Под капотом:

Госпитальная шкала тревоги и депрессии (HADS)

Первой функцией нашего сервиса стала возможность проверить уровень тревоги и депрессии с помощью распространенного теста из 14 вопросов. Этот тест не ставит диагноз, но может многое сказать вашему лечащему врачу.

Суть теста в том, что пациент отвечает на 14 вопросов и выбирает наиболее близкие ему по духу варианты. За каждый ответ начисляется от 0 до 3 баллов. Чем больше баллов, тем выраженнее симптоматика.

На странице с результатами можно увидеть шкалу тревожности и депрессивности, а также описание.

Пример кода формирования описания результата:

Калькулятор расчета скорости клубочковой фильтрации

Заключение

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

Ссылка на Mini App: https://t.me/umakhanpro_medical_bot/app