Telegram Web Apps

Інше 2 хвилин 45 секунд 18 квіт. 2022
Telegram Web Apps

Оновлення телеграм бота Bot API 6.0 принесло нам нововведення під назвою  Web Apps
Боти Telegram можуть повністю замінити будь-який веб-сайт . Вони підтримують безперебійну авторизацію , інтегровані платежі через 15 постачальників платежів (з готовими Google Pay і Apple Pay ), доставку індивідуальних push-повідомлень користувачам та багато іншого .
З веб-програмами боти отримують абсолютно новий вимір. Розробники ботів можуть створювати нескінченно гнучкі інтерфейси за допомогою JavaScript , найпоширенішої мови програмування у світі.
Давайте спробуємо написати свою міні програму.
Створюємо звичайну html сторінку та підключаємо JS яки і буду зв'язувати нас з ботом.
Основний каркас такий 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Telegram app</title>
</head>
<body>
<div id="root"></div>
<script src="https://telegram.org/js/telegram-web-app.js"></script> 
</body>
</html>

При підключені js у нас буде новий об'єкт window.Telegram.WebApp; 

Далі напишемо простеньку програму на Vue Js яка буде виводити інформацію про користувача. 

<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/[email protected]"></script>

<script>
    const Telegram = window.Telegram.WebApp;
    const App = {
        created() {

            this.telegram = Telegram
            this.text = "Привіт"        
            if (Telegram.initDataUnsafe.user){
                this.user = Telegram.initDataUnsafe.user
            }

            setTimeout(()=>{
                this.loading = false
            },1000)

        },
        data() {
            return {                   
                telegram: null,
                user: null          
            }
        },
        template: `
          <div >
          <h2>Інформація про користувача </h2>
          <div v-if="user" class="user">
            <p v-for="(item,index) in user" >
              <b>{{ index }}:</b> {{ item }}
            </p>
          </div>
        </div>
`
    }
    window.addEventListener('load', () => {
        const app = Vue.createApp(App)
        app.mount('#root')
    })

</script>

Щоб відповідати темі телеграму додамо css який буде замінювати кольори ( тут більше )

    body {
       background: var(--tg-theme-bg-color);

    }
    body * {
        color: var(--tg-theme-text-color);
    }


Основна частина програми готова. Тепер перейдемо до телеграму. Щоб надіслати кнопку з відкриттям є 3 способи (посилання )
ми використаємо Inline KeyboardButton Та передамо кнопку 

{
  "inline_keyboard": [
    [
      {
        "text": "Webapp",
        "web_app": {
          "url": "https://web-app.com/"
        }
      }
    ]
  ],
  "resize_keyboard": true
}

Приклад

 web-app web-app-2

Перевірити можете написавши боту @telsender_bot команду /infoUser

Telegram чат