Разработка
Nik Mich

Как создать веб-приложение для Telegram

Телеграм-боты — классная штука, но с ними есть одна проблема: ими неудобно пользоваться.

Ботов на сегодняшний день наплодили много, но для большинства людей они остаются какой-то непонятной и запутанной штукой с невнятным управлением: введите 1, наберите команду /superpuper+parameter и т.д.

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

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

В том, что я напишу дальше, нет никакого ноу-хау. Наверняка кто-то что-то подобное делал и успешно применял. Я просто описываю свой собственный инсайт о том, как превратить ботов в нечто более полезное, в надежде на то, что это будет тоже кому-то интересно.

Простая мысль. А что если бот не будет делать ничего, а только давать ссылку на веб-приложение? Веб-приложение получит идентификатор сессии бота (chat.id) и далее будет использовать этот идентификатор в качестве ключа для хранения профиля пользователя.

Поскольку интернет-страницы в Telegram открываются во встроенном браузере, в отличие, например, от WhatsApp, то работа пользователя в таком веб-приложении органически включается в непрерывный транзакционный цикл: початился с коллегами, позвонил маме, почитал каналы, поработал с веб-приложением.

Кроме того, сервер веб-приложения получает возможность отправлять пользователю пуш-уведомления в бот. И это одно из самых важных преимуществ этого симбиоза.

Возможно, все это звучит несколько запутано. Поэтому я разработал бота+веб-приложение (далее — БВП), чтобы продемонстрировать идею.

БВП The Lark – это небольшой тренажер для прокачки английского в игровой форме (не для начинающих, минимум для уровня B1). Вы можете установить его по ссылке

Стартовая страница приложения

У бота есть только две кнопки: Open и Reset.

Кнопка Open отправляет пользователю ссылку, которая при нажатии открывает веб-приложение во встроенном браузере. Когда пользователь поиграет в приложении, а затем закроет его, то оно запомнит достижения пользователя по chat.id. И в следующий раз, когда пользователь снова решит поиграть, веб-приложение стартует точно с того места, где в прошлый раз остановился пользователь.

Кнопка Reset сбрасывает достижения пользователя.

Вся система состоит из следующих компонентов:

  • Телеграм-бот (примерно 100 строк кода)
  • Обычное React-приложение, которое запускается из бота с идентификатором chat.id
  • База данных – таблица в Airtable, куда записываются достижения для каждого chat.id
  • Сервер веб-приложения, обслуживающий post/get запросы (примерно 200 строк кода).

Сервер, бот и веб-приложение – все написано на JS плюс пара строк на PHP.

Попробуйте и почувствуйте, как веб-приложение бесшовно встраивается в транзакционный цикл пользователя.

Симбиоз БВП позволяет получить в одном флаконе мощную связку веб-технологий и платформы Telegram.

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

Например, можно сделать БВП для складского учета: работники склада (или целой сети складов) ставят бота и через веб-приложение печатают и сканируют штрих-коды, отпускают и получают товар. Боту сервер при необходимости шлет всякие пуши (например, о новых заказах). Естественно, надо предусмотреть какую-то защиту, чтобы этим БВП могли пользоваться только сотрудники компании. Есть куча способов для любого уровня паранойи, не буду их тут описывать.

БВП The Lark в демонстрационных целях имеет самую примитивную защиту, так как бот генерирует ссылку всякий раз с новым рандомным токеном. Хотя для этого бота и такая защита является излишней.

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

Отдельно хотелось бы отметить, что такие БВП можно создавать для мероприятий: выставок, конференций, симпозиумов, и, извините за мой французский, митапов и хакатонов. Во время мероприятия БВП может оказывать персонализированную информационную поддержку каждому участнику. А после завершения мероприятия БВП не жалко просто выкинуть.

Не жалко, потому что БВП – это супердешевый и супербыстрый способ автоматизации бизнес-процессов. Что может быть на сегодняшний день быстрее и дешевле разработки шаблонного кода на JS? Фактически мы получаем почти полноценное кроссплатформенное мобильное приложение с дружественным интерфейсом, базой данных, красивостями и пуш-уведомлениями за короткий срок и смешные деньги.

Однако при этом нельзя сказать, что БВП подходят только для костыльных решений, и ничего серьезного на их основе не построишь.

Напомню, что платформа Telegram является очень надежной в техническом плане, и на сегодняшний день обслуживает более 500 миллионов активных пользователей. А мощность и надежность вашего веб-приложения зависит только от вас и вашего сервера.

Главный недостаток данного подхода состоит в том, что веб – это все-таки веб. И если бизнес-задача требует использовать функции, которые предоставляются не браузером, а операционной системой смартфона (например, нужна работа с файловой системой), то необходимо писать полноценное мобильное приложение. Тут уже в дело вступают Swift, Java, Kotlin. А это совсем другие сроки и совсем другие деньги.

Конечно, кто-то сейчас обязательно скажет: «Нечего изобретать велосипед, берете React Native и легко пишете мобильное приложение на JS». Сами пробовали? Легко? Если бы все было бы так просто, то разработка мобильных приложений не стоила бы так дорого. Разработчик на React Native стоит не сильно дешевле, чем разработчик на Swift. Потому что делать настоящее мобильное приложение – это не столько про язык, сколько про платформу.

В заключение хотелось бы сказать еще пару слов об идеологии. Как бы ни было соблазнительно поиграть с кодом бота и наклепать его побольше, весь значимый функционал и вся бизнес-логика должны по максимуму находиться в веб-приложении. Чем меньше в связке БВП вы будете использовать возможности Telegram Bot API, тем лучше. Сам бот должен быть максимально простым и тупым.

По большому счету от бота нам нужны только две вещи:

  • чтобы он давал ссылку на веб-приложение с прикрепленным chat.id
  • принимал пуш-уведомления (а он это делает по умолчанию).

С этой точки зрения, в моем боте даже кнопка Reset лишняя, просто она осталась с того времени, как тестировался API сервера веб-приложения.

Благодарю за внимание. Напишите в комментариях ваши мысли по этому поводу и ваши впечатления о моем БВП The Lark.

{ "author_name": "Nik Mich", "author_type": "self", "tags": ["\u0431\u043e\u0442\u044b"], "comments": 56, "likes": 59, "favorites": 194, "is_advertisement": false, "subsite_label": "dev", "id": 198939, "is_wide": true, "is_ugc": true, "date": "Thu, 21 Jan 2021 03:33:26 +0300", "is_special": false }
0
56 комментариев
Популярные
По порядку
Написать комментарий...
6

Надо же, конверсия из чтения статьи в установку бота 15%. Не ожидал)))

Ответить
1

Я как раз один из установивших. Спасибо за интересную идею и толковую реализацию.Если прикрутить к этому возможность выбора курса (фразовые глаголы, в аэропорту.... и т.д.) и возможность повторять пройденные темы - вполне можно монетизировать

Ответить
0

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

Ответить
1

В данном проекте я не задавался задачей отслеживать какие-то метрики, поэтому не сохраняю полную историю взаимодействия пользователя с приложением.

Ответить
4

Мне понравилось

Ответить
2

Мне тоже

Ответить
4

Идея интересная, но не нова - тот же авиасейлс подписку на билеты в телеге осуществляет так же (по крайней мере раньше) - из бота по кнопке открывается страница во встроенном браузере, сессии привязываются видимо так же, по chat_id.

Но в целом, имхо, то же реакт-приложение, которое бот открывает в браузере, можно завернуть в pwa и устанавливать на рабочий стол как нативное. Разве что на iOS не будет пушей.

Либо через webview заворачивать в нативное приложение. Будет более «бесшовное» взаимодействие)

Ответить
2

Попробуйте и почувствуйте, как веб-приложение бесшовно встраивается в транзакционный цикл пользователя.

Ну с пк не бесшовно. Пришлось открывать браузер, чтоб потыкать кнопки, когда в обычных ботах, мне этого делать не нужно. Плюс при закрытии сайта, ничего вроде не изменилось. Все началось с той же страницы с какой и было (жизни и перевод с пиццей)

а так симпотично.

Ответить
2

Поскольку интернет-страницы в Telegram открываются во встроенном браузере

и это тоже не всегда правда. От настроек зависит. От webview. Его тоже настроить можно. Или убить вовсе. Может вызывать гемор

Ответить
2

Статью плюсанул. Спасибо!
Пример для склада ставлю под сомнение - как сканировать, как браузер будет цепляться к сканеру?
Ещё вопросы:
Пыху использовали, потому что знали или они ещё используется?
Зачем в боте 100 кода, если там всего пара кнопок? Логика сохранения состояния в нём, а не веб-приложении?

Ответить
1

Браузер через API может обращаться на сервер, а тот уже связывается с серверным принтером. Сканировать через камеру смартфона, есть много JS SDK для сканирования штрих-кодов. 100 строк - потому что в боте идут вызовы  API сервера, а они с промисами, все это вытягивается в такую сосиску. Параметры опять же упаковываются в json, это тоже сосиска. Так и набралось. Вся логика в веб-приложении, в боте только вызовы API, проверки и транслирование ответа клиенту. Тесты по минимуму. PHP - ну просто так удобно мне было на сервере проверять соответствие токена от бота образцу, который в базе.

Ответить
1

Камера телефона для сканирования - это нерабочий кейс для большого и среднего складов, т.к. по времени задержки суммарные будут большие. Лазеры же. Но я лет 5 не слежу, могу соврать)

Ответить
4

Для большого склада или мощного логистического узла надо, конечно, делать настоящее мобильное приложение. Или вообще использовать специальные устройства, а не телефоны. То решение, о котором я говорю, скорее подходит для сети небольших пунктов выдачи или типа того. Спасибо за замечания!

Ответить
1

Реализация крутая, спасибо. И тётя в видео тоже. У меня возникла лишь одна проблема: в настройках телеграма(android) я указал открывать ссылки в браузере. Закрыв вкладку браузера я ожидал, что это как-то отобразится внутри чата с ботом, но похоже я ошибся с этой фичей.

Каждое задание веселее другого )))
Вот почитайте:
"У меня пропадал интернет минут на пять, так что я пообщался с родственниками. Кажется, они неплохие люди!"

Ответить
1

Спасибо за отзыв! 

Ответить
1

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

Ответить
0

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

Ответить
0

А как в телегу получать пуш-уведомления от мобильной версии сайта?

Ответить
0

Прям черно-белая статья какая-то с посылом юзать веб приложение и использовать идентификатор чата в качестве авторизации.

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

Хотите просто easy way авторизацию на сайте? Ну так генерируйте случайный хэш с солью в виде отметки времени и User agent'а. И используйте LocalStorage. Зачем вам вообще телеграм бот, если они такие не удобные?

Во вторых, не удобных или не удобных инструментов. Есть маркетинг, потребности пользователей, цепочка конверсий. Нравится вашим пользователям телеграм - даём им бота, нравится сайт - делаем сайт. Нравится мобилка - делаем мобилку. Десктоп приложение - пилим его. Вопрос не в том, что удобно или не удобно. Вопрос в том, где ваши пользователи и где идут продажи.

Ответить
2

Спасибо за комментарий. Нет никакой речи о том, чтобы делать такое решение для внешних (рыночных) клиентов и продвигать его как коммерческое. По многим причинам. Начиная с той, что у клиентов может элементарно не быть телеграма. Речь только о быстрой автоматизации внутренних процессов. И я совсем не говорю, что это решение единственно верное. Оно одно из, и не самое лучшее, но быстрое и дешевое.

Вход через телеграм на сайт не даст возможности посылать пользователю пуш-уведомления. То же самое обстоит с easy way авторизацией, о которой вы говорите. Весь смысл написания статьи в том, чтобы показать, как получить почти полноценное мобильное приложение для внутреннего пользования быстро и недорого. Я сам программирую на Swift, и знаю, что такое создание нативных приложений. 

Ответить
0

Хорошая идея. Есть так же ещё PWA технология.
зы: Сам использую в своём проекте интегрированную связку website + telegram bot. Проект на django, там бот выступает как разновидность одного из view, делает немного больше но в резульате так же ведет на сайт.
Весь код, db и прочее общее.

Ответить
1

С PWA, к сожалению, нельзя получать пуш-уведомления.

Ответить
0

отличный подход , мы как раз работаем над pwa и связать его с телегой хорошая идея , на счет хостинга рекомендую firebase hosting + custom domain с SSL.

Ответить
1

Надо подумать. Спасибо. 

Ответить
0

У меня не взлетело, браузер открылся с сообщением:
In Browser: Error: There is no passage with the ID or name "Launch"

Ответить
1

Сорри. Сейчас все работает. На сервере кое-какие работы проводились.  

Ответить
0

заметка по реализации: вместо выдачи ссылки в чат,
при клике по кнопке лучше сразу отрывать ссылку.

Ответить
0

К сожалению, насколько я понимаю, это невозможно. По крайней мере, я не знаю, как это можно было бы сделать с Telegram Bot API. 

Ответить
1

это возможно, возвращается custom keyboard с копкой:
kbButtonsHelp = (
{
  'text': "Create Profile",
  'url': "https://www.recruitcoders.com";, },
)

Реализация в моём боте: https://t.me/recruitcodersbot
команда /help дополенена кнопкой на сайт.

docs: https://core.telegram.org/bots/api#inlinekeyboardbutton

Ответить
0

Попробую, спасибо!

Ответить
0

Спасибо, я посмотрел. С инлайн-кнопкой понятно. Смущает только всплывающий алерт "Вы точно хотите перейти на этот сайт?". Жалко, что нельзя сделать такое с ReplyMarkup-кнопками и без алерта. В общем, как всегда: "А у вас есть точно такое же, но с перламутровыми пуговицами?"))

Ответить
0

Техническая сторона мне не понятна. Но идея нравится. Телеграм будет только набирать обороты, и моментов куча. Не только боты, целиком, на мой вкус, он как из прошлого, или параллельного. Разобраться, как мне говорят, чтобы было удобно и приятно пользоваться.

Ответить
0

Сертификат безопасности прикрутить забыли...

Ответить
0

Этот веб-сайт - просто моя личная песочница. Но вы правы, надо установить сертификат.

Ответить

Фактический Даниль

0

Интересно, спасибо!

Ответить
0

Рад, что вам понравилось!

Ответить
0

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

Ответить
0

К сожалению, пока нет. 

Ответить
0

 Обычное React-приложение, которое запускается из бота с идентификатором chat.id

Я так понимаю, о безопасности и речи не идёт?

Ответить
0

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

Ответить
0

Боты и эргономика на сегодняшний день не очень совместимые понятия

Ответить
0

Не рассматривали в качестве базы данных Google Sheets, а в качестве сервера web-приложений - опубликованный как web app проект на Google Apps Script?

Ответить
0

Не рассматривал. Вообще выбор инструментария - это скорее дело вкуса. Уверен, что можно запилить и на Google Sheets. Равно как и на SQL DB.

Ответить
0

Если вы поднимаете react приложение, то зачем вам вообще нужен бот? 

Ответить
0

Бот нужен для того, чтобы не нужно было авторизоваться на сайте, а использовать chat.id как ключ для хранения профиля пользователя. Без логинов и паролей. А также получать пуш-уведомления. Без бота, чтобы получить похожий функционал, надо пилить настоящее мобильное приложение. А это, поверьте, боль.

Ответить
0

К счастью или сожалению ссылки в телеграмм открываются в браузере. Только когда значок молнии, тогда открывается в телеграмм... 

Ответить
0

На iOS или на декстопе? В родном клиенте?

Ответить
0

В родном клиенте для телеграмм, который скачал в Google Play, открывается ссылка в браузере который установлен по умолчанию, на данный момент Опера, но установлю другой, будет в другом. Так было всегда, устройство работает на базе андроид 10, да и раньше так же было на предыдущих версиях. Может телефон особенный) сейчас заметил что говорите только об двух видах устройств iOS и Desktop. Возможно в статье было об этом написано, дочитал только до примера, стало не интересно потому что у меня это не сработало. Хотя идея довольно неплохая. Если бы это как-то сделать чтобы была кнопка с молнией, такие ссылки всегда открываются внутри приложения, так понимаю это быстрый просмотр для чтения статей. 

Ответить
0

Это Instant View, он только для статей)
А в встроенном браузере, судя по всему, открывается только на iOS

Ответить
0

эх, я-то понадеялся, что все-таки можно сделать тип веб приложение =)

Ответить
0

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

Ответить
0

отправляет push сообщение через бот? 

Ответить
0

Да

Ответить
0

Автор молодец! И идея хорошая и реализация классная!

Ответить
0

Спасибо!

Ответить

Мощный корабль

0

Самое веб-приложение неплохое, соглашусь, даже немного поигрался, но в таком виде ТГ - это просто прокладка, при чем в случае с рекламой приложения это может быть лишнее звено, которое просто уменьшит CR.

Если бы в боте не выбрасывалась ссылка, а при нажатии на кнопку Open открывалось окно с приложением, было бы лучше, но я не уверен с возможность реализации со стороны ТГ.

В целом круто, не ресерчил, но можно продвигать приложение в массы.

Ответить

Комментарии

null