Использование WebApp в телеграм

Данная статья — это инструкция в общем виде про создание бота с webapp. Детали реализации сильно зависят от кейса.

Что такое Webapp

Webapp — простыми словами это сайт, специально адаптированный не только под «маленькие экраны», но и под интерфейс и логику telegram в целом. То есть это не отдельный конструктор в рамках telegram, а встроенный в telegram интерфейс для отображения специально адаптированного web-сайта.

В качестве примеров webapp можно обратить внимание на ботов:

https://t.me/DurgerKingBot — официальный бот от telegram для демонстрации возможностей webapp
https://t.me/webapp_twin_sample_bot — тестовый бот на платформе Twin с подключенным webapp

Как создать бота в telegram с webapp

Для того чтобы сделать бота с webapp в телеграм на платформе Twin нужно выполнить несколько важных пунктов:

Создать непосредственно бота на платформе Twin с основной его логикой
Создать «чат» и прикрепить к нему нужного бота (статья тут)
Связать созданный «чат» с telegram ботом (статья тут)
Создать webapp-сайт, следуя данным рекомендациям
Привязать созданный webapp к кнопке в боте (статья тут)

Обратите внимание, что для выполнения пункта 4 (основного пункта данной инструкции), требуется Frontend разработчик, то есть потребуется такой человек либо на вашей стороне, либо на стороне клиента, для которого вы разрабатываете бота. Процесс разработки webapp очень схож с разработкой лэндинг страницы и может быть достаточно продолжительным для некоторых проектов.

Мы крайне рекомендуем вести разработку бота и разработку webapp параллельно, чтобы сократить сроки запуска всего проекта.

Статья, указанная в пункте 4 предназначается в первую очередь для Frontend разработчика и является шаблоном или рекомендацией к разработке самого webapp.

Для всех остальных пунктов достаточно навыков работы с платформой Twin.

Нет меток

Webapp что за программа

WebApp — веб-сайт как приложение
Версия: 1.0

Последнее обновление программы в шапке: 15.08.2022

Краткое описание:
Используй любой веб-сайт как полноценное приложение.

Описание:
WebApp — приложение которое позволяет использовать любой веб-сайт как полноценное приложение.

Ключевые возможности:
> Запущеное веб-приложение будет отображатся в списке задач, точно так же как и обычное приложение.
> Вы можете клонировать любое веб-приложение, и использовать различные аккаунты для одного приложения.
> Вы можете создавать свои веб-приложения из любого URL.
> Встроенный блокировщик рекламы который будет блокировать нежелательный контент.

Это первая стабильный версия приложения, я с радостью приму вашу критику и пожелания 🙂

Требуется Android: 5.0
Русский интерфейс: Да

Скачать:
Версия: 1.7 app-release.apk ( 111.05 МБ )

Прошлые версии

Сообщение отредактировал iperc — 02.10.22, 22:18

17.08.22, 10:19 | #2
●

Постоянный
Реп: ( 8 )
94KONG @ 16.08.22, 20:00
Как по мне обычный браузер не болие!

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

Каждый может найти свое применение, к примеру можно иметь множество приложений соц.сетей с различными аккаунтами.
Другие мои знакомые смотрят Youtube через это приложение, так как через него вырезается вся реклама.

94KONG @ 16.08.22, 20:00
возможностью делать свое боковое меню в виде ссылок (кнопки), и сменой темы светлая/темная

Я сейчас очень активно собираю отзывы, чтобы понять в каком направлении развивать приложение.

Спасибо еще раз за Ваш отзыв!

17.08.22, 12:20 | #3
●

Постоянный
Реп: ( 8 )
94KONG @ 17.08.22, 11:03
А так как по мне тупо я все и в своем браузере это все могу сделать.

К примеру иметь 3 веб-приложения с Telegram, или Instagram или Facebook c разными аккаунтами одновременно в браузере нельзя. В стандартном браузере одна общая сессия.
В этом приложении сессия изолирована для каждого приложения и можно иметь сколько угодно клонов одного приложения под разные аккаунты.
Это один из сценариев использования.

Вы можете скинуть аналоги прямо в ветку, мне и другим интересно будет посмотреть и сравнить.

94KONG @ 17.08.22, 11:03
подправ точное описание

Я подумаю над описанием, спасибо. Я пока не знаю чем в итоге будет это приложение, от того наверное и описание такое сумбурное 😆

24.08.22, 14:43 | #4
●

Начинающий
Реп: ( 1 )

Было бы здорово, если бы запускаемый браузер имел возможность работать в режиме «версия ля ПК». Тогда можно было бы запускать, например, web.whatsapp.com и иметь клон аккаунта, работающего на смартфоне.
Лично мне было бы очень удобно, т.к. часто использую планшет с подключенной клавиатурой в качестве ноутбука. И если на Windows я могу установить приложение, привязав аккаунт, то на Adnroid планшете это сделать проблематично. Можно, конечно, но именно как вкладку какого-нибудь браузера. А так — отдельный процесс. Клево.

29.08.22, 06:58 | #5
●

Активный
Реп: ( -12 )
Сюда б еще настройки proxy прикрутить, чтоб на заблокированные сайты можно было заходить.
02.10.22, 21:25 | #6
●

Постоянный
Реп: ( 8 )
gravesen @ 24.08.22, 13:43

Очень хорошая идея, я добавлю поддержку web.whatsapp в следующем релизе и напишу вам как только можно будет это протестировать 🙂

Добавлено 02.10.2022, 21:27:

langalier @ 29.08.22, 05:58
Сюда б еще настройки proxy прикрутить, чтоб на заблокированные сайты можно было заходить.

Планирую добавить VPN в приложение, но пока не знаю как скоро.
Спасибо за ваш отзыв, мне сейчас они очень важны 🙂

HTML5 и WebApp: что это за инструменты и как они помогают бизнесу

В интернете говорят, что тема игр в Telegram до конца не раскрыта, а в пример приводят чат-боты с простыми HTML5-приложениями. Мы решили разобраться, так ли хороши эти приложения, какие у них возможности и какие есть альтернативы. Рассказывает Даниил Рубцов, тим-лид отдела разработки агентства интерактивного маркетинга Trend Surfers.

453 показа
518 открытий

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

Что такое HTML5 и WebApp

HTML5 и WebApp — это инструменты, которые позволяют создавать игры и приложения внутри Telegram. С технической точки зрения оба инструмента — это страница браузера, которая открывается в мессенджере.

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

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

Посмотрите сами на оба варианта:

Чем отличаются HTML5 и WebApp и что это дает бизнесу

С точки зрения функционала HTML5 и WebApp отличаются еще сильнее, чем по внешнему виду. Если кратко, то у WebApp больше возможностей, которые бизнес может использовать для продаж и привлечения аудитории. Разберем это подробнее.

Переход по ссылкам в чистый браузер. У HTML5 есть ограничение — когда пользователь открывает приложение, он не может из него никуда перейти по ссылке.

В WebApp таких ограничений нет: в приложении можно спокойно разместить ссылку на сайт или приложение в условном App Store. Это позволяет ближе познакомить пользователя со своим продуктом.

Посмотрите, как это делает Самокат:

Монетизация. В HTML5-приложениях нельзя монетизировать свой продукт. Например, не получится встроить возможность принимать оплату или разместить рекламу.

В WebApp таких ограничений нет, и можно монетизировать что угодно. Например, собирать донаты в игре, принимать платежи, размещать рекламу и зарабатывать на ней. Вот пример, как это может выглядеть:

Возможность добавить приложение в меню вложений. У WebApp есть классная фишка — приложение можно добавить в меню вложений в Telegram. Это удобно, если человек часто пользуется приложением. Ему не нужно каждый раз искать WebApp. Для этого достаточно нажать на скрепку в любом чате, и он увидит нужное приложение. Посмотрите, как это реализовано у Wallet: при нажатии на эту иконку сразу из чата открывается приложение, а пользователь может одним действием перевести деньги.

Дистрибуция. У HTML5 есть два способа открыть приложение: напрямую из чат-бота или из чата с друзьями. В первом случае человек должен целенаправленно зайти в чат-бот, во втором — кто-то может в личной переписке отправить ссылку на приложение.

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

Еще прямо из WebApp можно пошерить приложение и за пределами Telegram, например ВКонтакте и других социальных сетях. Выглядит это как кнопка «Поделиться», но ее нужно предусмотреть на стадии разработки. В HTML5 добавить такую фичу нельзя.

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

Вызывать вибрацию при определенных действиях в приложении. Например, в приложении интернет-магазина можно вызвать вибрацию при неуспешной попытке оплатить товар.
Настраивать цветовое решение под тему устройства — если на смартфоне пользователя установлена темная тема, то и WebApp откроется в темной теме. Главное — предусмотреть это на этапе разработки и сразу спроектировать светлую и темную темы.
Добавлять подтверждение закрытия приложения. Например, если человек начнет оформлять в WebApp заказ и случайно нажмет на закрытие приложения, появится всплывающее окно с просьбой подтвердить действие.
Запрашивать у пользователя доступ к камере и микрофону. Например, в WebApp можно сделать так: когда человек снимает видеоролик, он может накладывать маски и применять другие эффекты к видео. Для брендов это означает, что люди могут делиться друг с другом такими видео. Это хорошая возможность бесплатной рекламы приложения и самой компании.

Может показаться, что у WebApp вообще нет минусов, но это не совсем так. Один нюанс все-таки есть.

Какие есть минусы у WebApp

Сейчас у WebApp нет возможности запрашивать доступ к личным сообщениям пользователя. Кажется некритичным, но иногда это может доставлять неудобства. Давайте сразу на примере.

Допустим, человек делится приложением доставки пиццы в своем Telegram-канале. Подписчик запускает WebApp прямо из канала, заказывает пиццу, закрывает приложение и ждет, когда получит заказ. Но так как у приложения нет доступа к личным сообщениям пользователя, отправить ему оповещение о готовности не получится. И чтобы узнать статус заказа, человеку нужно возвращаться в канал и запускать приложение заново.

Получается, возможность запуска WebApp из каналов и чатов позволяет привлекать больше аудитории. Но удержать эту аудиторию проблематично. Мы в Trend Surfers надеемся, что в скором времени Telegram это исправит. Тогда брендам будет проще не только привлекать, но и удерживать аудиторию. А пользователю будет удобнее взаимодействовать с приложением, даже если он запустил его из чата или канала.

Что в итоге

С точки зрения функционала HTML5-приложения морально устарели. По сравнению с WebApp у них сильно ограничен функционал. И наоборот — у WebApp есть большой потенциал, если Telegram будет развивать эту тему.

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

Пишите в комментариях, что вы думаете насчет будущего WebApp. И приходите в наш телеграмм канал, чтобы быть в курсе последних трендов из мира интерактивов, маркетинга и технологий.

При подготовке материала использовались источники:
https://confluence.twin24.ai/pages/viewpage.action?pageId=177307995
https://4pda.to/forum/index.php?showtopic=1053176
https://vc.ru/marketing/757834-html5-i-webapp-chto-eto-za-instrumenty-i-kak-oni-pomogayut-biznesu