FlutterFlow — API-запросы к Supabase
Руководство для новичков по настройке API-запросов во FlutterFlow для работы с Supabase. Создание API Call, настройка заголовков и авторизации, тестирование получения данных, динамическое отображение через JSON-пути.
Суть за 30 секунд
Прямые API-запросы к Supabase из FlutterFlow: URL + apikey header → GET request → JSON response → привязка к виджетам через JSON Path. Гибкая альтернатива стандартной интеграции.
📍 Навигация (Timeline)
- 00:20(https://youtu.be/-ZA18gF_Q0E?t=20) — Настройка API Call: Где найти раздел и как создать запрос.
- 00:46(https://youtu.be/-ZA18gF_Q0E?t=46) — GET vs POST: Отличие методов.
- 01:39(https://youtu.be/-ZA18gF_Q0E?t=99) — Подготовка в Supabase: Тестовая таблица
userс данными. - 02:14(https://youtu.be/-ZA18gF_Q0E?t=134) — API Docs в Supabase: URL, cURL, заголовки.
- 03:01(https://youtu.be/-ZA18gF_Q0E?t=181) — Конфигурация во FlutterFlow: URL + header
apikey. - 03:59(https://youtu.be/-ZA18gF_Q0E?t=239) — Тестирование: Проверка JSON-ответа.
- 04:54(https://youtu.be/-ZA18gF_Q0E?t=294) — Отображение данных: Привязка к виджетам.
- 05:42(https://youtu.be/-ZA18gF_Q0E?t=342) — JSON Path: Извлечение полей (
name,last_name). - 08:31(https://youtu.be/-ZA18gF_Q0E?t=511) — Финальный тест: Test Mode.
🧠 Ключевые концепции
- Supabase, API Integration, JSON Path, cURL
🛠 Практические фишки
- API Docs в Supabase: Вкладка API панели Supabase — готовые URL и Headers для каждой таблицы.
- Заголовок
apikey: Обязательный параметр, находится в Project Settings → API. - JSON Path для списков:
$.*для всех объектов или конкретные ключи для массивов значений. - Dynamic Children: Настройте генерацию дочерних элементов на основе JSON-ответа.
- Безопасность: Для продакшна настройте PostgreSQL RLS Policies, чтобы ограничить доступ через API.
📌 Резюме
API-запросы вместо стандартной интеграции дают гибкий контроль над данными. В связке с Supabase это превращает FlutterFlow в полноценный инструмент профессиональной разработки с мощным бэкендом.