Назад

Как сделать 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

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

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

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

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

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

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

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

    Share