Что такое Supabase и как с ней работать

1 комментарий
Что такое Supabase и как с ней работать

Рассказываю о проекте Supabase – прогрессивной базе данных, способной стать полноценной альтернативой платформам от Google и других провайдеров.

Коротко о базах данных

База данных (БД) – это хранилище информации для ваших сервисов, сайтов, приложений, офлайн-бизнеса и вообще любого вида контента, которому необходима мало-мальски строгая категоризация и удобные инструменты сортировки. БД применяются практически во всех цифровых продуктах, что вы используете: список заметок в Notion – это база данных, плейлист в Apple Music – база данных, даже статьи в Комьюнити хранятся в базе данных. Поэтому, если вы разработчик (и даже фронтендер), важно уметь работать с БД хотя бы на примитивном уровне. 

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

Комьюнити теперь в Телеграм
Подпишитесь и будьте в курсе последних IT-новостей
Подписаться

Что такое Supabase?

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

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

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

Далее рассмотрим каждый аспект Supabase более подробно.

База данных

Как уже было отмечено выше, Supabase – это реляционная база данных, использующая SQL-синтаксис. SQL – это особый язык, ориентированный на взаимодействие с базами данных. Он позволяет создавать специальные команды, которые заставляют встроенные в БД механизмы либо считывать информацию, либо ее добавлять (и выполнять еще десятки действий в зависимости от сложности команды и количества надстроек). 

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

Пример таблицы в Supabase

Из особенностей БД стоит выделить адекватную поддержку веб-сокетов, что позволяет отслеживать появление новых данных в базе в реальном времени и сразу же отражать их в интерфейсе приложения. На практике подобную функциональность можно использовать при создания аналога Твиттера, где важно всегда отражать актуальную информацию. 

Также Supabase может похвастать удобным визуальным редактором таблиц. С помощью него можно добавлять в базу новую информацию, не используя программный код. Внешне это больше похоже на Microsoft Excel – вы просто добавляете столбики с типами данных, а потом прописываете в строки эти самые данные. Интерфейс очевидный и знаком всем, кто хоть раз работал с таблицами (даже не в БД).

Supabase хорошо подходит новичкам, потому что не вынуждает писать собственный API, чтобы наладить «общение между приложением и базой данных». Вместо этого разработчики предлагают собственную библиотеку уже настроенных функций для подключения к Supabase, поиску информации внутри и добавлению новых данных программным путем. Готовые функции для JavaScript уже можно посмотреть в официальной документации, а их аналоги для других языков появятся в ближайшем будущем (по словам разработчиков).

Механизм аутентификации

Важное преимущество Supabase – встроенная функция авторизации, реализованная практически на идеальном уровне. Это самый удобный сервис авторизации, объединенный с базой данных, который может найти начинающий (да и не только) разработчик. 

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

  2. Supabase поддерживает вход при помощи профилей социальных сетей и сторонних провайдеров. Например, поддерживается Sign in with Apple, вход через GitHub или профиль в Google, Twitter, Slack, Discord и множество других платформ. 

  3. Авторизация тесно связана с базой данных, поэтому у разработчика есть возможность четко настраивать политику безопасности и, не покидая Supabase, устанавливать правила для пользователей (разрешать смотреть или создавать контент, например).

  4. Функция Magic Link позволяет авторизоваться по электронной почте, не используя логин или пароль. Просто попросите пользователя ввести email, и через мгновение он получит ссылку для входа без необходимости указывать дополнительные данные. 

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

Хранилище файлов 

Supabase идет в комплекте с собственным хранилищем файлов, которое можно подключать к базе данных, чтобы отображать в интерфейсе приложения контент, не «подходящий» для хранения в таблицах. Например, можно добавить в Supabase файлы изображений, еще на этапе их загрузки в БД создавать специальные ссылки и закреплять их за статьями, комментариями, профилями в таблицах Supabase. Таким образом, можно привязывать файлы из хранилища к записям из БД, создавая бесшовную систему.

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

В ближайшем будущем разработчики Supabase хотят добавить в хранилище еще несколько ожидаемых функций: 

  • CDN-серверы, чтобы данные о файлах поступали пользователям быстрее.

  • Transformations – механизмы преобразования загружаемых изображений и документов с целью уменьшения их размера до «отгрузки» в приложение. 

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

Функции

Пока этот дополнительный сервис Supabase недоступен широким массам, но он уже обещает быть интересным, так как в теории станет аналогом функций в Netlify и других облачных платформах.

Идея «функций» – в избавлении от сервера. Вместо того, чтобы арендовать собственный VPS и настраивать бэкенд для запуска каких-либо процедур и операций, Supabase предложит вам собственные ресурсы для запуска конкретных функций. 

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

Что можно создавать при помощи Supabase?

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

Вы можете:

  • Разработать интернет-магазин, так как в основе Supabase лежит PostgreSQL, и эта платформа отлично подходит для создания массивных, сложноструктурированных баз данных.

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

  • Запустить полноценную блог-платформу с собственным бэкендом вместо WordPress и других CMS. Supabase для этого предлагает и удобную систему выдачи привилегий пользователям, и встроенное хранилище файлов.

  • Позариться на создание полноценных клонов таких популярных сервисов, как Trello или Notion. 

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

Подробнее о том, как Supabase применяется на практике, можно почитать в цикле статей по разработке блога на SvelteKit. Там мы мигрируем со SQLite на Supabase и настраиваем все ключевые компоненты системы, включая авторизацию и хранилище файлов. Если сомневаетесь, что сами справитесь с освоением сервиса, то этот цикл станет хорошим пособием.

Базовая инструкция по настройке Supabase

Начать работать с Supabase несложно. Достаточно следовать простой инструкции, описанной в официальной документации сервиса.

  1. Создаем собственную учетную запись на Supabase.com или входим при помощи аккаунта в GitHub.

  2. Сразу после этого попадаем в приложение Supabase, где нужно нажать на кнопку New Project.

  3. Указываем персональные данные, название базы, ваше местоположение (можно указать любое).

  4. В следующем окне нажимаем на кнопку Create new table и вводим названием таблицы. 

Настройки проекта в Supabase

Перед вами появится интерфейс, напоминающий Excel или Google Sheets. Здесь мы можем вручную прописать необходимую информацию. Например, если бы мы хотели создать таблицу со статьями, то сделали бы несколько колонок (нажав на New column) и назвали бы их Title и Content (название и контент статьи). А затем добавили бы строки (нажав на Insert row), чтобы создать новый объект данных внутри таблицы и заполнить его информацией в соответствии с используемыми колонками. И таким образом можно выстроить таблицу для любого вида контента. 

Кнопки создания новых колонок и строк в таблице Supabase

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

Для подключения к базе понадобится специальный ключ, прописываемый в списке переменных окружения. В зависимости от используемого ПО название переменной может отличаться. В случае со Svelte используется ключевое слово VITE, а в случае с React – REACT_APP. Нужно создать подобную переменную и привести ее значение к ключу API. Пример настройки есть здесь.

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

Останется лишь найти хостинг непосредственно для своего сайта или приложения. 

Вместо заключения

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

Hello World! Гайды и обзоры для девелоперов разных мастей.

Комментарии

Пётр Разумов 0
25 мая в 18:26
s/PostgressSQL/PostgresSQL/
Ваш баланс 10 ТК
1 ТК = 1 ₽
О том, как заработать и потратить Таймкарму, читайте в этой статье
Чтобы потратить Таймкарму, зарегистрируйтесь на нашем сайте
С помощью соцсетей
У меня нет аккаунта Зарегистрироваться
Нажимая кнопку «Зарегистрироваться», я даю согласие на обработку своих персональных данных, указанных в форме регистрации.
С помощью соцсетей
У меня уже есть аккаунт Войти
Нажимая кнопку «Зарегистрироваться», я даю согласие на обработку своих персональных данных, указанных в форме регистрации.
Инструкции по восстановлению пароля высланы на Ваш адрес электронной почты.
Пожалуйста, укажите email вашего аккаунта
Войти в Комьюнити
Регистрация в Комьюнити
Восстановление пароля