Всем привет! Я написал приложение на Реакте, и оно довольно интересное, но проблема в том что я не занимаюсь Бекендом, пока что.. И я не знаю как правильно реализовать отправку формы в телеграм с помощью Node.js или PHP, ко может подсказать какие либо ресурсы либо статьи где про это можно почитать и узнать как решить эту задачу, или есть где то готовые решения ? Буду очень благодарен!
Отслеживать
задан 23 мая 2019 в 9:30
nazz fardo nazz fardo
85 1 1 серебряный знак 9 9 бронзовых знаков
попробуйте эту библиотеку: github.com/yagop/node-telegram-bot-api
24 мая 2019 в 6:32
Cпасибо, воспользовался , работает )
11 июн 2019 в 12:02
0
Сортировка: Сброс на вариант по умолчанию
Знаете кого-то, кто может ответить? Поделитесь ссылкой на этот вопрос по почте, через Твиттер или Facebook.
- node.js
- reactjs
- telegram-bot
- telegram
- reactphp
Источник: ru.stackoverflow.com
How to add reaction button in telegram • How to add comment button in telegram automatically #tg
Urban Bot или как писать чат-ботов для Telegram, Slack, Facebook… на React.js
В этой статье я хочу познакомить с новой библиотекой Urban Bot, которая адаптирует React для написания чат-ботов. Ниже я расскажу, зачем эта библиотека появилась на свет, какие дает преимущества и как написать вашего первого чат-бота.
Чат-бот — это чаще всего отдельный чат в мессенджере, в котором вы общаетесь не с человеком, а с программой. Он может присылать сообщения в виде текста, изображений, кнопок и многих других UI элементов и реагировать на сообщения от пользователей. Современные чат-боты — это полноценные UI приложения внутри мессенджеров.
В отличии от большинства чат-бот библиотек, которые чаще всего просто оборачивают http запросы в функции с готовыми аргументами и предоставляют подписки вида bot.on(‘message’, callback) , иногда позволяя передавать контекст между вызовами, Urban Bot предлагает совершенно иной подход к разработке чат-ботов — через декларативное программирование и компонентный подход. Живой пример, написанный на Urban Bot, вы можете попробовать в Telegram, cсылка на чат-бот, и посмотреть код на GitHub.
Как мы заметили выше, чат-боты это полноценные UI приложения. А какой язык в 2020 и какая библиотека наиболее подходит для разработки UI приложений? Правильно, JavaScript и React. Такая интеграция позволяет легко и непринужденно строить чат-боты любой сложности без единого знания об API мессенджеров. Далее я расскажу, как создавать простые компоненты и на их основе строить сложных чат-ботов, работать с навигацией, создавать диалоги любой вложенности, писать одно приложение и запускать в любых мессенджерах, и многое другое.
Что такое Webhook за 12 минут
Отправка сообщений
Так выглядит самый простой пример на Urban Bot. Для отправки текстового сообщения нам нужно создать функцию и вернуть из него готовый компонент Text с текстом внутри, который мы хотим отправить. Когда компонент отрендериться, все пользователи чат-бота получат сообщение «Hello, world!».
Изображение можно отправить так:
Urban Bot имеет готовый набор компонентов, для каждого вида сообщений, для файлов File, для кнопок ButtonGroup и много других, подробнее можно взглянуть здесь. В каждый из них можно передать определенный набор пропсов, например, имитировать будто бот печатает сообщение 1 секунду > .
Получение сообщений
Как создать Todo List чат бот в Telegram с помощью React.js
В этой статье я расскажу как создать чат бота на React с помощью библиотеки Urban Bot, над которой я работаю в последнее время. Мы создадим простой Telegram чат бот как на этой гифке.
Чтобы создавать чат боты на React, мы будем использовать новую библиотеку Urban Bot. Она адаптирует React для рендера чат ботов на разных платформах. В данный момент поддерживается Telegram, Facebook и Slack. В дальнейшем планируется поддержка Discord, WhatsApp, VK, Viber и других.
Главный плюс Urban Bot — это то, что не нужно ничего знать про API мессенджеров, как чат боты работают изнутри. Все что нужно — это базовые знания React. Вы просто описываете ваше приложение через готовые компоненты и хуки. Для управления несколькими сценами можно использовать Router компонент. Также можно легко использовать что угодно из React экосистемы, например, MobX или Redux для управления состоянием, или просто использовать готовые части из ваших React Web или React Native приложений.
Установка
Самый простой способ начать — это взять готовый Urban Bot стартер. Есть TypeScript и JavaScript версии.
Чтобы установить, просто введите в терминале.
TypeScript
npx create-urban-bot my-app
JavaScript
npx create-urban-bot my-app —template js
После установки готовый шаблон будет в директории my-app , там где вы запускали create-urban-bot .
Настройка
Откройте my-app в вашем любимом редакторе, файл .env и введите Telegram токен.
Также нам надо активировать Telegram render. Раскомментируйте // import ‘./render/telegram’; внутри src/index.ts или src/index.js.
Все готово чтобы разрабатывать Telegram бота! Запустите npm run dev скрипт и напишите что-нибудь своему боту, который связан с Telegram токеном. Он должен отвечать двумя командами /echo и /logo .
Если вы видите ошибку вида error: [polling_error] возможно интернет провайдер блокирует Telegram трафик. Вам нужно использовать VPN или вы можете использовать Tor браузер, здесь пример.
Разработка
Для начала нам нужно открыть src/App.js или src/App.ts , удалить весь код кроме функии App которая возращает null .
Во-вторых, давайте добавим пустое значение todos и действия addTodo и toggleTodo . Мы будем использовать useState React hook чтобы связать значение и рендер. Будьте осторожны, если мы меняем значение todos , мы не должны мутировать его, нам нужно всегда передавать новое значение.
Теперь все готово чтобы показать наши todos . Urban Bot предоставляет HTML синтаксис для форматирования текста. Давайте создадим новый массив с форматтированным текстом. <s>. s> используется для зачеркнутого текста, <br /> для переноса строки.
Также нам нужно создать массив кнопок, чтобы менять “выполненный” статус задачи. Чтобы исползовать кнопки мы можем воспользоваться компонентом Button . Чтобы было действие после клика нам нужно вызывать функцию toggleTodo и передавать ей айди конкретной задачи.
Сейчас функции App возращает null, поэтому наш бот ничего не показывает. Чтобы это исправить, нам нужно передать готовые значения в компонент ButtonGroup и вернуть его. Мы передаем форматируемый текст в ButtonGroup title prop и готовые кнопки в ButtonGroup children . maxColumns — это не обязательный prop чтобы кнопки автоматически разбивались по три в ряд.
Также если todos пустое значение, можем возращать соответствующий текст.
Давайте проверим нашего бота! Для примера, если вы напишите “прочитать статью” боту, он должен вернуть задачу с этим текстом и кнопку чтобы менять ее статус.
Если вы напишите второе сообщение, то вернется новое свообщение от бота с двумя задачами. Давайте сделаем, чтобы было одно первое сообщение, а потом оно изменялось каждый раз. Чтобы сделать так, нужно передать isNewMessageEveryRender= prop в ButtonGroup . Можно сделать такое поведение для всех компонентов по умолчанию передав этот prop в компонент Root , который находится в src/render/telegram.js .
ButtonGroup title= maxColumns= isNewMessageEveryRender= >
Финальный код src/App.js.