Как я создавал фриланс биржу на WebApp Telegram
Всем привет! Давно была идея разработать WebApp приложение с классным UI сопровождением. Но не было самой идеи. Но вот свершилось, пришла идея, пришли силы и я сел за реализацию.
Это первая часть статьи.
Ссылка на WebApp внизу 👇
Идея
Я хочу реализовать Фриланс Биржу в WebApp внутри Telegram. Будет доступна возможность как откликаться на задачи так и создавать эти задачи. А так же оставлять отзыв.
У Фрилансера будет возможность добавить описание к своему профилю, добавить портфолио.
У Заказчика будет возможность создавать задачи, просматривать отклики на нее и выбирать исполнителя.
Авторизация будет работать на основе самого Telegram.
Дизайн интерфейса
Я не дизайнер. Я пытался им быть, вышло не очень. Но интерфейс надо реализовать. Но как? Я научился использовать UI KIT'ы от различных компаний.
UI Kit (User Interface Kit) — это набор готовых элементов графического интерфейса, который может включать в себя кнопки, иконки, ползунки, текстовые поля и другие компоненты интерфейса. Такой набор позволяет разработчикам и дизайнерам создавать интерфейсы приложений и веб-сайтов, обеспечивая единообразие и высокое качество дизайна.
На этот раз я остановился на 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.
Итог
В итоге полученный результат вы можете увидеть по ссылке:
На это у меня все! Спасибо что дочитали статью до конца, еще предстоит много работы, много времени занимает изменение цветовой схемы.
Многие детали могут отличаться от тех что есть на скриншоте.
Следующий этап, это доработать компоненты и цветовую схему, доделать компонент добавления заказов. А так же прикрутить бекенд часть.
Подписывайтесь на мой канал, я там часто рассказываю о ходе разработки и об открытиях при ней, нас целых 18 человек уже! Будет здорово если ты поддержишь:) Это мотивирует!
Крут. Удачи вам. Думаю за сервисами внутри телеги стоитбольшое будущее
да, там и есть развитие. сколько разных идей подмечено!
Все возможно)
У fl.ru появляются конкуренты✌️
Ахаха) Не планирую что-то серьезное делать, но если на той пойдет то почему и нет)
Пока по большей части я больше учусь работать с самим WebApp, там много ньюансов есть своих.
И все же. Биржи фриланса сейчас прогнили и заходить на отдельный сайт или в отдельное приложение, чтобы найти исполнителя - уж слишком по-старперски.
А вот в месседжер, тем более тг, который для работы все чаще используют, такой сервис отлично бы вписался
Можно позиционировать себя как все в одном месте)
а план какой?
есть бюджет на продвижение? биржа это классическое курица и яйцо, что бы пришли заказчики нужны фрилансеры, а что бы пришли фрилансеры нужны заказчики
тут нужно либо заливать все рекламным баблом, либо хакать продвижение
План как минимум довести до ума. Но как я выше ответил на комментарий, я не планировал делать что-то серьезное, чисто Pet-проект.
Насчет продвижения, можно попробоапть за счет AppsCenter выезжать, разместить там это приложение и просто ждать будут пользоваться или нет. Но для начала доделать, возможно прикрутить TON кошелек, а после размещать. Классный кейс должен выйти:)
ну это не бизнес кейс
и органикой тут не выехать
тут либо продать как разработку, либо искать инвестора на маркетинг
Это кейс разработки:) Для потенциальных клиентов. Плюс опыт, что важнее. Продвигать мне уже хватает что, можно у меня в статьях найти мое основное дело. Спасибо вам за поддержку:) Но сейчас я хочу чтоб хотя бы это работало без косяков и стабильно а уже дальше решим что делать, из этого проекта можно хоть Blueprint сделать, шаблон некий для новых проектов. Возможностей много и направлений так же)