Кросс-пост из моей статьи в блоге Zing.

Supabase — альтернатива Firebase с открытым исходным кодом. Они предлагают множество услуг, но в целях этой статьи мы углубимся в то, как они могут выступать в качестве простого бэкэнда для наших гридов.

Начальная настройка

Что касается Supabase, нам нужно выполнить несколько шагов, прежде чем мы сможем приступить к настройке наших сеток.

1. Создание учетной записи

Сначала нам нужно создать учетную запись Supabase, к которой мы будем подключаться. Зарегистрироваться в Supabase можно по этой ссылке. После того как ваша учетная запись будет создана и подтвержден адрес электронной почты, перейдите к следующему шагу.

2. Создайте свой первый проект

Перейдите на страницу панели управления и создайте новый проект. Обязательно запишите имя проекта и пароль базы данных.

3. Запишите информацию о проекте.

Именно на этом этапе вы должны увидеть URL-адрес вашего проекта и ключ API. Оба этих параметра нам нужно будет передать ZingGrid в нашем коде позже, поэтому обязательно сохраните их в безопасном локальном файле.

4. Создайте свою первую таблицу

На боковой панели выберите раздел «Редактор таблиц». Отсюда мы можем создать нашу первую таблицу

Первый шаг — дать нашей таблице имя, здесь я буду использовать demoTable

Затем мы сможем редактировать столбцы. Для этого примера у меня будет два столбца. Один для имен и один для фамилий.

5. Добавьте образцы данных

6. Обновите настройки безопасности.

Мы временно отключим безопасность на уровне строк, чтобы мы могли легко читать и писать из нашей таблицы для целей этой демонстрации. В рабочей среде нам потребуется настроить правильные роли с аутентификацией.

⚠️ ПРИМЕЧАНИЕ: Это изменение настроек предназначено только для этой демонстрации, оно не предназначено для рабочей среды

Адаптер Supabase — REST API

ZingGrid поддерживает оба способа взаимодействия с Supabase — через REST API и через клиентский скрипт. Сначала мы рассмотрим использование REST API.

Используя исходный демонстрационный код ниже, обязательно замените следующее:

• ***ссылка*** – URL-адрес проекта, который вы записали ранее
• ***tableName*** — имя только что созданной таблицы Supabase
• ***apiKey*** — ключ API Supabase, который вы записали ранее.

При просмотре этой страницы в браузере вы должны увидеть начальные данные, которые мы заполнили!

Адаптер SupabaseJS — клиентский скрипт

Если ваше приложение использует клиентскую библиотеку Supabase JavaScript (подробнее о которой вы можете прочитать на их сайте документации), вы можете хранить свои учетные данные Supabase вне разметки, что делает ее гораздо более гибкой.

Исправляя предыдущий пример, мы сначала создаем клиентский объект Superbase (подробнее об этом в документации)

const supabaseUrl = 'https://***link***.supabase.co/';
const supabaseKey = '***apiKey***';
const supabaseClient = supabase.createClient(supabaseUrl, supabaseKey);

а затем зарегистрируйте этого клиента в ZingGrid

ZingGrid.registerClient(supabaseClient);

Наконец, мы установили атрибут адаптера в zg-data на supabaseJS, и у нас есть следующее

Работаем так же, как и раньше