Блог онлайн-университета Code breakers

Как разработать такс-трекер на Bubble.io

В бесплатной Академии ноукод-платформы для веб-разработки Bubble.io первое приложение, которое предлагают разработать — таск-трекер для отслеживания задач и проектов внутри команды. По итогам получится собственный таск-трекер, который можно положить в портфолио или использовать как инструмент для работы.
Этот текст — адаптация бесплатного учебного ролика от Bubble.io.

Чтобы лучше разобраться в программу Bubble.io, советуем начать с обзора, а потом изучить базовые понятия платформы.

Первый этап. Подготовка

Наш план — разработать таск-трекер. Начнём с проработки структуры приложения и соберём необходимые данные.

У проекта 9 экранов:

Основной:

— посадочная страница

Системные:

— экран регистрации

— экран для входа в аккаунт

— сброс пароля

— страница 404

Шапка:

— реиспользуемый хедер

Содержательные:

— дашборд со всеми проектами

— страница проекта

— страница профиля

Удобно отрисовать эту схему в Miro или FigJam. Со схемой проекта ничего не потеряется и не забудется.
Для создания красивого проекта нужны картинки: аватарки юзеров для примера и демонстрация интерфейса проекта для посадочной страницы. Эти материалы берите со страницы ролика в Академии.

Теперь создаём аккаунт в Bubble.io, если его ещё нет, и создаём новое приложение.

Дальше есть два пути: сделать заготовку под каждый экран самостоятельно или воспользоваться готовым темплейтом от Bubble.io. Готовый шаблон находится здесь.

Если хотите делать с нуля, то на этом этапе просто заготовьте пустые экраны под каждый из расписанных в структуре — через верхнюю левую панель по клику на Add a new page сделайте экраны и озаглавьте их понятным способом.

Рекомендуем начать с готового темплейта. Посмотрите структуру, настройки и лучше поймёте детали — а потом можно попробовать собрать всё с нуля.

Второй этап. Делаем посадочную страницу

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

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

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

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

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

Следуйте вот этому правилу:

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

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

Третий этап. Сформируем базу данных

В базе данных таск-трекера 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)

Четвёртый этап. Страница с регистрацией юзера и созданием команды

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

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

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

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

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

Хотите научиться делать веб-приложения разной сложности? Записывайтесь на наш курс по Bubble.io

Пятый этап. Дашборд

После регистрации юзер попадает на экран Dashboard. Чтобы дашборд отображал данные о конкретной команде, при указании навигации при настройках Start/Edit workflow на последней кнопке Finish мы должны не только задать действие Go to page dashboard, но и указать, какие данные туда отправить — Curren User's Team.

Сам дашборд состоит из групп вывода данных — Repeating Group. В левой группе отображаются члены команды, в правой — проекты команды c указанием количества заданий, которые нужно сделать по проекту. Рядом будут отображаться аватарки сотрудников, назначенных на выполнение проекта.

Для левой группы источник данных — User. Для правой — Project. В группе с пользователями будут отображаться все юзеры, которые сам пользователь добавит к своей команде. Их можно добавлять по кнопке в левой части дашборда. При этом в форкфлоу надо добавить события о добавлении юзеров к команде пользователя — по имени, фамилии и электронной почте.

Чтобы в части проектов появились записи о проектах, нужно сначала эти проекты создать. Происходит это в юзерофлоу приложения по клику на кнопку. При этом в базе данных заполняются данные по проекту — а именно его название.

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

Шестой этап. Страница проекта

Мы попадаем на страницу Project. Чтобы там отображались данные о конкретном проекте, нужно при настройке форкфлоу при клике на проект указать действие Go to page project и указать данные, которые нужно туда отправить — Curren cell's Project.

Теперь на странице проекта будет отображено его название (которое можно изменить), список заданий по проекту и календарь со сроками выполнения.

По клику на кнопку с добавлением задания появляется поп-ап. Здесь можно задать название, описание, дату начала и дату окончания и назначить исполнителя — другого юзера. По клику на кнопку Create Task в базе данных появится новая запись с заданием.

Задание создано — и у него появился статус. При клике на задание можно изменить статус — указать, что задание в процессе или завершено.

В правой части экрана — календарь. Он создаётся с помощью, например, плагина Calendar — в Bubble.io есть и другие примеры плагинов с календарём. Вы устанавливаете плагин, получаете компонент календарь, настраиваете его под стиль и дизайн проекта, кастомизируете отображение данных — и, конечно, задаёте источник данных. В нашем случае это сущность Task.

Кстати, для того, чтобы пользователи могли спокойно перемещаться по сервису, навешивайте на иконки стрелок «Назад» событие Go to previous page — вернуться на предыдущую страницу.

Седьмой этап. Страница профиля

Наконец, оформим страницу с личными данными пользователя — экран Profile. Попасть на него можно через хедер, который является реиспользуемым элементом.

При клике на аватарку юзера в хедере, выпадает меню с настройками и переходом на страницу профиля.

Сделать такой хедер не сложно — источником данных для него будет Current User — название его команды, фотография, адрес почты. В форкфлоу задаётся правило, что при клике на аватарку (или на адрес почты, на ваше усмотрение) становится видимым элемент c выпадающим меню. А уже здесь на строчку меню, которая по сути является кнопкой, пользователь попадёт на страницу профиля.

Источник данных в профиле — всё тот же Current User. Выводим списком проекты и задания, на которых текущий пользователь назначен как исполнитель. Это удобная с точки зрения юзера функция — пользователь может в два клика перейти на страницу, где собраны все его задания с привязкой к проектам.
Вот так выглядит процесс разработки такс-трекера на мощнейшем ноукод-инструменте для разработки веб-приложений. Посмотреть и попробовать, как трекер работает можно вот тут — проект, который мы собрали для текста.

Научим делать такие веб-приложения - а также онлайн-магазины, маркетплейсы и другие сервисы на курсе веб-разработке на Bubble.io - там научим всем тонкостям работы с ноукод-платформой!
Как делать