Рубрики
Без рубрики

Захватывание формы представления на телеграмму, с Nodejs.

Статья № 4 моей «1 статьи в день до конца заканчивается». Мы будем создавать бот телеграммы, который будет … помечен узел, WebDev, JavaScript, Vue.

Статья № 4 моей «1 статьи в день до конца заканчивается».

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

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

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

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

Почему телеграмма?

Telegram в последнее время набирает много популярности, она имеет открытую API для разработчиков для создания ботов, программно отправлять сообщения, принимая платежи с полосой прямо в приложении чата, он давайте вы будете делать бесконечные вещи, и я упомянул, что это бесплатно?

Мы свяжитесь с нами формой на нашем сайте и отправляем данные на небольшую бэкэнду, написанную в Express/Node.

Вот как это будет работать с верхнего уровня.

Иконки сделаны Плоские иконы

Шаг 1: Создайте новый бот

Чтобы сделать телеграмму бота, вам нужно присоединиться к официальному оформлению телеграммы BotFather Bot и нажмите кнопку команды «/» или просто введите «/», и открывает окно, которое перечислены параметры для ботов, выберите «/newbot».

Шаг 2: получить токен бота

Предоставьте некоторые детали для BotFather, чтобы получить ключ Bot API, как ниже. После подачи деталей он ответит вам с токеном бота, скопируйте его, мы будем использовать его в нашей бэкэнде. Вы можете открыть бот, нажав на URL BOT (T.Me/fyz_contact_form_bot) и нажмите « Запустить », чтобы подписаться на него.

Шаг 3: Создайте контактную форму (часть интерфейса)

Давайте сделаем простую форму UI, которая отправляет данные на сервер. Я написал его с помощью Tailwindcss и Vue/Nuxt, Code Shared в конце статьи. Обратите внимание, что он не только ограничен Vue, его можно легко воссоздать в любом каркасе, поскольку все это JavaScript в конце. Вот как это выглядит.

При отправке этой формы нам нужно отправить данные формы на наш сервер, мы будем использовать Axios сделать HTTP-запросы. Axios – это супер популярная библиотека JavaScript, чтобы сделать HTTP-запросы на API и серверы. Это на основе обещания, что означает, что вы можете использовать Async/ждут в JavaScript.

Вот как мы создаем запрос на API в Axios, пример.

Точно так же я отправлю все данные выше форму на наш сервер, который мы немного сделаем, в пост-методах, как ниже, игнорируйте это. $ Axios, если вы используете Vanilla JS и не Vue/NUXT.

Шаг 4: Сделайте сервер, чтобы отправить сообщение (часть бэкэнда)

Я буду использовать Glitck.com , Glitch – это потрясающий инструмент, который давайте вы будете делать и проводить серверные приложения Node.js непосредственно из браузера И это бесплатно (спит через 30 минут бездействия на сервере). Вот сервер, который примет данные формы с нашего веб-сайта, обрабатывает ее и отправляет сообщение на нашу телеграмму BOT. Объясняя код ниже.

https://medium.com/media/590119c77c42294646295ac216dc2859/href

Что именно работает выше? Он написан в узле и использует Express.js, очень популярный Facto Node Framework. Мы сделали API отдыха, в котором есть две маршруты, «/» и “/Отправить-сообщение” В/означает наш главный маршрут, если у вас был домен, такой как example.com, то код/маршрут будет запущен, когда example.com вызывается из браузера. Второй маршрут – это « /Отправить-сообщение », который имеет тип публикации, его будет называться, когда example.com/send-message называется (как мы звоним из нашей функции Axios в Frontend App)

Позвольте мне объяснить, что происходит выше.

  1. Строка 1-10, мы инициализируем модули Express, Axios и Body-Parser, мы в основном сообщаем узел, который мы будем использовать их в нашем коде.
  2. Строка от 13 до 17 Это не было необходимости, но я добавил его, чтобы объяснить API для отдыха, мы инициализируем маршрут под названием «/», который принимает два параметра, запрос и ответ. Параметр запроса будет иметь все данные, которые он получил, полученные от того, кто назвал этот маршрут. Параметр ответа позволит вам ответить на клиент с данными или файлами или HTML.
  3. Строка 21-51 – это то, где написана наша фактическая логика для отправки сообщения. У нас есть почтовый запрос, который ожидает параметра тела с данными сообщения, которые мы отправим с нашего клиента (веб-сайт). Мы преобразуем данные, полученные в корпусе в HTML-строку и сделать запрос HTTP Get на конечную точку маршрута API Telegam API/SendMessage. Поскольку это просьба получить свои данные в URL-адреса, ожидая от нас 4 вещи.
  • Bot_token. Это токен, который мы получили от BOTFAME, когда мы создали наш бот,
  • Chat_id Это идентификатор пользователя, который подписан на ваш бот, поскольку несколько человек могут подписаться, вы можете получить список подписчиков на свой бот, открыв этот URL в вашем браузере https://api.telegram.org/bot /getuppdates, это вернет список пользователей, подписанных на ваш бот, как ниже. Просто скопируйте поля с.id и добавьте его на свой URL API
  • Далее – это текстовое поле, которое должно содержать строку кодированной URL из сообщения, которое вы хотите отправить.
  • 4-е поле, которое я добавил, является необязательным, Parse_mode Что это делает, Telegram позволяет форматировать текст, который вы хотите отправить в форматы HTML или Markdown, если вы не отправляете это, сообщение будет отправлено как простой текст. Вы можете найти больше об этом здесь Отказ
  • API URL в конце должно выглядеть что-то вроде этого.
[https://api.telegram.org/botabcd:1234/sendMessage?chat\_id=123456&text=Hello%20there&parse\_mode=HTML](https://api.telegram.org/bot%24%7Bprocess.env.BOT_TOKEN%7D/sendMessage?chat_id=%24%7Bprocess.env.CHAT_ID%7D&text=%24%7Bstr%7D&parse_mode=HTML)
  • Теперь все, что осталось, это вызвать этот URL с помощью Axios в качестве запроса на почту, если у каждым заемся вы получите успех от телеграммы, и сообщение должно быть доставлено на ваш телефон.

Вот документы Для API Telegram вы можете увидеть все, что вы можете сделать с ботом Telegram.

Видео о том, как это работает, вы можете увидеть, как быстро принимаются сообщения, а PARSE_MODE HTML работает отлично.

Не стесняйтесь клонировать бэкэнд здесь На глюк и измените переменные среды в файле .env, который содержит ваш bot_token & chat_id. Лучше всего не разоблачить их публично. Вот код Я написал для Frontend в nuxt.js, клонировать его и сделаю свою собственную версию.

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

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

Оригинал: “https://dev.to/fayaz/capture-form-submissions-on-telegram-with-nodejs-4fpn”