Создаём красивую ссылку на мини-приложение в Телеграм [подробная пошаговая инструкция по созданию специальной ссылки на telegram mini app]

💡 Если у вас есть какой-то вопрос по экосистеме Telegram, либо хотите предложить автору свою тему для создания подробной пошаговой инструкции, то можете написать в личку или подписаться на TG канал, чтобы знать полезные фишки Телеграма, а также иметь быстрый доступ к инструкциям и туториалз в удобном структурированном виде

Вам также могут быть полезны публикации:

1. Подробная пошаговая инструкция по созданию [ регистрации ] телеграм бота [ чат-бота, мини-приложения ] в BotFather

2. Подробная пошаговая инструкция по регистрации и созданию собственного мини-приложения в Телеграм [ Telegram mini apps ] в конструкторе Unitee Space

📖 Cодержание публикации [ навигация ]

1. Создание короткой ссылки на мини-приложение в BotFather

2. Исходная ссылка на мини-приложение из проекта на конструкторе Unitee Space

3. Как использовать короткую ссылку на мини-приложение?

Изображение 1:

1. Заходите в чат-бот BotFather , в котором зарегистрирован ваш бот, к которому "привязано" ваше мини-приложение (в данном случае мы будем рассматривать мини-приложение, которое создано на конструкторе мини-приложений Unitee Space)

2. Вводим команду - /newapp (🔴1 - на изображении) или находим её по нажатию кнопки "Меню" (🔴2 - на изображении). Рекомендую первый вариант, ибо проще, потому что искать в меню - это отдельные танцы с бубном.

Можете скопировать эту команду в один клик ⤵

3. Отправляем команду /newapp в чат ⤵

Изображение 2:

1. После отправки команды BotFather выдает список всех ваших зарегистрированных ботов и спрашивает:

"Alright, a new web app. Which bot will be offering the web app?" (перевод: Хорошо, новое веб-приложение. Какой бот будет предлагать это веб-приложение?)

2. Выбирайте того бота, с которым связано мини-приложение. В нашем случае, это @test9897678_bot и нажимайте на эту кнопку (🔴1 - на изображении)

Изображение 3:

1. После отправки команды BotFather выдает список всех ваших зарегистрированных ботов и спрашивает:
"Creating a new web app for @test9897678_bot. Please enter a title for the web app." (перевод: Создание нового веб-приложения для @test9897678_bot. Пожалуйста, введите название веб-приложения.)

2. Напишите как будет называться ваше приложение на созданной ссылке. Для примера ⤵

🔴1 - на изображении примере - Telegram Mini Apps [DEMO]

Это соответствует названию веб-приложения (это синоним миги-приложения в Телеграм), в нашем случае, это будет Тестовое приложение

Изображение 4:

1. После отправки команды BotFather выдает список всех ваших зарегистрированных ботов и спрашивает: "Please enter a short description of the web app." (перевод: Введите краткое описание веб-приложения.)
2. Напишите описание вашего мини-приложения, которое будет отображаться на созданной ссылке. Для примера ⤵

🔴2 - на изображении примере - Демонстрация функционала мини-приложений в Telegram на no code платформе Unitee.space
Это соответствует описанию веб-приложения, в нашем случае, это будет ✅ Тестовое описание мини-приложения (кстати, можно использовать не только текст, но и эмодзи) - на изображении 4 это 🔴1

Изображение 5:

Далее BotFather предлагает "Please upload a photo, 640x360 pixels." (перевод: Пожалуйста, загрузите фотографию размером 640x360 пикселей.)

Необходимо изображение именно такого размера. По опыту, желательные форматы файлов - JPG, PNG, хотя BotFather не указывает ограничений.

Изображение 6:

Для загрузки изображения из файлового хранилища на вашем ПК или смартфоне, сначала наведите на знак "скрепки" (🔴1 - на изображении), а после в появившемся окне - на "Фото или видео" (🔴2 - на изображении).

Так же можно просто кликнуть знак "скрепки" (🔴1 - на изображении) и осуществляем выбор

Вам необходимо выбрать и отправить в BotFather изображение, которое будет отображено следующим образом ⤵

Для текущего примера мы разместим другое изображение:

Изображение 7:

Графу "Подпись" оставьте пустой (🔴1 - на изображении) и нажмите "Отправить" (🔴2 - на изображении).

Изображение 8

Бот предлагает Please send a GIF. Перевод: Пожалуйста, пришлите GIF.

В нашем случае, отправлять GIF не имеет смысла, так как отобразится всё равно только статичное изображение, которое мы отправили в бот ранее.

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

На отправленную команду /empty BotFather отвечает:

No problem, you can always add a GIF later using the /editapp command. Now please send me the Web App URL that will be opened when users follow a web app direct link.

Перевод: Нет проблем, вы всегда можете добавить GIF позже с помощью команды /editapp. Теперь пришлите мне URL-адрес веб-приложения, который будет открываться, когда пользователи перейдут по прямой ссылке на веб-приложение.

Команда для копирования:

↪ Вернуться в 📖 Cодержание публикации [ навигация ]

Для того, чтобы получить URL-адрес веб-приложения вам необходимо перейти в ваш проект на конструкторе мини-приложений Unitee Space и скопировать ссылку ⤵

Изображение 9:

В интерфейсе проекта выбираете вкладку "Боты" (🔴1 - на изображении), а после нажимаете на значок редактирования (🔴2 - на изображении).

Изображение 10:

Выбираете ссылку, которая так и называется "Ваш WebApp URL" и кликайте на значок копирования (🔴1 - на изображении).

Именно эту ссылку необходимо будет отправить в чат BotFather.

Изображение 11:

После того как вы отправите ссылку - получите ответ от бота:

Good! Now please choose a short name for your web app: 3-30 characters, a-zA-Z0-9_. This short name will be used in URLs like t.me/test9897678_bot/myapp and serve as a unique identifier for your web app.

Перевод: Отлично! Теперь выберите короткое имя для вашего веб-приложения: 3-30 символов, a-zA-Z0-9_. Это короткое имя будет использоваться в URL-адресах типа t.me/test9897678_bot/myapp и служить уникальным идентификатором для вашего веб-приложения.

Другими словами, BotFather предлагает написать и отправить ему короткое имя этой ссылки, которое будет использоваться, также BotFather указывает на определенные ограничения имени короткой ссылки:

1. короткое имя не должно быть меньше 3 символов и больше 30 символов.

2. можно использовать заглавные и прописные буквы латиницы и цифры от 0 до 9

Короткое имя - это t.me/test9897678_bot/myapp (та часть ссылки, которая выделена жирным шрифтом - myapp).

В нашем случае это будет TeSt989

Вместо неё подставьте то, что вам необходимо и на итоговом варианте это будет выглядеть ⤵

Изображение 12:

Отправив имя короткой ссылки - TeSt989, мы получили следующий ответ от бота:

You can now use TeSt989 as the short_name parameter value in Bot API. Your web app link is t.me/test9897678_bot/TeSt989. Open it to start developing your web app!

Перевод: Теперь вы можете использовать TeSt989 в качестве значения параметра short_name в Bot API. Ссылка на ваше веб-приложение - t.me/test9897678_bot/TeSt989. Откройте ее, чтобы начать разработку веб-приложения!

Для того, чтобы новые изменения применились сайт должен перезапуститься. Перезапустить сайт сейчас? Обычно это занимает около ~30 сек.

Нажимайте кнопку "Подтвердить"

Создание и подключение к мини-приложению короткой ссылки окончено.

🔴 ВНИМАНИЕ!!!

Во избежание возникновения ошибок, лучше подождать более длительное время. Например минут 5.

↪ Вернуться в 📖 Cодержание публикации [ навигация ]

Это стандартное системное уведомление Телеграма, на которое мы не можем повлиять.

Если убрать белую галочку на синем фоне, то мини-приложение не сможет отправлять сообщения в чат пользователю (например, делать рассылки), при этом пользователь сможет пользоваться мини-приложением (🔴2 - на изображении).

Для того, чтобы начался запуск приложения нажмите OK (🔴3 - на изображении)

Базовая стартовая страница мини-приложения запущена, короткая ссылка работает корректно. Её создание и настройка завершены.

💡 Если у вас есть какой-то вопрос по экосистеме Telegram, либо хотите предложить автору свою тему для создания подробной пошаговой инструкции, то можете написать в личку или подписаться на TG канал, чтобы знать полезные фишки Телеграма, а также иметь быстрый доступ к инструкциям и туториалз в удобном структурированном виде

↪ Вернуться в 📖 Cодержание публикации [ навигация ]

📝 Публикации автора канала на VC.ru
🛠 ПОДРОБНЫЕ ПОШАГОВЫЕ ИНСТРУКЦИИ [ТУТОРИАЛЗ]

#туториал #инструкция #ссылки #миниаппс #телеграммбот #красиваяссылка #ссылканаприложение