Telegram APP приложение NutriTrack: полноценный мобильный сервис

Александр
Александр
Head of Front-end department
07.11.2024
4736
0

Значительная часть нашего блога посвящена тематике развития мобильных приложений. Но прямо сейчас в этой области бурными темпами развивается их новая волна – встроенные мини-приложения в мессенджере Telegram. Как они работают? В чем их преимущества для бизнеса? Сложно ли их запускать? Мы можем ответить на эти вопросы, поскольку на днях завершили первый подобный проект в нашей практике – Telegram-версию приложения NutriTrack. Этот опыт команды WEZOM может оказаться очень полезным для тех, кто размышляет над форматом запуска проекта под мобайл, а также для тех, кто интересуется новыми возможностями Telegram.

Обсудить проект
Заполните личные данные.
Phone
Нажимая на кнопку “Отправить”, вы даете согласие на обработку личных данных. Подробнее
Шаг 1 из 2

Что такое мини-приложения Telegram?

Мессенджер Telegram издавна предлагал возможность создания ботов под практически любые задачи. С помощью ботов компании и организации реализуют справочники, службы поддержки, разнообразные онлайн-сервисы и даже многопользовательские игры. Однако до недавнего времени у ботов было существенное ограничение – они были текстовыми, и могли предложить в качестве интерфейса лишь диалоговое окно и элементарную панель управления. 

В 2022 году мессенджер сделал огромный шаг вперед – у него появилась возможность встраивать в ботов полноценные веб-приложения (Telegram mini apps). Другими словами, теперь Telegram-бот – это уже не текстовое окно. В нем можно реализовать полноценный интерактивный веб-интерфейс, похожий на обычное мобильное приложение. При этом мини-приложение опирается на ресурсы мессенджера и может предоставить почти полноценный опыт в мобайле с поддержкой уведомлений и нативных функций устройства. 

Весной и летом этого года мини-приложения Telegram получили ряд важных обновлений. В частности, в мессенджере появилась собственная внутренняя валюта – "звезды", и соответствующая платежная экосистема. Возможности mini app очень быстро расширяются. На момент написания этого текста команда мессенджера анонсировала ряд новых фич: полноэкранный режим, отдельные иконки на главном канале, доступ к геолокации и ориентации гаджета, подписочные планы, монетизация рекламы и т.д. 

Преимущества таких приложений очевидны: они создаются быстро и просто, а временами позволяют по крайней мере частично обойти жесткие правила модерации/монетизации в App Store и Play Market. Кроме того, Telegram стремительно эволюционирует в отдельную экосистему: теперь у него есть встроенный браузер с поддержкой децентрализованной сети TON, собственный магазин мини-приложений и внутренняя блочкчейн-экономика. Поскольку у мессенджера есть почти миллиард активных пользователей, он превратился в огромный отдельный рынок, готовый к освоению брендами и компаниями. 

Идея мини-приложения для NutriTrack

Наша команда недавно завершила работу над инновационным мобильным стартапом. NutriTrack. Это вымышленный нейминг, ведь бренд нашего клиента защищен NDA. Но здесь важна суть, а не название: мы разработали мобильного ИИ-ассистента, помогающего пользователям формировать персональный план здорового питания и следить за рационом. 

О возможностях этого продукта можно подробно почитать в нашем портфолио: премиум-статус в приложении открывает пользователям преимущества наподобие персональных рекомендаций цифрового диетолога и расширенной аналитики.  

Хотя клиент был доволен стартом и динамикой развития мобильного приложения под iOS/Android, появление мини-приложений в Telegram вызвало у него огромный интерес. Ведь с точки зрения пользователя, доступ к сервису через мессенджер – это удобство и доступность. А с точки зрения бизнеса – это еще один канал продаж и возможность частично обойти жесткую комиссию по транзакции приложений в App Store.

Поэтому клиент обратился к нам с новым запросом: создать мобильное приложение на платформе Telegram, которое позволило бы пользователям взаимодействовать с сервисом в интерфейсе мессенджера. Ключевым преимуществом такого решения должна была стать возможность оплаты премиум-статуса в приложении с помощью "звезд" Telegram. 

Цели и задачи разработки

Мини-приложение для Telegram – это полноценное мобайл-решение, но с поправкой на то, что фронтом  для него служат ресурсы мессенджера. Как итог, разработка такого приложения в целом требует полноценного рабочего цикла: с созданием бэкенда и фронтенда, настройкой интеграций, тестированием и т.д. 

В данном проекте нашей команде следовало решить ряд задач: 

  • создание административной панели для управления контентом и базой пользователей мини-приложения;

  • реализация самого мобильного приложения, полностью адаптированного под платформу Telegram;

  • Разработка Telegram-бота, который служит фронтендом для взаимодействия пользователей с онлайн-сервисом клиента.

У нас на руках было готовое решение в виде мобильного приложения NutriTrack, так что создавать сложные системы с нуля не пришлось. Цель заключалась в том, чтобы адаптировать этот продукт под мессенджер, реализовать юзабилити для новой платформы, а также обеспечить мини-приложение возможности интеграции с цифровыми валютами и Telegram-кошельком.

Как проходила разработка

Требует ли разработка мини-приложения для Telegram каких-либо особых шагов? В целом нет, если не считать регистрации бота – но это самая простая часть. В нашем проекте для NutriTrack условно можно выделить такие этапы.

  • Анализ и планирование. Команда ознакомилась с запросом клиента, определила концепцию проекта, сформулировала его цели и задачи, подготовила техническую документацию.
  • Запуск бота. Чтобы интегрировать приложение в Telegram, нужно зарегистрировать в системе бота через сервис BotFather. Так разработчики получают уникальный токен, дающий доступ к API мессенджера.
  • Этап технической разработки. Команде необходимо было реализовать интерфейс приложения для фронтенда в Telegram и админпанель для менеджеров системы. Эти решения интегрировались с уже имеющимся бэкендом.
  • Контроль качества. Специалисты QA тестировали функциональность бота и мини-приложения в разных сценариях, выявляя ошибки и потенциальные проблемы с юзабилити.
  • Релиз и дальнейшая поддержка. Запуск мини-приложения в Telegram прошел успешно, команда изучает фидбек первых пользователей и работает над мелкими апдейтами его функционала.

В целом мы построили свою работу на проекте по agile-методологии Scrum, которая предусматривает организацию разработки в формате небольших спринтов продолжительностью 1-2 недели. По результатам каждого спринта мы отчитывались перед клиентом и получали от него свежий фидбек, чтобы направлять работу над юзабилити продукта в правильное русло. 

Тонкости разработки мини-приложения

Какие особенности имеет разработка mini app для Telegram? Можно отметить несколько тонкостей, о которых следует знать разработчикам и заказчикам таких решений. 

  • Telegram предлагает собственную библиотеку, которая позволяет работать с экосистемой мессенджера. Интеграция API не сложная: у библиотеки довольно простой и удобный функционал для работы с базой пользователей, формирования инвойсов и т.д. Telegram не берет платы за создание ботов, этот процесс максимально быстрый и дружелюбный для разработчика. Достаточно получить специальный токен, определить URL для интеграции приложения – и можно работать дальше. 
  • Мини-приложения Telegram по умолчанию работают с условной (т.е. неявной) сквозной авторизацией. Это значит, что экранов регистрации там нет: когда пользователь заходит в мини-приложение, он автоматически авторизуется по своему уникальному user ID от мессенджера. В некоторых случаях дополнительная авторизация используется для оптимальной защиты, или если требуется синхронизация с другими приложениями или сервисами.

  • Нативное приложение и Telegram-бот NutriTrack – это две полноценные отдельные площадки, в которых для пользователей создаются отдельные аккаунты. Но при необходимости в подобных проектах можно реализовать сквозную авторизацию с единым аккаунтом. То есть, пользователи смогут зарегистрироваться в нативном приложении, а затем залогиниться с той же учетной записью в Telegram-сервисе, и наоборот. 
  • Тестирование мини-приложения было в основном ручным и предполагало проверку основного функционала, такого как авторизация, вход, оповещения от бота и оплата премиум-подписки "звездами". Однако в проектах, требующих  разработки бэкенда с нуля и сложных интеграций, контроль качества может потребовать более существенных ресурсов. 

Что мы разработали

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

  • «Звездочки” Telegram. Приложение полагается на платежную экосистему мессенджера и использует для транзакций его внутреннюю валюту Telegram Stars. “Звездочки” позволяют оплачивать цифровые продукты и услуги. Они покупаются непосредственно в клиенте мессенджера и при необходимости выводятся в криптовалюту Toncoin. Это удобный способ оплаты премиум-статуса в NutriTrack.
  • Подписка и монетизация. Запустившись в экосистеме Telegram клиент сумел частично обойти жесткую политику монетизации App Store и Google Play. Другими словами, оплата сервиса в Telegram Stars пока не требует дополнительной комиссии, в отличие от транзакций в традиционных сторах. 
  • Простота авторизации. Пользователи Telegram получают доступ к NutriTrak в один клик, без регистрации, ввода логинов, паролей и т.д. Безопасность и конфиденциальность обеспечивается через идентификатор пользователя в мессенджере.
  • Telegram Wallet. Мини-приложение интегрируется со встроенным криптокошельком мессенджера, который поддерживает "звездочки" и криптовалюты. Это обеспечивает удобство, скорость и безопасность транзакций.

Результаты проекта 

Команда реализовала решение с комплексным функционалом в очень сжатые сроки – на разработку ушло всего 250 часов. Это сроки создания самого пользовательского Mini App, на базе уже готового бэкенда. 

Совсем недавно бот с мини-приложением ушел в релиз: он уже привлек несколько сотен первых пользователей, которые дают положительный фидбек по юзабилити и функционалу. Команда готовит апдейт с первыми улучшениями сервиса. 

LYNQ
eCommerce
Voyage
ваш цифровой помощник в каждой точке мира
смотреть проект
eCommerce
LYNQ
платформа для знакомств, изменяющая формат общения
смотреть проект
Healthcare
NutriTrack
ваш гид в мире здорового питания
смотреть проект
eCommerce
Voyage
ваш цифровой помощник в каждой точке мира
смотреть проект
eCommerce
LYNQ
платформа для знакомств, изменяющая формат общения
смотреть проект

Клиент WEZOM вполне доволен: он фактически запустил новое направление бизнеса, продавая подписку на свой сервис в гибкой блокчейн-экосистеме Telegram. Созданное нами решение предлагает пользователю удобство и простоту, а бизнесу – свободу дальнейшего развития функционала и монетизации. Новые планы наших партнеров предполагают запуск нового функционала NutriTrask и перспективу создания целого маркетплейса с услугами и продуктами здорового питания. 

Для команды WEZOM этот кейс важен во многих аспектах. Telegram сегодня не просто превращается в super app: он эволюционирует в отдельный сегмент сети, с собственными TON-сайтами и продуманной блокчейн-экономикой. Можно только представить, насколько большие перспективы открываются для тех, кто сегодня учится работать на этом рынке и пробует запускать там первые продукты. Нам нравится быть первопроходцами в таких амбициозных историях: это всегда приносит свои плоды в будущем.

Александр
Про автора
Александр
Head of Front-end department
10
Внедряет современные технологии (React, TypeScript, CI/CD), следит за производительностью, безопасностью, качеством кода и соответствием дизайна ожиданиям пользователей. Имеет опыт выстраивания слаженной командной работы, разработки процессов, взаимодействия с дизайнерами и backend-специалистами. Среди достижений — снижение количества багов в продакшене на 60%, сокращение time-to-market на 30%, а также успешное масштабирование команды и наставничество junior-разработчиков. Ориентирован на качество, эффективность и устойчивое развитие решений.
Больше статей от автора
Как вам статья?
Обсудить проект
Заполните личные данные.
Phone
Нажимая на кнопку “Отправить”, вы даете согласие на обработку личных данных. Подробнее
Шаг 1 из 2
Комментарии
(0)
Будьте первыми, кто оставит комментарий
have questions image
Остались вопросы?
Оставьте ваши контактные данные. Наш менеджер свяжется и проконсультирует вас.
Подписывайтесь на рассылку Айтыжблог
blog subscriber decor image
Хотите получать интересные статьи?
Нажимая на кнопку “Отправить”, вы даете согласие на обработку личных данных. Подробнее
Следите за нами в социальных сетях