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

Все началось с того, что я решил освоить React. В то время только набирали популярность VK Mini Apps, и мы с приятелем решили поэкспериментировать. Кстати, если вам будет интересно, могу рассказать об этих экспериментах в отдельной статье. А сейчас хочу поделиться проектом, который реализует гадание по китайской книге перемен, известной как И Цзин.

Итак, я написал VK Mini App для гадания по И Цзин, а теперь пришло время перенести его на платформу Telegram Web App. Учитывая, что для VK Mini App я использовал VKUI — библиотеку на React для создания интерфейсов в стиле ВКонтакте — и отзывы рецензента кода, я решил переписать приложение с нуля.

По стеку я выбрал связку React + TypeScript + Redux (объясню, зачем Redux чуть позже). Плюс, для запуска приложения в Telegram нам нужен бот, и его я пишу на Python с использованием фреймворка aiogram.

Весь код вы можете найти на GitHub, но здесь я хотел бы поделиться моментами, которые лично мне показались интересными.

Например, первым делом я решил ограничить горизонтальный вид приложения. Это значительно упрощает адаптацию под мобильные разрешения, да и в горизонтальной ориентации такие приложения, по моему мнению, использовать неудобно. Возможно, у Telegram есть что-то предусмотренное для этого, но я либо не нашел, либо просто решил «повыделываться» и написать компонент для определения положения дисплея телефона самостоятельно.

С главной страницы можно либо сразу начать игру, либо ознакомиться с инструкцией. Страница самой игры — это самое интересное. Гадание по книге перемен предполагает рисование гексаграммы снизу вверх. Чтобы реализовать это на уровне кода, я начал с рисования дефолтной линии — сплошной, белого цвета. При запуске игры пользователь видит шесть сплошных белых линий, представляющих пустую гексаграмму.

Гексаграмма может состоять из сплошных или пунктирных линий(они будут черными, в свою очередь меняя текущую белую линию), а на игровом поле расположены три монеты и кнопка. Всё, что нужно для гадания, на месте.

Когда я делал VK Mini App, одна из основных проблем, отмеченных в ревью, была связана с лишними перезагрузками компонентов. Это ухудшало производительность и усложняло работу с кодом. Поэтому мне рекомендовали изучить Redux. Опытные разработчики давно работают с этим инструментом, и если вы ещё с ним не знакомы, рекомендую эту статью.

Создание store описывать не буду, это довольно стандартная процедура, а вот код слайса, который я написал под свои нужды, оставлю ниже.

Когда пользователь полностью собирает гексаграмму, его автоматически перенаправляет на страницу с результатом, где он может прочитать толкование. Если ему хочется сохранить результат, можно отправить его в личный диалог с ботом и сохранить в виде сообщения. Это делается через метод sendData в Telegram Web Apps. Кстати, методов там не так много, ознакомиться с ними можно здесь.

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

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

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