Автоматизация создания Telegram Mini App: просто и без затрат

vicos

Client
Регистрация
06.02.2017
Сообщения
101
Благодарностей
316
Баллы
63
127868


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

127863
127864
127865
127923


Этот факт подтверждает то, что направление будет активно развиваться, и мы не можем оставаться в стороне от этих процессов.
Давайте рассмотрим, как с помощью таких инструментов, как ZennoPoster, GitHub и Vercel, можно легко создавать мини-приложения. Вышеперечисленные платформы позволяют даже начинающим разработчикам реализовать мощные и функциональные решения, избегая сложностей и экономя время. Вот такие ТМА(Телеграм мини-приложения) мы и будем создавать с помощью шаблона Zennoposter.

127918
127919
127920
127921


Этап 1: Подготовка окружения
Перед началом разработки потребуется выполнить несколько подготовительных шагов:

Создать аккаунты на GitHub и Vercel.
  • GitHub - используется для хранения кода приложения.
  • Vercel - для развертывания приложения и получения бесплатного доменного имени.
  • Telegram - создаем бот через @BotFather.

  1. Настройки шаблона Zennoposter
127926
127927
127928


В режиме Vercel выбираете стандартный шаблон из выпадающего списка, либо в пустую строку Another template вводите ссылку на другой шаблон выбранный вами на платформе Vercel. Обязательно указываете ваш никнейм, логин и пароль на платформе GitHub. Вводим токен вашего телеграм бота полученного через @BotFather.
Если выбираете шаблон из выпадающего списка, в режиме Demo можно посмотреть подходит он вам или нет. И только после этого перейти в режим Deploy для установки.

В режиме GitHub вводите ссылку на выбранный репозиторий. Указываете имя под которым он загрузится на ваш аккаунт GitHub(имя должно быть написано только маленькими буквами).

Алгоритм работы шаблона Zennoposter.

127932


  • Авторизуется в ваших аккаунтах на GitHub и Vercel.
  • Создает репозиторий и загружает проект в вашем аккаунте GitHub.
  • Разворачивает приложение на Vercel.
  • Загружает мини приложение в ваш чат бот в Телеграм.
Загрузка в Телеграм происходит с помощью GET запроса:

https://api.telegram.org/bot{-Variable.token-}/setChatMenuButton?menu_button={"type":"web_app","text":"Open Mini App","web_app":{"url":"https://{-Variable.URL_TMA-}"}}. Данный образец запроса также будет полезен тем, кто будет работать с API Telegram.

127933




Этап 2: Использование готовых шаблонов

Самый простой способ начать — воспользоваться готовыми шаблонами, размещёнными на GitHub. Эти проекты подходят для разных задач: от простых приложений для личного использования до сложных бизнес-решений.

127934


Как использовать готовый шаблон:
  1. Найдите подходящий репозиторий на GitHub.
  2. Скопируйте ссылку на проект.
  3. В настройках шаблона Zennoposter вставьте ссылку в соответствующее поле.
Далее всё происходит автоматически:
  • Код загружается в ваш репозиторий на GitHub.
  • Приложение разворачивается на Vercel.
  • Платформа автоматически создаёт домен и размещает приложение на своём хостинге.
После завершения развертывания шаблон ZennoPoster извлечёт ссылку на готовое приложение, и через GET-запрос интегрирует его в вашего чат-бота в Telegram.


Этап 3: Расширение возможностей с Vercel

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

127935


Преимущества использования шаблонов Vercel:
  • Возможность протестировать приложение в демо-режиме перед развертыванием.
  • Автоматическое создание репозитория на GitHub.
  • Подбор и настройка доменного имени без вашего участия.
Если вам нужен уникальный функционал, можно выбрать любой другой шаблон на Vercel. Однако внимательно изучайте описание, так как некоторые проекты могут требовать API-ключи от сторонних сервисов. В таком случае, шаблон ZennoPoster остановит работу, запросит ввод ключей и автоматически внесёт их в проект, продолжив развертывание.

Этап 4: Выбор фреймворка

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

Если вы сталкиваетесь с проблемами, вы всегда можете обратиться за помощью к таким инструментам, как ChatGPT. Он поможет адаптировать или переписать код, упростив процесс разработки.

Этап 5: Настройка и редактирование приложения

Редактирование приложения можно выполнять с помощью VS Code. Это позволяет гибко адаптировать проект под ваши задачи.

Пошаговая инструкция:
  1. Клонируйте репозиторий с вашим проектом из GitHub.
  2. Откройте его в Visual Studio Code.
  3. Измените необходимые элементы:
    • Цветовую гамму.
    • Интерфейс.
    • Функционал.
127936


Все изменения автоматически синхронизируются с вашим репозиторием на GitHub и обновляются на Vercel. Это значит, что любые обновления моментально появляются в вашем Telegram-боте, без необходимости повторного развертывания.

Заключение
Создание мини-приложений значительно расширяет функционал Telegram, открывая перед вами массу новых возможностей:
  • Интеграция с искусственным интеллектом.
  • Работа с базами данных.
  • Взаимодействие со сторонними API и сервисами.
Такие решения делают ваши проекты более мощными, функциональными и адаптированными под запросы пользователей.
Я надеюсь, что данный шаблон поможет вам воплотить ваши идеи в жизнь. Не бойтесь экспериментировать, изучать новые возможности и создавать уникальные приложения, которые принесут пользу вам и вашим пользователям.

Удачи в разработке и успехов в ваших проектах!

 

Вложения

Последнее редактирование модератором:

Bulava

Новичок
Регистрация
15.05.2018
Сообщения
8
Благодарностей
2
Баллы
3
Спасибо за полезную информацию!
 
Регистрация
25.12.2021
Сообщения
26
Благодарностей
16
Баллы
3
Однозначно лайк!:-) Это не только актуально, но и еще и открывает кучу возможностей для заработка
 

vicos

Client
Регистрация
06.02.2017
Сообщения
101
Благодарностей
316
Баллы
63

Кто просматривает тему: (Всего: 1, Пользователи: 0, Гости: 1)