Как делать сайты с помощью телеграм бота

Как создать магазин в Telegram

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

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

Видеозвонки в SberJazz
Общайтесь с друзьями и близкими везде, где есть Интернет
Попробовать сейчас

Преимущества продаж в Телеграме

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

При запуске нового коммерческого канала становятся очевидны и другие преимущества:

• Экономия бюджета по нескольким статьям. Создание интернет-магазина в Телеграме требует меньше времени и ресурсов, чем разработка сайта или приложения. Бот с различными сценариями диалога поможет автоматизировать процесс и оптимизировать работу службы поддержки.
• Понятный интерфейс и простая схема действий пользователей. Кастомизированный каталог и ленты с товарами не перегружены дополнительными уровнями и элементами. Отсутствие сложной вёрстки делает загрузку вашего бот-магазина моментальной. С его помощью клиент оперативно выбирает нужное, оформляет заказ, совершает оплату.
• Быстрое обслуживание. Чётко настроенная работа бота в Телеграме позволяет уточнять заказы и обрабатывать заявки за несколько секунд. Покупатель не ждёт реакции оператора, быстро получает ответы на свои вопросы через мессенджер.
• Интернет-магазин всегда под рукой. Пользователям не нужно устанавливать дополнительное приложение. Просматривая на своём смартфоне ленту в Телеграме, они увидят все новинки, специальные предложения, акции в вашем telegram-канале. Это плюс к удовлетворённости и лояльности клиента.
• Автоматизация продаж. В Телеграме можно продавать на десятки и сотни тысяч рублей в месяц. Для этого добавляйте любые сценарии диалога. Следуя заданному алгоритму, бот приведёт потенциального клиента к покупке, система мотивирует совершить повторный заказ или подписаться на рассылку, предложит скидки, акции.
• Большой набор функций при простом исполнении. Пользователи не ограничены покупками. Они могут оставлять реакции, комментарии, отзывы, отправлять файлы, делиться ссылками, переходить по ним. Не ограничен и продавец — можно подбирать любые изображения, общаться с аудиторией, вести блог, делиться интересной информацией, давать ссылки на сайт, полезные ресурсы.

Уровень конкуренции на площадке всё ещё низкий, поэтому бот в Telegram может стать точкой роста для стартапов.

Создайте своего чат-бота в Telegram
Простая настройка чат-бота в личном кабинете Цифровой витрины
Попробовать

Способы продаж через Telegram

Зайти на площадку можно в нескольких форматах, которые рассчитаны на разные бюджеты и знания:

• Традиционный канал с публикациями. Менеджер ведёт ленту, подбирает изображения товара, вставляет ссылки, пишет текст, отвечает на вопросы клиентов и принимает заказы.
• Аукцион. Встречается нечасто, но может быть вполне успешным. Робот выставляет лот, а пользователи пишут стоимость начиная со стартовой. Конкуренция мотивирует совершать покупки.
• Бот для совместных закупок. Алгоритм позволяет клиентам координировать действия и покупать выгодно через Телеграм.
• Автоматизированный интернет-магазин. Настроенное меню и виртуальный помощник позволяют быстро изучить ассортимент и купить понравившиеся товары. Робот выполняет роль консультанта, службы поддержки, приёмщика заказов.

С апреля 2022 года в мессенджере Telegram появилась возможность бесплатно интегрировать боты с приложениями, написанными на JavaScript. Если в компании есть разработчики с соответствующими навыками, они могут создавать площадки нового формата, но на это потребуются месяцы работы и отдельный бюджет.

Как сделать магазин в Телеграме

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

С помощью бота

В строке поиска в Телеграме нужно ввести имя @BotFather и запустить алгоритм в открывшемся чате. Командой /newbot будет запущен процесс создания нового чат-бота. На этом этапе надо придумать название будущего канала мессенджера, ввести его. В ответ поступит сообщение с API-токеном, который нужно сохранить.

Через другой сервис, @Manybot, можно создавать структуру, алгоритмы, сценарии работы своего магазина. Для этого нужно отправить в чат с ним полученный ранее API-токен, перейти по ссылке к настройкам и следовать инструкции. Для примера можно изучить существующие сервисы. Созданные таким способом площадки работают одинаково и лишены индивидуальности.

Оба варианта бесплатны для пользователей.

С использованием конструкторов

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

Продукт SaluteBot от Sber позволяет не только оформить чат-бот, но и интегрировать его в омниканальную платформу Jivo. Бизнес-мессенджер объединяет в одну рабочую среду все каналы взаимодействия с клиентами, поэтому ни один запрос не будет упущен.

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

• зарегистрироваться в личном кабинете Цифровой витрины;
• пройти регистрацию в сервисе Jivo;
• открыть проект в личном кабинете Цифровой витрины;
• выбрать приложение SaluteBot и авторизоваться через аккаунт Jivo;
• настроить в бизнес-мессенджере привязанные каналы;
• создать в проекте с помощью конструктора Graph собственный сценарий из готовых экранов, связей, шаблонных или персональных интентов;
• задать кнопки меню, подсказки и переменные данные;
• продумать варианты развития сценария и завершения диалога;
• добавить chat-bot в группу в качестве участника или в канал в качестве администратора.

No-code-конструкторы не требуют навыков программирования, поэтому создавать хорошие магазины в Телеграме могут компании любого уровня. Если есть опыт самостоятельного написания кода, можно воспользоваться конструктором Code. Он работает по принципу low-code и позволяет персонализировать сценарий через доработку на языках JavaScript и DSL.

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

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

Пример оформления telegram-магазина

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

Рассмотрим на примере службы доставки пиццы:

• После старта алгоритм поприветствует пользователя и предложит ознакомиться с меню, представленным в нижней части чата в виде кнопок с разделами и вариантами блюд.
• Выбрав позицию, клиент может уточнить детали, например попросить неострую пиццу. Для этого в сценарии диалога нужно предусмотреть соответствующие интенты и реакции помощника.
• Робот отобразит на экране пункт меню с изображением и деталями. Может быть предложена реклама акций, стимулирующих продажи.
• Если клиента всё устраивает, он даёт команду отправить позицию в корзину.
• Формирование заказа продолжается до тех пор, пока не будут выбраны все желаемые блюда.
• Через команду « Покажи мой заказ » алгоритм сформирует в одном сообщении перечень продукции и просчитает итоговую сумму.
• Заказ подтверждается фразой « Оформить заказ » .
• Система предложит ввести параметры доставки — номер телефона и адрес.
• После появится кнопка оплаты, которая переведёт процесс на настроенного платёжного провайдера.
• При подтверждении оплаты бот сообщит, что заказ оформлен, и предложит отслеживать его статус.

Нюансы диалога, ответвления в сценарии зависят от специфики товара и tone of voice компании. Помощник в Телеграме может общаться неформально, в разговорном стиле, или придерживаться делового тона. Количество кнопок-подсказок и их содержание зависит от продукта и влияет на сложность и продолжительность создания проекта.

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

Боты в Telegram эффективны для продаж. Помимо прямых заказов, они могут оказывать консультативную поддержку — рассылать информационные материалы, отвечать на типовые вопросы, определять суть запроса, чтобы перевести на ответственного менеджера. Кроме того, они помогут расширить базу клиентов, собрать контакты и продать дополнительные услуги.

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

Продукты из этой статьи:

Чат-бот в Telegram

Создайте бота своими руками в одном из самых популярных мессенджеров за несколько минут.

Всё для чат-ботов в одном сервисе

Запускайте, управляйте, анализируйте. Это просто с инструментами Unisender.

Удобный конструктор

Не нужно знать программирование — всё легко сделать при помощи визуального редактора. Создавайте чат-бот в Telegram за считанные минуты: редактируйте готовые блоки в конструкторе, собирайте вопросы и ответы в цепочки, настраивайте логику отправки сообщений, добавляйте вложения.

Галерея шаблонов

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

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

Готовые интеграции

В Unisender доступны больше 40 интеграций с CRM, CMS и другими платформами. Собирайте данные и управляйте процессами в одном месте.

Аналитика

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

Не только Telegram

Подключайте другие мессенджеры — WhatsApp, ВКонтакте, добавляйте бота прямо на сайт. Соберите всех клиентов с разных каналов в одном месте.

Техподдержка 24/7

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

Что поручить боту в Telegram

Ответы на вопросы

О товарах, услугах, режиме работы, сроках доставки.

Массовые рассылки

Про новинки, акции, специальные предложения для клиентов.

Автоворонки

От знакомства с пользователем до успешной продажи продукта

Уведомления о статусе заказа

Создание, оплата, комплектация, доставка.

Онлайн-запись

В клинику, салон красоты, на вебинар или курсы.

Внутренние коммуникации

Объявления для сотрудников, опросы, тестирования.

Доверьте чат-боту рутинные, но важные задачи

Собрать бота легко

Шаг 1. Создайте чат-карту

Соберите самые частые вопросы, придумайте текст ответов, добавьте кнопки меню.

Шаг 2. Создайте чат-бот

Затем получите ключ-токен и привяжите его к боту в Личном кабинете.

Шаг 3. Запустите бота и пригласите первых подписчиков

Просто загрузите список адресатов из Личного кабинета Unisender, а мы отправим автоматическую email-рассылку о новом чат-боте. Это бесплатно.

Больше пользы. Больше чатов. Больше продаж

Не оставляйте сообщения без ответа

Подключайте консультанта. Если чат-бот не может ответить на вопрос, присоединяйтесь к диалогу в режиме реального времени.

Персонализируйте общение

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

Сегментируйте аудиторию

Разделяйте пользователей на группы и отправляйте рассылки на основе их интересов.

Принимайте платежи Скоро

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

Чат-боты в Telegram — топ

Всегда на связи

Чат-бот умеет общаться с пользователями в режиме 24/7. Автоматизируйте ответы на типовые вопросы, отправляйте уведомления и рассылки — в любое время суток, без участия службы поддержки.

Удобно для пользователя

Личные контакты, рабочие переписки, интересный контент — всё есть в Telegram. Не уводите клиентов из мессенджера, в котором они привыкли общаться. Будьте на связи с пользователями там, где им удобно.

Большой охват аудитории

Telegram входит в топ-3 популярных мессенджеров в мире. Больше 500 млн активных пользователей в месяц — и аудитория только растёт. Открываемость сообщений — выше 80%. Используйте эти преимущества для продвижения и продаж.

Часто задаваемые вопросы

�� Как работают боты в Telegram?

1. Отвечать на сообщения пользователя — реагирует на текст, выбор пунктов меню и команды из букв и специальных символов.
2. Собирать контактные данные и сохранять лиды для дальнейшей работы с клиентами.
3. Отправлять рассылки о новинках, акциях и специальных предложениях.
4. Подключать оператора. Консультант может присоединиться к диалогу и ответить на нетиповые вопросы.
5. Собирать аналитику — анализируйте эффективность чат-бота и корректируйте сценарии при необходимости.
6. Принимать оплату. Пользователь может совершать покупки прямо в мессенджере.

��️ Смогу ли я создать бота самостоятельно?

Да, это легко. В конструкторе Unisender — интуитивно понятный интерфейс. Вам не придётся создавать чат-бот с нуля. Используйте готовые шаблоны, наполняйте их своим контентом, настраивайте логику сообщений в простом визуальном редакторе.

��️ Как подключить чат-бота в Telegram, что мне для этого нужно?

1. Перейдите в Telegram и найдите чат-бота @botfather.
2. Наберите /newbot — это команда-«заявка» на создание бота в мессенджере. Придумайте и отправьте имя и айди бота.
3. В ответном сообщении от @botfather найдите HTTP API, скопируйте его.
4. В Личном кабинете Unisender выберите созданного бота, перейдите во вкладку «Каналы» и нажмите кнопку «Подключить». Введите скопированный ключ в поле «Токен».

�� Можно создать сразу несколько ботов в Telegram?

Да. В Unisender можно создавать неограниченное количество чат-ботов.

�� Сколько стоит чат-бот для Telegram?

Стоимость зависит от количества подписчиков. Есть бесплатный тестовый период. Посмотреть цены.

�� Где взять подписчиков для бота в Telegram?

• рассказать в соцсетях;
• разместить виджет на сайте;
• отправить ссылку на бота при помощи SMS-рассылки или Viber-рассылки.

�� У меня есть чат-боты в другом сервисе. Их можно перенести в Unisender?

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

�� Можно ли заказать разработку чат-бота?

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

Бот в Telegram работает даже тогда, когда вы отдыхаете

Используйте его для общения и продаж — будьте на связи там, где удобно вашим клиентам.

Как написать Телеграм-бота на JavaScript

Сегодня будем делать бота — это отличное (и быстрое) занятие, которое развивает уставший мозг и даёт возможность отправить друзьям ссылочку со словами «Смотри, это моё».

Для работы понадобятся

• Редактор кода, чтобы писать код. Если не знаете, какой выбрать — мы уже рассказывали. Если не умеете писать код, то вот инструкция, как его написать и запустить.
• Node.js любой версии, выше 0.12. Нужно, чтобы библиотека для ботов заработала. Как установить Node.js.
• Консоль. Или встроенный в систему вариант, или какой-нибудь другой.
• VPN. Возможно, но не факт, потому что Телеграм работает не везде.

Шаг 1. Регистрируем бота

Находим в поиске Телеграма бота @botFather — это главный инструмент для создания ботов. Набираем в нём /newbot .

Придумываем название и имя боту. Название — то, как он будет подписан в списке контактов. Имя — строка, по которой его можно будет найти. Обратите внимание, что имя должно оканчиваться на bot . В ответ мы получим токен — длинную последовательность символов, которая пригодится нам в будущем. Мы назвали бота echoKeksBot , но вам придётся придумать другое название, потому что это уже занято. Извините.

Шаг 2. Создаём проект

Создаем папку в любом месте и открываем её в консоли. Там пишем npm init -y — эта команда создаст файл package.json , который выглядит примерно так:

Теперь установим node-telegram-bot-api — это библиотека для создания телеграм-ботов на Node.js. Введём команду:

npm install --save --save-exact node-telegram-bot-api 

Создадим пустой файл index.js и напишем там самого простого бота, который будет отвечать на любое сообщение:

bot.on('message', (msg) => < const chatId = msg.chat.id; bot.sendMessage(chatId, 'Привет, Друг!'); >); 

Шаг 3. Запускаем бота

Тут всё просто, в консоли пишем node index.js , заходим к нашему боту в телеграм и начинаем с ним общаться. Не закрывайте консоль — бот работает только на вашем компьютере, и без консоли он не станет отвечать.

Как видим, бот успешно отвечает. Но бот-повторяха — не интересно, усложним задачу. Пусть бот присылает нам картинку.

Шаг 4. Отсылаем картинку

Добавим картинку с Кексом в папку с проектом. Для отправки изображения используем метод .sendPhoto() — передадим в него id чата и путь до картинки. Получится такой код:

bot.on('message', (msg) => < const chatId = msg.chat.id; bot.sendPhoto(chatId, 'keks.png'); >); 

Запускаем бота, проверяем, работает:

Шаг 5. Добавим клавиатуру. И пёсика

Добавим фотографию милого пёсика в корень проекта. Теперь там две картинки.

Создадим конфигурацию для клавиатуры в боте, пусть у нас будет 3 кнопки: «Хочу кота», «Хочу пёсика» и «Пойти учиться».

// Конфиг клавиатуры const keyboard = [ [ < text: 'Хочу кота', // текст на кнопке callback_data: 'moreKeks' // данные для обработчика событий >], [ < text: 'Хочу песика', callback_data: 'morePes' >], [ < text: 'Хочу проходить курсы', url: 'https://htmlacademy.ru/courses' //внешняя ссылка >] ]; 

На нажатия первых двух кнопок мы ответим соответствующим сообщением в Телеграме, а последняя уведёт на внешний ресурс.

Чтобы отличить первые 2 кнопки, воспользуемся полем callback_data , где будем передавать тип кнопки. Для обработки нажатий добавим слушателя на событие callback_query , и в зависимости от значения query.data отправим нужную картинку к пользователю.

// Обработчик нажатий на клавиатуру bot.on('callback_query', (query) => < const chatId = query.message.chat.id; let img = ''; if (query.data === 'moreKeks') < // если кот img = 'keks.png'; >if (query.data === 'morePes') < // если пёс img = 'pes.png'; >if (img) < bot.sendPhoto(chatId, img, < // прикрутим клаву reply_markup: < inline_keyboard: keyboard >>); > else < bot.sendMessage(chatId, 'Непонятно, давай попробуем ещё раз?', < // прикрутим клаву reply_markup: < inline_keyboard: keyboard >>); > >); 

Не забудем про возможные ошибки и предложим пользователю попробовать снова, если он ввёл что-то не то. Перезапустим бота и проверим — всё работает. Главное — не закрывать консоль, иначе бот перестанет отвечать.

Полный файл с кодом: index.js.

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

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Как разработать веб-приложение (интернет-магазин) в Telegram

Эта инструкция — часть курса «Как создавать Telegram-ботов».

Смотреть весь курс

Введение

Рассказываем, как сделать полноценный интернет-магазин прямо в мессенджере. Видеоверсия доступна по ссылке.

В рамках этой инструкции мы разберем следующие моменты:

1. Научимся работать с тремя видами кнопок.
2. Реализуем интернет-магазин с возможностью сохранять товары.
3. Разработаем форму сбора пользовательских данных.
4. Зальем интернет-магазин в облако для беспрепятственного доступа.

С чего начать разработку

Сначала заведем два проекта: для разработки на front-end мы будем использовать React, а для back-end — node.js.

Начнем с того, что инициализируем react-приложение. Пока создает приложение в существующей папке, выбрав путь через точку. Далее инициализируем backend, чтобы в файле .json появились базовые настройки.

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

Теперь установим пакет API. Лучше выбрать Node.js Telegram Bot API как более новую версию API. Пока пакет устанавливается, можно перейти к BotFather и ввести команду /newbot.

Вводим уникальное название бота (обязательно содержит Bot). В ответ BotFather отдаст токен, который лучше скопировать себе куда-то в блокнот (а лучше держать в секрете), поскольку он понадобится чуть позже.

Импортировать пакет API можно через require. Часть кода можно взять из документации, заменив токен демонстрационный токен на собственный.

Сначала разберем ситуацию, когда после команды /start нужно отдать пользователю какие-то кнопки.

Для проверки напишем в боте команду /start и при нажатии на кнопку теперь будет открываться окно с мини-браузером.

Кроме этого, можно написать BotFather команду /setmenubutton, выбрать бота, для которого будет использоваться кнопка и прописал URL, куда поведет кнопка.

Далее мы будем взаимодействовать с полем window.Telegram.WebApp.

import './App.css'; const tg = window.Telegram.WebApp; function App() < const onClose = () => < f >return ( 
work >Закрыть 
 ); > export default App; 

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

Теперь кастомизируем кнопку. Изменим цвет, чтобы соответствовать айдентике мессенджера.

import 'React' from 'react'; import Button from "../button/button"; import './Header.css'; const Header = () => < const tg = window.Telegram.WebApp; const onClose = () => < tg.close() >return ( 
> >Закрыть >
 ); >; 

Каждый такой пуш будет заново триггерить сборку на netlify, a через 30 секунд мы получим обновленную версию приложения.

Теперь создадим отдельный хук для корректного получения объекта.

const tg = window.Telegram.WebApp; export function useTelegram() < const onClose = () => < tg.close() >const onToggleButton = () => < if(tg.MainButton.isVisible) < tg.MainButton.show(); >else < /основная кнопка взаимодействия с ботом/ >return < onClose, tg, user: tg.initDataUnsafe?.user, >> 

Общение с ботом происходит при помощи метода Telegram.WebApp.sendData. Теперь можно переходить к созданию страниц и маршрутов.

import React from 'react'; import './button.css'; const Button = (props) => < return ( className= /> ); >; export default Button; 

Стили заносим в ProductList.css и переходим к следующему этапу.
>>ProductList.jsx

import React from 'react'; import './ProductList.css'; const ProductList = () => < return ( 
ProductList
 ); >; export default ProductList; 

В index.js файле теперь нужно обернуть все наше приложение:

Теперь в App.js импортнем Route, выглядеть это будет так:

import from 'react-router-dom'; /используется 6 версия/ Здесь же создаем две страницы для двух адресов: 
  > /> element=> /> 
 

Теперь в приложении по корневому пути будет открываться ProductList.

import React from 'react'; import './from.css'; const Form =() => < return ( 
> 
Введите ваши данные
 type="text" placeholder= />
 >Юр.лицо >Физ.лицо  ); >; export default Form; 

Форму можно взять отсюда, здесь все по стандарту. Чтобы форма теперь открывалась в боте, нужно дополнить путь в index.js. [ >].

Теперь сделаем конфигурационный файл netlify.toml с опциями для редиректов. То есть, мы по любому маршруту делаем редирект в index.html.

[[redirects]] from = "/*" to = "/index.html" status = 200 

На этом этапе мы уже можем вводить данные в форму, но пока не можем их отправить.

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

await bot.SendMessage( chatId, text 'Спасибо за обратную связь!') await bot.SendMessage( chatId, text 'Ваша страна: ' + data? .country ); await bot.SendMessage( chatId, text 'Ваша страна: ' + data? .street); setTimeout(handler ()=> < await bot.SendMessage( chatId, text 'Ваша страна: ' + data? .street); >timeout 3000) 

Отправка данных

Мы уже затрагивали использование метода sendData, а сейчас мы посмотрим как работать с теми данными, которые нам пришли. Здесь нам вместе с эффектом важно также прописать коллбек.

 useEffect( effect: ()=>) сonst onSendData = useCallback( callback: () =>

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

if(NewItems.length === 0) < tg.MainButton.show() tg.MainButton.setParams( params < text: ‘Купить $<>’ >) 

Чтобы посчитать общую стоимость товаров, добавим следующую строку в ProductList.jsx.

const getTotalPrice = (items) => return items.reduce((acc, item) => < return acc += item.price

Так мы суммируем в функции стоимость товаров, чтобы потом получить getTotalPrice(newItems).

Осталось разобрать, как должна работать кнопка Купить, когда товары добавлены и стоимость рассчитана. Здесь нам поможет классический fetch-запрос.

fetch(input 'http://localhost:8000', init < method ‘POST’. headers: < 'Content-Type': 'application/json', >body: JSON.stringify(data) > 

На этом работу на front-end можно считать законченной, но нам еще нужно поднять сервер.

Серверная часть

Чтобы не было проблем с кросс-доменным запросами, бота мы будем деплоить на облачный сервер. Весь код, который нам потребуется можно найти в файле index.js. Воспользуемся документацией из этого раздела. Сейчас нас интересует вот эта часть:

app.post( path '/web-data, handlers (req, res) => const < queryId, products, totalPrice>= req.body; const PORT = 8000 app.listen(PORT, callback () => console.log => ('server started on PORT ' + PORT)) 

QueryID в этом сценарии выполняет функцию связующего звена. С его помощью мы можем взаимодействовать с ботом.

app.post( path '/web-data, handlers (req, res) => const < queryId, products, totalPrice>= req.body; try < await bot.answerWebAppQuery (queryId, result < type: 'article', id: queryId, title: 'Успешная покупка' input.message.content > 

Это сообщение, которое мы уже будем отправлять пользователю, когда платеж пройдет. Для сообщения о неудачных оплатах можно скопировать этот код и вписать новый текст, который уведомит пользователя об ошибке. Разница в том, что в случае успеха 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.

Как создать Telegram-бота для мониторинга погоды на Python

Как автоматизировать подготовку к собеседованиям с помощью Telegram-бота

Зарегистрируйтесь в панели управления

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

Читайте также:

Инструкция

Как создать 100 серверов в облаке за минуту? Работа с OpenStack клиентом

Инструкция

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

Инструкция

Что делает команда chmod и как ее использовать в Linux