В рамках этой инструкции мы разберем следующие моменты:
- Научимся работать с тремя видами кнопок.
- Реализуем интернет-магазин с возможностью сохранять товары.
- Разработаем форму сбора пользовательских данных.
- Зальем интернет-магазин в облако для беспрепятственного доступа.
С чего начать разработку
Сначала заведем два проекта: для разработки на front-end мы будем использовать React, а для back-end — node.js.
Начнем с того, что инициализируем react-приложение. Пока создает приложение в существующей папке, выбрав путь через точку. Далее инициализируем backend, чтобы в файле .json появились базовые настройки.
Для удобной и актуальной разработки, как dev-зависимость устанавливаем пакет nodemon. Так мы сможем автоматически перезапускать бота после любых изменений в его коде.
Теперь установим пакет API. Лучше выбрать Node.js Telegram Bot API как более новую версию API. Пока пакет устанавливается, можно перейти к BotFather и ввести команду /newbot.
Создаём бота для Telegram за 20 минут на Python + Telebot!
Вводим уникальное название бота (обязательно содержит 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. Теперь можно переходить к созданию страниц и маршрутов.
Пример Работы Чат Бота для Telegram — Andrey Kos
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)
Отправка данных
Telegram-бот: от первой строчки до размещения
Эта статья о том, как создать Telegram-бот для автоматизации нескольких рутинных задач. Если вас интересует только код, то вот ссылка. Он несложный, и его вполне можно понять самостоятельно.
Что этот бот будет делать?
Отправлять письма
Это совсем не тупо, но мне кажется, надо пояснить. Всю дорогу по ходу учебы мне нужно было отправлять кучу писем, и все они должны были быть определенного формата. К тому же gmail просто бесит, он красный и все такое! При помощи бота я смогу отправлять письма через чат. Я просто пишу в чат, а бот пусть форматирует это и отправляет по мейлу.
Сохранять всякое разное
Я очень много использую Telegram и часто натыкаюсь там на интересные для меня ссылки или просто на полезную информацию. Хотелось бы, чтобы бот сохранял все то, что я ему пересылаю, в базе данных SQL.
Что мы будем использовать при создании бота
Для API Telegram есть оболочки практически на любом языке программирования. Начиная от Python, PHP и Java и заканчивая Node.js. Мы, разумеется, будем использовать Python. Код данной оболочки находится здесь, можете убедиться сами. Также можно поучаствовать в развитии данного проекта (если сможете, конечно).
Оболочки для других языков можно найти здесь.
Наш бот
Чат с BotFather для получения ключей API
Создание Telegram-бота это весьма забавный процесс так как, собственно, весь он строится на вашем общении с Telegram-ботом. Зовут этого бота BotFather (Бот-Отец). В приложении Telegram его можно найти по имени и начать с ним беседу.
Для начала беседы наберите /start .
Вы увидите список команд, при помощи которых можно создавать боты, редактировать их и управлять ними. Так как мы зашли в первый раз, то выбираем /newbot .
После введения команды /newbot вам предстоит выбрать имя и ник (username) для вашего бота. Имя — это то, как пользователи будут видеть этого бота в своем контакт-листе. А ник — имя, по которому этот бот можно будет найти в приложении Telegram. Это то же самое как и ник в Twitter, он должен быть уникальным, и чем короче, тем лучше.
Сделав это, вы получите API-ключ для вашего бота. С помощью него Telegram сможет ассоциировать написанный вами код именно с этим конкретным ботом. У каждого бота есть свой API- ключ, и вы не должны им ни с кем делиться. В противном случае ваш бот можно будет взломать и осуществить злодейские планы.
Код
Начнем с того, что импортируем все необходимое.
from telegram.ext import Updater, CommandHandler, MessageHandler, Filters, ConversationHandler from telegram import ReplyKeyboardMarkup, ReplyKeyboardRemove import logging import sqlite3 from mail import send_mail from sensitive import tok, user_id, name, username
Предназначение библиотек logging и sqlite3 вполне видно из их названий. Они будут использоваться для логирования и сохранения всего, что нам потребуется. В файле sensitive содержаться мои учетные данные, а в telegram.ext хранятся все необходимые обработчики.
Updater — это класс, в котором используется telegram.ext.Dispatcher. Он предоставляет интерфейс для telegram.Bot, чтобы можно было сосредоточиться исключительно на программировании бота. Его цель — получать обновления от Telegram и доставлять их указанному диспетчеру. Он также запускается в отдельном потоке, поэтому пользователь может взаимодействовать с ботом, например, из командной строки.
Диспетчер поддерживает обработчики для различных типов данных: обновления от Telegram, основные текстовые команды и даже произвольные типы. Класс Updater может быть использован как служба опроса, а для получения обновлений можно использовать вебхук (webhook). Это достигается с помощью классов WebhookServer и WebhookHandler .
MessageHandler — класс для обработки Telegram-сообщений. Они могут содержать текст, различные медиафайлы или обновления статуса.
ConversationHandler — это класс для ведения диалога с одним пользователем путем управления четырьмя коллекциями других обработчиков. Обратите внимание, что ни сообщения в каналах Telegram, ни групповые взаимодействия с несколькими пользователями не управляются экземплярами данного класса.
Команды
Для каждой команды написана отдельная функция. А все остальное — для работы с SQL и строками.
Иметь дело с электронной почтой несколько сложнее (на самом деле нет — если вы используете ConversationHandler ). Чтобы полностью понять идею того, как значения из одной функции передаются другую и в ней обрабатываются, прочитайте вот это.
Как вы могли заметить, функцию send_mail() я импортировал из модуля mail . Для отправки почтовых сообщений используется протокол SMTP.
def send_mail(to, subject, body, my=me): smt = smtplib.SMTP(‘smtp.gmail.com’, 587) smt.ehlo() smt.starttls() smt.login(user=my, password=pwd) sub = subject body = body message = «Subject: » + sub + «n» + body + «n» smt.sendmail(my, to, message) smt.quit()
Разумеется, для отправки электронной почты через протокол SMTP вы должны иметь имя пользователя и пароль. Вот хорошее пособие на данную тему.
Вот и всё?
Вообще-то нет. Вам еще осталось все это запустить.
def main(): «»»Start the bot.»»» updater = Updater(TOKEN) dp = updater.dispatcher dp.add_handler(CommandHandler(«start», start)) dp.add_handler(CommandHandler(«help», help)) dp.add_handler(CommandHandler(«add_event», add_event)) dp.add_handler(CommandHandler(«view_events», view_events)) dp.add_handler(CommandHandler(«remove_event», remove_event)) email_handler = ConversationHandler( entry_points=[CommandHandler(’email’, email)], states=< TO: [MessageHandler(Filters.text, to, pass_user_data=True)], SUBJECT: [MessageHandler(Filters.text, subject, pass_user_data=True)], MESSAGE: [MessageHandler(Filters.text, body, pass_user_data=True)] >, fallbacks=[CommandHandler(‘cancel’, cancel)] ) dp.add_handler(email_handler) dp.add_error_handler(error) updater.start_polling() updater.idle()
Размещение кода
Для размещения кода существует множество способов. Выбор зависит от того, как и насколько много вы будете этот код использовать.
- Pythonanywhere : бесплатно и просто. Откройте терминал и в нем запустите файл с вашим ботом. Но не ждите, что он будет работать долго.
- Heroku: не будем изобретать колесо. Вот здесь дана пошаговая инструкция по размещению на сервисе Heroku.
Вот здесь также собраны инструкции по размещению Telegram-ботов.
Источник: pythonist.ru