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

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

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

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

Идея

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

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

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

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

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

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

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

Спросил у ChatGPT

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

Figma Community
Figma Community

Вот ссылка на 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.

Итог

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

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

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

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

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

55
11 комментариев

Крут. Удачи вам. Думаю за сервисами внутри телеги стоитбольшое будущее

1
Ответить

да, там и есть развитие. сколько разных идей подмечено!

2
Ответить

Все возможно)

1
Ответить

У fl.ru появляются конкуренты✌️

Ответить

Ахаха) Не планирую что-то серьезное делать, но если на той пойдет то почему и нет)

Пока по большей части я больше учусь работать с самим WebApp, там много ньюансов есть своих.

Ответить

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

Ответить

План как минимум довести до ума. Но как я выше ответил на комментарий, я не планировал делать что-то серьезное, чисто Pet-проект.

Насчет продвижения, можно попробоапть за счет AppsCenter выезжать, разместить там это приложение и просто ждать будут пользоваться или нет. Но для начала доделать, возможно прикрутить TON кошелек, а после размещать. Классный кейс должен выйти:)

Ответить