💻 Как разработать таск-трекер на Bubble: делаем посадочную страницу

В конце ноября мы уже начали рассказывать про один из самых простых для создания IT-продуктов — таск-трекер на Bubble. Если пропустили начало, — ищите его по хештегу #code_breakers_как_разработать_таск_трекер_на_Bubble.

Второй этап. Делаем посадочную страницу
Разработка происходит на странице Index. В темплейте страница собрана. Удалим всё и соберём заново через «Библиотеку компонентов». Библиотека находится справа на верхней панели под кнопкой Components.

Перетаскиваем из библиотеки:
🔹хедер;
🔹главный экран с большим изображением;
🔹3 экрана с описанием сервиса: один с картинкой справа, второй с картинкой слева, третий с картинкой справа;
🔹экран с отзывами;
🔹футер.

Следите, чтобы каждая новая группа компонентов ставилась ровно под предыдущую — при перетаскивании система покажет, куда именно вы ставите: верхняя группа подсветится красной рамкой, а в месте установки будет синяя черта. Даже если ошибётесь, ничего — на левой панели в Element tree посмотрите, куда и что встало, и перетащите в нужные места.

Здесь можно отредактировать тексты, удалить из хедера ненужные кнопки и ссылки, прописать или вставить логотип, добавить фотографии и скриншоты. Фоновый цвет для футера и первого экрана первой страницы предлагается делать одинаковым, чтобы получился единый переход. И это классное решение, но финальное — за вами, вы же разработчик.

На этом этапе поработайте с адаптивностью. Чтобы ваше приложение хорошо смотрелось на любых экранах, не делайте им минимальную фиксированную ширину. 

Следуйте вот этому правилу: главная группа (родительский компонент), в котором лежат остальные компоненты, растягивается по всей ширине экрана. Следующая в иерархии группа (child-компонент, «ребёнок») с определённой максимальной шириной. А компоненты (также child-компоненты) внутри уже адаптируются под конкретный размер контента.

К примеру, вся Index страница — 1440 рх шириной, выравнивание типа колонка с последовательным расположением групп на ней. Все следующие группы — её child-компоненты. Им выставляйте нулевую минимальную ширину (чтобы она адаптировалась под меньшие размеры экрана) и максимальную ширину 1200 рх, чтобы она не растягивалась. Внутри компоненты должны быть адаптированы под конкретный контент: текст или фотографии.

➖➖➖➖➖➖➖➖➖➖➖➖

Хотите быстро научиться разрабатывать IT-продукты с помощь Bubble и зарабатывать на этом? Приходите на наш курс «Веб-разработчик без кода». У нас осталось 4 свободных места на ближайший поток, который стартует 20 декабря 💙

ХОЧУ ОСВОИТЬ BUBBLE: codebreakers.tech/bubble

💻 Как разработать таск-трекер на Bubble: формируем базу данных

Ещё в ноябре мы начали рассказывать про один из самых простых для создания IT-продуктов — таск-трекер на Bubble. Если пропустили начало, — ищите его по хештегу #code_breakers_как_разработать_таск_трекер_на_Bubble.

Третий этап. Сформируем базу данных
В базе данных таск-трекера 4 сущности — то есть главных блоков данных: Project, Task, Team, User — Проект, Задание, Команда, Пользователь.

🟣 Для Project зададим данные — Member List (тип данных List of Users, то есть все пользователи), Name (Название проекта, тип текст), Team (тип данных — Team)

🟣 Для Task зададим данные — Assigned User (Назначенный пользователь, тип данных — User), Start Task Date и End Task Date (Даты начала и окончания выполнения задания, тип данных — дата), Task Name и Task Description (Название и описание задачи, тип данных текст), Status (статус задачи, тип данных — три параметра через Option Set).

🟣 Для Team зададим данные — Team Admin (тип данных — пользователь) и Team Name (название команды, тип данных текст).

🟣 Для User зададим данные — Name (Имя) и Last Name (Фамилия), Profile Photo (фотография профиля, тип данных изображение), Team (команда, тип данных — Team).

➖➖➖➖➖➖➖➖➖➖➖➖

Хотите быстро научиться разрабатывать IT-продукты с помощь Bubble и зарабатывать на этом? Приходите на наш курс «Веб-разработчик без кода». Стартуем уже завтра — 20 декабря 💙

ХОЧУ ОСВОИТЬ BUBBLE: codebreakers.tech/bubble

💻 Как разработать таск-трекер на Bubble: формируем базу данных

Если вы не читали наши предыдущие посты про разработку таск-трекера на Bubble, то ищите его по хештегу #code_breakers_как_разработать_таск_трекер_на_Bubble. А мы переходим к следующему шагу.

Четвёртый этап. Страница с регистрацией юзера и созданием команды
Экран Sign Up. Здесь процесс регистрации выстроен из 3 шагов. Юзер создаёт свой аккаунт, потом создаёт и называет команду, затем присваивает свою аватарку (или оставляет изображение по умолчанию).

Все 3️⃣ шага располагаем на одной странице, но делаем три элемента. В темплейте они есть.

Через Custom State — состояние элементов — указываем состояние, при котором каждый элемент будет виден. Для первого шага — регистрация юзера — сделаем Custom State 0. Это состояние по умолчанию — форма регистрации при первом визите видна на странице. Второе состояние — 1, следующая форма для создания команды. Третье состояние — 2, появляется форма для добавления аватарки пользователя.

Через Start/Edit workflow назначаем события, привязанные к кнопкам Sign Up, Continue и Finish. При нажатии на каждую кнопку в базе данных создаётся новая строка в соответствующем месте: имя и фамилия юзера, его почта и пароль; название команды и её фотография пользователя. Это происходит через настройку Create a new thing с указанием источников данных: из каждой строки формы создаётся отдельная запись в базу данных.

Таким образом пользователь создаёт запись о себе и привязывает себя к конкретной команде, которая будет работать над проектами и выполнять задачи. И эти данные будут отображаться на следующем экране — в личном кабинете, или в дашборде.

➖➖➖➖➖➖➖➖➖➖➖➖

Хотите научиться разрабатывать востребованные IT-продукты с помощь Bubble и зарабатывать на этом? Приходите на наш курс «Веб-разработчик без кода». Стартуем сразу после праздников, — 10 января!

💙 ХОЧУ ОСВОИТЬ BUBBLE: codebreakers.tech/bubble