Эксперименты с React и портирование VK Mini App на Telegram Web App

Приветствую всех, меня зовут Виктор, и я — разработчик-любитель с небольшим опытом в web-разработке на позиции full-stack. В основном занимаюсь пет-проектами, чтобы изучать новые технологии и удовлетворять своё любопытство. Сегодня хочу рассказать об одном из таких проектов.

Все началось с того, что я решил освоить 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

Для деплоя использовал свой старенький Raspberry Pi 3-й модели. Несмотря на возраст устройства, был приятно удивлён, что Debian всё ещё поддерживает 32-битную версию Raspbian. Развернул окружение под Python и запустил приложение как сервис.

Приложение уже доступно по адресу: клац. Оно пока работает на моём стареньком сервере, и сколько продержится — неизвестно.

Буду рад любым комментариям и критике. Если вам интересно узнать больше про мой опыт создания VK Mini Apps, статистику и другие детали, пишите в комментариях — расскажу. Благодарю вас за внимание к моему пет проекту. Всем интересных проектов и хорошего настроения. Увидимся на Хабре.