📚Lecture Notes
На этом уроке мы создадим еще один проект - чат-бота. Это будет бэкэнд-проект, потому что именно так работают чат-боты. Вы пишете какой-то скрипт, который работает на вашем сервере. И вы используете ключ API для подключения к серверу Telegram. Ваш скрипт может получать обновления с сервера Telegram, когда приходят новые сообщения. Вы можете инициировать новые сообщения от имени вашего чат-бота. По сути, это отдельное приложение.
У нас есть контракт, мы развернули его - это как бэкэнд нашего dapp. Затем мы создали веб-интерфейс, чтобы любой в Интернете мог получить к нему доступ и взаимодействовать с ним. Затем мы создали TWA (веб-приложение Telegram), приняли его для фактической встроки в Telegram. Еще одна вещь, которую мы хотим сделать, это написать сценарий, который будет контролировать и программировать этот разговор: предложить клавиатуру, задать несколько вопросов, а затем инициировать определенные действия в отношении ответов. И, конечно, взаимодействуйте с TON, потому что мы создаем интерфейс для нашего контракта, который находится на блокчейне.
Preparing to start
Мы начинаем новый проект с создания нового каталога и перехода к нему:
mkdir first_contract_tg_bot
cd first_contract_tg_bot
Теперь мы настраиваем новый пакет:
yarn init
Время установить несколько библиотек. Мы продолжаем работать с TypeScript, поэтому первое, что мы собираемся сделать, это установить typescript для узла, типы для узла и, swc/core который компилируется TypeScript into JavaScript:
yarn add typescript ts-node @types/node @swc/core --dev
Нам нужно создать здесь новый файл под названием tsconfig.json со следующим содержимым:
Here we have the configuration for the transpiler of TypeScript and a pretty standard configuration for compiler.
This project is empty. We need to install a new SDK that will help us interact with the chatbot API. The SDK that I would suggest is called Telegraf:
yarn add telegraf
While it's installing, let me go back to the browser and show you some of its documentation. It's quite easy to start with and quite a handful when you want to create even complex chatbots.
Здесь у нас есть конфигурация для транспилера TypeScript и довольно стандартная конфигурация для компилятора.
Этот проект пуст. Нам нужно установить новый SDK, который поможет нам взаимодействовать с API чат-бота. SDK, который я бы предложил, называется Telegraf:
yarn add telegraf
Пока он устанавливается, позвольте мне вернуться к браузеру и показать вам некоторые из его documentation. С этого довольно легко начать и довольно много, когда вы хотите создать даже сложных чат-ботов.
Программирование чат-бота
Мы установили Telegraf. Теперь мы создадим папку src в корневом каталоге и файл index.tx в этой папке. Затем мы сразу же создаем скрипт в package.json и запускаем наш код из командной строки.
Скрипт будет использовать ts-node для фактического запуска этого index.ts, в который мы будем программировать. Давайте пойдем к примеру here. Конечно, это не пример API TypeScript, но мы подготовили некоторый код. Во-первых, мы должны импортировать Telegraf в TypeScript:
import { Telegraf } from "telegraf";
Следующее, что нам нужно сделать, это инициировать экземпляр бота. Итак, мы создаем экземпляр Telegraf:
const bot = new Telegraf(' ');
Первое, что он примет, это токен. Вы уже видели этот токен, когда мы работали с BotFather API. Так что нам нужно go back, Посмотрите, что такое наш токен, и скопируйте его, чтобы инициировать экземпляр бота здесь локально:
const bot = new Telegraf("6015353320:AAF4LZh2hvZSRHQcZNDMyuePl41yd2ZAMyM");
Когда вы разрабатываете чат-ботов, вы должны хранить два таких экземпляра, один для тестирования, а другой для производства. Поэтому мы собираемся разделить эти токены с переменной env. В папке src мы создаем новый файл под названием .env, чтобы отслеживать, что этот файл никогда не загрузивается в ваш репозиторий. Мы назовем его TG_BOT_TOKEN и запустите с ним файл .env:
TG_BOT_TOKEN=6015353320:AAF4LZh2hvZSRHQcZNDMyuePl41yd2ZAMyM
Библиотека, которая помогает нам взаимодействовать с этими переменными, называется dotenv, давайте добавим ее:
yarn add dotenv
Once installed, we can access it from index.ts:
const bot = new Telegraf(process.env.TG_BOT_TOKEN!);
Но сначала нам нужно настроить этот dotenv и импортировать его. Итак, давайте сделаем это в самом начале этого файла:
import dotenv from "dotenv"
Важно запустить функцию dotenv.config как можно скорее в вашем проекте, поэтому после импорта мы добавляем
dotenv.config();
Эта переменная, возможно, не определена, но мы знаем, что на самом деле определяем ее здесь, в .env. Так что мы собираемся сказать, что это точно будет там. И он потерпит неудачу, если его там не будет, поэтому он не будет инициировать экземпляр Telegraf.
Круто, так что давайте посмотрим, как выглядит наш образец кода, как только мы начнем взаимодействие с ботом шаг за шагом:
Этот экземпляр бота Telegraf дает нам запуск метода. Это будет срабатывать, когда вы впервые войдете в свой чат-бот: как вы помните, когда мы только что открыли чат-бот, мы нажали start. После запуска первого сообщения вы ответите приветственным сообщением и прикрепите клавиатуру.
Посмотрим, как будет выглядеть эта клавиатура. Чат-боты Telegram позволяют создать собственную клавиатуру для замены оригинальной клавиатуры, которую вы видите при вводе сообщения. Вы также можете сделать встроенные клавиатуры, размещенные прямо под сообщениями. Мы поговорим о них позже; теперь мы будем использовать простую клавиатуру.
Здесь мы создадим три строки и три кнопки. В Интернете можно "запросить" транзакцию, например, "запросить депозит", потому что вы разрешаете приложениям делать запросы от вас. Но здесь у нас есть прямые ссылки на транзакции, у вас нет этого сеанса с самим чат-ботом, поэтому глаголы действия в кнопках более подходящие, например, "депозит". Конечно, вы можете сохранить сеанс на бэкэнде, но это не так, как должно быть сделано, потому что это создает уязвимость безопасности.
Там у нас есть несколько функций. bot.hears означает, что бот получает такое сообщение. Мы можем отправить ответ "Увеличено на пять". А затем мы также можем добавить похожие ответы.
Наконец, мы добавляем функцию для запуска бота и несколько строк кода, чтобы убедиться, что мы правильно выходим из бота:
bot.launch();
// Enable graceful stop
process.once("SIGINT", () => bot.stop("SIGINT"));
process.once("SIGTERM", () => bot.stop ("SIGTERM"));
Ok, we’re all set, let’s launch:
yarn start
Наш бот работает, но важно проверить его в приложении. Давайте откроем нашего бота и нажмм "Начать" снова:
https://github.com/klauss-z/temp/blob/main/6.4_1.jpg?raw=true
Как видите, у нас есть три кнопки с нашим текстом. После того, как мы нажмем на любой из них, мы получим ответ, который хотим. И если мы нажмем Counter, наше приложение откроется как веб-приложение. Так как же мы можем заставить действия меню работать?
Заставить действия меню работать
Давайте вернемся к one of our first lessons По программированию. Мы создавали сценарий развертывания. Как вы помните, мы составили ссылку, которая может быть отсканирована в виде QR-кода и направлена на кошелек, где мы можем подписать транзакцию для развертывания контракта. Теперь мы можем сделать то же самое.
Как только ваш пользователь получит возможность, например, увеличить на пять, вы можете создать ссылку, которая переместит его непосредственно на Tonhub для оплаты.
Мы ничего не собираемся делать с основной сетью, это только тестовая сеть. Мы разобраем класс адресов из определенного адреса, а затем преобразуем его в строку. На самом деле, мы можем просто сделать это напрямую, потому что нам, очевидно, нужна строка здесь. Затем давайте перекомполуем его, сделаем код чище:
Здесь нам нужно сформировать тело сообщения. Что такое тело сообщения? Вы используете конструктор, потому что вы собираетесь поместить тело сообщения в качестве ячейки, а TON преобразует его в строковое представление. Что мы помещаем в тело этого сообщения?
Мы создавали контракт и упаковку для него. Мы собираемся отправить функцию приращения. Для этого мы можем просто скопировать это тело сообщения из wrappers > MainContract.ts:
const msg ,body = beginCell() .storeUint(1, 32) // OP code
.storeUint(increment_by, 32) // increment_by value
.endCell();
Он показывает целое число, которое мы хотим увеличить, и целое число, на которое мы хотим увеличить. Все это я скопирую в свой бот-проект:
Мы не просим приращения, мы знаем, что это 5, поэтому мы ставим здесь 5. Вы можете поиграть с ним и попросить увеличить сумму. В нашем случае у нас сейчас есть 5 жестких кодов. Теперь мы импортируем qs в начале:
import qs from "qs";
Отлично, мы все импортировали, давайте строим объект. Мы говорим, чтобы увелить счетчик на пять - это просто текст, прикрепленный к сообщению. Затем мы говорим поставить 0,05 в качестве суммы, чтобы фактически оплатить транзакционные сборы и прочее. Затем мы используем эту плату за параметр.
Здесь мы направляемся к Tonhub developers Документация. Ссылка, которую мы используем, будет только для Tonhub, но вы можете поиграть Tonkeeper links, Например. В документации вы также можете просто выяснить структуру URL-адреса, который вы можете использовать для предоставления некоторых значений.
Параметр Bin везде используется везде для передания msg_body, как только вы хотите отправить сообщение с определенными параметрами. Это именно то, что мы здесь делаем: мы создаем ссылку для оплаты Tonhub.
Но раньше нам нужно сделать так, чтобы бот ответил пользователю. Пользователь прислал нам сообщение "Увеличение на 5" с клавиатурой, которую мы предоставили в начале. И нам нужно ответить, чтобы пользователь знал, что он может сделать. Нам нужно как-то предоставить ссылку. Мы можем просто отправить ссылку, но мы хотим сделать ее очень удобной для пользователя. Вот почему мы собираемся ответить сообщением:
В прошлый раз мы использовали обычную клавиатуру в том же месте под линией ввода. И теперь мы создали встроенную клавиатуру, как вы видите выше. Он имеет несколько параметров: текст, транзакцию подписи и URL-адрес. Поэтому мы предоставили URL-адрес параметра со ссылкой в bot.hears.
Одна вещь, которую я не упоминал раньше, но вы должны помнить здесь: если мы хотим отправить определенную ячейку в качестве ссылки, скажем, вместе с какой-то строкой или ссылкой, нам нужно упаковать ее в base64, как ячейку тела сообщения.
Хорошо, похоже, это сработает:
yarn start
Ничего не пошло не так, поэтому я возвращаюсь к своему телефону. Я открываю клавиатуру, предоставленную командой запуска, и нажимаю "Увеличить на 5":
https://github.com/klauss-z/temp/blob/main/6.4_2.jpg?raw=true
Как видите, мы получили сообщение с просьбой подписать транзакцию для приращения к 5. Мы нажимаем «Подписать» и получаем перенаправление на Tonhub. Транзакция отправлена. Как мы можем проверить, что транзакция действительно повлияла на состояние нашего контракта? Если вы проверите свое веб-приложение, вы увидите, что значение счетчика равно 15, хотя раньше было 10.
Еще большее улучшение чат-бота
Мы можем построить определенный поток пользователей только с помощью чат-бота, и пользователь будет взаимодействовать с нашим блокчейном в конце. У нас нет никаких учетных данных пользователя на задней стороне, поэтому мы на самом деле предоставляем ему ссылку на его кошелек для оплаты. Надеюсь, это не запутает вас, потому что как разработчик вы всегда должны думать об удобстве использования. И это одна из вещей, которая может значительно улучшить его.
Веб-приложения в Telegram позволяют создавать интересные, классные чаты с автоматическими сообщениями. Это позволяет вам создавать потрясающие проекты с большой ценностью для ваших пользователей. Давайте создадим аналогичную ссылку:
bot.hears("Deposit 1 TON", (ctx) => {
const msg_body = beginCell().storeUint(2, 32).endCell();
Мы собираемся положить 2 на депозит. Нам больше ничего не нужно, давайте перепроверим это wrappers > MainContract.ts:
Давайте перезапустим бота с помощью yarn start и вернемся к приложению в Telegram. Теперь мы можем не только внести депозит, но и вывести таким же образом:
https://github.com/klauss-z/temp/blob/main/6.4_3.jpg?raw=true
Теперь давайте пойдем к documentation Веб-приложений в Telegram, и узнайте больше о том, что доступно в этом SDK. Здесь у нас есть initData и initDataUnsafe. Они используются, когда мы хотим отправить некоторые необработанные данные при инициировании веб-приложения. С помощью версии мы можем проверить версию API бота, доступную в приложении Telegram пользователя. С помощью платформы мы можем обнаружить платформу. Мы также можем настроить цветовую схему, настроить параметры темы - эти опции предоставляются документацией Telegram. Мы можем проверить, развернут ли он, установить высоту видового экрана.
Что нам сейчас нужно, так это sendData - метод отправки данных боту. При вызове этой команды служебное сообщение с данными отправляется резервному боту, содержащему данные заданной длины. Важно то, что после выполнения этой команды в ваш Telegram отправляется сообщение. В принципе, после запуска функции sendData вы отправляете сообщение, которое должно быть обработано вашим серверным ботом, который мы только что создали. И это будет выглядеть так, как вы справляетесь с этим:
bot.on(message("web_app_data"), (ctx) => ctx.reply("ok"));
You also need to import the message from telegraf/filters:
import { message } from "telegraf/filters";
Вы можете отправить сюда наклейку или просто сообщение, но вы хотите отфильтровать данные веб-приложения. Здесь вы получите данные, которые были отправлены из вашего веб-приложения. Важно знать, что это сделано для закрытия, поэтому после запуска метода sendData веб-приложение закрывается.
Заключение
Это в значительной степени все. Сегодня мы многому научились. На самом деле мы выяснили, как использовать один из лучших способов доставки вашего приложения людям. TON - это массовое принятие, и для вас важно овладеть тем, как создавать свои приложения, чтобы они могли быть интегрированы в оператор. Если Telegram является перевозчиком для всех этих многих людей, TON - это блокчейн, который мы очень любим, и платформа готова для такого количества людей, почему бы вам не создать свои приложения и не принести масштабируемую технологию в место, где такое количество пользователей уже ждет ваших продуктов?
Я очень рад, что теперь вы готовы к этому. Я надеюсь, что все было ясно для вас, что все, что вы узнали, поможет вам создать свой продукт. Увидимся в следующих главах. Спасибо!
