Назад

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

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

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

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

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

Что такое 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 часов и поможем подобрать бюджет для проекта.

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

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

2 оценок, среднее 5 из 5.

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

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

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

Share