Электро самолёт
Философия Стива Джобса
iPhone 16e
Nothing Phone 3a
Оживление фото LumaAI
Велосипед Mercedes
Робота научили делать сальто
Grok vs ChatGPT vs Claude
Генерация видео от Google

Как я создавал фриланс биржу на 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 кошелек, а после размещать. Классный кейс должен выйти:)

Claude 3.7 Sonnet — «лучшая в программировании»: первые отзывы и примеры работы новой модели Anthropic

Пользователи создают мобильные приложения, игры и карточки погоды «с одной попытки».

1616
22
реклама
разместить
На складах в России скопилось более 500 тысяч автомобилей, запасы «АвтоВАЗа» приблизились к 100 тысячам машин — президент компании

Максим Соколов назвал ситуацию на авторынке «тревожной».

2828
22
Надо цены повышать, из за этого не берут, думают раз дешево значит не качественно. Вон китаезов никто не брал, а как стали стоить от 4 млн, так все дороги, улицы дворы ими завалены.
Как крупнейший частный медицинский центр Владимирской области «Норма» внедрил MANGO OFFICE и создал единое пространство для коммуникаций с клиентами

Кейс внедрения продуктов MANGO OFFICE в сеть клиник «Норма»

Как крупнейший частный медицинский центр Владимирской области «Норма» внедрил MANGO OFFICE и создал единое пространство для коммуникаций с клиентами
Google выпустила бесплатную бета-версию ИИ-помощника для программистов Gemini Code Assist

Доступно 180 тысяч подсказок для редактирования кода в месяц.

2424
99
33
Опять без спроса будут собирать истории чатов и код, и использовать для обучения, ну и других своих целях. Поэтому так и щедро
Adobe выпустила приложение Photoshop для iPhone

Компания хочет «познакомить новое поколение любителей изображений и дизайна с безграничным потенциалом Photoshop».

Источник: Adobe / TechCrunch
1414
22
Петербургские депутаты предложили запретить ездить по тротуарам на электровелосипедах

Инициатива направлена прежде всего против «лихачей-курьеров».

Источник фото: РБК
4242
55
44
44
11
Как насчет того чтобы не запрещать, а развивать велодорожки, чтобы трафик разделить? Депутаты конечно же не слышали не видели об этом
Как обеспечить стабильную работу 6 500 баз данных 1С: кейс Альтап

Рассказываем, как компания развернула на выделенных серверах Selectel стабильную и масштабируемую инфраструктуру для работы более 4 000 пользователей 1С.

Как обеспечить стабильную работу 6 500 баз данных 1С: кейс Альтап
55
33
[]