Как я создавал фриланс биржу на WebApp Telegram⁠⁠

Всем привет! Давно была идея разработать WebApp приложение с классным UI сопровождением. Но не было самой идеи. Но вот свершилось, пришла идея, пришли силы и я сел за реализацию.

Это первая часть статьи.

Ссылка на WebApp внизу 👇

Идея

Я хочу реализовать Фриланс Биржу в WebApp внутри Telegram. Будет доступна возможность как откликаться на задачи так и создавать эти задачи. А так же оставлять отзыв.

У Фрилансера будет возможность добавить описание к своему профилю, добавить портфолио.

У Заказчика будет возможность создавать задачи, просматривать отклики на нее и выбирать исполнителя.

Авторизация будет работать на основе самого Telegram.

Дизайн интерфейса

Я не дизайнер. Я пытался им быть, вышло не очень. Но интерфейс надо реализовать. Но как? Я научился использовать UI KIT'ы от различных компаний.

UI Kit (User Interface Kit) — это набор готовых элементов графического интерфейса, который может включать в себя кнопки, иконки, ползунки, текстовые поля и другие компоненты интерфейса. Такой набор позволяет разработчикам и дизайнерам создавать интерфейсы приложений и веб-сайтов, обеспечивая единообразие и высокое качество дизайна.

Спросил у ChatGPT

На этот раз я остановился на VKUI. Их UI KIT как раз создан для мобильных приложений, это то что мне нужно! Тем более есть поддержка светлой и темной темы, просто шикарно.

Вот ссылка на Figma если кому интересно: Figma

На чем будем писать?

При разработке буду использовать Next.js, а так же Prizma. Prizma - это ORM для взаимодействия с базами данных, она как раз поддерживает Next.js напрямую, не придется поднимать свой сервер ( наверное ). Полная FullStack разработка.

Так же я буду использовать библиотеку UI от VK для реализации наших интерфейсов в едином дизайне. Так же ознакомится можно здесь: Docs

Первые макеты

Накидать интерфейс не такая простая задача, даже не смотря на то что у нас есть готовые компоненты.

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

Тем более зачастую ты сам не понимаешь "А как надо?". На картинке вы видите примеры пары макетов, возможно они не финальные но они и не первые.

Первые неудачи

Telegram WebApp сама по себе интересная возможность до конца не изученная, например как только я сделал первые три экрана приложения, я решил их протестировать в телеграм. И вот что вышло: Цветовые схемы сбивались постоянно, потому что VK UI имеют свою схему а телеграм подсовывает свою.

p.s Разработчики Telegram, если вы это читаете, разрешите выключать вашу цветовую схему одним параметром.

Новые решения

Так же я решил отказаться от так называемой "Шапки" так как ее сама WebApp предоставляет, я думаю профиль вы вынесем в настройки внутри WebApp.

Интересные факты

Факт 1: А вы знали что WebApp работает через Edge браузер? Вот и я не знал, этот момент тоже нужно учитывать. Почему именно был выбран этот браузер не понятно.

Факт 2: Вы можете сделать WebApp как в своей цветовой схеме, так и использовать цветовую схему которую настроил сам пользователь Telegram.

Итог

В итоге полученный результат вы можете увидеть по ссылке: t.me/FreelancerForJobsBot

На это у меня все! Спасибо что дочитали статью до конца, еще предстоит много работы, много времени занимает изменение цветовой схемы.

Многие детали могут отличаться от тех что есть на скриншоте.

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

Подписывайтесь на мой канал ( https://t.me/thismisterit ), я там часто рассказываю о ходе разработки и об открытиях при ней, нас целых 18 человек уже! Будет здорово если ты поддержишь:) Это мотивирует!