Supabase — это бэкэнд-как-сервис (BaaS) с открытым исходным кодом со многими функциями, такими как база данных, аутентификация, пограничные функции и т. д. Supabase создана с целью стать альтернативой другому популярному бэкэнд-как-сервису, Firebase. который создан Google. Supabase предоставляет бесплатный план для своих услуг, которого более чем достаточно для небольших и хобби-проектов.
Что такое бэкенд как услуга (BaaS)?
Backend-as-a-service — это веб-служба, созданная какой-либо компанией для предоставления пользователю (обычно разработчику) используемой серверной службы. Обычно Baas содержит множество базовых функций бэкэнда, таких как аутентификация по базе данных и дан. Пользователь (разработчик) может получить к нему доступ через автоматически созданный им REST API или через языковую библиотеку, предоставленную компанией. Эта услуга позволяет разработчику очень легко создать внутренний сервер без фактических знаний о внутреннем кодировании. Настройка также выполняется довольно быстро, поэтому она подходит для создания прототипа сервера тестового проекта. Для разработчика React JS BaaS очень полезен, потому что у вас может быть внутренний сервер для сохранения и изменения данных без их фактического создания.
Супабаза JS
Supabase также предоставляет библиотеку для разработчиков Javascript под названием Supabase JS. Эта библиотека состоит из множества функций для функций Supabase, таких как база данных, аутентификация, хранилище и т. д. Мы можем использовать клиентскую библиотеку SupabaseJS для доступа к этим функциям. Эту библиотеку можно установить через менеджер пакетов (например, npm или yarn) или через CDN. В этой серии руководств я буду использовать SupabaseJS вместе с React JS.
С React JS мы можем установить SupabaseJS через диспетчер пакетов и сделать так, чтобы наше приложение получало доступ к внутреннему серверу и его функциям через него.
Настройка проекта
Для создания бэкенд-сервера Supabase необходимо зайти на его официальный сайт и создать там учетную запись (https://supabase.com).
Затем на странице панели инструментов вы можете создать новый проект, нажав кнопку New Project и выбрав свою организацию (в данном случае личную).
После этого вы должны заполнить форму с информацией о проекте, такой как имя проекта, пароль базы данных, регион и т. д. Когда вы закончите заполнение, вы можете нажать кнопку Create new project.
Наконец, ваш сервер проекта будет создан, и он покажет вам ключи API проекта и URL-адрес проекта. Эта информация понадобится вам, чтобы использовать ее позже с клиентской библиотекой SupabaseJS. Не волнуйтесь, вы сможете снова просмотреть эту информацию в настройках вашего проекта позже.
Монтаж
В этом руководстве мы установим SupabaseJS в приложении React JS через диспетчер пакетов с помощью этой команды:
npm install @supabase/supabase-js
После этого мы можем начать использовать клиентскую библиотеку SupabaseJS в нашем проекте. Но перед этим нам нужно сначала инициализировать его, используя метод createClient(), предоставляемый SupabaseJS. Мы должны передать этому методу URL-адрес нашего проекта надбазы и ключ API проекта надбазы.
Для лучшей практики мы можем создать новый файл javascript для инициализации клиента SupabaseJS в переменной для более удобного использования в дальнейшем. Это также делает код более чистым и пригодным для повторного использования. URL-адрес проекта и ключ API являются конфиденциальными, поэтому они должны быть секретными. Мы можем использовать переменную среды, чтобы скрыть ее от публики.
Наконец, мы можем экспортировать переменную superbase, чтобы позже использовать ее в других компонентах.
В этом случае я буду использовать Typescript для этого примера, но вы все равно можете использовать Javascript:
Это все для введения, вы можете просмотреть дополнительную информацию в официальной документации SupabaseJS (https://supabase.com/docs). Скоро я опубликую еще одно руководство по SupabaseJS.
Спасибо, что прочитали это руководство, если вам нравится и вы хотите больше этого контента, вы можете подписаться на меня на Medium.
