Эксперименты с React и портирование VK Mini App на Telegram Web App
Все началось с того, что я решил освоить React. В то время только набирали популярность VK Mini Apps, и мы с приятелем решили поэкспериментировать. Кстати, если вам будет интересно, могу рассказать об этих экспериментах в отдельной статье. А сейчас хочу поделиться проектом, который реализует гадание по китайской книге перемен, известной как И Цзин.
Немного об И Цзин
«Книга состоит из 64 символов — гексаграмм, каждая из которых выражает ту или иную жизненную ситуацию с точки зрения её развития. Символы состоят из шести черт; они обозначают ступени этого развития... Гадание обычно происходит с помощью трёх монет, которые подбрасываются 6 раз. Полученные линии позволяют обратиться к книге за толкованием.»
Итак, я написал VK Mini App для гадания по И Цзин, а теперь пришло время перенести его на платформу Telegram Web App. Учитывая, что для VK Mini App я использовал VKUI — библиотеку на React для создания интерфейсов в стиле ВКонтакте — и отзывы рецензента кода, я решил переписать приложение с нуля.
По стеку я выбрал связку React + TypeScript + Redux (объясню, зачем Redux чуть позже). Плюс, для запуска приложения в Telegram нам нужен бот, и его я пишу на Python с использованием фреймворка aiogram.
Весь код вы можете найти на GitHub, но здесь я хотел бы поделиться моментами, которые лично мне показались интересными.
Например, первым делом я решил ограничить горизонтальный вид приложения. Это значительно упрощает адаптацию под мобильные разрешения, да и в горизонтальной ориентации такие приложения, по моему мнению, использовать неудобно. Возможно, у Telegram есть что-то предусмотренное для этого, но я либо не нашел, либо просто решил «повыделываться» и написать компонент для определения положения дисплея телефона самостоятельно.
Далее я создал четыре страницы:
Главная страница — здесь можно начать игру или прочитать инструкцию.
Страница инструкции — обычное текстовое поле с описанием механики гадания.
Страница игры — здесь происходит основное действие.
Страница результата — показывает итог после завершения гадания.
С главной страницы можно либо сразу начать игру, либо ознакомиться с инструкцией. Страница самой игры — это самое интересное. Гадание по книге перемен предполагает рисование гексаграммы снизу вверх. Чтобы реализовать это на уровне кода, я начал с рисования дефолтной линии — сплошной, белого цвета. При запуске игры пользователь видит шесть сплошных белых линий, представляющих пустую гексаграмму.
Гексаграмма может состоять из сплошных или пунктирных линий(они будут черными, в свою очередь меняя текущую белую линию), а на игровом поле расположены три монеты и кнопка. Всё, что нужно для гадания, на месте.
Оптимизация и Redux
Когда я делал VK Mini App, одна из основных проблем, отмеченных в ревью, была связана с лишними перезагрузками компонентов. Это ухудшало производительность и усложняло работу с кодом. Поэтому мне рекомендовали изучить Redux. Опытные разработчики давно работают с этим инструментом, и если вы ещё с ним не знакомы, рекомендую эту статью.
Создание store описывать не буду, это довольно стандартная процедура, а вот код слайса, который я написал под свои нужды, оставлю ниже.
Механика гадания и результат
Когда пользователь полностью собирает гексаграмму, его автоматически перенаправляет на страницу с результатом, где он может прочитать толкование. Если ему хочется сохранить результат, можно отправить его в личный диалог с ботом и сохранить в виде сообщения. Это делается через метод sendData в Telegram Web Apps. Кстати, методов там не так много, ознакомиться с ними можно здесь.
Деплой и работа на Raspberry Pi
Приложение уже доступно по адресу: клац. Оно пока работает на моём стареньком сервере, и сколько продержится — неизвестно.
Буду рад любым комментариям и критике. Если вам интересно узнать больше про мой опыт создания VK Mini Apps, статистику и другие детали, пишите в комментариях — расскажу. Благодарю вас за внимание к моему пет проекту. Всем интересных проектов и хорошего настроения. Увидимся на Хабре.