Vue

Вы когда-нибудь задумывались, как реализованы мини-приложения в Telegram? Их сейчас стало много. Среди проектов — различные кликеры, игры, бизнес-приложения и другое. Сегодня Telegram создает свою экосистему, подобную App Store или Google Play, но со своими мини-приложениями. И это уже довольно востребованный «сектор рынка». Меня зовут Владилен Минин, я автор одноименного YouTube-канала. В этой инструкции попробую показать, как разработать полноценное Telegram-приложение. Притом не просто UI, а проект с логикой, но с простой задумкой — кликер. Плюс я уже выкладывал на своем канале видео, как сделать простой интерфейс для подобного приложения. Он-то и послужит шаблоном. Приступим! Описание проекта Перед тем, как приступить непосредственно к разработке, важно разобраться в некоторых вычислениях, которые лежат в основе логики приложения. Наиболее подробно я рассказал об этом в своем видео — посмотрите перед началом. В результате у вас будет готовый шаблон, который получится адаптировать под написание собственной игры, приложения или сервиса. Подготовка шаблона и программирование игры Для начала подготовим шаблон интерфейса тапалки: загрузим стили, создадим главную страницу и настроим отображение текущего счета. Полный код проекта из предыдущего видео расположен в репозитории на GitHub. Клонирование репозитория 1. Клонируйте из репозитория исходный код со стилями в свою папку, затем выполните две команды в консоли: 2. Следующим шагом необходимо создать главную страницу и отображение текущего счета. Для этого понадобится вычислить текущий уровень игры и набранный счет, а также найти формулу по подсчету уровня. Описание логики счетчика 1. Зайдем в файл stores/score.js — нам необходимо обозначить, какой есть базовый счет уровня. Пусть это будет 25. То есть для перехода на следующий уровень игроку нужно будет набрать столько баллов. 2. Далее необходимо создать массив, который будет показывать, сколько очков нужно для следующего уровня. Спойлер: количество баллов для перехода на второй, третий и другие уровни должно быть уже выше 25. Пусть будет всего 15 уровней. Итоговый массив уровней выглядит следующим образом: 3. Следующим этапом нужно добавить еще несколько функций, которые позволят нам выполнять «правильные вычисления». Первой мы создадим константу levelScores, которую будем вычислять в зависимости от levels.map() и так далее. Но почему именно такая зависимость? Дело в том, что мы создали массив levels с конкретным счетом для каждого уровня. Но всего, чтобы перейти, например, с первого на второй уровень, нам нужна сумма 25+50. Для третьего уровня — 25+50+100. Соответственно, в новой функции нам нужно посчитать, сколько всего баллов накликал игрок. Отлично! Теперь для достижения последнего уровня нужно накликать целых 819 175 очков. У вас тоже заболели пальцы через экран? 5. Теперь мы можем объединить все функции выше в одну логику и описать поведение счета (score) пользователя. При этом у нас уже есть state, где по умолчанию score 0, если игрок впервые зашел в кликер. Поэтому просто опишем getter, через который будем получать текущий уровень, и currentScore — общее число баллов. Далее добавим поле actions, внутри которого будет изменяться сам счетчик. На этом логика подсчета очков закончена. Далее можем отобразить данные в интерфейсе кликера. Интерфейс счетчика 1. Переходим в шаблон фронтенда HomeView.vue, который был разработан в предыдущем видеоролике, и прописываем вместо статичного числа между тегами h2 динамическое значение счетчика store.store. 2. Далее внутри того же HomeView.vue опишем скрипт, внутри которого будем вызывать по клику инкрементацию счетчика и изменять картинку при достижении нового уровня. Готово — счетчик и картинка меняются как надо: 3. Последним этапом добавляем визуальное отображение прогресса в ScoreProgress.vue: Шкала прогресса наполняется: Деплой фронтенда Чтобы связать наш фронтенд с Telegram, его нужно захостить. Для этого можно использовать Firebase — это довольно удобный сервис, который еще и бесплатный. Переходим на платформу, создаем новый проект и открываем Hosting. Далее по инструкции устанавливаем пакеты, а после — локально: На выходе получаем URL приложения. Создание бота на Node.js Бот нам понадобится для реализации реферальной программы — все как в небезызвестном Hamster Kombat. 1. Получаем API-токен в боте @BotFather через команду /newbot. 2. Далее устанавливаем telegraf и описываем базовую настройку бота в файле app.js: Деплой бота на сервер Сейчас бот запущен на компьютере. Однако если вы хотите, чтобы кликер был доступен круглосуточно, придется поддерживать его бесперебойную работу и непрерывное соединение с интернетом. Оптимальный вариант — перенести бота в облако. Будем деплоить бота в Docker — для этого добавим два файла: Dockerfile Makefile Далее зальем весь проект в GitHub-репозиторий, чтобы можно было легко перенести проект на сервер — без использования FTP и scp. Как это сделать, уже рассказывали в Академии Selectel. Перейдем к следующему этапу в процессе деплоя. Создание сервера 1. Переходим в раздел Облачная платформа внутри панели управления. 2. Создаем сервер. Для работы нашего приложения не нужно много мощностей, поэтому достаточно одного ядра vCPU с долей 20% и 512 МБ оперативной памяти. И обязательно добавляем публичный IP-адрес, чтобы к серверу можно подключиться через интернет. 3. Авторизуемся на сервере через консоль посредством команды ssh root@ . Публичный адрес виртуальной машины можно посмотреть в разделе Порты. Настройка системы 1. После подключения к серверу обновляем систему и устанавливаем Git: 2. Устанавливаем Node.js — у нас есть подробная инструкция по этому процессу. 3. Устанавливаем на сервере Docker — для этого тоже можно воспользоваться инструкцией. 5. Последним этапом запускаем проект: Готово — бот c Telegram Mini Apps запущен. Разработка функционала Шаг 1. Подключение базы данных к клиенту В качестве базы данных будем для хранения пользовательских баллов будем использовать Supabase. Это open source-аналог решения от Google. Инициализируем проект и создаем две таблицы: User (список пользователей) и Task (список задач). Создание таблицы User в Supabase. Создание таблицы Task в Supabase. На стороне инициализируем дополнительный сервис services/supabase.js: Шаг 2. Подключение Telegram-библиотеки Для того, чтобы соединить веб-приложение с функционалом Telegram Mini Apps, подключим библиотеку: Чтобы ей было удобней пользоваться, делаем отдельный хук: Шаг 3. Создание API-запросов к базе Опишем все запросы, которые будет отправлять наше веб-приложение для взаимодействия с базой данных. Шаг 4. Создание store для приложения Создаем еще одно хранилище данных для пользователя и задач, чтобы было удобнее с ними работать и можно было вынести логику в Pinia из самих компонентов. Шаг 5. Запуск приложения Добавим код, который будет инициализировать приложение и разворачивать его на весь экран, считывать параметры реферала (если новый пользователь его имеет) и загружать данные о текущем пользователе и его счете. Шаг 6. Сохранение счета в базе Реализуем функционал, который соединит локальное изменение счета с данными в базе данных. Для защиты от спама добавим debounce, чтоб не заспамить базу запросами. Установим задержку в 500 мс. Если на каждый клик отправлять запрос, это не будет эффективным решением. Шаг 7. Создание страницы друзей Добавим страницу друзей, на которой будем загружать список пользователей, присоединенных по реферальной ссылке. Также на этой странице можно будет скопировать свою реферальную ссылку. Страница друзей, результат. Шаг 8. Создание страницы задач Добавим страницу задач, на которой будем подгружать список выполненных пользователем заданий и количество полученных очков, а также еще невыполненные задачи. Страница задач, результат. Заключение Готово! У нас есть запущенный фронтенд, Telegram-бот и сама игра. Теперь вы можете использовать шаблон этого приложения для реализации собственных проектов.

Vue

Зарегистрируйтесь в панели управления