Назад

Как сделать Telegram Web App: подробный гайд по созданию приложения

Telegram — уже давно не просто мессенджер. Это универсальная платформа, на которой можно и почитать новости, и найти работу, а теперь еще и купить кроссовки. Все благодаря новому типу приложений внутри мессенджера — Telegram Web Apps (TWA).

TWA полезны не только для пользователей, но и для бизнеса. В статье рассказываем, в чем плюсы и минусы Telegram WebApps, как их разработать, и сколько это стоит.

Время чтения: 7 минут

рука держит окруженный монетами смартфон, на экране которого изображен хомяк, обнимающий иконку Telegram
Содержание

Ищете слаженную команду разработки?

Поможем с дизайном 
и разработкой приложений для бизнеса и стартапов

10 лет на рынке 550+ проектов
Обсудить проект

Что такое Telegram Web App?

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

Telegram Web App — это чат-бот, внутри которого живет полноценная веб-платформа. Допустим, у вашего бизнеса есть адаптивный сайт с мобильной версией. С помощью технологии TWA, можно разместить его внутри телеграм-бота и расширить охват аудитории.

страница на core.telegram.org с экраном мини-приложения DurgerKing

Чтобы показать, как работает TWA, Telegram запустил выдуманный фастфуд Durger King. В нем можно опробовать интерфейс и функции TWA.

Сегодня почти каждый второй житель России пользуется Telegram. По данным Mediascope, в среднем каждый день в мессенджер заходит 47% жителей страны. Так что у TWA большой потенциал по привлечению аудитории. А еще такие приложения можно быстро выпустить на рынок, сэкономив на полноценной разработке.

Кому пригодится Telegram Web App?

Спойлер: практически любому бизнесу. Но особенно полезны TWA будут для компаний в этих отраслях.

E-commerce

Если собираетесь запустить онлайн-маркетплейс, Telegram Web App станет отличным дополнением. Пользователи смогут заходить в ваш интернет-магазин через чат-бот в мессенджере — им даже не придется регистрироваться. Простой онбординг поможет клиентам быстро оформить заказ, а вам — повысить выручку.

Финтех

Telegram — полезный инструмент для продвижения финансовых продуктов. Некоторые финтех-компании даже используют Telegram как основную платформу. Например, крипто-токен Notcoin запустился в формате игры Telegram Web App, в которой пользователи зарабатывают виртуальные монеты за каждое касание экрана. Эти токены можно вывести на сторонний кошелек или конвертировать в обычную валюту.

страница на telegram.org/blog с описанием мини-магазина приложений Telegram

Недавно Telegram выпустил обновление, которое добавило в мессенджер магазин мини-приложений. В нем представлены самые популярные Telegram Web Apps.

Рестораны

Благодаря технологии TWA, в Telegram теперь можно заказать доставку еды, не выходя из приложения. Рестораны используют этот формат, чтобы привлечь новых клиентов и повысить конверсии.

Telegram Web Apps позволяют отправлять пользователям push-уведомления внутри мессенджера, чтобы мотивировать их сделать новый заказ, рассказать об акциях и скидках, а также для информирования во время выполнения заказа.

Сервисы для онлайн-бронирования

Например, TWA дают пользователям возможность записаться на прием к стоматологу и провести оплату, не выходя из мессенджера. Так что, если ваш бизнес предлагает клиентам услуги по расписанию, мини-приложение поможет упростить процесс бронирования и оплаты.

Хотите разработать TWA-приложение?
Мы можем создать MVP за 4 месяца, и это обойдется вам примерно в 5 000 000 руб. Свяжитесь с нами и получите бесплатную оценку проекта в течение 48 часов.
Связаться

Разработка Telegram Web App за 5 шагов

Итак, вы решили создать веб-приложение в Telegram. Давайте разберем ключевые шаги разработки и запуска TWA проекта.

1. Анализ рынка и постановка целей

Перед тем, как создавать TWA, стоит определиться с проектными целями. Для этого нужно сперва изучить рынок. Посмотрите на конкурентов, которые уже запускали мини-приложения в Telegram. Изучите, как устроены их боты: какие функции можно скопировать, а какие стоит улучшить или реализовать иначе.

Еще нужно определить целевую аудиторию и их потребности. От этого будет зависеть набор функций вашего TWA-продукта. Например, если вы хотите запустить криптокошелек в Telegram, подумайте, на кого он будет рассчитан — на новичков или на опытных инвесторов?

2. Создание UI/UX дизайна

Во втором шаге создаем UI/UX дизайн для веб-приложения. Он должен быть адаптивным — подстраиваться под всевозможные размеры и разрешения экранов. Поскольку большинство людей заходят в Telegram со смартфонов, важно уделить дизайну мобильной версии побольше внимания. Но и про десктопные устройства забывать не стоит.

3. Создание и настройка бота

страница на telegram.me, ведущая на главного чат-бота Telegram @BotFather

Создать бота в Telegram очень просто: находим аккаунт @BotFather в поиске мессенджера и пишем в чат команду “/newbot”.

Теперь создаём бота в Telegram через BotFather — «крестного отца» всех ботов. Пользователи будут открывать мини-приложение именно через наш чат-бот. Запускаем BotFather, отправляем команду “/newbot” и вводим название для нового бота.

4. Разработка веб-приложения

Пришло время писать код для приложения: с этим поможет опытная команда веб-разработчиков. Но, перед тем как начинать писать код, важно правильно подобрать технологии для разработки — фреймворки, базы данных и облачные платформы.

Основой стеков для создания веб-приложений, почти всегда становится JavaScript. Это универсальный инструмент, с помощью которого можно разрабатывать сайты любой сложности, всё что требуется — это подобрать правильный фреймворк под ваши потребности. После этого, дело останется за малым 😀

5. Запуск Telegram Web App

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

TWA-приложение готово! Пора его рекламировать. Самый дешевый способ — размещать платные объявления в телеграм-группах, в которых состоят ваши потенциальные клиенты. А чтобы еще больше повысить видимость приложения, опубликуйте его в стороннем магазине TWA — например, в Telegram Apps Center.

главная страница tapps.center, каталога мини-приложений на основе Telegram

Недавно появился большой сторонний каталог TWA — Telegram Apps Center. В нем уже есть десятки мини-приложений, и этот список регулярно пополняется.

Сколько стоит разработка Telegram Web Apps?

Здесь все зависит от типа приложения и количества фич. Давайте посмотрим на примерные цены самых популярных видов Telegram Web Apps:

Маркетплейсы

Если хотите запустить интернет-магазин в Telegram, итоговая цена будет зависеть от сложности. Например, маркетплейс с минимальной системой заказов и интеграцией одной платежной системы, будет стоить относительно дешево. А если интегрировать его с десятками сторонних сервисов и внедрить многоуровневое шифрование — цена сильно возрастет.

💰 Примерная стоимость разработки: 12 000 000 рублей

Игры

С играми похожая ситуация — чем больше фич, тем выше стоимость. Среднее игровое приложение будет стоить дороже, чем базовый интернет-магазин, но приложению с геймификацией будет проще удержать пользователя. Особенно если внедрить поддержку криптовалют, как это сделали Hamster Kombat и SEED App — одни из самых популярных TWA.

💰 Примерная стоимость разработки: 15 000 000 рублей

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

Мы разработали дизайн для главной игры в приложении — пазла «2048». А еще — задизайнили криптокошелек, логотип и интерфейс платформы.

экран блокчейн-приложения Kaiju с криптокошельком и Web3-играми; дизайн создала компания Purrweb

Залипательная игра помогает скрасить ожидание перевода, а ежедневные награды в виде токенов, помогают привлекать новых пользователей

Криптокошельки

главная страница ton.org/ru, где описаны преимущества блокчейн-сети TON

Telegram предлагает встроенный криптокошелек на основе блокчейн-сети TON. В него можно зайти через настройки мессенджера.

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

💰 Примерная стоимость разработки: 17 000 000 рублей

Мы разработали Broex — мобильный криптокошелек с минималистичным интерфейсом. Он поддерживает разные типы валют и позволяет быстро обмениваться виртуальными монетами. Мы создали интуитивно понятную систему навигации, внедрили селектор валют и фильтры. Итог: Broex запустился в формате полноценного кроссплатформенного приложения.

экран мобильного криптокошелька Broex, разработанного Purrweb

Хоть Broex и не был TWA проектом, основные функции криптокошелька довольно легко реализовать в Telegram

ЧИТАЙТЕ ТАКЖЕ  MVP для стартапа: что это, чем полезен и как запустить

Плюсы и минусы Telegram Web App

Теперь давайте разберем главные достоинства и недостатки Telegram Web App:

👍 Плюсы 👎 Минусы
Низкая стоимость разработки.

Запустить TWA гораздо дешевле и быстрее по сравнению с полноценным веб-приложением. Все потому, что Telegram Web Apps проще разрабатывать — особенно если у вас уже есть готовый сайт.

Ограниченный охват аудитории.

Пока что не вся аудитория Telegram пользуется TWA. Эти приложения появились недавно, поэтому у них ограниченный охват. Но их с каждым месяцем становится все больше, так что рост аудитории не заставит себя ждать.

Увеличенный клиентский трафик и конверсии.

Ваш бот останется в списке чатов пользователя после первого запуска. Благодаря этому TWA позволяют повысить конверсии и эффективно удерживать клиентов.

Зависимость от платформы Telegram.

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

Упрощенный онбординг.

Пользователям не нужно регистрироваться или скачивать сторонние приложения — все работает внутри Telegram.

Ограниченная функциональность по сравнению с PWA.

TWA не такие продвинутые, как PWA (Progressive Web Apps). Если перегрузить его кучей функций, то и работать оно будет медленнее.

Бесплатные push-уведомления.

Компании могут бесплатно отправлять клиентам пуши прямо в мессенджере. Рассылки уведомлений помогут напомнить пользователям о продукте и повысить конверсии.

Невысокий потолок производительности.

Web Apps в Telegram открываются во внутреннем браузере мессенджера. Поэтому их производительность ограничена, и оптимизировать их зачастую сложнее, чем обычные веб-приложения.

Успешные примеры Telegram Web App

Давайте посмотрим на лучшие примеры телеграм-ботов, которым удалось быстро набрать большую аудиторию:

Hamster Kombat

Hamster Kombat — пожалуй, самое известное TWA-приложение. Вот как оно работает: пользователь заходит в чат-бот, нажимает на хомяка и получает виртуальные монеты за каждое нажатие. Внутриигровые награды разработчики обещают конвертировать в криптовалюту с реальной рыночной ценностью.

Приложение стало массовым благодаря своей простоте: все, что требуют от игрока — это нажимать на экран. Этот подход оправдал себя: аудитория игры уже превысила отметку в 150 миллионов человек.

экраны игры Hamster Kombat — приложения Telegram Web App

Notcoin

Notcoin, как и Hamster Kombat, относится к жанру крипто-кликеров. Пользователи нажимают на экран и получают цифровую валюту. Приложение основано на блокчейн-сети TON, которую запустил сам Telegram. Токены Notcoin уже можно продавать и покупать на биржах — 1200 монет оцениваются примерно в $10.

экраны крипто-приложения Notcoin в Telegram

Подводя итоги

Технология Telegram Web Apps позволила платформе обзавестись функциями, которые пригодятся любому бизнесу — от маркетплейсов до ресторанов.

Telegram Web App можно использовать и как полноценную платформу, и как дополнительный источник клиентского трафика. А еще такое приложение позволит проверить спрос на продукт без лишних затрат на разработку. Если хотите создать Telegram Web App, поделитесь с нами деталями проекта через форму внизу страницы. Мы ответим в течение 48 часов и поможем подобрать бюджет для проекта.

Насколько публикация полезна?

Оцени эту статью!

10 оценок, среднее 3.8 out of 5.

Оценок пока нет. Поставьте оценку первым.

Так как вы нашли эту публикацию полезной...

Подписывайтесь на нас в соцсетях!

Share
[wpim]