В обновлении Bot API 6.0 телеграм-боты получили много новых функций. Из них для разработчиков самая примечательная — Telegram Web Apps (Веб-приложения внутри телеграм). С этим нововведением разработчики могут подключать к своим ботам web-приложения, которые открываются в дополнительном окне, что сильно расширяет инструментарий, а, следовательно и функционал ботов в телеграм.
Приложения Telegram известны своей скоростью, плавностью и кросс-платформенным дизайном. Ваше веб-приложение в идеале должно соответствовать этим принципам.
— Все элементы должны быть отзывчивыми и спроектированы с учетом мобильной ориентации устройств.
— Интерактивные элементы должны имитировать стиль, поведение и назначение уже существующих компонентов пользовательского интерфейса.
— Все анимации должны быть плавными, в идеале 60 кадров в секунду.
— Все input и изображения должны содержать label для доступности.
Web app TELEGRAM Бот на node js и React. Интернет магазин и форма обратной связи в телеграмм боте
— Приложение должно обеспечивать бесшовную работу, отслеживая изменение цветов темы с помощью 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
Мы можем взаимодействовать с кнопкой внизу приложения. Изменять ее текст, цвет фона и текста, показывать/скрывать, делать активной и деактивировать:
tg.MainButton.text // текст кнопки, по умолчанию: «Continue» tg.MainButton.color // цвет текста tg.MainButton.textColor // цвет подложки tg.MainButton.isVisible // видна ли кнопка (по умолчанию false) tg.MainButton.isActive // активна ли кнопка (по умолчанию true) tg.MainButton.setText(text) // метод для задания текста tg.MainButton.onClick(callback) // метод при нажатии на кнопку tg.MainButton.show() // показать кнопку tg.MainButton.hide() // скрыть кнопку tg.MainButton.enable() // сделать активной tg.MainButton.disable() // сделать неактивной tg.MainButton.setParams(params) // задает параметры в виде объекта
Web App User
И еще информация о пользователе, мы можем разобрать строку tg.initData или использовать tg.initDataUnsafe объект:
tg.initDataUnsafe.user.id // уникальный идентификатор пользователя tg.initDataUnsafe.user.isBot // бот ли пользователь (true/false) tg.initDataUnsafe.user.first_name // имя пользователя tg.initDataUnsafe.user.last_name // «фамилия» пользователя tg.initDataUnsafe.user.username // username пользователя tg.initDataUnsafe.user.language_code // код языка пользователя
Пишем веб-приложение
С этой информацией мы можем написать небольшое приложение, которое наглядно отобразит основные возможности.
1. Создадим небольшую html-основу:
Just text
Link
Some little hint
Show/Hide Main Button Enable/Disable Main Button
2. Пропишем изменения текста основной кнопки и изменение цвета:
let tg = window.Telegram.WebApp; //получаем объект webapp телеграма tg.expand(); //расширяем на все окно tg.MainButton.text = «Changed Text»; //изменяем текст кнопки tg.MainButton.setText(«Changed Text1»); //изменяем текст кнопки иначе tg.MainButton.textColor = «#F55353»; //изменяем цвет текста кнопки tg.MainButton.color = «#143F6B»; //изменяем цвет бэкграунда кнопки tg.MainButton.setParams(); //так изменяются все параметры
3. Далее повесим обработчик события на первую html-кнопку и при нажатии будем показывать/скрывать основную telegram-кнопку:
btn.addEventListener(‘click’, function() < //вешаем событие на нажатие html-кнопки if (tg.MainButton.isVisible)< //если кнопка показана tg.MainButton.hide() //скрываем кнопку >else < //иначе tg.MainButton.show() //показываем >>);
4. Еще один обработчик события на вторую html-кнопку, при нажатии которой будем активировать/деактивировать основную telegram-кнопку:
let btnED = document.getElementById(«btnED»); //получаем кнопку активировать/деактивировать btnED.addEventListener(‘click’, function()< //вешаем событие на нажатие html-кнопки if (tg.MainButton.isActive)< //если кнопка показана tg.MainButton.setParams(); //меняем цвет tg.MainButton.disable() //скрываем кнопку > else< //иначе tg.MainButton.setParams(); //меняем цвет tg.MainButton.enable() //показываем > >);
5. В итоге отправляем данные при нажатии на основную telegram-кнопку:
Telegram.WebApp.onEvent(‘mainButtonClicked’, function()< tg.sendData(«some string that we need to send»); //при клике на основную кнопку отправляем данные в строковом виде >);
Благодаря этому методу мы можем получить данные из веб-приложения в боте.
let usercard = document.getElementById(«usercard»); //получаем блок usercard let profName = document.createElement(‘p’); //создаем параграф profName.innerText = `$ $ $ ($)`; //выдем имя, «фамилию», через тире username и код языка usercard.appendChild(profName); //добавляем let userid = document.createElement(‘p’); //создаем еще параграф userid.innerText = `$`; //показываем user_id usercard.appendChild(userid); //добавляем
7. И добавляем стили, используя telegram-css переменные:
body < color: var(—tg-theme-text-color); background: var(—tg-theme-bg-color); display: flex; flex-direction: column; align-items: center; font-size: 18px; >.hint < color: var(—tg-theme-hint-color); >.link < color: var(—tg-theme-link-color); >.button < background: var(—tg-theme-button-color); color: var(—tg-theme-button-text-color); border: none; font-size: 18px; >.button:not(:last-child) < margin-bottom: 20px >#usercard
В итоге получаем такое веб-приложение:
Оно отображает основные возможности — получение информации о пользователе, задействование цветов его темы и управление главной кнопкой приложения.
Получаем данные от веб-приложения в боте
Теперь вешаем обработчик событий на сообщение, которое посылает веб-приложение в методе send (работать будет только с keyboard button):
И все — теперь мы можем получать информацию с сайта и отвечать на нее.
Есть и другие способы — но это уже немного другая история.
Источник: habr.com
Телеграм онлайн. Как зарегистрироваться в Telegram Web Online
Здравствуйте друзья! Вы наверняка уже слышали о Telegram web online, о том, что это один из лучших мессенджеров в Интернете. Вместе с тем, многие пользователи пока не используют этот классный инструмент в своей работе из-за того, что они не знают, как пользоваться Телеграмм. Естественно, такие пользователи пока не зарегистрированы в Telegram онлайн по этой причине. В данной статье будет дан краткий обзор мессенджера, будет показано, как в нём зарегистрироваться и как отправить своё первое сообщение.
Что такое Телеграм онлайн, какие его возможности?
Итак, что такое Телеграм? Согласно Википедии, Телеграм онлайн (его еще называют Telegram web online) представляет собой мессенджер, который работает во многих браузерах. Напомню, слово мессенджер происходит от английского слова Messenger, которое переводится, как курьер или связной.
Мессенджеры позволяют мгновенно производить обмен сообщениями между пользователями, чем не может сегодня похвастать ни одна электронная почта. Мессенджеры бывают разными, например, Skype тоже можно отнести к этой категории, где можно передавать сообщения в реальном времени, как с помощью голоса, так и с помощью видео.
Мессенджеров в Интернете сегодня достаточно много, но у них есть существенный недостаток – информация с них слабо защищена, поэтому она может стать лёгкой добычей хакеров. Кроме того, сегодня важно иметь высокую скорость обмена сообщениями и файлами различных расширений, включая медиафайлы.
Разработка платформы телеграмм веб началась в 2013 году нашим соотечественником Павлом Дуровым, который ранее создал известную всем социальную сеть ВКонтакте. Первоначально telegram web был разработан для устройств на iOS, но позже расширялись возможности мессенджера.
Сегодня Telegram можно использовать на любом смартфоне, а также его можно использовать на персональном компьютере с различными операционными системами – Windows, Mac, Linux и так далее.
Телеграмм это безопасная пересылка сообщений через самые незащищенные сети. Для этого создана распределенная серверная инфраструктура по всему миру. Благодаря этому Телеграмм является самым быстрым сервисом коммуникаций на планете. Кстати, им сегодня пользуются более, чем в 200 странах мира. Телеграмм можно использовать не только для личных задач, но можно использовать и для бизнеса, можно использовать вместо E-mail.
На основании телеграмм создали ряд сервисов, чтобы сделать телеграмм более доступным. Например, сервис мгновенный Поиск, который позволяет найти Ваше уведомление среди миллионов сообщений. Сейчас Телеграмм стал доступен для компьютеров и ноутбуков. Есть возможность быстрой передачи больших файлов – сервис декларирует 1,5 Гигабайта. Есть возможность организовывать большие групповые чаты (до 5000 пользователей), мульти чаты и супер группы.
Итак, какие задачи сегодня может решать Telegram web online:
- Вы можете мгновенно связаться с любым пользователем сервиса из любой точки мира;
- создав группы, Вы можете координировать работу своих сотрудников, Вы можете работать со своими коллегами, подписчиками;
- сможете синхронизировать все свои чаты на различных устройствах;
- прикрепить к сообщению документы любого типа и формата, включая медиафайлы, как писалось выше, до 1,5 Гб;
- сервис шифрует личные и деловые сообщения, к которым просто невозможно получить доступ третьим лицом;
- с помощью таймера сообщения удаляются, и их уже никто не сможет прочитать;
- сообщения можно хранить на специальном облаке;
- интересная функция – с помощью специально созданных ботов, Вы можете создавать собственные инструменты на API Telegram;
- через облако можно получать сообщения из различных устройств, сервис является свободным от рекламы и абсолютно бесплатный.
Телеграмм остается самым простым мессенджером, приложением на рынке. Каждый день на месснджер подписываются 350 тыс. человек. Сейчас запущена функция «Каналы», которая позволяет отправлять сообщения неограниченному количеству пользователей.
Это позволяет организовывать общение с неограниченным количеством читателей и клиентов. Вы можете создавать в нём свои группы. Есть группы, где удалось собрать 100 млн. подписчиков, есть блоггеры, которые ведут блоги через Телеграмм. Недавно смотрел видео, где пользователи умудрились настроить видео наблюдение через Telegram. Надеюсь, полученной информации вполне достаточно, чтобы получить представление о новом мессенджере, а теперь рассмотрим вопрос, как зарегистрироваться в Телеграмм веб?
Кстати, на блоге писались статьи об отправке больших файлов через Интернет — «Как передать файл большого объёма через Интернет«, а также «Как пользоваться облаком Mail«, можете прочитать их.
Telegram для компьютера. Как зарегистрироваться в Телеграмм веб?
Чтобы зарегистрироваться на Telegram, есть особенность – нужно сначала скачать программу, установить её на компьютер. И уже после установки программы можно будет регистрироваться. О том, как зарегистрироваться в Телеграмм веб, показано в прилагаемом ниже видео, но в тексте статьи я это тоже покажу. Итак, с чего начать?
Для регистрации на Telegram нужен официальный сайт telegram.org. Вы заходите на официальную страницу мессенджера и выбираете устройство, на которое Вы хотите установить программу Telegram. Вы можете выбрать Android, Windows Phone для мобильных устройств, Windows 7 (8, 10) или Mac для персонального компьютера. Нам нужен Telegram для компьютера, поэтому выбираем функцию «Telegram for PC», далее выбираем Windows или другую операционную систему (смотрите скрин ниже и видео в конце статьи).
После нажатия на кнопку «Telegram for PC», открывается новое окно, где Вам будет предложено нажать на синюю кнопку «Get Telegram For Windows», что означает, скачайте приложение Телеграмм для Windows. Вы скачиваете программу, а далее устанавливаете её и запускаете.
В Telegram web online регистрация осуществляется так же, как и ВКонтакте – через номер своего мобильного телефона. После запуска программы, сервис запрашивает страну, где Вы живете и номер Вашего мобильного телефона, его нужно ввести. Далее нажимаем кнопку “Next” – далее. Открывается следующая страница, где нужно выбрать тип устройства. Если мы устанавливаем Telegram web online на компьютер, то нужно выбрать надпись «here» и нажать на неё.
Далее открывается новое окно, где нужно вставить код подтверждения, он придет Вам на телефон в виде СМС и нажимаем Next. Открывается новое окно. В верхней части есть надпись First Name – сюда мы записываем наше имя. В поле «Last Name», записываем нашу фамилию и нажимаем кнопку «Sign Up» — зарегистрироваться. На этом регистрация на сервисе закончена.
Telegram web online, как пользоваться телеграмм
Теперь давайте кратко рассмотрим, как пользоваться телеграмм, как добавить первый контакт и как отправить первое своё сообщение? Для этого нужно перейти в панель управления. Чтобы туда перейти, нужно нажать на три черточки в верхнем левом углу. Далее нажимаем кнопку «Contacts» — контакты.
Поскольку контактов пока нет, нужно добавить новый контакт. Вы можете добавить только тот контакт, который уже есть в Telegram web online. Необходимо написать имя, фамилию и номер телефона зарегистрированного пользователя, далее нажимаем кнопку «Create» — создать. Всё, контакт добавлен и теперь мы можем написать уведомление нашему коллеге.
Чтобы написать сообщение, мы выбираем нужный нам контакт, переходим в нижнюю часть страницы Telegram и пишем сообщение. При желании мы можем прикрепить файл к нашему сообщению, нажав на скрепочку, можем прикрепить смайлик. Если Вы получите уведомление, то Вы его легко увидите, увидите Вы и прикрепленный файл.
Заключение
Итак друзья, из этой статьи Вы узнали, что представляет собой Telegram web online, узнали о его возможностях и характеристиках. Действительно это классный ресурс, он подходит, как для индивидуального использования, так и для бизнеса. Вы узнали, что можно использовать Телеграмм для компьютера с любой ОС. Вы узнали, как зарегистрироваться в Телеграмм веб, как создать первый контакт и как отправить свое первое сообщение.
Надеюсь, Вам пригодится показанная в статье информация, и Вы, сможете использовать этот замечательный инструмент. Удачи Вам!
С уважением, Иван Кунпан.
Источник: biz-iskun.ru
Телеграм веб настройка
Телеграм веб настройка очень простая. Она позволит всем пользователям, которые раннее не имели никакого доступа к телефону получить все возможности социальной сети через использование персонального компьютера.
Чтобы все функционировало исправно только необходимо разобраться с некоторыми действиями. Рассмотрим, как происходит телеграм веб настройка.
Основные шаги
Основные успешные шаги телеграм веб настройка заключаются в следующих действиях:
- Загрузка приложения. Пользователи изначально должны загрузить приложение из магазина приложений. Единственное что надо сделать это ввести в поиск слово телеграм. Можно ввести его как кириллическими, так и латинскими буквами. Ждать загрузки
- Регистрация. После того, как приложение было загружено, нужно пройти регистрацию. Регистрация вовсе несложная. Пользователи указывают свой телефонный номер и получают в автоматизированном режиме сообщение с кодом.
После этого у пользователя откроется доступ к чатам телеграмма. Если вы успешно дошли до данного шага остается совсем немного, а именно осуществить телеграм веб настройку.
Итак, для таких целей необходимо выполнить несколько по своего роду простых действий.
- Ввести в строчке браузера сайт web.telegram.org или же просто в любом поисковике фразу «телеграм веб браузер». Какой бы вы способ не выбрали следует перейти на сайт
- После загрузки пользователь увидит специальный QR код. Чуть ниже этого кода будет надпись на английском языке, как можно будет осуществить весь процесс регистрации
- Чтобы сделать сканирование кода, необходимо будет нажать на 3 черточки сверху и выбрать настройки. После нескольких секунд загрузки откроется субменю
- В нем необходимо выбрать устройства и открыть камеру для сканирования кода
- Остается только отсканировать код и ожидать проверку системы на подключение. Если подключение пройдет успешно пользователю придет уведомление об этом.
После этого можно будет пользоваться веб версией телеграма и просматривать новости и события, которые происходят в чатах и на каналах пользователей и компаний.
Итог
Именно таким образом не загружая приложение (можно потом удалить его) пройти разовую регистрацию и использовать приложение в дальнейшем. По такому принципу функционируют и другие мессенджеры. Стоит отметить что возможности по отправке сообщений и звонков, такие же как у мобильных пользователей. Все идет по тарификации интернет трафика.
Источник: dobriy-sovet.ru