Руководство: как сделать простого бота для Телеграм на JS для новичка в программировании

Занимательные задачки JavaScript *Node.JS *API *Облачные сервисы * Из песочницы Я начал погружение в мир IT лишь три недели назад. Серьезно, три недели назад я даже не понимал синтаксиса HTML, а знакомство с языками программирования заканчивалось школьной программой по Pascal 10-летней давности. Однако я решился поехать в IT-лагерь, для детей которого было бы неплохо сделать бота. Я решил, что это вряд ли так сложно. С этого начался длинный путь, в рамках которого я:

• развернул облачный сервер с Ubuntu,
• зарегистрировался на GitHub,
• выучил базовый синтаксис JavaScript,
• прочитал тонну статей на английском и русском языках,
• сделал, наконец, бота,
• написал эту статью, наконец.

Выглядел итоговый результат примерно так: Скажу сразу, это статья для начинающих — чтобы просто понять, как делать элементарные вещи с самой нулевой точки. А еще — для продвинутых программистов — просто чтобы их немного посмешить. 1. Как писать код на JS? Я понимал, что стоит для начала хотя бы разобраться в синтаксисе языка. Выбор пал на JavaScript, просто потому что следующим шагом для меня было создание приложения на ReactNative. Я начал с курса на Codecademy и остался в большом восторге. Первые 7 дней бесплатно. Реальные проекты. Рекомендую. Прохождение его заняло порядка 25 часов. На самом деле далекоооо не все из него пригодилось. Вот так примерно выглядит структура курса и подробно первый блок. 2. Как зарегистрировать бота? В начале мне очень помогла вот эта статья из блога некоего Арчакова. Он разжевывает самое начало. Но главное, что там есть — это инструкция по регистрации бота. Лучше я не напишу, и поскольку это самая легкая часть, просто напишу суть. Нужно создать бота и получить его API. Это делается через другого бота — @BotFather. Найдите его в telegram, напишите ему, пройдите простой путь и получите (сохраните!) API-ключ (это набор цифр и букв). Он пригодился мне позже. 3. Как выглядит код бота? После долгого изучения статей, я понял, что стоит использовать какую-то библиотеку (сторонний код в формате модуля), чтобы не мучаться с изучением API телеграма и созданием с нуля больших кусков кода. Я нашел фреймворк telegraf, который нужно было как-то подключить к чему-то при помощи npm или yarn. Примерно так я понимал тогда, из чего состоит развертывание бота. Смеяться здесь. Я не обижусь. Больше всего при последующем создании бота мне помогли примеры, указанные внизу страницы: 3. Как создать собственный облачный сервер за 100 рублей После долгих поисков я понял, что команда ‘npm’ из картинки выше относится к командной строке. Командная строка есть везде, но чтобы получилось ее исполнить, нужно поставить NodePackageManager. Проблема была в том, что программировал я на PixelBook с ChromeOS. Я пропущу здесь большой блок про то, как я познавал Linux — для большинства это пустое и ненужное. Если у вас есть Windows или MacBook, у вас уже есть консоль. Если в двух словах, я поставил Linux через Crostini. Однако в процессе я понял, что для постоянной работы бота (а не только когда у меня включен компьютер) мне нужен облачный сервер. Я выбрал vscale.io Я закинул 100 рублей, купил самый дешевый сервер Ubuntu (см.картинку). 4. Как подготовить сервер для запуска бота После этого я понял, что нужно сделать на сервере какую-то папку, в которую я положу файл с текстом кода. Для этого в консоли (запускать прямо на сайте через кнопку «Открыть консоль») я вбил

mkdir bot

bot — это стало название моей папки. После этого я установил npm и Node.js, что позволит запускать мне потом код из файликов с разрешением *.js

sudo apt update sudo apt install nodejs sudo apt install npm

Очень рекомендую на этом этапе настроить подключение к серверу через свою консоль. Вот инструкция Это позволит работать с сервером напрямую через консоль своего компьютера. 5. Как написать код первого бота. А вот теперь просто открытие для меня. Любая программа — это просто строки текста. Их можно вбить куда угодно, сохранить с нужным расширением и все. Ты прекрасен. Я использовал Atom, но реально, можно просто в блокноте стандартном писать. Главное — сохранить потом файл в нужном расширении. Это как написать текст в Word и сохранить. Я сделал новый файл, в который вставил код из примера на странице telegraf и сохранил в файл index.js (вообще не обязательно называть файл так, но так принято). Важно — вместо BOT_TOKEN вставьте свой API-ключ из второго пункта.

const Telegraf = require('telegraf')  const bot = new Telegraf(process.env.BOT_TOKEN) bot.start((ctx) => ctx.reply('Welcome!')) bot.help((ctx) => ctx.reply('Send me a sticker')) bot.on('sticker', (ctx) => ctx.reply('')) bot.hears('hi', (ctx) => ctx.reply('Hey there')) bot.launch()

6. Как закинуть код на сервер через github Теперь мне нужно было закинуть как-то этот код на сервер и запустить его. Для меня это стало челленджем. В итоге, после долгих мытарств я понял, что проще будет создать файл на github, который позовляет обновлять код при помощи команды в консоли. Я зарегал аккаунт на github и сделал новый проект, куда и загрузил файл. После этого мне нужно было понять, как же настроить загрузку файлов с моего аккаунта (открытого!) на сервер в папку bot (если вдруг вы вышли из нее — просто напишите cd bot). 7. Как загрузить файлы на сервер через github ч.2 Мне нужно было поставить на сервер программу, которая будет загружать файлы с git. Я поставил git на сервер, вбив в консоль

apt-get install git

После этого мне нужно было настроить загрузку файлов. Для этого я вбил в командную строку

git clone git://github.com/b0tank/bot.git bot 

В итоге все из проекта загрузилось на сервер. Ошибкой на данном этапе было, что я, по сути, сделал вторую папку внутри уже существующей папки bot. Адрес до файла выглядел как */bot/bot/index.js Я решил пренебречь этой проблемой. И чтобы подгрузить библиотеку telegraf, которую мы запрашиваем в первой строке кода, вбейте в консоль команду.

npm install telegraf

8. Как запустить бота Для этого, находясь в папке с файлом (чтобы переходить из папки в папку через консоль — выполняйте команду формата cd bot Чтобы убедиться, что вы там, где нужно можно вбить команду, которая отобразит в консоли все файлы и папки, которые там лежат ls -a Для запуска я ввел в консоль

node index.js 

Если нет никакой ошибки — все хорошо, бот работает. Ищите его в телеграме. Если ошибка есть — применяйте свои знания из 1 пункта. 9. Как запустить бота в фоновом режиме Достаточно быстро вы поймете, что бот работает только тогда, когда вы сами сидите в консоли. Чтобы решить эту проблему я использовал команду

screen

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

node index.js

10. Как работает бот и как расширить его функционал Что же умеет наш бот из примера? Он умеет

bot.start((ctx) => ctx.reply('Welcome!'))

говорить «Welcome!» в момент старта (попробуйте поменять текст)

bot.help((ctx) => ctx.reply('Send me a sticker'))

в ответ на стандартную команду /help отправлять сообщение «Send me a sticker»

bot.on('sticker', (ctx) => ctx.reply(''))

в ответ на стикер отправлять одобрение

bot.hears('hi', (ctx) => ctx.reply('Hey there'))

отвечать «Hey there», если ему пишут ‘hi’ bot.launch() Если вы посмотрите код на github, то быстро поймете, что сильно далеко от этого функционала я не ушел. Что активно используется, так это функция ctx.replyWithPhoto Она позволяет отправлять заданное фото или gif в ответ на определенный текст. Значимая часть кода была написана детьми 11-13 лет, которым я дал доступ к боту. Они ввели свои user-case. Думаю, легко определить, какая часть сделана была ими. Например, на сообщение «джейк» приходит гифка с известным персонажем из мультика Adventure Time. Чтобы развивать бота дальше, подключать клавиатуру нужно смотреть примеры, например, отсюда 11. Как обновлять код и перезапускать бота Не забывайте, что надо обновлять код не только на github, но и на сервере. Делать это просто — стопим бота (нажать ctrl+c), — вводим в консоль, находясь в целевой папке, git pull — вновь запускаем бота командой node index.js END Многие вещи, описанные в этом файле, будут супер очевидны для продвинутых программистов. Однако когда я сам пытался одним махом перепрыгнуть пропасть до мира ботов, мне очень не хватало подобного гайда. Гайда, в котором не пропускается очевидные и простые для любого IT-специалиста вещи. В дальнейшем я планирую пост про то, как сделать свое первое приложение на ReactNative в таком же стиле, подписывайтесь!

Задача: Создать Телеграм бота и научится работать с ним с помощью Node.js и библиотеки «Telegraf», через webhook, используя для этого виртуальный выделенный сервер (VDS) и самоподписанный SSL сертификат.

1. Регистрация в sprintbox.ru

Регистрируемся по адресу sprintbox.ru, с помощь промо кода «SPRINTBOXPROMO» пополняем счет на 100 рублей. После чего станет доступно создание VDS — виртуального выделенного сервера (бокса), с минимальными характеристиками.

2. Установка «PuTTY»

По адресу https://www.putty.org скачайте установочный пакет (MSI) «PuTTY» и установите все программы входящие в комплект. Программа «PuTTY» используется для удаленного подключение по протоколу SSH: https://ru.wikipedia.org/wiki/SSH.

3. Создание SSH – ключей

Создаем пару SSH — ключей, при помощи программы «PuTTYgen», которая идет в составе с программой «PuTTY». В программе «PuTTYgen» нажимаем «Generate» и перемещаем курсор мыши в произвольном порядке. После генерации, будут созданы два ключа, публичный и приватный (секретный), сохраняем их с помощью соответствующих кнопок и копируем текст публичного ключа из окна программы. Созданные ключи, будут использоваться в программе «PuTTY», для удаленного подключения по протокол SSH.

PuTTYgen создание SSH ключей

Примечание: Создание ключей можно выполнить в «Командной строке», при помощи команды «ssh-keygen», например:

ssh-keygen -t rsa -b 4096

4. Подключение SSH – ключей

В панели управления https://cp.sprintbox.ru/customer/boxes/ssh, «Боксы» -> «SSH — ключи», добавляем скопированное содержимое публичного ключа и задаем название, например, «PuTTY»:

Sprintbox добавляем SSH ключ

5. Создание VDS

В панели управления, «Боксы» — «Управление», добавляем новый бокс, выбираем «Аутентификация по ключу «PuTTY»», кликаем на логотип «CentOS» и выбираем «CentOS 8» и «Создать бокс». Выбираем самый дешевый тариф и подтверждаем действия.

Создание VDS, шаг 1

Создание VDS, шаг 2

Создание VDS, шаг 3

Создание VDS, шаг 4

Будет создан бокс и на почту придет информация с данными для подключения. Примечание https://help.sprintbox.ru/service-work/ssh-keys-usage: «в этом случае root-пароль не генерируется, соответственно, он будет отсутствовать в письме о создании бокса, а доступ по паролю будет запрещён.»

6. Подключение к VDS по SSH

7. Подготовка к установке Node.js

Перед установкой Node.js выполним обновление:

dnf update

и перезагрузку системы:

reboot

При перезагрузке сессия SSH завершится, необходимо пере подключится через несколько минут.

8. Устанавливаем Node.js

Воспользуемся инструкций по адресу: https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-centos-8:

8.1 Проверим версию по умолчанию в потоке «AppStream»:

dnf module list nodejs

8.2 Переключимся на поток с версией 14:

dnf module enable nodejs:14

8.3 Устанавливаем Node.js:

dnf install nodejs

8.4 Проверяем установку:

node –v

Установка Node.js

9. Создаем самоподписанный SSL сертификат

Пример из Telegram bot API https://core.telegram.org/bots/self-signed:

openssl req -newkey rsa:2048 -sha256 -nodes -keyout /etc/ssl/private/private-nodejs.key -x509 -days 365 -out /etc/ssl/certs/public-nodejs.pem -subj "/C=RU/ST=Republic of Tatarstan/L=Kazan/O=Blagin.ru/OU=Research team/emailAddress=name@domen.tld/CN=000.000.000.000"

Примечание: В конце, в параметре CN, вместо нулей, необходимо указать ваш IP-адрес бокса, полученный при регистрации. Будут созданы два файла, публичный и приватный (секретный) ключ. Данные ключи будут использоваться для установки webhook.

10. Регистрация Телеграм бота

Регистрируем нового Телеграм бота, см. п.1 Телеграм бот 1С.

11. Создаем Телеграм бота в Node.js

Разрабатывать Телеграм бота на Node.js с использованием webhook, можно локально, в дальнейшем копируя файлы на сервер либо сразу же на сервере, в примере будет использован смешанный способ.

11.1 Создаем директорию, в которой будет производится работа, например:

mkdir /home/telegram-bot

11.2 Выполняем инициализацию проекта:

npm init

11.3 Для разработки телеграм бота на Node.js используется «Telegraf», для этого в рабочей директории проекта, выполним установку необходимого модуля:

npm install telegraf

11.4 Дополнительно устанавливаем пакет «dotenv», для хранения токена бота в отдельном файле «.env»:

npm install dotenv

11.5 Создаем файл: «.env» и сохраняем в нем токен:

echo BOT_TOKEN= 123456:ABC-DEF1234ghIkl-zyx57W2v1u123ew11 > .env

11.6 Вручную устанавливаем адрес webhook, с помощью setwebhook и программы CURL:

curl -F "url=https://000.000.000.000:8443/bot" -F "certificate=@/etc/ssl/certs/public-nodejs.pem" https://api.telegram.org/bot123456:ABC-DEF1234ghIkl-zyx57W2v1u123ew11/setwebhook

Примечание: Вместо нулей, необходимо указать ваш IP-адрес бокса, полученный при регистрации. Ответ от Telegram Bot API:

{"ok":true,"result":true,"description":"Webhook was set"}

Проверяем установку в Postman с помощью метода «getWebhookInfo«:

Postman getWebhookInfo

В документации «telegraf» есть метод установки:

bot.telegram.setWebhook('https://server.tld:8443/secret-path', {    source: 'server-cert.pem'  });

К сожалению, с помощью него не удалось выполнить установку webhook.

11.7 Создаем основной файл бота:

touch index.js

Исходный код телеграм бота Node.js с использование webhook:

  const { Telegraf } = require('telegraf');  const fs = require('fs');  require('dotenv').config();    const bot = new Telegraf(process.env.BOT_TOKEN);    bot.start((ctx) => ctx.reply('Бот запущен!'));  bot.help((ctx) => ctx.reply('Телеграм бот Node.js Webhook.'));    bot.on('message', (ctx) => {      ctx.telegram.copyMessage(ctx.message.chat.id, ctx.message.from.id, ctx.message.message_id);  });    const tlsOptions = {      key: fs.readFileSync('/etc/ssl/private/private-nodejs.key'),      cert: fs.readFileSync('/etc/ssl/certs/public-nodejs.pem')  };    // bot.telegram.setWebhook(`https://185.251.90.198:8443/bot`, {  //     source: `public-nodejs.pem`  // });    bot.startWebhook(`/bot`, tlsOptions, 8443);  

11.8 Запуск бота осуществляется командой:

node index.js

Результат работы бота на Node.js

Дополнительная информация:

• Для удобства копирования файлов на сервер, можно воспользоваться программой WinSCP которая похожа на программу Total Commander:

  WinSCP

• Телеграм бот 1С
• Linux для начинающих

28 Июля 2016

4 644

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

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

Зачем бот нам?

Tagvisor — сервис для поиска настоящих отзывов о заведении. Мы агрегируем их по геолокации, хэштегам и из официальных аккаунтов заведений в социальных сетях. Далее ранжируем по популярности (количеству и свежести постов в социальных сетях) и близости к пользователю.Custdev показал, что наша целевая аудитория часто ищет места поблизости с телефона. Не любит просматривать больше 20 вариантов в результатах поиска, хочет сразу видеть отзывы, фото и отметку заведения на карте.Логично было бы выкатить мобильное приложение, но цена разработки и порог входа для потенциального пользователя слишком высок для молодого стартапа. Решили пойти модным путем и в качестве mvp выпустили бота.@TagvisorBot показывает ближайшие к вам заведение по выбранной категории.Как и в десктопной версии сервиса, основным контентом выдачи являются посты из социальных сетей.

Разработка

Для реализации был выбран Node.js и форк для модуля @node-telegram-bot-api, адаптированный для Telegram 2.0. В основном использовали документацию API telegram и модуля node-telegram-bor-api. Для людей, любящих русскую документацию, есть перевод, но он еще в процессе. Также есть группа разработчиков со всей России в самом Telegram ) и в facebook. В группах всегда можно написать вопрос, обычно отвечают в течение пары дней.

Создание

Чтобы создать бота, в первую очередь, постучитесь к @botfather с командой /newbot. Он попросит написать имя бота и его username (которое должно заканчиваться на bot). При создание бота @botfather сообщит http-токеп для api. Команды, начинающиеся с /set, помогут настроить различные параметры бота, такие как имя, описание, аватар, текст в профиль и описание. Все достаточно просто.Для работы бота нужно выбрать режим обновлений: polling или WebHook.

• в режиме WebHook сервер Телеграма будет отправлять данные вашему боту, каждый раз при поступлении запроса. Это удобный и надежный вариант, а, главное, быстрый, но, к сожалению, этот режим требует https-подключения и сертификата.
• в режиме polling бот будет сам ходить на сервер Телеграма и забирать новые данные. Этот режим гораздо проще, но реакция бота будет не мнгновенной, а в среднем с полсекундной задержкой. Кроме того, нужно учесть, что иногда бывают сбои в ответе с сервера, поэтому бота следует сделать устойчивым к таким ошибкам.

Запуск бота

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

const TelegramBot = require('./lib/telegram.js');

const bot = new TelegramBot(‘YOUR_TOKEN’, {polling: true});

bot.getMe().then(function (me) {

console.log('Hi my name is %s!', me.username);

});

Вызов функции getMe() происходит при успешной авторизации токена бота и выдачи управления программе. При этом в качестве аргумента функция getMe().then() принимает функцию function(me). Ее первым аргументом является объект, с помощью которого можно получить различную информацию о вашем боте и, в данном случае, вывести её в консоль.Далее, чтобы научить бота отправлять сообщения, нужно использовать метод bot.sendMessage(chatId, ‘Hello World!!!’); А чтобы бот понимал входящие запросы, достаточно использовать bot.on(‘message’, function (msg){}). Более подробно методы описаны в документации node-telegram-bot-api.

Красивые кнопочки

Чтобы вместо стандартной пользователь видел inline клавиатуру, необходимо при отправке сообщений передать методу sendMessage ее параметры:

const opt = {

parse_mode: 'markdown',

disable_web_page_preview: false,

reply_markup: JSON.stringify({

inline_keyboard: [

[{text: `Русский ${emoji.get('ru')}`, callback_data:'rus'},

{text: `English ${emoji.get('gb')}`, callback_data:'eng'}]

]

})

}

bot.sendMessage(chatId, 'language?',opt);

Где text — текст на кнопке, callback_data — данные, которые получит бот при нажатии на кнопку.

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

bot.on('callback_query', function (msg) {

if (msg.data === 'rus'){

console.log(“Russian”);

}

if (msg.data === ‘eng’){

console.log(“English”);

}

});

Изменение сообщения

Иногда требуется не отправлять заново сообщения, а поправить уже существующее (для удобства отображения данных). Для этого мы решили воспользоваться методом bot.editMessageText(text, opt); где text — измененный текст сообщения, opt — Дополнительные опции для запроса к telegram, такие как наличие клавиатуры, форматирование текста и другое.

Отправка текста и фото в одном сообщении

Стандартный метод sendPhoto не подходит, так как имеет ограничения на количество символов в тексте и другое форматирование – текст пишется под фото. Поэтому мы использовали sendMessage и просто вставили в текст сообщения ссылку на нужную картинку.

Чтобы телеграм подгрузил картинку в сообщение, необходимо установить параметр disable_web_page_preview: false.

var opt = {

chat_id: chatId,

parse_mode: 'markdown',

disable_web_page_preview: false,

reply_markup = JSON.stringify({

inline_keyboard: [..]

})

}

Для форматирования текста нужно установить параметр parse_mode. Он имеет два значения: markdown и html. При значении markdown используется форматирование вида:

*bold text*

_italic text_

[text](URL)

`inline fixed-width code`

```pre-formatted fixed-width code block```

const text = ‘[текст](url)’;

bot.sendMessage(chatId, text);

Магазин ботов

Чтобы всю эту красоту увидел мир, а не только ваши пользователи, вы можете написать статью на хабр загрузить вашего бота в магазин ботов – storebot.Регистрация и публикация простая – достаточно залогиниться на сайте storebot.met и после «далее-делее-готово» нажать в меню «AddBot». Это вам не модерация в AppStore.

Бонус для самых классных

Итак, при помощи нашего небольшого туториала вы смогли узнать, как сделать бота в телеграме. Надеемся, он был вам полезен. А если вы крутой разработчик, и все это было для вас очевидным, тогда приглашаем поучаствовать в небольшом челлендже: как мы уже писали выше, у Tagvisor есть еще и десктопная версия, которую мы на днях запустили в тестовом режиме. И тому, кто найдет больше всех багов (в верстке, коде, мобильной-версии), мы организуем доставку трех больших пицц. Найденные баги присылайте на почту bugtracker@tagvisor.com.

–>

Я начал погружение в мир IT лишь три недели назад. Серьезно, три недели назад я даже не понимал синтаксиса HTML, а знакомство с языками программирования заканчивалось школьной программой по Pascal 10-летней давности. Однако я решился поехать в IT-лагерь, для детей которого было бы неплохо сделать бота. Я решил, что это вряд ли так сложно.

С этого начался длинный путь, в рамках которого я:

• развернул облачный сервер с Ubuntu,
• зарегистрировался на GitHub,
• выучил базовый синтаксис JavaScript,
• прочитал тонну статей на английском и русском языках,
• сделал, наконец, бота,
• написал эту статью, наконец.

Выглядел итоговый результат примерно так:

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

А еще — для продвинутых программистов — просто чтобы их немного посмешить.

1. Как писать код на JS?

Я понимал, что стоит для начала хотя бы разобраться в синтаксисе языка. Выбор пал на JavaScript, просто потому что следующим шагом для меня было создание приложения на ReactNative. Я начал с на Codecademy и остался в большом восторге. Первые 7 дней бесплатно. Реальные проекты. Рекомендую. Прохождение его заняло порядка 25 часов. На самом деле далекоооо не все из него пригодилось. Вот так примерно выглядит структура курса и подробно первый блок.

2. Как зарегистрировать бота?

В начале мне очень помогла вот из блога некоего Арчакова. Он разжевывает самое начало. Но главное, что там есть — это инструкция по регистрации бота. Лучше я не напишу, и поскольку это самая легкая часть, просто напишу суть. Нужно создать бота и получить его API. Это делается через другого бота — @BotFather. Найдите его в telegram, напишите ему, пройдите простой путь и получите (сохраните!) API-ключ (это набор цифр и букв). Он пригодился мне позже.

3. Как выглядит код бота?

После долгого изучения статей, я понял, что стоит использовать какую-то библиотеку (сторонний код в формате модуля), чтобы не мучаться с изучением API телеграма и созданием с нуля больших кусков кода. Я нашел фреймворк , который нужно было как-то подключить к чему-то при помощи npm или yarn. Примерно так я понимал тогда, из чего состоит развертывание бота. Смеяться здесь. Я не обижусь. Больше всего при последующем создании бота мне помогли примеры, указанные внизу страницы:

3. Как создать собственный облачный сервер за 100 рублей

После долгих поисков я понял, что команда ‘npm’ из картинки выше относится к командной строке. Командная строка есть везде, но чтобы получилось ее исполнить, нужно поставить NodePackageManager. Проблема была в том, что программировал я на PixelBook с ChromeOS. Я пропущу здесь большой блок про то, как я познавал Linux — для большинства это пустое и ненужное. Если у вас есть Windows или MacBook, у вас уже есть консоль.

Если в двух словах, я поставил Linux через Crostini.

Однако в процессе я понял, что для постоянной работы бота (а не только когда у меня включен компьютер) мне нужен облачный сервер. Я выбрал Я закинул 100 рублей, купил самый дешевый сервер Ubuntu (см.картинку).

4. Как подготовить сервер для запуска бота

После этого я понял, что нужно сделать на сервере какую-то папку, в которую я положу файл с текстом кода. Для этого в консоли (запускать прямо на сайте через кнопку «Открыть консоль») я вбил

mkdir bot

bot — это стало название моей папки. После этого я установил npm и Node.js, что позволит запускать мне потом код из файликов с разрешением *.js

sudo apt update sudo apt install nodejs sudo apt install npm

Очень рекомендую на этом этапе настроить подключение к серверу через свою консоль. Вот Это позволит работать с сервером напрямую через консоль своего компьютера.

5. Как написать код первого бота.

А вот теперь просто открытие для меня. Любая программа — это просто строки текста. Их можно вбить куда угодно, сохранить с нужным расширением и все. Ты прекрасен. Я использовал , но реально, можно просто в блокноте стандартном писать. Главное — сохранить потом файл в нужном расширении. Это как написать текст в Word и сохранить.

Я сделал новый файл, в который вставил код из примера на странице telegraf и сохранил в файл index.js (вообще не обязательно называть файл так, но так принято). Важно — вместо BOT_TOKEN вставьте свой API-ключ из второго пункта.

const Telegraf = require('telegraf')  const bot = new Telegraf(process.env.BOT_TOKEN) bot.start((ctx) => ctx.reply('Welcome!')) bot.help((ctx) => ctx.reply('Send me a sticker')) bot.on('sticker', (ctx) => ctx.reply('')) bot.hears('hi', (ctx) => ctx.reply('Hey there')) bot.launch()

6. Как закинуть код на сервер через github

Теперь мне нужно было закинуть как-то этот код на сервер и запустить его. Для меня это стало челленджем. В итоге, после долгих мытарств я понял, что проще будет создать файл на github, который позовляет обновлять код при помощи команды в консоли. Я зарегал аккаунт на и сделал , куда и загрузил файл. После этого мне нужно было понять, как же настроить загрузку файлов с моего аккаунта (открытого!) на сервер в папку bot (если вдруг вы вышли из нее — просто напишите cd bot).

7. Как загрузить файлы на сервер через github ч.2

Мне нужно было поставить на сервер программу, которая будет загружать файлы с git. Я поставил git на сервер, вбив в консоль

apt-get install git

После этого мне нужно было настроить загрузку файлов. Для этого я вбил в командную строку

git clone git://github.com/b0tank/bot.git bot 

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

Я решил пренебречь этой проблемой.

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

npm install telegraf

8. Как запустить бота

Для этого, находясь в папке с файлом (чтобы переходить из папки в папку через консоль — выполняйте команду формата cd bot Чтобы убедиться, что вы там, где нужно можно вбить команду, которая отобразит в консоли все файлы и папки, которые там лежат ls -a

Для запуска я ввел в консоль

node index.js 

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

9. Как запустить бота в фоновом режиме

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

screen

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

node index.js

10. Как работает бот и как расширить его функционал

Что же умеет наш бот из примера? Он умеет

bot.start((ctx) => ctx.reply('Welcome!'))

говорить «Welcome!» в момент старта (попробуйте поменять текст)

bot.help((ctx) => ctx.reply('Send me a sticker'))

в ответ на стандартную команду /help отправлять сообщение «Send me a sticker»

bot.on('sticker', (ctx) => ctx.reply(''))

в ответ на стикер отправлять одобрение

bot.hears('hi', (ctx) => ctx.reply('Hey there'))

Если вы посмотрите код на , то быстро поймете, что сильно далеко от этого функционала я не ушел. Что активно используется, так это функция ctx.replyWithPhoto Она позволяет отправлять заданное фото или gif в ответ на определенный текст.

Значимая часть кода была написана детьми 11-13 лет, которым я дал доступ к боту. Они ввели свои user-case. Думаю, легко определить, какая часть сделана была ими.

Например, на сообщение «джейк» приходит гифка с известным персонажем из мультика Adventure Time.

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

11. Как обновлять код и перезапускать бота

Не забывайте, что надо обновлять код не только на github, но и на сервере. Делать это просто — стопим бота (нажать ctrl+c),

— вводим в консоль, находясь в целевой папке, git pull — вновь запускаем бота командой node index.js

END

Многие вещи, описанные в этом файле, будут супер очевидны для продвинутых программистов. Однако когда я сам пытался одним махом перепрыгнуть пропасть до мира ботов, мне очень не хватало подобного гайда. Гайда, в котором не пропускается очевидные и простые для любого IT-специалиста вещи.

В дальнейшем я планирую пост про то, как сделать свое первое приложение на ReactNative в таком же стиле, подписывайтесь! Источник: habr.com

В обновлении Bot API 6.0 телеграм-боты получили много новых функций. Из них для разработчиков самая примечательная – Telegram Web Apps (Веб-приложения внутри телеграм). С этим нововведением разработчики могут подключать к своим ботам web-приложения, которые открываются в дополнительном окне, что сильно расширяет инструментарий, а, следовательно и функционал ботов в телеграм.

Давайте же опробуем это на практике!

Создание кнопки

Первое, что нам нужно сделать – создать кнопку запуска веб-приложения. Это можно сделать двумя способами:

1. При помощи @botfather – кнопка слева снизу

1.1. Идем в @botfather и пишем команду: /setmenubutton

1.2. Далее выбираем бота, которому нужна кнопка веб приложения

1.3. Отправляем ссылку по которой доступно наше веб-приложение

1.4. Пишем имя кнопки – будет отображаться внизу слева

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

Только при добавлении кнопки этим способом мы можем получить информацию о пользователе.

2. В коде бота – клавиатурные кнопки.

Запуск бота с inline-кнопки даёт суть тоже самое, что и предидущий вариант. Однако, запуск с keyboard button дает возможность отправлять данные из веб-приложения в бота.

Покажу на примере pytelegrambotapi – я понимаю, что это не самая популярная библиотека для написания телеграмм-ботов, но так получилось, что я пишу именно на ней. Если вы пользуетесь другой библиотекой/языком, думаю, вам не составит труда действовать по аналогии. Вы можете сразу посмотреть пример или перейти в репозиторий и посмотреть код с комментариями:

2.1. Делаем все стандартные штуки для запуска бота – импорт библиотеки, ввод токена, infinity_polling, обработчик команды start. Если вы не понимаете о чем я, вам сюда.

2.2. Создаем функцию, которая вернет нам клавиатуру с нужной кнопкой.

Для того, чтобы создать кнопку, нужно сначала создать WebAppInfo-объект внутри которого будет url на наш сайт.

def webAppKeyboard(): #создание клавиатуры с webapp кнопкой    keyboard = types.ReplyKeyboardMarkup(row_width=1) #создаем клавиатуру    webAppTest = types.WebAppInfo("https://telegram.mihailgok.ru") #создаем webappinfo - формат хранения url    one_butt = types.KeyboardButton(text="Тестовая страница", web_app=webAppTest) #создаем кнопку типа webapp    keyboard.add(one_butt) #добавляем кнопки в клавиатуру     return keyboard #возвращаем клавиатуру

2.3. Отправляем сообщение с нашей клавиатурой при отправке команды или любом другом действии:

bot.send_message( message.chat.id, 'Привет, я бот для проверки телеграмм webapps!)', reply_markup=webAppKeyboard()) 

Готово. Кнопки у нас есть.

Тут можно вообще закончить, если вы просто хотели, чтобы пользователь мог открыть ваш сайт из бота (зачем-то). Работать это будет вот так:

Работа с веб-приложением

Теперь идем в наше веб-приложение. На момент написания статьи открывается любая ссылка, даже на codepen.

Инициализация

Чтобы взаимодействовать с телеграм подключаем скрипт:

После этого нам будет доступен объект: window.Telegram.WebApp

Записываем его в переменную и начинаем нашу работу.

let tg = window.Telegram.WebApp;

Что же мы теперь можем? Не так много, как хотелось бы, но и не мало. Приложение состоит из: основной кнопки (telegram-объект) и самой страницы, которая загрузилась по ссылке. Остальные элементы telegram-интерфейса нам не доступны. Однако, доступны цвета темы пользователя:

Цвета

Они доступны в формате hex как css-переменные:

var(--tg-theme-bg-color) var(--tg-theme-text-color) var(--tg-theme-hint-color) var(--tg-theme-link-color) var(--tg-theme-button-color) var(--tg-theme-button-text-color)

Или как объект ThemeParams в js (вместо window.Telegram.WebApp я использую переменную tg):

tg.ThemeParams.bg_color tg.ThemeParams.text_color tg.ThemeParams.hint_color tg.ThemeParams.link_color tg.ThemeParams.button_color tg.ThemeParams.button_text_colorString

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

Также имеется обработчик события изменения цветовой схемы:

Telegram.WebApp.onEvent(themeChanged, function(){});

При изменении цветовой схемы или размеров окна можно поменять что-то и в нашем веб-приложении.

Основные возможности

С цветами разобрались – теперь к другим основным параметрам:

tg.initData //получаем данные от пользователя в виде строки (работает только при запуске из меню команд бота).  tg.initDataUnsafe // получаем данные от пользователя в виде объекта (работает только при запуске из меню команд бота).  tg.isExpanded // возвращает true, если приложение открыто на всю высоту, false - если нет.  tg.viewportHeight // вернёт ширину окна. tg.sendData(data) // отправляет данные  боту в строковом виде, после чего закрывает приложение (работает только если приложение запущено с keyboard button).  tg.ready() // метод позволяет отследить, когда приложение готово к отображению. tg.expand() // метод позволяет растянуть окно на всю высоту. tg.close() // метод закрывает приложение.

Main button

Мы можем взаимодействовать с кнопкой внизу приложения. Изменять ее текст, цвет фона и текста, показывать/скрывать, делать активной и деактивировать:

tg.MainButton.text // текст кнопки, по умолчанию: "Continue" tg.MainButton.color // цвет текста tg.MainButton.textColor // цвет подложки tg.MainButton.isVisible // видна ли кнопка (по умолчанию false)  tg.MainButton.isActive // активна ли кнопка (по умолчанию true) tg.MainButton.setText(text) //  метод для задания текста tg.MainButton.onClick(callback) // метод при нажатии на кнопку tg.MainButton.show() // показать кнопку  tg.MainButton.hide() // скрыть кнопку tg.MainButton.enable() // сделать активной  tg.MainButton.disable() // сделать неактивной  tg.MainButton.setParams(params) // задает параметры в виде объекта 

Web App User

И еще информация о пользователе, мы можем разобрать строку tg.initData или использовать tg.initDataUnsafe объект:

tg.initDataUnsafe.user.id // уникальный идентификатор пользователя tg.initDataUnsafe.user.isBot // бот ли пользователь (true/false) tg.initDataUnsafe.user.first_name // имя пользователя tg.initDataUnsafe.user.last_name // "фамилия" пользователя tg.initDataUnsafe.user.username // username пользователя tg.initDataUnsafe.user.language_code // код языка пользователя

Пишем веб-приложение

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

Не забудьте подключить скрипт:

1. Создадим небольшую html-основу:

         Just text      Link      Some little hint      Show/Hide Main Button      Enable/Disable Main Button   

2. Пропишем изменения текста основной кнопки и изменение цвета:

let tg = window.Telegram.WebApp; //получаем объект webapp телеграма   tg.expand(); //расширяем на все окно    tg.MainButton.text = "Changed Text"; //изменяем текст кнопки  tg.MainButton.setText("Changed Text1"); //изменяем текст кнопки иначе tg.MainButton.textColor = "#F55353"; //изменяем цвет текста кнопки tg.MainButton.color = "#143F6B"; //изменяем цвет бэкграунда кнопки tg.MainButton.setParams({"color": "#143F6B"}); //так изменяются все параметры 

3. Далее повесим обработчик события на первую html-кнопку и при нажатии будем показывать/скрывать основную telegram-кнопку:

btn.addEventListener('click', function(){ //вешаем событие на нажатие html-кнопки if (tg.MainButton.isVisible){ //если кнопка показана  tg.MainButton.hide() //скрываем кнопку  }   else{ //иначе   tg.MainButton.show() //показываем    } });

4. Еще один обработчик события на вторую html-кнопку, при нажатии которой будем активировать/деактивировать основную telegram-кнопку:

let btnED = document.getElementById("btnED"); //получаем кнопку активировать/деактивировать btnED.addEventListener('click', function(){ //вешаем событие на нажатие html-кнопки if (tg.MainButton.isActive){ //если кнопка показана  tg.MainButton.setParams({"color": "#E0FFFF"}); //меняем цвет tg.MainButton.disable() //скрываем кнопку  } else{ //иначе tg.MainButton.setParams({"color": "#143F6B"}); //меняем цвет tg.MainButton.enable() //показываем  } });

5. В итоге отправляем данные при нажатии на основную telegram-кнопку:

Telegram.WebApp.onEvent('mainButtonClicked', function(){ tg.sendData("some string that we need to send");  //при клике на основную кнопку отправляем данные в строковом виде });

Благодаря этому методу мы можем получить данные из веб-приложения в боте.

let usercard = document.getElementById("usercard"); //получаем блок usercard   let profName = document.createElement('p'); //создаем параграф profName.innerText = `${tg.initDataUnsafe.user.first_name} ${tg.initDataUnsafe.user.last_name} ${tg.initDataUnsafe.user.username} (${tg.initDataUnsafe.user.language_code})`; //выдем имя, "фамилию", через тире username и код языка usercard.appendChild(profName); //добавляем   let userid = document.createElement('p'); //создаем еще параграф  userid.innerText = `${tg.initDataUnsafe.user.id}`; //показываем user_id usercard.appendChild(userid); //добавляем

7. И добавляем стили, используя telegram-css переменные:

body{ color: var(--tg-theme-text-color); background: var(--tg-theme-bg-color); display: flex; flex-direction: column; align-items: center; font-size: 18px; }  .hint{ color: var(--tg-theme-hint-color); }  .link{ color: var(--tg-theme-link-color); }  .button{ background: var(--tg-theme-button-color); color: var(--tg-theme-button-text-color); border: none; font-size: 18px; }  .button:not(:last-child){ margin-bottom: 20px }  #usercard{ text-align: center; }

В итоге получаем такое веб-приложение:

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

Получаем данные от веб-приложения в боте

Теперь вешаем обработчик событий на сообщение, которое посылает веб-приложение в методе send (работать будет только с keyboard button):

@bot.message_handler(content_types="web_app_data") #получаем отправленные данные  def answer(webAppMes):    print(webAppMes) #вся информация о сообщении    print(webAppMes.web_app_data.data) #конкретно то что мы передали в бота    bot.send_message(webAppMes.chat.id, f"получили инофрмацию из веб-приложения: {webAppMes.web_app_data.data}")     #отправляем сообщение в ответ на отправку данных из веб-приложения