Как разработать свою версию веб-приложения в Telegram? Инструкция по сборке «интернет-магазина на диване»
В тексте разбираем, как сделать веб-приложение с возможностью сохранять товары. Также — как разработать форму для сбора персональных данных пользователей и залить интернет-магазин в облако.
Используйте навигацию, чтобы быстро перемещаться по шагам инструкции:
С чего начать разработку
Сначала заведем два проекта: для разработки на front-end мы будем использовать React, а для back-end — node.js.
Начнем с того, что инициализируем react-приложение. Пока создается приложение в существующей папке, выберем путь через точку. Далее инициализируем backend, чтобы в файле .json появились базовые настройки.
Для удобной и актуальной разработки, как dev-зависимость устанавливаем пакет nodemon. Так мы сможем автоматически перезапускать бота после любых изменений в его коде.
Установим пакет API: лучше выбрать Node.js Telegram Bot API как более новую версию. Пока пакет устанавливается, можно перейти к BotFather и ввести команду /newbot.
Вводим уникальное название бота (обязательно содержит Bot). В ответ BotFather отдаст токен, который лучше скопировать себе куда-то в блокнот (а лучше держать в секрете), поскольку он понадобится чуть позже.
Импортировать пакет API можно через require. Часть кода возьмем из документации, заменив демонстрационный токен на собственный.
Разберем ситуацию, когда после команды /start нужно отдать пользователю какие-то кнопки.
Для проверки напишем в боте команду /start, и при нажатии на кнопку будет открываться окно с мини-браузером. Кроме этого, можно написать команду /setmenubutton, выбрать бота, для которого будет использоваться кнопка, и прописать URL, куда она поведет.
Далее мы будем взаимодействовать с полем window.Telegram.WebApp.
Чтобы дебажить веб-приложение с Telegram-ботом онлайн, придется создать репозиторий на гите и привязать его в netlify. Получив ссылку на приложение, можно вставить ее в код.
Теперь кастомизируем кнопку. Изменим цвет, чтобы соответствовать айдентике мессенджера.
>>Header.jsx
Каждый такой пуш будет заново триггерить сборку на netlify, a через 30 секунд мы получим обновленную версию приложения.
Теперь создадим отдельный хук для корректного получения объекта.
>>useTelegram.js
Общение с ботом происходит при помощи метода Telegram.WebApp.sendData. Теперь можно переходить к созданию страниц и маршрутов.
>>Button.jsx
Стили заносим в ProductList.css и переходим к следующему этапу.>>ProductList.jsx
В index.js файле теперь нужно обернуть все наше приложение:
Теперь в App.js импортнем Route, выглядеть это будет так:
Теперь в приложении по корневому пути будет открываться ProductList.
Форму можно взять отсюда, здесь все по стандарту. Чтобы форма теперь открывалась в боте, нужно дополнить путь в index.js. [{text: ‘Заполнить форму’, web_app: {url: WebAppUrl + ‘./form’} }].
Теперь сделаем конфигурационный файл netlify.toml с опциями для редиректов. То есть, мы по любому маршруту делаем редирект в index.html.
На этом этапе мы уже можем вводить данные в форму, но пока не можем их отправить.
Когда мы получаем данные из веб-приложения, мы можем их отправить. Заметьте, что функции, которые мы добавляем асинхронны.
>>index.js
Отправка данных
Мы уже затрагивали использование метода sendData, а сейчас мы посмотрим как работать с теми данными, которые нам пришли. Здесь нам вместе с эффектом важно также прописать коллбек.
Если данные приходят пустыми, проверьте массив зависимостей. Если в корзине есть хотя бы один товар, мы показываем кнопку.
Чтобы посчитать общую стоимость товаров, добавим следующую строку в ProductList.jsx.
Так мы суммируем в функции стоимость товаров, чтобы потом получить getTotalPrice(newItems).
Осталось разобрать, как должна работать кнопка Купить, когда товары добавлены и стоимость рассчитана. Здесь нам поможет классический fetch-запрос.
На этом работу на front-end можно считать законченной, но нам еще нужно поднять сервер.
Серверная часть
Чтобы не было проблем с кросс-доменным запросами, бота мы будем деплоить на облачный сервер. Весь код, который нам потребуется можно найти в файле index.js. Воспользуемся документацией из этого раздела. Сейчас нас интересует вот эта часть:
QueryID в этом сценарии выполняет функцию связующего звена. С его помощью мы можем взаимодействовать с ботом.
Это сообщение, которое мы уже будем отправлять пользователю, когда платеж пройдет. Для сообщения о неудачных оплатах можно скопировать этот код и вписать новый текст, который уведомит пользователя об ошибке. Разница в том, что в случае успеха http-запрос стоит завершить с кодом 200, а в противном случае статус-код 500.
В панели управления Selectel зайдем во вкладку Облачная платформа -> Серверы и создадим новый.
Для деплоя бота есть отличный вариант — SharedLine. Это решение подходит пет-проектам, которые не нуждаются в производительном железе. Зачем платить за целое ядро, если вся его мощность точно не потребуется?
Консоль для администрирования можно открыть прямо из панели. Сначала обновим инструмент работы с пакетами: sudo apt update.
Теперь установим git: sudo apt install git, а затем клонируем проект при помощи обычной команды git clone <ссылка на репозиторий>. Осталось установить npm, чтобы подтянуть все необходимые пакеты и node.js, чтобы запустить сервер. При необходимости, обновите версии sudo npm install -g n. Далее лучше выполнить команду sudo n stable, а не latest, чтобы все точно работало корректно.
После нужно установить зависимости с помощью классической команды npm install.
Дальше нам поможет менеджер процессов, чтобы, например, перезапускать сервер, если он упал или распараллелить процессы. Готово!
Запускаем бота командой pm2 start index.js — путь до нашего корневого файла. Теперь во вкладке порты в панели Selectel можно увидеть IP-адрес, по которому бот будет доступен. Теперь в fetch нужно заменить адрес localhost на IP-адрес облачного сервера. Укажите также новый адрес до самого end-point.
Вместо заключения
В разработке Telegram-бота с кнопками нет ничего сложного. Для хостинга такого интернет-магазина не нужно оплачивать полную стоимость сервера, достаточно использовать Shared Line.
Подпишитесь на блог Selectel, чтобы не пропустить новые инструкции, техобзоры, полезные курсы и ивенты для IT-специалистов.
Читайте также: