Как заставить Телеграм открыть веб версию вместо приложения

Содержание

В обновлении Bot API 6.0 телеграм-боты получили много новых функций. Из них для разработчиков самая примечательная — Telegram Web Apps (Веб-приложения внутри телеграм). С этим нововведением разработчики могут подключать к своим ботам web-приложения, которые открываются в дополнительном окне, что сильно расширяет инструментарий, а, следовательно и функционал ботов в телеграм.

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

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

Топ 3 лучших нейросетей)) сохрани себе ))

— Все 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() // метод закрывает приложение.

Еще по теме: Как убрать надпись пересланное сообщение в Телеграмме

Main button

Телеграмм в браузере. Как открыть телеграм на компьютере

Телеграмм на сегодня в России да и не только имеет достаточно большое распространение и количество пользователей растёт. На сегодня нас более 500 млн. человек по данным Wikipedia.
В свою очередь как перспективное направление для нас. Рубрика «Телеграмм» на нашем сайте, пополняется малоизвестными фишками, полезной информацией для вас.

Как зайти в telegram с компьютера

Иногда бывает нужно связаться с товарищем через Telegram, да вот беда – телефон либо разряжен, либо был забыт дома. Но всегда можно зайти в Telegram через комп. Причем, даже двумя способами:

Установка ПК-версии

Для начала потребуется скачать установочный файл. Найти его можно по адресу https://desktop.telegram.org/ или у нас на сайте ниже. Нужно выбрать пункт «Get Telegram for Windows». Будет доступна самая свежая версия мессенджера и гарантированно без вирусов.

Рекомендуем! InstallPack Стандартный
установщик

Официальный дистрибутив Telegram

Тихая установка без диалоговых окон

Рекомендации по установке необходимых программ

Пакетная установка нескольких программ

download-telegram.org рекомендует InstallPack, с его помощью вы сможете быстро установить программы на компьютер, подробнее на сайте.

Процесс установки прост и ничем не отличается от традиционной установки большинства Windows-приложений. После этого на Рабочем столе станет доступен ярлык для запуска мессенджера.

При первом запуске, как водится, Телеграмм потребует ввода телефонного номера пользователя в международном формате. Далее на указанный номер придет СМС с кодом доступа. Его нужно будет ввести в соответствующее поле.

Онлайн-версия Телеграмм

Зайти в Телеграмм через компьютер теперь можно и прямиком из браузера. Для этого потребуется перейти по адресу https://web.telegram.org. Во время первого сеанса будет также предложено ввести мобильный номер в международном формате и нажать на кнопку «Next». Точно так же затем на указанный номер поступит специальный код доступа. Его нужно будет ввести в специальное поле – и доступ к Telegram на компьютере будет открыт.

В последующем можно будет заходить в Телеграмм с компьютера как с повторным вводом телефонного номера, если производить разлогинивание перед каждым выходом, так и без него. Доступен также локальный парольный вариант для отдельно взятого компьютера. Правда, этот пароль не защитит от вторжения через онлайн-версию, если он установлен, например, для ПК-приложения.

При этом вся переписка, настройки, чаты и прочие данные будут бережно перенесены в ПК-версию. Ведь все это хранится не на устройстве пользователя, а на центральном сервере. Иначе для каждого приобретенного устройства приходилось бы формировать новый контакт-лист, проводить прочие тонкие настройки. Само собой, такой подход мало кого устроил бы.

Кроме того, Telegram, как известно, позиционируется братьями Дуровыми как один из самых безопасных мессенджеров в мире. В свое время Телеграмм даже получил несколько слов одобрения со стороны небезызвестного Эдварда Сноудена. Так что кража устройства пользователя не будет означать получение доступа к его переписке. Ни один из файлов сообщений или контактов не сохраняется на жестком диске.

Как зайти в Телеграм

Удобный интерфейс, безопасность и внимательность к пользователям — это то, за что любят Telegram миллионы людей по всему миру. Сегодня мы разберемся как войти в телеграмм если вы случайно вышли из аккаунта используя смартфон на Android и IOS, а также браузерную и десктоп версию для компьютеров.

С телефона

Для начала рассмотрим инструкцию для людей, использующих мессенджер от Павла Дурова на смартфоне, так как на ПК их значительно меньше.

Android

Итак, запустив приложение откроется стартовое окно с представлением преимуществ мессенджера через несколько слайдов. Если у вас нет приложения, его можно скачать из Play Market. Чуть ниже находятся пункты «Continue to English» (Продолжить на английском) и «Начать общение». Выбираем второй пункт.
Указываем привязанный при регистрации номер в соответствующем поле и тапаем по стрелочке в левом нижнем углу экрана. При необходимо нажмите на строку «Russian Federation», и выберете свою страну проживания.
Останется ввести полученные 5 цифр, и система автоматически войдет в аккаунт.

iPhone

Еще по теме: Как войти в Телеграмма без почтв

С компьютера

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

Через браузер

Перейдите по ссылке: https://web.telegram.org/#/login и введите в строку «Phone number» (см. скриншот ниже) указанный при регистрации номер. По окончанию заполнения кликните на «Next».
Система попросит вас перепроверить указанные данные. После перепроверки кликаем на «Ок».
Останется ввести полученный пароль и кликнуть на «Next».

Desktop версия

Для начала воспользуйтесь ссылкой и скачайте программу: https://desktop.telegram.org/. После успешной установки на стартовом экране нажмите на «Начать общение».
Далее необходимо указать номер телефона и выбрать «Продолжить». Здесь же имеется возможность использовать QR-код. Для его применения достаточно считать его через смартфон.
Вводим полученный пароль и авторизуемся.

3. На странице выдачи выберите один из вариантов расширения и ознакомьтесь с отзывами. Отдавайте предпочтение программам с наибольшим числом пользователей.

Телеграмм для Mozilla Firefox

Telegram для браузера Мозила устанавливают аналогично дополнению для Гугл Хром.

1. Перейдите по ссылке или выберите раздел меню «Дополнения» и укажите название мессенджера в поисковой строке.

2. Нажмите на голубую кнопку «Добавить в Firefox».

3. Подтвердите добавление Telegram Web.

4. В правом верхнем углу экрана появится значок Телеграмм и окошко с информацией о том, как управлять расширениями в браузере. Проставьте чекбокс и нажмите «Ok, понятно».

5. Установка завершена. Для запуска мессенджера кликните на иконку с голубым самолетиком справа вверху и переходите к вводу кода подтверждения.

Телеграм для Opera

Установка дополнения для Оперы проходит аналогично инсталляции расширений для Chrome и Firefox.

2. Введите в строку поиска «telegram».

3. Перейдите на страницу дополнения.

4. Нажмите на зеленую кнопку справа вверху.

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

Как настроить Telegram в браузере онлайн

Для перехода к настройкам мессенджера через браузер раскройте мобильное меню вверху слева и выберите пункт «Settings».

Если хотите упорядочить переписку и разложить чаты по директориям, кликните по строчке «Папки с чатами», нажмите на голубую кнопку «Новая папка», введите название и отметьте чаты, которые переносите.

Браузерная версия Telegram рекомендует создать папки «Новые» и «Личные». В директорию «Новые» попадаю чаты со свежими сообщениями. В директории «Личные» — сообщения из личных чатов.

В общих настройках установите размер текста сообщений, анимационные эффекты, клавиши для перевода строки и отправки сообщений.

В настройках чатов задайте фоновое изображение и цвет подложки.

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

Отключение автозагрузки медиа в чатах, каналах и группах повысит расход трафика, но освободит память устройства, занятую временными файлами.

Проставьте флажки в группе «Эмодзи» и «Стикеры». Разрешите Телеграмм web автоматически подбирать эмодзи на основе текста, советовать стикеры, выводить большие значки и зацикливать анимацию.

Если вам надоел набор стикеров, тапните по ненужной коллекции и нажмите «Удалить» в модальном окне.
В разделе «Уведомления и звук» в сборке Web K («Уведомления» в Web Z) включите или выключите уведомления и предпросмотр входящих сообщений.

Уведомления приходят, даже когда вкладка браузера с online-версией мессенджера закрыта. Если флажок «Message preview» в редакции Web K сброшен, вместо текста сообщения в правом нижнем углу экрана выводится «New notification».

В группе «Другое» отметьте флажок «Контакт присоединился к Telegram», если хотите поприветствовать стикером присоединившихся к социальной сети адресатов из записной книжки.

Если работаете со сборкой Web K, проставьте галочку в поле «Notification Sound» и установите звуковое оповещение о входящих сообщениях. В онлайн-редакции Web Z звуковые уведомления не реализованы.

3. На странице выдачи выберите один из вариантов расширения и ознакомьтесь с отзывами. Отдавайте предпочтение программам с наибольшим числом пользователей.

Официальное приложение Телеграмм для компьютера

Ещё один способ, возможно для кого-то он будет более предпочтительным, это скачать официальное приложение для Windows и других настольных компьютеров. Почти для каждой соц. сети и мессенджера существуют web-версии приложений для компьютеров, ноутбуков, смотрите на нашем сайте.

Скачать Телеграмм на свой компьютер вы сможете по ссылке — https://desktop.telegram.org/

Телеграмм на сегодня в России да и не только имеет достаточно большое распространение и количество пользователей растёт. На сегодня нас более 500 млн. человек по данным Wikipedia.
В свою очередь как перспективное направление для нас. Рубрика «Телеграмм» на нашем сайте, пополняется малоизвестными фишками, полезной информацией для вас.

Видео как установить приложение Telegram на компьютер

Будет не лишним посмотреть трёхминутный ролик о том что написано выше. А именно установка официального приложения на десктопную версию вашего устройства (компьютера или ноутбука).

Еще по теме: Браузер по умолчанию в Телеграмм

Источник: morkoffki.net

3 новых Telegram на выбор. Создатели главного конкурента WhatsApp выпустили два web-клиента и новое приложение

Пока суд в Германии планирует запретить WhatsApp передавать личные данные пользователей в США, наиболее популярный альтернативный мессенджер Telegram объявил о выпуске сразу трёх новых версий приложения. Помимо доступных в AppStore и GooglePlay версий, появились отдельный apk-файл для установки в обход магазина приложений и две web-версии клиента.

Во время предвыборной гонки в США якобы независимые приложения и сервисы активно боролись со свободой слова. Amazon блокировал популярную соцсеть, которой любили пользоваться сторонники бывшего президента Дональда Трампа, Facebook и Twitter удаляли аккаунты несогласных с цензурой граждан по всему миру, а сенаторы и политики всех мастей требовали от Apple и Google удалить из магазинов приложений российский мессенджер Telegram, так как он якобы стал ещё одним прибежищем трампистов и других несогласных с центральной линией Демократической партии США.

В самый разгар этой политико-цензурной истерии Павел Дуров выступил с анонсом, в котором пообещал, что Telegram останется доступным для пользователей, даже если его удалят из всех официальных магазинов приложений. В первую очередь Дуров имел в виду web-версию Telegram, которой может воспользоваться любой пользователь Интернета.

WebZ-Telegram и WebK-Telegram — одинаковы с лица

Как пользоваться web-версией популярного мессенджера? Всё просто: вбиваете в адресной строке вашего браузера webz.telegram.org или webk.telegram.org, и открывается окошко регистрации в Telegram, аналогичное тому, что вы видите в начале регистрации в обычном приложении. Для авторизации необходимо ввести ваш номер телефона, получить код, и можете начинать пользоваться сервисом.

Для гарантированной безопасности советуем сразу же настроить двухфакторную аутентификацию — это не позволит злоумышленникам украсть ваш аккаунт даже в случае, если вы потеряете телефон или sim-карту. Кстати, саму сим-карту обязательно заблокируйте с помощью установки ПИН-кода. Это делается в основных настройках вашего смартфона.

Так чем же отличаются WebZ- и WebK-клиенты? Во-первых, их делают две разные команды внутри Telegram. Дуров считает, что внутренняя конкуренция позволяет даже в рамках одной компании разрабатывать более качественный продукт. Тут как в «Горце» — выживет только один. То есть тот клиент, который через определённый промежуток времени окажется менее популярным, прекратит своё существование.

Разница между WebZ и WebK уже заметна. Например, в WebZ при свайпе вправо (в обычной версии приложения вы таким образом перемещаетесь из диалогового окна к списку контактов и каналов) браузер вернёт вас на предыдущее открытое окно — это выдающееся неудобство.

А у версии WebK — свой недостаток, там невозможно ответить на сообщение при долгом нажатии на него. Но это проблема решаемая: нажмите на пустое место рядом с сообщением и развернётся привычное меню «ответить/репост/закрепить».

Кстати, разница ещё в том, что WebZ-версия считается клиентом для компьютеров или ноутбуков, а WebK-версия заточена под смартфоны. Этим и объясняется проблема со свайпами у WebZ.

Пиратский Telegram на apk

Перейдём к рассказу о самой интересной версии приложения Telegram на сегодняшний день. Во-первых, она недоступна на iPhone — «яблочники», отдыхайте. Во-вторых, наверняка каждый из пользователей смартфонов на Android нет-нет да искал когда-нибудь apk-файлы в Интернете и различных «свалках приложений», потому что нужной вам программы не было в официальном магазине приложений.

Так вот, apk-файл Telegram находится прямо на его сайте и искать его на каких-то сторонних порталах (где ещё неизвестно, что вы скачаете, вирус или приложение) не нужно. Вот ссылка на официальный клиент (https://telegram.org/android), не благодарите.

В чём его отличие от официальной версии, доступной в GooglePlay? В официальной версии приложения — что в «яблочной», что в Android-версии — по требованиям правообладателей или из-за каких-то ещё нарушений заблокировано множество ботов и каналов. В версии с сайта Telegram царит, можно сказать, анархия.

Все боты и каналы, по которым вы скучали, по-прежнему там находятся. Наверняка Павел Дуров ещё поплатится за то, что снова пытается попирать западные копирайты, и за то, что пытается превратить очередное приложение в бесплатный безлимитный проигрыватель музыки (каким был когда-то «ВКонтакте»). Но пока можно, почему бы не воспользоваться?

Если завтра к Google или в Apple придут демократы с пылающими факелами и требованием немедленно запретить Telegram, не беспокойтесь, он продолжит работать.

Правда, apk-версию рано или поздно могут репрессировать за нарушение авторских прав. А web-версии клиентов лишены пока главной фишки приложений — у них не работают пуш-уведомления. То есть придётся вручную проверять, написал вам кто-то или нет. В ближайших обновлениях web-клиентов пуши обещают добавить, так что скоро они станут почти неотличимыми от обычной предустановленной программы.

Да, кстати, только представьте, сколько памяти смартфона у вас сохранится, если все фоточки и видео из «Телеги» будут храниться в облаке web-клиента, а не в памяти вашего телефона?

Источник: life.ru