Перейти к основному содержимому

Действия с базой данных Supabase

Действия с базой данных Supabase позволяют добавлять, обновлять или удалять строку в таблице Supabase.

Обратите внимание, что помимо действий вы также можете настроить запросы к серверу для Supabase. Это включает запросы с потоковой передачей в реальном времени.

Предварительные требования

Перед началом работы с этим разделом убедитесь, что вы выполнили следующие шаги:

  1. Все этапы настройки Supabase
  2. У вас создана таблица для добавления, обновления и удаления данных.

Типы действий с базой данных Supabase

Ниже приведены типы действий, которые вы можете выполнять с таблицей Supabase.

Добавить строку [Действие]

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

  2. В панели свойств (правое меню) выберите Действия и нажмите Открыть. Это откроет редактор потоков действий в новом всплывающем окне.

    1. Нажмите + Добавить действие.

    2. В правой части найдите и выберите действие Supabase > Добавить строку.

    3. Установите Таблица в имя вашей таблицы (например, assignments).

    4. В разделе Установить поля нажмите кнопку + Добавить поле.

    5. Нажмите на имя поля.

      1. Прокрутите вниз, чтобы найти выпадающий список Источник значения, и измените его на Из переменной.
      2. Нажмите на UNSET и выберите Состояние виджета > Name текстового поля.
    6. Аналогично добавьте поле для других элементов интерфейса.

Профессиональный совет

При добавлении этого действия вы можете оставить поле id (если оно отмечено как Primary) и created_at (если значение по умолчанию — now()). Supabase автоматически добавит значения для этих полей.

Обновить строку [Действие]

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

  2. В панели свойств (правое меню) выберите Действия и нажмите Открыть. Это откроет редактор потоков действий в новом всплывающем окне.

    1. Нажмите + Добавить действие.

    2. В правой части найдите и выберите действие Supabase > Обновить строку.

    3. Установите Таблица в имя вашей таблицы (например, assignments).

    4. Опционально: Если вы хотите получить строки после завершения обновления, включите опцию Вернуть соответствующие строки.

    5. Теперь необходимо указать строку, которую вы хотите обновить. Обычно это делается путем поиска строки в таблице, соответствующей текущему ID строки. Для этого нажмите кнопку + Добавить фильтр в разделе Соответствующие строки.

      1. Установите Имя поля в поле, содержащее ID. Обычно это колонка id.
      2. Установите Отношение в Равно, поскольку вы хотите найти строку с точным ID.
      3. В Источник значения выберите Из переменной и укажите ID строки, для которой вы только что обновили значения в интерфейсе.
    6. В разделе Установить поля нажмите кнопку + Добавить поле.

    7. Нажмите на имя поля.

      1. Прокрутите вниз, чтобы найти выпадающий список Источник значения, и измените его на Из переменной.
      2. Нажмите на UNSET и выберите Состояние виджета > Name текстового поля.
    8. Аналогично добавьте поле для других элементов интерфейса.

Как сделать и советы

Если у вас есть поток вроде HomePage -> AssignmentDetailsPage -> UpdateAssignmentPage, вы можете включить опцию Заменить маршрут (см. пункт 5 здесь), когда переходите с AssignmentDetailsPage на UpdateAssignmentPage. Затем добавьте действие Вернуться назад после действия обновления. Это напрямую откроет HomePage после обновления строки.

Удалить строку [Действие]

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

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

  2. В панели свойств (правое меню) выберите Действия и нажмите Открыть. Это откроет редактор потоков действий в новом всплывающем окне.

    1. Нажмите + Добавить действие.

    2. В правой части найдите и выберите действие Supabase -> Удалить строку.

    3. Установите Таблица в имя вашей таблицы (например, assignments).

    4. Опционально: Если вы хотите узнать, какие строки были удалены из таблицы, включите опцию Вернуть соответствующие строки.

    5. Теперь необходимо указать строку, которую вы хотите удалить. Обычно это делается путем поиска строки в таблице, соответствующей текущему ID строки. Для этого нажмите кнопку + Добавить фильтр в разделе Соответствующие строки.

      1. Установите Имя поля в поле, содержащее ID. Обычно это колонка id.
      2. Установите Отношение в Равно, поскольку вы хотите найти строку с точным ID.
      3. В Источник значения выберите Из переменной и укажите ID строки, которую вы хотите удалить.

подсказка

Вы можете добавить действие Обновить запрос к базе данных после этого действия, чтобы удалить удаленные элементы из списка.

Запросить строки [Действие]

В некоторых сценариях вы можете захотеть вручную запросить таблицу Supabase. Например, вы можете захотеть получить данные только в ответ на конкретное действие пользователя, такое как нажатие кнопки.

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

Чтобы вручную запросить таблицу Supabase, следуйте шагам ниже, чтобы определить это действие для любого виджета:

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

  2. В панели свойств (правое меню) выберите Действия и нажмите Открыть. Это откроет редактор потоков действий в новом всплывающем окне.

  3. Нажмите + Добавить действие.

  4. В правой части найдите и выберите действие Supabase > Запросить строки.

  5. Выберите таблицу, которую хотите запросить.

  6. Вы также можете фильтровать и сортировать результаты запроса.

  7. Укажите Имя выходной переменной действия. Оно будет использоваться для хранения результата запроса.

  1. Теперь вы можете использовать Имя выходной переменной действия, указанное на предыдущем шаге, чтобы генерировать дочерние элементы из переменной в ListView.
  2. Наконец, вы можете отобразить данные в виджете Text. Для этого выберите виджет Text > Панель свойств > Text > Меню Установить из переменной > [children_from_variable_name] элемент > Получить поле строки > выберите поле строки, которое вы хотите отобразить.

Фильтрация данных таблицы

Иногда вы можете захотеть отфильтровать список на основе условия. Например, показать только завершенные задания. Вы можете сделать это, добавив фильтр при запросе таблицы Supabase.

Давайте разберем, как отфильтровать таблицу Supabase, чтобы отобразить только желаемые элементы:

  • В свойствах действия действия Query Rows прокрутите вниз и нажмите кнопку + Добавить фильтр внизу.

  • Найдите Имя поля, нажмите на Unset и выберите колонку, к которой вы хотите применить фильтр.

  • Найдите выпадающий список Отношение, нажмите на Unset и выберите отношение из списка.

  • Найдите свойство Значение и установите его в соответствующее значение, затем нажмите Подтвердить.

подсказка

Вы можете выбрать отношение фильтра в зависимости от ваших требований. Например:

  • Равно: Чтобы показать только завершенные задания, установите Имя поля в колонку, содержащую статус завершения (например, is_done), установите Отношение в Равно и установите Значение в True.
  • Больше чем: Чтобы показать только пользователей старше 30 лет, установите Имя поля в колонку age, установите Отношение в Больше чем и установите Значение в 30.
  • Like: Для фильтрации адресов с почтовыми индексами, начинающимися с '35', установите Имя поля в колонку zip_code, установите Отношение в LIKE и установите Значение в 35%. В поле значения вы используете следующие подстановочные знаки для гибкого сопоставления шаблонов и эффективной фильтрации данных.
    • Подстановочный знак процента (%): Представляет ноль, один или несколько символов.
      • Пример: 'A%' соответствует любой строке, начинающейся с 'A' (например, 'Apple', 'Apex').
      • Пример: '%A%' соответствует любой строке, содержащей 'A' (например, 'Canada', 'Australia').
    • Подстановочный знак подчеркивания (_): Представляет один символ.
      • Пример: 'A_' соответствует любой двухсимвольной строке, начинающейся с 'A' (например, 'An', 'At').
      • Пример: 'A__' соответствует любой трехсимвольной строке, начинающейся с 'A' (например, 'Ant', 'Art').
к сведению

Вы можете комбинировать несколько фильтров с помощью операторов AND или OR, чтобы создать более сложную логику фильтрации. Это позволяет уточнить запрос данных для соответствия конкретным условиям.

Сортировка данных таблицы

Вы можете захотеть отобразить список из таблицы Supabase в определенном порядке. Например, показать задания в порядке даты выполнения.

Чтобы указать порядок:

  • В свойствах действия действия Query Rows прокрутите вниз и нажмите кнопку + Добавить сортировку внизу.
  • Установите Имя поля таблицы в колонку, которую вы хотите использовать для сортировки.
  • Найдите выпадающий список Порядок, нажмите на Unset и выберите порядок — Увеличение или Уменьшение — и нажмите Подтвердить.
подсказка

Вы можете выбрать порядок в зависимости от ваших требований. Например, чтобы показать задания в порядке даты выполнения, установите Имя поля таблицы в due_date и Порядок в Увеличение.

к сведению

Дополнительная заметка: В настоящее время вы можете добавлять только условия "and" к фильтрам запросов Supabase. Если вы хотите добавить фильтр "or", например "status == 5 or status == 8", вы можете использовать логику вроде "status in (5,8)" или любую другую. Полностью настраивается с помощью вызовов API или пользовательских действий.

Запуск действия при изменении данных

Иногда вы можете захотеть запустить действие каждый раз, когда данные в таблице Supabase изменяются. Например, в приложении для электронной коммерции вы можете уведомлять пользователей на странице заказов, когда статус их заказа обновляется.

Чтобы реагировать на изменения данных в таблице Supabase:

  1. Убедитесь, что вы добавили запрос Supabase к виджету (например, ListView) с отключенной опцией Единоразовый запрос, чтобы включить обновления в реальном времени.
  2. На виджете с запросом Supabase откройте редактор потоков действий и установите При изменении данных в качестве триггера действия. Это гарантирует, что любые добавленные действия будут запускаться при обновлении, добавлении или удалении данных.
  3. Теперь вы можете добавить любое действие, которое хотите выполнить, например, показать уведомление, обновить интерфейс или получить связанные данные.
к сведению

Если вы используете этот триггер на ListView, обязательно отключите Бесконечную прокрутку.

Поддержка работы оффлайн для приложений Supabase

Если вам нужны возможности работы оффлайн в вашем приложении на базе Supabase, рассмотрите использование библиотеки PowerSync, созданной командой PowerSync. Она специально предназначена для обеспечения seamless-опыта работы оффлайн-первым приоритетом путем синхронизации данных Supabase локально и их обновления при повторном подключении устройства.