Тестируем веб приложения для ботов Telegram, в статье примеры работы VK mini apps в Telegram

Boxberry экран веб  приложения. Демонстрация работы в Telegram.
Boxberry экран веб  приложения. Демонстрация работы в Telegram.

16 апреля Telegram анонсировал Веб приложения для ботов. Теперь в интерфейсе ботов можно воссоздать или разработать новый дизайн, функционал сайта или мобильного приложения.

Как будут работать веб приложения в Telegram покажу на примере мини приложений для VK - Boxberry, доставка цветов Flawery, Vsemayki, Футбол (Матч -Центр). Приложения открываются внутри мессенджера.

Для исследования я авторизовался в VK на смартфоне, скопировал ссылки на несколько мини приложений VK, для демонстрации работы создал бота VK apps, разместил ссылки на эти приложения и добавил кнопки к этим ссылкам. Как и предполагалось приложения открываются и работают внутри мессенджера. Посмотреть можно в боте VK apps.

Скрин экрана VK apps bot. Кнопки и ссылки на веб приложения. 
Скрин экрана VK apps bot. Кнопки и ссылки на веб приложения. 

Скрины экранов Boxberry в Telegram:

Скрины экранов приложения Футбол (Матч центр)

Конечно, не все приложения VK подходят, отображаются и работают корректно. Эти примеры я разместил с целью показать какими могут быть боты Telegram после обновления Web apps Telegram.

Хорошо работают только те, что соответствуют рекомендациям web apps Telegram:

Рекомендации по дизайну

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


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

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

Все включенные анимации должны быть плавными, в идеале 60 кадров в секунду.

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

Приложение должно обеспечивать бесперебойную работу, отслеживая

динамические цвета на основе темы, предоставляемые API, и используя их соответствующим образом.

Подробнее о работе веб приложений для ботов Telegram.

В предыдущей статье я описывал Bio Link Bot - свой бесплатный конструктор ботов с применением web apps Telegram, в нем я сделал VK apps bot описанный в этой статье.

16
10 комментариев

Почему название VK apps - ассоциации только с социальной сетью ВКонтакте 🤔

Но по факту ведь речь только про Телеграм - или не так понял?

1
Ответить

В этой статье проверили возможность публикации в Telegram-ботах новых Web Apps, используя уже готовые проекты VK Mini Apps, как я понял

Ответить

Ничего не понятно. Как использовать новые обновления? Что нужно делать для того что бы собрать? На чем собрать? Что учитывать?

Ставлю статье плюс, в надежде что дополните.

1
Ответить

Дополню

Ответить

Не кто не сталкивался, с тем что в Desktop версии (window) телеграмма в WebApps не работает часть браузерного API, например тот же alert() ?

1
Ответить

Для отображения в клиенте телеграм под Windows используется Microsoft Edge Webview. В таком случае для проверки корректности работы веб-приложения нужно проверять работу с браузерами от Microsoft. Вероятнее всего в данном случае js проверяемого сайта неверно толкуется данными браузерами, возможно есть ошибка в синтаксисе, критичная именно для этих браузеров.

Ответить

Совет попробовать открыть сайт в edge и посмотреть вывод в консоли. Вероятнее всего там ошибка

Ответить