- Ігор Білецький
- 28.08.2021
- Комментариев нет
Для того, чтобы у вас была возможность управлять вашим телеграм-ботом из гугл таблицы с помощью скрипта, необходимо опубликовать ваш проект со скриптами как веб-приложение (развернуть веб-приложение).
В данной статье я расскажу и покажу, как это сделать.
Вначале необходимо зайти в редактор скриптов и найти кнопку «Начать развертывание».
Затем выбираем подпункт «Новое развертывание».
ОБНОВЛЕНИЕ ТЕЛЕГРАМ! Сайты внутри месенджера!
Выбираем тип — «Веб-приложение».
На следующем экране определяем конфигурацию нашего приложения. Здесь нужно быть внимательным, т.к. при некорректном выборе у вас может что-то не работать).
Итак, придумываем имя приложения, затем выбираем запуск от своего имени и в последней ячейке вводи значение «Все». Если ввести другое значение, ваш бот не сможет оправлять данные в ваше приложение.
Когда все поля заполнены, кликаем на «Начать развертывание».
На последнем этапе запоминаем ссылку на приложение (чтобы потом вы могли ее использовать в вашем проекте) и кликаем на «Готово».
Все, ваше приложение развернуто и готово к работе).
Как подключить бота и обрабатывать его сообщения, я делюсь здесь.
Кстати, если наш сайт принес вам пользу и вы хотите сказать нам «Спасибо» и поддержать нас , то это можно сделать ЗДЕСЬ.
Рекомендую почитать:
- «Учет заказов по работе с клиентами в Гугл Таблице: бесплатное готовое решение»
- «Скачать футажи, видео, видеошаблоны, презентации, графику и т.д.: цифровые ресурсы без ограничений»
- «10 бирж фриланса и удаленной работы для новичков и профи: список и рекомендации по заработку»
Источник: forbiz-online.org
Создаем Telegram бота №16. Веб приложения.
WebApp для Telegram
В Telegram Bot API 6.0, вышедшем в 16-04-2022 была добавлена поддержка WebApps, которая позволяет открывать страницы HTML5 в окне приложения Telegram с поддержкой JavaScript, для которого доступно
Введение
Автоматизация обработки сообщений и данных с помощью Telegram Bot API описана в публикации Бот для Telegram. Реализованный бот взаимодействует с пользователем в окне приложения Telegram и ограничен его возможностями. Приложения WebApp позволяют пользователю перейти из окна приложения Telegram в окно приложения WebApp для получения дополнительных возможностей, а затем вернутся обратно.
Дополнительные возможности приложений WebApp обеспечиваются тем, что они реализуются HTML5 с поддержкой JavaScript, SVG, MathML и других современных технологий. Технологически WebApp — это web-страница открытая в браузере приложения Telegram.
Технология Telegram WebApp реализуется бесшовно, и пользователь почти не ощущает перехода между приложениями, благодаря автоматическому обмену данными и цветовой схемой между приложением Telegram и приложения WebApp.
Общая схема технологии WebApp
В приватном чате
- Telegram Бот публикует в приватном чате пользователя обычное сообщение, которое включает объект reply_markup типа ReplyKeyboardMarkup, которое включает объект keyboard с массивом массивов объектов типа KeyboardButton, среди которых есть объект кнопки с объектом web_app типа WebAppInfo с свойство url типа String, содержащим URL, необходимый для вызова WebApp.
- При нажатии на KeyboardButton с объектом web_app файл по указанному URL загружается приложением Telegram
Запусть WebApp можно с помощью кнопки, которая отмечена специальным знаком
Кнопки WebApp работают в приложении Telegram и не работают в web.telegram.org в браузере.
Настройка кнопки меню
WebApp будет отображаться в приложении Telegram кнопкой в левом нижнем углу, если выполнить следующие действия:
В приложении Telegram кнопка немедленно появится в приватном чате бота.
Бот /отправитель
Запуск бота с inline-кнопки даёт суть тоже самое, что и предыдущий вариант. Однако, запуск с keyboard button дает возможность отправлять данные из веб-приложения в бота.
2.1. Делаем все стандартные штуки для запуска бота — импорт библиотеки, ввод токена, infinity_polling, обработчик команды start. Если вы не понимаете о чем я, вам сюда.
2.2. Создаем функцию, которая вернет нам клавиатуру с нужной кнопкой.
Для того, чтобы создать кнопку, нужно сначала создать WebAppInfo-объект внутри которого будет url на наш сайт.
примере для библиотеки pytelegrambotapi:
Источник: reks.biz
Создание telegram web apps и взаимодействие с ними в телеграм ботах
В обновлении Bot API 6.0 телеграм-боты получили много новых функций. Из них для разработчиков самая примечательная — Telegram Web Apps (Веб-приложения внутри телеграм). С этим нововведением разработчики могут подключать к своим ботам web-приложения, которые открываются в дополнительном окне, что сильно расширяет инструментарий, а, следовательно и функционал ботов в телеграм.
Приложения Telegram известны своей скоростью, плавностью и кросс-платформенным дизайном. Ваше веб-приложение в идеале должно соответствовать этим принципам.
— Все элементы должны быть отзывчивыми и спроектированы с учетом мобильной ориентации устройств.
— Интерактивные элементы должны имитировать стиль, поведение и назначение уже существующих компонентов пользовательского интерфейса.
— Все анимации должны быть плавными, в идеале 60 кадров в секунду.
— Все input и изображения должны содержать label для доступности.
— Приложение должно обеспечивать бесшовную работу, отслеживая изменение цветов темы с помощью 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() // метод закрывает приложение.