ILLA home page
  1. Supabase DB

​

Supabase - это альтернатива Firebase с открытым исходным кодом, которая позволяет разработчикам создавать веб и мобильные приложения в реальном времени. Он предоставляет многие из тех же возможностей, что и Firebase, таких как базы данных реального времени, аутентификация пользователей, и хостинг, но с дополнительными преимуществами быть open-source и предоставлять SQL API. Это позволяет разработчикам использовать свои существующие знания и инструменты SQL, что облегчает интеграцию с другими системами. Кроме того, Supabase предоставляет более гибкую и настраиваемую платформу, чем Firebase, которая может быть более ограничительной в отношении моделирования и использования данных.

В этом уроке описывается процесс создания панели администратора с помощью ILLA Builder и Supabase за несколько простых шагов. ILLA – это низкокодовая платформа для разработчиков, позволяющая быстро разрабатывать и устанавливать внутренние инструменты. Он позволяет создавать страницы, перетаскивая пользовательские компоненты, подключаясь к любой базе данных или API, а также писать JavaScript. Чтобы узнать больше о Supabase, посетите их сайт https://supabase.com/. Давайте начнём!

​
Шаг 1: Настройте свой Backend на Supabase

На панели управления Supabasa нажмите на New project и установите имя в adminPanel.

Создайте новую таблицу, нажав на кнопку «Создать новую таблицу» .

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

Заполните информацию в таблице. База данных теперь настроена.

​
Шаг 2: Создание интерфейса в ILLA Cloud

В ILLA Cloud нажмите кнопку Создать новый, чтобы создать новое приложение.

Перетащите компоненты из панели Insert в холст.

Выберите компоненты на холсте и настройте свойство на панели Inspect.

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

​
Шаг 3: Подключиться к соглашению и CRUD конфигурации

Обратите внимание на информацию о подключении к базе данных в разделе Настройки проекта в Supabase.

В списке действий нажмите + New и выберите пункт Supabase DB.

Заполните форму для подключения к сервису Supabase. Проверить соединение и сохранить ресурс.

Нажмите «Создать действие», чтобы создать действие с ресурсом поддержки и настроить CRUD.

Используйте {{ для получения внешних входных данных. Ниже приведен пример страницы управления пользователями в панели администратора.

Поиск пользователя по имени, указанному в input1

ВЫБЕРИТЕ *
от пользователя
WHERE name = "{{input1.value}}"
;

Обновить данные пользователя. Обновление информации о пользователе при совпадении идентификатора

UPDATE пользователь
SET имя = "{{input3.value}}"
, email = "{{input4.value}}"
Где id="{{input2.value}}"
;

Вставить данные пользователя

INSERT INTO пользователя VALUES("{{input5.value}}","{{input6.value}}","{{input7.value}}");

Удалить пользователя по id

УДАЛИТЬ ИЗ пользователя WHERE id = "{{input2.value}}";

​
Шаг 4: Показать данные по компонентам

Настройте свойства компонентов с помощью {{ . Например:

​
Ресурсы