В обновлении Bot API 6.0 телеграм-боты получили много новых функций. Из них для разработчиков самая примечательная — Telegram Web Apps (Веб-приложения внутри телеграм). С этим нововведением разработчики могут подключать к своим ботам web-приложения, которые открываются в дополнительном окне, что сильно расширяет инструментарий, а, следовательно и функционал ботов в телеграм.
Приложения Telegram известны своей скоростью, плавностью и кросс-платформенным дизайном. Ваше веб-приложение в идеале должно соответствовать этим принципам.
— Все элементы должны быть отзывчивыми и спроектированы с учетом мобильной ориентации устройств.
— Интерактивные элементы должны имитировать стиль, поведение и назначение уже существующих компонентов пользовательского интерфейса.
— Все анимации должны быть плавными, в идеале 60 кадров в секунду.
— Все input и изображения должны содержать label для доступности.
Проблема со входом в Telegram Решение браузера Chrome | Как решить проблему со входом в Telegram
— Приложение должно обеспечивать бесшовную работу, отслеживая изменение цветов темы с помощью API, и используя их соответствующим образом.
Давайте же опробуем это на практике!
Создание кнопки
Первое, что нам нужно сделать — создать кнопку запуска веб-приложения. Это можно сделать двумя способами:
1.2. Далее выбираем бота, которому нужна кнопка веб приложения
1.3. Отправляем ссылку по которой доступно наше веб-приложение
1.4. Пишем имя кнопки — будет отображаться внизу слева
Вот и все. В целом, если у вас есть адаптивный сайт и вы хотели просто добавить его в бота, тут можете остановиться.
Только при добавлении кнопки этим способом мы можем получить информацию о пользователе.
2. В коде бота — клавиатурные кнопки.
Запуск бота с inline-кнопки даёт суть тоже самое, что и предидущий вариант. Однако, запуск с keyboard button дает возможность отправлять данные из веб-приложения в бота.
Покажу на примере pytelegrambotapi — я понимаю, что это не самая популярная библиотека для написания телеграмм-ботов, но так получилось, что я пишу именно на ней. Если вы пользуетесь другой библиотекой/языком, думаю, вам не составит труда действовать по аналогии. Вы можете сразу посмотреть пример или перейти в репозиторий и посмотреть код с комментариями:
2.1. Делаем все стандартные штуки для запуска бота — импорт библиотеки, ввод токена, infinity_polling, обработчик команды start. Если вы не понимаете о чем я, вам сюда.
2.2. Создаем функцию, которая вернет нам клавиатуру с нужной кнопкой.
Для того, чтобы создать кнопку, нужно сначала создать WebAppInfo-объект внутри которого будет url на наш сайт.
def webAppKeyboard(): #создание клавиатуры с webapp кнопкой keyboard = types.ReplyKeyboardMarkup(row_width=1) #создаем клавиатуру webAppTest = types.WebAppInfo(«https://telegram.mihailgok.ru») #создаем webappinfo — формат хранения url one_butt = types.KeyboardButton(text=»Тестовая страница», web_app=webAppTest) #создаем кнопку типа webapp keyboard.add(one_butt) #добавляем кнопки в клавиатуру return keyboard #возвращаем клавиатуру
2.3. Отправляем сообщение с нашей клавиатурой при отправке команды или любом другом действии:
ТЕЛЕГРАММ В БРАУЗЕРЕ
bot.send_message( message.chat.id, ‘Привет, я бот для проверки телеграмм webapps!)’, reply_markup=webAppKeyboard())
Готово. Кнопки у нас есть.
Тут можно вообще закончить, если вы просто хотели, чтобы пользователь мог открыть ваш сайт из бота (зачем-то). Работать это будет вот так:
Работа с веб-приложением
Теперь идем в наше веб-приложение. На момент написания статьи открывается любая ссылка, даже на codepen.
Инициализация
Чтобы взаимодействовать с телеграм подключаем скрипт:
После этого нам будет доступен объект: window.Telegram.WebApp
Записываем его в переменную и начинаем нашу работу.
let tg = window.Telegram.WebApp;
Что же мы теперь можем? Не так много, как хотелось бы, но и не мало. Приложение состоит из: основной кнопки (telegram-объект) и самой страницы, которая загрузилась по ссылке. Остальные элементы telegram-интерфейса нам не доступны. Однако, доступны цвета темы пользователя:
Цвета
Они доступны в формате hex как css-переменные:
var(—tg-theme-bg-color)
var(—tg-theme-text-color)
var(—tg-theme-hint-color)
var(—tg-theme-link-color)
var(—tg-theme-button-color)
var(—tg-theme-button-text-color)
Или как объект ThemeParams в js (вместо window.Telegram.WebApp я использую переменную tg):
Но будьте осторожны, цвета — необязательный параметр, поэтому стоит проверять, есть ли они, перед тем как использовать.
Также имеется обработчик события изменения цветовой схемы:
При изменении цветовой схемы или размеров окна можно поменять что-то и в нашем веб-приложении.
Основные возможности
С цветами разобрались — теперь к другим основным параметрам:
tg.initData //получаем данные от пользователя в виде строки (работает только при запуске из меню команд бота). tg.initDataUnsafe // получаем данные от пользователя в виде объекта (работает только при запуске из меню команд бота). tg.isExpanded // возвращает true, если приложение открыто на всю высоту, false — если нет. tg.viewportHeight // вернёт ширину окна. tg.sendData(data) // отправляет данные боту в строковом виде, после чего закрывает приложение (работает только если приложение запущено с keyboard button). tg.ready() // метод позволяет отследить, когда приложение готово к отображению. tg.expand() // метод позволяет растянуть окно на всю высоту. tg.close() // метод закрывает приложение.
Main button
Как выйти из Телеграма на компьютере
Вход в любую социальную сеть или мессенджер не представляется сложным. Для начала требуется скачать мобильную версию приложения, представленную в онлайн-магазинах для систем Android и iOS. Далее разработчик предоставляет доступную инструкцию, по которой проводится вход. При выходе пользователь иногда сталкивается с трудностями. Рассмотрим, как выйти из Телеграм на различных устройствах.
Выход из Telegram через ПК и ноутбук
Вход в некоторые мобильные приложения на персональном компьютере осуществляется через браузер. Рассмотрим, как пошагово выйти из Телеграма на персональном компьютере или ноутбуке:
- В верхнем левом углу необходимо кликнуть на меню, представленное тремя полосками. Перейти в настройки «Settings».
- Внизу всплывшего окна найти строчку «Log out» и кликнуть на нее.
- Выход завершается подтверждением операции нажатием на «Log out».
Для повторного входа необходимо получить код, который будет отправлен в Телеграм на смартфоне.
Выход через мобильное приложение Telegram
Для обеспечения безопасности учетной записи, необходимо периодически выходить из мессенджера на всех платформах. Как правило, вопросов о том, как выйти из личного аккаунта Телеграма через русифицированное мобильное приложение возникает меньше.
Алгоритм по отключению (выходу):
- Слева вверху нажмите на три полоски для входа в меню. Во всплывающем списке нажмите на «Настройки».
- В верхнем правом углу нажмите на три точки, где откроется возможность нажать на «Выход».
- Также можно выйти через меню. Позиция «Выход» находится внизу списка.
- Выйдите, подтвердив свое действие во всплывающем окне.
Для повторного входа в случае закрытых аккаунтов со всех устройств, код следует запрашивать в виде SMS на номер телефона.
Закрытие профиля в Telegram через браузер в мобильном телефоне
Онлайн-платформой можно пользоваться через смартфон, используя как мобильное приложение, так и браузер. В последнем случае не будут приходить уведомления, но скорость передачи сообщений останется высокой. Рассмотрим, как выйти из Телеграма с помощью браузера на телефоне. Здесь шаги такие же, как действия на компе.
- В открытом окне нажмите на 3 полоски в верхнем правом углу.
- В появившемся окне нажмите «Log out». Это позволит отключить активную учетную запись.
- В случае русской версии нажмите «Выход».
Для перехода на русскую локализацию следует:
- Перейти в «Setting».
- В появившемся списке выбрать «Language».
- Из предложенных вариантов выбрать русский язык, расположившийся внизу списка.
Смена на любой другой язык осуществляется по такому же принципу.
Выход со всех устройств одновременно
Часто возникает вопрос о том, как можно выйти из Телеграма сразу на всех устройствах. Данная операция возможна для завершения всех текущих сессий кроме той, в которой производится это действие.
На примере мобильного приложения рассмотрим завершение нескольких сеансов:
- Нажав на три полосы для входа в меню, выбираем «Устройства».
- Проматывая список немного вниз, отыскиваем «Завершить все сеансы».
- Подтверждаем действие, нажав «Завершить».
При этом для Телеграм веб-инструкция для того, как выйти из всех сессий, отличается:
- Нажав на 3 полоски в верхнем углу, необходимо перейти в «Settings» и там нажать на 3 точки. Откроется окно, где необходимо выбрать «Active sessions».
- В открывшемся окне нужно нажать «Terminate all other sessions».
- Перед тем, как закрыть все активные сеансы, появится окно для подтверждения действия. После нажатия на «OК» все сессии будут завершены.
Задача, как выйти с веб Телеграма на компьютере, решена.
Важные детали, о которых нужно знать
Во всех вариантах возможного использования Телеграма при решении выключить активную сессию, необходимо перейти в настройки. Больше вопросов возникает о том, как выйти из веб-версии, потому что она представлена лишь в английской локализации. При этом важно помнить, что для выхода необходимо найти строчку «Log Out». Ориентироваться необходимо на нижнее расположение в открывающихся окнах.
Перед тем, как выйти из Telegram, приложение предупреждает об удалении скрытых чатов.
Также стоит обратить внимание на следующие моменты:
- Если в браузере на смартфонах, а также в мобильном приложении существует возможность смены языка профиля, то на ПК и ноутбуках подобное решение отсутствует.
- Обычно при аутентификации требуется указать страну и номер телефона, на который будет выслан код подтверждения. Важно помнить, что в случае открытого мессенджера на другом устройстве, пароль будет выслан в чат. По этой причине не стоит ждать SMS-сообщения на телефон. Если же закрывается единственная активная сессия, то в последующем открытие будет проводиться посредством ввода кода, пришедшего в СМС.
В Телеграм можно входить сразу с нескольких устройств. При этом в системный чат придет уведомление о том, что со сторонних устройств осуществляется вход.
Источник: ustanovkaos.ru