Разработка Telegram Web App с помощью HappyX и telebot

В этой статье я расскажу вам, как можно с помощью Nim разработать Telegram Web App, используя HappyX и telebot.

Nim

Nim — высокоуровневый язык программирования, компилируемый в C, C++, Objective-C и в JavaScript. Это позволяет нам разрабатывать как клиентские, так и серверные приложения.

HappyX

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

telebot

Речь идет о библиотеке для Nim — telebot.nim. Она позволяет взаимодействовать нам с Telegram API. С ее помощью разработаем небольшого бота для этой статьи.

Окей, с чего начнем?

Установка

Если у вас не установлен Nim — установите его, следуя инструкции.

Затем с помощью встроенного в Nim пакетного менеджера nimble ставим последние версии необходимых нам библиотек — happyx и telebot:

nimble install happyx@#head nimble install telebot@#head

Разработка бота

Создаем папку /bot, в ней файл main.nim. Импортируем нужные библиотеки:

import   telebot,  # работа с Telegram API   std/asyncdispatch,  # async   std/logging,  # логирование   std/strutils  # работа со строками

Теперь давайте создадим самого бота в Telegram. Для этого необходимо написать боту BotFather и написать /newbot:

Также укажем поведение для кнопки рядом с полем ввода сообщения:

Для этого используем команду /setmenubutton

Важное примечание — указывайте ссылку на свой сайт, либо на будущий сайт на GitHub Pages.

Теперь возвращаемся в папку /bot и создаем файл /bot/secret.key. Лучше всего сразу занести его в .gitignore:

ВАШ_API_КЛЮЧ

Далее переходим в main.nim и подгружаем наш API ключ:

# Функция slurp прочитает содержимое файла на этапе компиляции # а функция strip - обрежет пробелы в начале и конце строки const API_KEY = slurp("secret.key").strip()

Следом пишем обработчик событий:

# Обработчик всех входящих событий proc updateHandler(b: Telebot, u: Update): Future[bool] {.gcsafe, async.} =   # Получаем сообщение пользователя   var response = u.message   # Проверяем, если пользователь отправил хоть какое-то сообщение   if response.text.len > 0:     # Отсылаем обратно сообщение с единственной кнопкой     discard await b.sendMessage(       response.chat.id, "Play in this now!",       # Создаем inline клавиатуру       replyMarkup = InlineKeyboardMarkup(         kind: kInlineKeyboardMarkup,         inlineKeyboard: @[@[InlineKeyboardButton(           # Текст кнопки           text: "Play now!",           # Здесь в ссылке я указал сайт, на котором находится наше приложение на HappyX           webApp: WebAppInfo(url: "https://ethosa.github.io/tg-webapp-happyx/#/")         )]]       )     )

Осталось совсем чуть-чуть — запуск бота в коде:

# Блок ниже скомпилируется только в том случае, # если мы запускаем этот файл напрямую. # # аналог питоновского if __name__ == '__main__' when isMainModule:   # Подрубаем логирование   var L = newConsoleLogger()   addHandler(L)    # Создаем экземпляр бота   let bot = newTeleBot(API_KEY)    # Запускаем слушатель   bot.onUpdate(updateHandler)   bot.poll(timeout=300, clean = true)

Теперь запустим нашего бота и проверим, что происходит:

nim c -r -d:ssl ./bot/main

Если мы нажмем сейчас на кнопку — то ничего не увидим. Давайте теперь займемся самим приложением.

Приложение

Для начала создадим проект нашего приложения:

hpx create --name client --kind SPA --use-tailwind --language Nim

Теперь заходим в /client/src/main.nim и меняем импорт:

import   happyx,   telebot/webapp

Затем пишем следующее:

# Задаем переменную для удобства var tg = Telegram.WebApp  # Создаем реактивный счетчик var counter = remember 0  # Настраиваем внешний вид главной кнопки снизу приложения discard tg.MainButton.setText("Click me!") discard tg.MainButton.show() discard tg.MainButton.onClick(proc() =   # При клике на кнопку увеличиваем наш счетчик   counter->inc() ) # Разворачиваем приложение на весь экран (mobile only) tg.expand()

А теперь время верстки!

# Объявляем наше приложение appRoutes "app":   # Основная страница   "/{p:string}":     tDiv(       class = fmt"flex flex-col justify-content items-center w-screen min-h-screen h-screen p-12 bg-[{tg.themeParams.bgColor}] text-[{tg.themeParams.textColor}]",     ):       tDiv(class = "w-full h-full flex flex-col items-center justify-center"):         tP(class = "text-xl"):           "Hello from Nim, "           tSpan(class = fmt"text-[{tg.themeParams.buttonColor}]"):             {tg.initDataUnsafe.user.first_name}           "!"         tP(class = "text-9xl"):           {counter}       tDiv(class = "fixed bottom-4 right-4 opacity-70"):         "Your telegram version is v"         {tg.version}

И что же дальше, как мы увидим результат в Telegram?

Публикация

Под публикацией имеется ввиду загрузка на хостинг нашего приложения. В этой статье мы будем использовать GitHub pages.

Сперва удостоверимся, что структура двух наших приложений выглядит следующим образом:

Если все так, можем переходить к следующему шагу. Создаем папку ./.github/workflows/, а в ней файл gh-pages.yml:

name: Github Pages 🌐  on:   push  permissions:   contents: write  jobs:   docs:     runs-on: ubuntu-latest     env:       nim_version: '2.0.6'     steps:       - uses: actions/checkout@v4        - name: Install Nim 👑         run: |           curl https://nim-lang.org/download/nim-${{ env.nim_version }}-linux_x64.tar.xz --output nim.tar.xz           tar -xf nim.tar.xz           sudo mkdir -p /home/.nimble           sudo mv -if nim-${{ env.nim_version }}/* /home/.nimble/           export PATH=/home/.nimble/bin:$PATH           nim -v           nimble refresh           nimble install happyx@#head telebot@#head -y        - name: Build website 🌐         timeout-minutes: 2         run: |           export PATH=/home/.nimble/bin:$PATH           nim js -d:release --opt:size --hints:off --warnings:off ./client/src/main           mkdir -p ./docs/           mkdir -p ./docs/public/           cp ./client/src/index.html ./docs/           cp ./client/src/main.js ./docs/        - name: Deploy documents 💨         uses: peaceiris/actions-gh-pages@v4         with:           github_token: ${{ secrets.GITHUB_TOKEN }}           publish_dir: ./docs         if: github.ref == 'refs/heads/master' 

Теперь можно загружать все это дело в GitHub. После короткого ожидания выполнения GitHub Actions мы можем зайти в Telegram к нашему боту и открыть приложение.

Полезные ссылки

• telebot.nim

• сайт HappyX

• Документация по Telegram Mini Apps