Трекер привычек — Создаём настоящее приложение на FlutterFlow 5 и Supabase
Подробный двухчасовой мастер-класс по созданию habit tracker на FlutterFlow (фронтенд) и Supabase (бэкенд). Архитектура, схема данных, авторизация, геймификация (streaks + milestones) — максимальное использование No-code возможностей Supabase.
Суть за 30 секунд
Habit tracker от А до Я: проектирование БД (пользователи, привычки, streaks, milestones) → связка FF + Supabase → CRUD → авторизация → страница профиля. Все подсчёты — на стороне базы данных через views.
📍 Навигация (Timeline)
- 00:00(https://youtu.be/rwViKM5-anw?t=0) — Архитектура: Схема данных Supabase (пользователи, привычки, streaks, milestones).
- 05:00(https://youtu.be/rwViKM5-anw?t=300) — Связка FF + Supabase: Настройка интеграции, создание таблиц.
- 15:00(https://youtu.be/rwViKM5-anw?t=900) — UI приложения: Главная страница, список привычек.
- 30:00(https://youtu.be/rwViKM5-anw?t=1800) — Добавление привычек: Форма создания, сохранение в Supabase.
- 45:00(https://youtu.be/rwViKM5-anw?t=2700) — Отметка выполнения: Логика streaks и подсчётов.
- 60:00(https://youtu.be/rwViKM5-anw?t=3600) — Геймификация: Milestones (3, 7, 30 дней), цветовые индикаторы.
- 75:00(https://youtu.be/rwViKM5-anw?t=4500) — Авторизация: Страница логина, работа с пользователями.
- 90:00(https://youtu.be/rwViKM5-anw?t=5400) — Страница профиля: Статистика, редактирование, удаление.
- 110:00 — Итоги: Обзор и рекомендации.
🧠 Ключевые концепции
- Supabase, Habit Tracker, Streaks, Milestones, Database Views, No-code
🛠 Практические фишки
- Все подсчёты на стороне БД: Streaks, статусы достижений, фильтрации — через Supabase views и запросы.
- Геймификация через milestones: 3, 7, 30 дней — цветовые индикаторы мотивируют пользователя.
- Тестовые данные: Генерируйте сиды в Supabase для быстрой проверки UI.
- Авторизация в конце: Сначала постройте основной функционал, затем добавьте страницу профиля и логин.
📌 Резюме
Идеальное видео для начинающих, желающих освоить No-code/Low-code подход к созданию реальных приложений на базе FlutterFlow и Supabase. Акцент на максимальной использовании возможностей Supabase — вся бизнес-логика на стороне базы данных.