Что нам стоит Личный Кабинет построить?
В этой статье я расскажу о том, как я делал личный кабинет пользователя, зачем мне это понадобилось и что будет происходить с сервисом дальше.
Зачем делать личный кабинет?
Зачем вообще может быть нужен личный кабинет Telegram-боту?
Правильно, Telegram-боту личный кабинет не очень-то и нужен, а вот сервису для поиска государственных закупок вполне.
Дело в том что передо мной стоял выбор, куда двигаться с развитием сервиса дальше. Развивать исключительно Telegram состовляющую (сделать mini-app, улучшить функционал бота) или же начать расширять функционал вширь и выходить за пределы Telegram в сторону полноценного сервиса.
Как нетрудно догадаться, я решил пойти вторым путём и на это есть несколько причин:
- судьба Telegram в РФ туманна, сегодня он не заблокирован, а завтра Роскомнадзор начинает его замедлять...
- большинство конкурентов предоставляют полноценное веб-приложение;
- я изначально видел бота, лишь как способ быстро начать и проверить гипотезу;
Какой функционал нужен?
Первоначально личный кабинет не должен содержать огромное количество функций, достаточно всего-лишь нескольких:
- оплата и управление подпиской;
- управление фильтрами (удаление, изменение, запуск, остановка);
- привязка Telegram-аккаунта к сервису;
Процесс разработки и технологический стек
Стек
Основной технологический стек проекта определился ещё до того как я начал писать личный кабинет:
Инфраструктурно:
- фронт хостится в S3 бакете в Яндекс.Облаке;
- бэк работает как Serverless функция в Яндекс.Облаке;
- обработка запросов через Express.
Библиотеки
Аутентификация
С чего начать разработку личного кабинета? Мне всегда удобнее начинать со страницы входа и аутентификации пользователей.
Самому реализовывать аутентификацию мне не хотелось, поэтому решено было выбрать уже готовую библиотеку. Так как у меня уже был опыт с next-auth поэтому я выбрал идейного продолжателя этой библиотеки better-auth.
Чем хорош better-auth, так это тем что он не завязан на какой-то конкретный фреймворк, именно поэтому я смог легко встроить его в свою архитектуру для бедных.
Клиентские пакеты
Так же используется набор проверенных клиентских npm-пакетов:
- headless-ui компоненты;
- для работы с бекендом и стейт-менеджмента, я использую tanstack query;
- для работы с формами я использую react-hook-form;
- иконки react-icons;
- react-toastify для тостов;
Процесс разработки.
Так как я делаю всё в одиночку, то гораздо проще для меня двигаться в следующем порядке:
- Сначала продумываем представление на клиенте;
Тут я и рисую, и смотрю примеры на имиджбордах и в сервисах, которыми пользуюсь.
- Реализовываем первую версию представления на фронте;
Это помогает лучше понять и продумать необходимые структуры данных для клиентского API.
- Делаем все необходимые бэкендовые ручки для данных;
Тут всё просто, надо привести данные из базы в нужный для клиента формат.
- Используем ручки на клиенте;
Получаем данные с бэка, правим первые баги.
- Смотрим результат;
Небольшое тестирование в поисках ошибок и недостающего функционала.
- Делаем ещё несколько итераций "фронт-бэк";
Правим баги, рефакторим код.
- Переходим к следующей странице/фиче;
И так до победного конца.
Первые результаты
Посмотреть личный кабинет в живую можно тут. Ну а для тех кому лень регистрировать, вот несколько скриншотов.
На этом всё. Спасибо за внимание!
