Популярное
Свежее
Моя лента
Сообщения
Рейтинг
Курсы
Темы
Сервисы
Маркетинг
AI
Личный опыт
Деньги
Инвестиции
Разработка
Путешествия
Образование
Маркетплейсы
Показать все
vc.ru
О проекте
Правила
Реклама
Приложения
StarKey
Телеграм

Ваше первое Mini App за 15 минут, используя только блокнот и GitHub

Как создать MiniApp Telegram за пару минут?
Как создать MiniApp Telegram за пару минут?

Кажется, что создание Telegram Mini App — это удел больших команд с опытными программистами. Нужно знать React, настраивать сервер, разбираться в сложных API... Все это правда, но только для сложных проектов. А что, если вы хотите просто проверить идею? Сделать интерактивную визитку или простую анкету и показать ее друзьям?

Мы покажем вам способ, как создать свое первое, настоящее Mini App буквально за 15 минут. Вам не понадобится ничего, кроме вашего браузера, аккаунта на GitHub и обычного текстового редактора вроде "Блокнота". Никаких фреймворков, компиляторов и сложных настроек.

Это самый быстрый путь от "ничего" до работающего приложения в вашем Telegram. Просто повторяйте за нами.

Шаг 1: Создаем "тело" нашего приложения (HTML-файл)

Mini App — это, по сути, веб-страница. Давайте ее создадим.

  1. Откройте на вашем компьютере любой текстовый редактор (Блокнот, Notepad++, VS Code — неважно).
  2. Создайте новый файл.
  3. Скопируйте и вставьте в него следующий код. Это готовый шаблон нашего будущего приложения.
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Мое Первое Mini App</title> <!-- Этот скрипт - магия, которая связывает наш сайт с Telegram --> <script src="https://telegram.org/js/telegram-web-app.js"></script> <style> /* Сделаем все красивым и похожим на Telegram */ body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; margin: 0; padding: 20px; color: var(--tg-theme-text-color, #000000); background: var(--tg-theme-bg-color, #ffffff); } .container { text-align: center; } button { background-color: var(--tg-theme-button-color, #007aff); color: var(--tg-theme-button-text-color, #ffffff); border: none; padding: 10px 20px; border-radius: 8px; font-size: 16px; cursor: pointer; } </style> </head> <body> <div class="container"> <h1 id="greeting">Привет!</h1> <p>Это твое первое Mini App. Оно уже работает!</p> <button id="myButton">Нажми меня</button> </div> <script> const tg = window.Telegram.WebApp; tg.ready(); // Сообщаем, что приложение готово // Получаем данные о пользователе и меняем приветствие const user = tg.initDataUnsafe.user; if (user && user.first_name) { document.getElementById('greeting').innerText = `Привет, ${user.first_name}!`; } // Настраиваем клик по кнопке const myButton = document.getElementById('myButton'); myButton.addEventListener('click', () => { // Отправляем простое уведомление tg.showAlert('Ты нажал на кнопку!'); }); </script> </body> </html>
  • Сохраните этот файл под именем index.html. Все, "тело" нашего приложения готово.
Ваше первое мини апп за 15 минут
Ваше первое мини апп за 15 минут

Шаг 2: Публикуем приложение в интернете (бесплатно)

Чтобы Telegram мог открыть наше приложение, оно должно находиться в интернете. Мы используем для этого бесплатный хостинг от GitHub.

  1. Зайдите на сайт GitHub и войдите в свой аккаунт (или создайте его, это быстро).
  2. Создайте новый репозиторий. Назовите его как угодно, например, my-first-mini-app.
  3. В созданном репозитории нажмите на кнопку "Add file" -> "Upload files".
  4. Перетащите наш файл index.html в окно браузера и подтвердите загрузку.
  5. Теперь самое главное. Зайдите в "Settings" (Настройки) вашего репозитория, в левом меню выберите "Pages".
  6. В разделе "Branch" выберите ветку main и нажмите "Save".
  7. Через одну-две минуты GitHub опубликует ваш сайт и выдаст вам ссылку вида https://ВАШ_НИКНЕЙМ.github.io/my-first-mini-app/. Скопируйте эту ссылку!

Шаг 3: Связываем приложение с Telegram-ботом

Последний шаг. Нам нужен любой Telegram-бот, чтобы привязать к нему наше приложение. Если у вас его нет, создайте его за 2 минуты через @BotFather.

  1. Откройте чат с @BotFather.
  2. Отправьте ему команду /mybots, выберите вашего бота.
  3. Нажмите "Bot Settings" -> "Menu Button".
  4. Нажмите "Configure Menu Button" (или "Enable").
  5. Теперь отправьте ему ссылку на ваше приложение, которую вы скопировали на прошлом шаге.
  6. Далее отправьте ему короткое название для кнопки, например, Запустить App.

Готово! Зайдите в вашего бота. Внизу, рядом с полем для ввода текста, появится кнопка "Запустить App". Нажмите на нее — и вы увидите ваше первое, собственноручно созданное Mini App!

Ваше первое мини-приложение за короткое время!
Ваше первое мини-приложение за короткое время!

Что дальше? От игрушки к серьезному проекту

Поздравляем! Вы только что прошли путь, который многим кажется невероятно сложным. Вы создали и запустили свое первое мини-приложение.

Конечно, этот пример очень простой. Он не использует фреймворки, не имеет сложной логики и не хранит данные. Это лишь первый шаг, который доказывает, что технология доступна каждому.

Когда вы захотите пойти дальше — добавить каталог товаров, принимать оплату или интегрировать искусственный интеллект, — вам понадобятся более глубокие знания.

Именно для этого мы ведем наш блог в TG Dev, где разбираем все аспекты профессиональной разработки: от выбора правильной архитектуры до нюансов UI/UX дизайна. Этот простой пример — ваш пропуск в этот удивительный мир, а наш блог — ваша карта для дальнейшего путешествия.

Начать дискуссию