{"id":14268,"url":"\/distributions\/14268\/click?bit=1&hash=1e3309842e8b07895e75261917827295839cd5d4d57d48f0ca524f3f535a7946","title":"\u0420\u0430\u0437\u0440\u0435\u0448\u0430\u0442\u044c \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u0430\u043c \u0438\u0433\u0440\u0430\u0442\u044c \u043d\u0430 \u0440\u0430\u0431\u043e\u0447\u0435\u043c \u043c\u0435\u0441\u0442\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e?","buttonText":"\u0423\u0437\u043d\u0430\u0442\u044c","imageUuid":"f71e1caf-7964-5525-98be-104bb436cb54"}

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

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

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

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

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

Скрин экрана 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 описанный в этой статье.

0
10 комментариев
Написать комментарий...
Егор Томин

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

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

Ответить
Развернуть ветку
Максим Бобков

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

Ответить
Развернуть ветку
maks pachino

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

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

Ответить
Развернуть ветку
Игорь Зайцев
Автор

Дополню

Ответить
Развернуть ветку
Максим Акимов

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

Ответить
Развернуть ветку
Игорь Зайцев
Автор

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

Ответить
Развернуть ветку
Игорь Зайцев
Автор

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

Ответить
Развернуть ветку
Игорь Зайцев
Автор

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

Ответить
Развернуть ветку
Егор Томин

Принял!
Скажите, возможно встречали планировщик задач ВКонтакте?

Или как вам идея его сделать 😅
Ниша на мой взгляд свободна

Считаю что ВК мини эпс - очень недооценивают

Ответить
Развернуть ветку
Павел Павлов

А можно создавать подобные кнопки в каналах или группах ?

Ответить
Развернуть ветку
7 комментариев
Раскрывать всегда