Как работает Supabase  —  альтернатива облачной платформе Firebase



Книга Как работает Supabase  —  альтернатива облачной платформе Firebase

Меня редко впечатляет новая технология. Думаю, это проявление так называемой “усталости от JS”, когда после многих лет работы в отрасли выбор “скучной технологии” становится предпочтительным в большинстве случаев.


Но время от времени появляются инструменты, которые нельзя игнорировать. Одним из них является Supabase.


Supabase  —  это инструмент с открытым исходным кодом, альтернатива облачной платформе Firebase, уже зарекомендовавшей себя как решение для создания масштабируемых приложений. Но у Firebase, разработанной Google, есть два недостатка: она (довольно) дорогая и не гарантирует того, что ваши данные будут полностью принадлежать вам.


Supabase решает обе эти проблемы и предлагает широкий спектр возможностей.



  • База данных. Supabase создана на основе PostgreSQL, которая является мощной и масштабируемой реляционной базой данных.

  • Аутентификация. Простая реализация аутентификации с поддержкой электронной почты, входа без пароля, доступа из социальных сетей и т. д.

  • Хранение. Безопасное и надежное хранилище объектов для ваших файлов  —  от изображений и видео до документов и архивов. Используется глобальная сеть CDN для снижения задержек и повышения производительности в интересах пользователей.

  • Синхронизация данных в режиме реального времени. Supabase обеспечивает синхронизацию данных на всех устройствах пользователей в режиме реального времени с помощью веб-хуков без каких-либо усилий с вашей стороны.

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

  • Встроенная система безопасности. Supabase в значительной степени опирается на ограничение доступа на уровне базы данных с помощью определенных правил. Ограничение доступа на уровне базы данных  —  наиболее целесообразное решение в плане обеспечения безопасности данных.


Еще одним важным преимуществом является отличная документация. Кроме того, есть множество качественных и понятных руководств и ресурсов для старта, а также множество пошаговых туториалов, помогающих понять, как все работает.


Один из примеров  —  создание списка дел с использованием различных фронтенд-фреймворков. Посмотрим, как это будет выглядеть в сравнении с построением списка дел с помощью Express и Mongo.


В приложении будет две таблицы: Lists (списки) и Tasks (задачи).



Таблица Tasks имеет id, title, опциональный description и флаг, указывающий на выполненный status. Tasks может входить в таблицу Lists, которая также имеет id, title и опциональный description.


Настройка Supabase


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



После этого предоставляется публичный (анонимный) ключ, который понадобится для подключения клиента к Supabase. К этому вопросу вернемся позже.


Вместе с созданием нового проекта вы получите много полезного. Но сначала разберемся с созданием таблиц.


Настройка таблиц


Для создания таблиц есть две опции Table Editor (редактор таблиц) и SQL Editor (редактор SQL). В демонстрационных целях создадим по одной таблице с помощью каждого варианта, начиная с таблицы Lists. Перейдем в Table Editor и создадим новую таблицу с помощью пользовательского интерфейса.


Заполните следующую информацию.


Name (имя): lists.


Row Level Security, RLS (безопасность на уровне строк): Disabled (отключено)  —  это позволит всем желающим редактировать или удалять данные в этой таблице, что, очевидно, небезопасно. Позже рассмотрим этот момент подробнее.


Columns (столбцы):




Убедитесь, что title имеет неактивное значение null (отключается в значке-шестеренке справа).



Таблица Lists готова к работе!


Приведенная выше форма выполнит SQL-запрос, который обновит postgres новой таблицей. Пока таблица пуста, воспользуемся пользовательским интерфейсом для вставки новой строки.



Остается только вставить title, и новая строка будет добавлена. Можно увидеть изменения на предыдущем экране.



То же самое можно сделать и для таблицы Tasks, но попробуем разобраться в том, как все работает, воспользовавшись SQL Editor и набрав запрос самостоятельно.


create table tasks (
id bigint generated by default as identity primary key,
list_id bigint references tasks (id) on delete cascade not null,
title text not null,
description text,
completed boolean default false,
created_at timestamp with time zone default timezone('utc'::text, now()) not null
);

Успешно! Не возвращено ни одной строки.


Мы создали таблицу Tasks с автогенерируемым id в качестве первичного ключа, внешним ключом list_id, ссылающимся на id таблицы Lists, обязательными столбцами title и description, а также столбцами completed и created_at.


Мы можем просмотреть таблицу из Table Editor и вставить новую строку, как делали ранее.



Схему базы данных можно просмотреть в Database > Schema Visualizer.



Получение данных от клиента


Для каждого популярного языка и фреймворка разработаны документация и примеры приложений. Выберем JavaScript  —  лучший язык по сравнению с Flutter, Python, C#, Swift и Kotlin. Особенно для тех, кто, как и я, знает только JavaScript. Впрочем, вы можете воспользоваться руководством для другого предпочитаемого вами языка здесь.


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


import { createClient } from '@supabase/supabase-js'

// Создание единого клиента Supabase для взаимодействия с базой данных
const supabase = createClient('https://xyzcompany.supabase.co', 'public-anon-key')

Это все, что нужно для выполнения запросов к базе данных.


const { data, error } = await supabase
.from('lists')
.select()

console.log('data:', data);
console.log('error:', error);

Ответ должен быть таким:


data: [
{
id: 2,
title: 'Learning Supabase',
description: null,
created_at: '2023-10-20T11:57:42.440918+00:00'
}
]
error: null

Вставка данных:


const { error } = await supabase
.from('tasks')
.insert({ title: 'Test the API', list_id: 2})

Изменения будут отражены при получении задачи или при обращении к Table Editor на панели управления Supabase.


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


Код примеров ищите на GitHub. Только не забудьте добавить в файл .env свои учетные данные.


А если использование vanilla-js в 2023 году  —  не ваш конек, можете найти официальный пример приложения todo на многих языках, включая Vue, React, Angular и Svelte.


Что такое безопасность на уровне строк


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


Безопасность на уровне строк  —  это функция, позволяющая определять, какие пользователи имеют доступ к тем или иным строкам в таблице базы данных. Это осуществляется путем установления правил, ограничивающих доступ к определенным строкам таблицы. Правила могут быть основаны на различных факторах, таких как роль пользователя, его местоположение или данные в самой строке.


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


Каждое правило привязано к таблице и выполняется при каждом обращении к таблице. Можно считать, что эти правила дополняют оператор WHERE при каждом запросе.


Например, такое правило:


create policy "Individuals can view their own task lists."
on lists for select
using ( auth.uid() = owner_id );

Переводится так:


select *
from lists
where auth.uid() = todos.owner_id; -- Неявно добавлено правило.

Можно создать новое правило с помощью приведенного выше SQL в SQL Editor или воспользоваться более удобным редактором в Table Editor.


Подробнее о правилах и ограничениях на уровне строк

Дополнительные возможности


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


Следующие шаги


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


Следуйте девизу Supabase: “Сделать за выходные. Масштабировать до миллионов”.



70   0  

Comments

    Ничего не найдено.