Привет! Это снова команда dev.family. Мы продолжаем эксперимент по созданию приложения на React Native, которое будет работать как Telegram Web App.В предыдущих сериях мы рассказали про:
- особенности разработки веб-приложения на React Native с использованием react-native-web и моментах, в которых отходили от документации (весь код и детали процесса вы найдете в первой части);
- причины, по которым бизнес запускает веб-приложения в мессенджерах.
Теперь перейдем к установке самого веб-приложения в Telegram-бот.
Деплой веб-приложения
Мы закончили подготовительные работы и теперь развернем наш сайт.Для деплоя кликера используем Firebase. Есть два варианта:
- Первый (и самый простой) – простой деплой с командной строки;
- Второй (чуть посложнее) – деплой при коммите/мерже/PR через github actions.
Для этой статьи рассмотрим самый быстрый вариант.Создадим проект в Firebase Console. Переходим по ссылке и нажимаем на кнопку «Create Project».
Указываем название нашего проекта:
Далее несколько раз нажимаем «Continue», выбираем в списке аккаунтов Default Firebase Account (если у вас есть другой, можете выбрать его) и нажимаем «Create Project».
Новый проект удачно создан:
Теперь переходим в проект и нажимаем кнопку «Добавить веб-приложение»:
Далее вводим название проекта:
Галочку напротив «Also set up Firebase hosting» можно не ставить. Нажимаем кнопку «Register app», после чего появляется два варианта с инструкцией по установке firebase-tools в проект.
Мы будем использовать вариант не через npm, а через <script> тег, так как для мобильного приложения он нам не нужен. Вы можете выбрать любой удобный вариант.
На этом работа с Firebase Console закончена, возвращаемся к приложению.
.env
VITE_FIREBASE_API_KEY=
VITE_FIREBASE_AUTH_DOMAIN=
VITE_FIREBASE_PROJECT_ID=
VITE_FIREBASE_STORAGE_BUCKET=
VITE_FIREBASE_MESSAGING_SENDER_ID=
VITE_FIREBASE_APP_ID=
VITE_FIREBASE_MEASUREMENT_ID=Обратите внимание – все наши ключи начинаются со слова Vite. Мы делаем так, потому что используем Vite в качестве сборщика. И, когда получаем доступ к переменным окружения через import.meta.env, он может не распознать их без этого слова.
Дальше немного отредактируем наш index.html с учетом написанного выше.
index.html
<html>
<body>
...
<script type="module">
import { initializeApp } from "https://www.gstatic.com/firebasejs/10.13.0/firebase-app.js";
import { getAnalytics } from "https://www.gstatic.com/firebasejs/10.13.0/firebase-analytics.js";
const firebaseConfig = {
apiKey:import.meta.env.VITE_FIREBASE_API_KEY,
authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
appId: import.meta.env.VITE_FIREBASE_APP_ID,
measurementId: import.meta.env.VITE_FIREBASE_MEASUREMENT_ID,
};
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
</script>
<script src="./index.web.js" type="module"></script>
</body>
</html>Открываем терминал, переходим в корень проекта и прописываем команду
firebase loginПосле мы попадаем в окно браузера и проходим авторизацию через Firebase Console.
firebase initВыбираем выделенный пункт и нажимаем клавиши space, потом enter.
Далее решаем ряд вопросов для конфигурации. Добавляем следующее:
- Please select an option – тут мы выбираем Use an existing project. А из списка ниже – недавно созданный проект;
- What do you want to use as your public directory? – выбираем dist (тут будет лежать наша сборка);
- Configure as a single-page app (rewrite all urls to /index.html)? – y;
- Set up automatic builds and deploys with GitHub? (y/N) – N (на данном этапе нам это не нужно);
- File dist/index.html already exists. Overwrite? (y/N) – N.
Переходим в firebase.json и немного его модифицируем
.firebase.json
"hosting": {
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**",
//past here
"**/android/**",
"**/ios/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}Добавляем в игнор при деплое директории Android и iOS. Поскольку у нас веб-приложение, не нужно отправлять на хостинг все файлы. К тому же, они достаточно много весят, и без определенного типа подписки вы не сможете их загрузить.
Приближаемся к финишу. Осталось прописать еще одну команду:
firebase deploy
Теперь переходим по ссылке ниже. Вуаля, наше приложение уже хостится!
Осталось только развернуть приложение в Telegram.
Установка веб-приложения в Telegram-бота
Еще раз посмотрим, что у нас есть на данный момент:
- Рабочее приложение на iOS;
- Рабочее приложение на Android;
- Рабочее веб-приложение, которое уже хостится.
Остался последний рывок, и можно будет добавить приложение вмессенджер. Открываем бота в Telegram под названием BotFather и начинаем диалог. Выбираем команду /newbot
Даем нашему боту имя. Далее будет создан API Key для взаимодействия с нашим ботом по HTTP.
Далее пишем команду /mybots и выбираем только что созданного нами красавца. Переходим в bot settings.
В настройках бота выбираем пункт Configure Mini App.
Может появится сообщение, что mini app отключены для нашего Telegram-бота. Ничего страшного – просто нажимаем на кнопку Enable Mini App.
Теперь мы просто передаем URL, по которому хостится наше веб-приложение
Поработаем с кнопкой меню. Для это возвращаемся в настройки бота и выбираем Configure Menu Button. Здесь может появится уведомление, что сейчас кнопка в нерабочем состоянии и предложение включить ее. Соглашаемся и присваиваем кнопке имя.
Момент истины: проверим, как работает наш парниша в полевых условиях. Переходим в бота – @ReactNativeWebClickerBot (можете тоже его оценить, нам будет приятно ❤️). Открываем – все работает!
Все настройки темы подтянулись, как и имя пользователя. А если зайти в бота из мобильного приложения и покликать на монету, можно почувствовать, как хорошо работает тактильный отклик.
Заключение
В этом эксперименте мы детально разобрали, как можно:
- Сделать веб-приложение на основе мобильного приложения, написанного на React Native, с использованием react-native-web;
- Задеплоить его через Firebase;
- Использовать его в Telegram mini app;
- Взаимодействовать в нашей общей кодовой базе с Telegram client.
Описанные технологии можно подойдут не только Telegram, но и другим платформам. Так вы сможете создавать кросс-платформенные решения, работающие на одном коде.
Почему это хорошо:
- Ваше приложение будет работать в разных каналах и представлено в нескольких магазинах, что позволит охватить больше пользователей;
- Скорость разработки продукта значительно увеличится – в среднем, время до релиза сокращается на 20%, а значит time-to-market момент наступит быстрее;
- Большую часть кодовой базы можно использовать повторно, соответственно, любые апдейты и фикс багов также будет вносить проще.
Главное – помните про особенности каждой платформы и учитывайте их в разработке.
Мы специально оставили отдельные части кода недописанными, чтобы вы смогли дополнить их самостоятельно. При желании, добавьте валидацию пользователя Telegram, проверку наличия пользователя в мобильном приложении, а также настройте деплой в Firebase через GitHub Actions. Короче, экспериментируйте, чтобы получить лучший результат.По традиции, оставляем ссылки на артефакты:
- Документация React Native Web
- Документация Telegram mini-app
- Ссылка на Firebase
- Весь код в Github
- Сам @ReactNativeWebClickerBot
На связи была команда dev.family 💜💚
До скорых встреч!
