📚Lecture Notes
Давайте посмотрим, как установить SDK, который позволяет нам использовать API TWA (Telegram Web App). Я открываю файл App.tsx в проекте, который мы сделали в предыдущей главе, и ввожу команду:
yarn add @twa-dev/sdk
Отлично, мы его установили. Теперь мы собираемся импортировать веб-приложение и начать взаимодействовать с ним. Во-первых, мы покажем платформу пользователю в нашем интерфейсе - это полезно, если вы хотите использовать другую функциональность на основе платформы. Во-вторых, мы добавим кнопку, чтобы запустить какое-то действие.
Давайте начнем с платформы. Мы сделаем текст жирным и добавим платформу WebApp. Мы покажем это на экране.
Он не требует аутентификации, поэтому мы можем просто показать его над частью, которая будет отображаться только для авторизованных пользователей. Так что мы собираемся изменить здесь для showAlert. Вот как будет выглядеть вся секция возврата:
Использование действий GitHub
Как вы помните, у нас настроены действия GitHub, поэтому наше приложение будет построено и развернуто на всех страницах GitHub. И мы видим, что это уже в процессе:
Действия GitHub эффективны. Вы можете сэкономить так много времени, просто делегировав туда вещи. У нас также будет еще одно действие, которое публикует нашу страницу GitHub из отдельной ветки. Подождите, пока это тоже закончится.
Но, как вы можете видеть, мы не можем обнаружить платформу здесь, потому что объект веб-приложения просто недоступен, так как мы не находимся внутри Telegram. Так что это просто черновик публикации, который мы сделали, то, что вам нужно очистить с помощью нескольких проверок, чтобы понять, что ваш пользователь находится в Telegram. Теперь мы можем перейти в мобильный Telegram и посмотреть, как он работает в мессенджере.
Моя платформа - iOS. Как я уже сказал, это просто черновик публикации, так что мы можем сделать так, чтобы он выглядел намного лучше позже. Если я нажимаю "показать оповещение", оно показывает мне всплывающее окно:
TWA SDK дает вам много энергии. Все, что вам нужно сделать, это прочитать документацию, которая учит многим вещам, которые вы можете сделать, например, указать платформу, цветовые схемы, некоторые параметры темы, сделать ее расширенной, настроить высоту области просмотра.
Еще одна интересная вещь - это управление кнопками,Главная кнопка и кнопка "назад". Вы можете использовать эти компоненты и прикреплять к ним действия. У вас так много контроля, и ваше веб-приложение на самом деле становится очень доступным приложением, которое взаимодействует с Telegram. Вы могли бы вложить в него такую большую функциональность и отличный пользовательский опыт.
Если я закрою веб-приложение в Telegram, я увижу, что это все еще чат. Поэтому, если вы хотите создать лучший пользовательский опыт с вашим приложением в целом, вам следует использовать гибридный подход: сохранить некоторые функции в веб-приложении, а некоторые в командах чата. Вы можете поддерживать разговор со своим пользователем и использовать свое веб-приложение только для определенных вещей, которые люди привыкли делать в графическом интерфейсе.
На следующем уроке мы сделаем ту же самую функциональность с приращением на пять, счетчиком, а также запросом на вывод средств. Мы собираемся сделать то же самое, но с комментариями в чате. Вам зависит, что вы хотите использовать для своего продукта и где вы собираетесь его создавать. В любом случае, мы узнаем, как все это работает. Кроме того, мы узнаем, как передать информацию из веб-приложения в чат-бота Telegram и создать чат-бота, который управляет этой разговорной частью.
Веб-приложение отвечает за функциональность. Он авторизует кошелек, сохраняет сеанс. Но чат-бот, как отдельное приложение, будет поддерживать разговор с пользователем. Должно быть соединение, чтобы веб-приложение могло передавать информацию чат-боту. В результате ваш разговор идет в ногу со всем, что происходит в веб-части.
Увидимся на следующем уроке. И еще раз хочу напомнить, как я горжусь тем, что вы прошли этот курс. До скорой встречи.