Инструкция по созданию своего первого мини-приложения Телеграм
В прошлой статье я рассказывала о том, что такое мини-приложения в телеграм, как появились, делилась примерами. А сегодня хочу рассказать, как их создавать. Причем прямо на телефоне, без знаний кодинга. Погнали, будет интересно 🚀
ШАГ 1. СОЗДАНИЕ ТЕЛЕГРАМ БОТА
Любое мини-приложение функционирует на базе телеграм-бота. Поэтому сначала необходимо создать эту самую базу — вашего личного бота ⤵
- Заходим в Botfather
- Нажимаем кнопку «Старт»
- Выбираем команду /newbot
❕Если у вас уже есть один или несколько ботов в Botfather, то рекомендую все равно создать нового бота. Настройку мини-приложений мы будем производить на специальном сайте конструкторе, к которому бота надо будет подключить. Если вы возьмете уже действующего бота и подключите к этому сервису, то все предыдущие настройки у вас могут слететь.
После запуска команды /newbot прямо в поле для сообщений пропишите название вашего бота. Оно может быть как на русском, так и на английском, а также содержать стандартные эмодзи, например "Креативный бот 🙃". На этом этапе предлагаю сильно не заморачиваться, данное название всегда можно будет заменить.
После названия нам необходимо придумать имя пользователя — юзернейм. Это адресная ссылка будущего бота, она должна быть уникальной. Здесь в отличие от названия лучше немного подумать, юзернейм бота мы изменить не сможем. Поэтому лучше прописать то, что не будет вас в ближайшем будущем бесить 🤭 Юзернейм обязательно должен быть на латинице и заканчиваться на слово «bot».
Всё, ваш бот уже готов. При желании вы можете добавить описание или поставить аватарку. Здесь мы подробно останавливаться не будем. Главное, что нам нужно после регистрации бота — это его уникальный ключ токен, который автоматически генерируется сразу после создания. Скопируйте его и сохраните. Он нам пригодится для подключения к конструктору.
ШАГ 2. ПОДКЛЮЧЕНИЕ БОТА К КОНСТРУКТОРУ
Есть разные сервисы для сборки мини-приложений. Каждый со своими достоинствами и ограничениями. Я расскажу про тот, которым пользуюсь сама 🤍
Это конструктор PuzzleBot.
Регистрируемся по ссылке ниже* ⬇
На сайте нажимаем на кнопку «Перейти в личный кабинет», далее «Войти через Телеграм».
*Для тех, кто сервис ещё не тестировал — будет приятный бонус в виде платного тарифа на 7 дней.
После нажатия на кнопку «Войти через Телеграм» — вас перекинет в бот сервиса, который уведомляет об успешной авторизации.
Не рекомендую сразу переходить по ссылке, так как может открыться внутренняя страничка (браузер телеграм). Скопируйте ссылку в удобный вам браузер, чтобы было удобно работать в конструкторе и возвращаться к этой инструкции ✌🏻
Если вы впервые перешли в кабинет конструктора, то вам начислится 7 дней платного тарифа в подарок. А так же откроется окошко с предложением добавить нового бота.
В это поле мы вставляем наш уникальный ключ — токен, который нам выдал Botfather после создания бота (шаг 1, последний этап).
Если вы уже знакомы с PuzzleBot, то можете потестировать создание мини-приложений в существующем боте. Или подключите новый/тестовый бот через кнопку «+Добавить бота».
После добавления ключа ваш бот автоматически отобразится в кабинете конструктора. Нажмите на него, чтобы посмотреть меню и возможности PuzzleBot.
Мы интегрировали бота в нужный нам сервис и теперь можем настраивать необходимые функции, в том числе мини аппы. Всю внутреннюю логику бота мы будем настраивать именно здесь.
ШАГ 3. ВКЛАДКА "КОНСТРУКТОР"
Для создания мини-приложений нам понадобится вкладка «Конструктор».
Далее в верхней панели нажимаете плюсик. И в предложенной менюшке — выбираете зелёненький раздел «Мини-приложение».
Даем название команде с мини-приложением. Его видим только мы, в конструкторе. Так же можем добавить любой блок, чтобы потестировать наш функционал. Я в примере выбрала блок с текстом.
После этого необходимо сохранить изменения. Закрываем команду с мини-приложением через крестик. И в левом верхнем углу нажимаем на рыжую стрелочку. Так наши настойки внутри конструктора будут выгружаться в самого бота. А ещё мы сможем получить ссылку на мини-приложение.
После того как изменения сохранены, в поле конструктора появится зеленая команда, которую мы только что создали. Снова её открываем и видим, что теперь у нас в арсенале есть специальные ссылки для работы с мини-приложением. Для следующего шага нам понадобится техническая ссылка, копируем её.
ШАГ 4. ТЕХНИЧЕСКАЯ ССЫЛКА НА MINI APP
Чтобы наше приложение заработало, нам необходимо допилить одну настроечку в Botfather
Да, туда сюда гоняют, но что делать. Это только один разок, последующие мини-приложения можно будет без этого спец подключения делать.
В Botfather через кнопку «Меню» вызываем команду /mybots, выбираем нашего бота и жмем кнопку Bot Settings.
Далее кнопки Configure Mini App → Enable Mini App и вставляем ту техническую ссылку, которую копировали в шаге 3, этап 5.
Теперь все мини-приложения, которые мы будем создавать в конструкторе этого бота — будут работать по прямой ссылке.
А данный мини апп, чью тех ссылку мы подключили — будет отображаться по кнопке «Открыть приложение».
▶ Если главное приложение захочется заменить, то проделываем все те же действия и прикрепляем другую техническую ссылку. После кнопки Configure Mini App, жмем на Edit Mini App URL
▶ Если мини апп захочется отключить вовсе, тогда после кнопки Configure Mini App, жмем на Disable Mini App и подтверждаем, что хотим отключить мини-приложение.
ШАГ 5. НАСТРОЙКА МИНИ-ПРИЛОЖЕНИЯ
А дальше мы снова возвращаемся в кабинет PuzzleBot, открываем нужное нам мини-приложение и начинаем творить.
Здесь большое количество блоков: фотографии, видео, разные форматы текстов и кнопок. Тестируйте и используйте разные комбинации.
Теперь всё в ваших руках 🔥
Пользуясь случаем приглашаю на свой телеграм канал "Создать нельзя копировать", где я знакомлю свою аудиторию с креативными механиками и новыми фишками в телеграм. В сентября запущу обновленные видео-уроки по созданию mini apps, так что кому интересно — присоединяйтесь.
👆🏻🥰