Перейти к содержимому

Создание 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 баллов. Чем больше баллов, тем выраженнее симптоматика.

Страница теста HADS

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

Результаты теста HADS

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

Код описания результата

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

Калькулятор СКФ Калькулятор СКФ

Заключение

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

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