Примеры использования Supabase в облаке Timeweb Cloud

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

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

Кейсы: где и как использовать Supabase

• Замените использование Google Firebase на аналогичный собственный облачный сервис, который не ограничен по ресурсам и не требует оплаты в зависимости от количества использованных запросов, таблиц и т.д.

• Используйте Supabase в качестве готового backend-сервера для ваших мобильных приложений. Быстрый доступ к данным, рассылка push-уведомлений, организация Remote Config.

• Создавайте проекты на React, Angular, Vue, NextJs, Nuxt, Svelte и т.д. Деплойте ваши скомпилированные файлы непосредственно в Supabase. Используйте базу данных в проектах с помощью взаимодействие через фреймворк или готовый API.

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

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

Возможности Supabase

• Храните данные в базе данных.

• Производите аутентификацию пользователей в приложении или на сайте (с возможностью использования сторонних провайдеров).

• Храните и раздавайте файлы из готового хранилища (в т.ч. из S3).

• Обеспечивайте быстрый обмен данными в режиме реального времени между приложением и сервером за счет технологии websocket.

• Создавайте и используйте куски кода, не встроенные в ваше приложение или сайт за счет low-code-программирования с помощью Edge Functions на TypeScript.

• Работайте с push-уведомлениями за счет использования связки Edge Functions, базы данных и доступа по API.

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

Админка Supabase

Подробная официальная документация: supabase.com/docs. Мы, в свою очередь, покажем вам основы использования и работы с системой.

Авторизация (как администратор)

Адрес админки вашего сервера: http://IP_ВАШЕГО_VPS:8090.

При входе введите логин и пароль, которые вы указали в файле .env при установке Supabase:

Далее вы увидите основное окно (dashboard) админки с перечислением фреймворков для реализации ваших проектов.

Обратите внимание на меню слева, которое содержит все основные блоки для работы:

Создание новых пользователей

Обращение к ресурсам Supabase возможно с авторизацией пользователя по логину (почте) и паролю, либо просто с использованием анонимного пользователя. Выбор зависит от концепции вашего приложения или сайта.

Если ваше будущее приложение подразумевает отдельных пользователей для получения разных данных, то пройдите в раздел «Authentication» и создайте нового пользователя для разработки.

Работа с таблицами

Создание таблиц

Перейдите в раздел «Table editor» и создайте свою первую тестовую таблицу с именем test-table (далее примеры использования Supabase будут именно для данной таблицы). 

Нажмите кнопку «Create a new table».

Заполните название и описание таблицы.

Добавьте два поля: fio и age и сохраните таблицу.

После сохранения вы сможете добавлять записи непосредственно из админки либо программным способом из своего приложения или сайта (пример смотрите ниже).

Разграничение доступа

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

Делается это верхнем меню кнопкой «Auth policies» и далее «Create policy». Давайте для примера установим возможность добавления записей в нашу таблицу для все пользователей (как для авторизованных, так и анонимных). 

В диалоге укажите всё также, как на скриншоте:

Также добавим доступ для просмотра и поиска:

Примеры для сайта (HTML + JavaScript)

Вставка данных в таблицу из формы вашего сайта

Теперь приступим к написанию простой HTML-страницы, которая демонстрирует вставку данных в таблицу из браузера.

Создайте на своем компьютере простой HTML-файл с названием js-insert.html и вставьте в него следующий код (укажите IP-адрес вашего VPS, ключи замените на ваши, сгенерированные по нашей инструкции):

Теперь запустите файл из браузера и попробуйте добавить новых людей в таблицу.

Далее зайдите в админку Supabase и проверьте результат:

Наши поздравления! Вы подключили базу данных к своему проекту. 

Поиск данных, выборка из таблицы

Создайте на своем компьютере простой HTML-файл с названием js-select.html и вставьте в него следующий код (так же, как и в предыдущем примере, укажите IP-адрес вашего VPS и ключи авторизации):

Теперь запустите файл из браузера и нажмите кнопку «Поиск данных». В зависимости от введенных полей «ФИО» и «возраст», вы получите либо полную выборку из таблицы, либо отфильтрованную.

Пример полной выборки:

Пример поиска по ФИО:

Remote config с использованием Supabase

1. В админке создайте таблицу remote_config c полями config_key и config_value.

2. Добавьте в таблицу следующие записи:

3. Добавьте разрешение для таблицы remote_config.

4. Создайте на своем компьютере простой HTML-файл с названием js-remote-config.html и вставьте в него следующий код (так же, как и в предыдущем примере, укажите IP-адрес вашего VPS и ключи авторизации):

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

Использование Storage

Мы рассмотрим простой пример использования хранилища (исключительно для демонстрации и понимания как работает механизм раздачи файлов).

Зайдите в админку Supabase в раздел «Storage» в левом меню и создайте публичный бакет с названием examples.

Затем загрузите в бакет какое-нибудь изображение. В нашем примере мы загрузили файл с логотипом.

Далее, создайте на своем компьютере HTML-файл с названием js-get-file-url.html и вставьте в него следующий код (так же, как и в предыдущем примере, укажите IP-адрес вашего VPS и ключи авторизации):

Запустите файл из браузера, и вы увидите, что приложение вывело картинку, размещенную в вашем storage.

Edge-функции (или serverless)

Далее протестируем использование популярных в современном мире serverless function, которые позволяют вам исполнять код на сервере, не создавая приложений. 

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

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

В дистрибутиве, который мы скачали с Github, уже есть готовый пример простой функции Hello (она находится в каталоге /docker_data/supabase/docker/volumes/functions/hello). На ее примере вы можете понять, как вызвать функцию из приложения и как она устроена. Ее реализация довольна проста: вы обращаетесь к функции, она отдает вам заготовленный текст. Однако внутри функции вы можете написать любой код, который вам нужен и отдавать любой ответ, который необходим.

Для примера работы с edge function создайте на своем компьютере файл js-func-hello.html и поместите туда следующий код (укажите IP-адрес вашего VPS, ключи замените на ваши, сгенерированные по инструкции):

Запустите файл из браузера и нажмите кнопку «Вызвать» для обращений к функции.

Как видите, наш простейший код благополучно обратился к облачной функции и получил ответ, который вывел для вас.

CLI-утилита

Для удобства вы можете использовать интерфейс командной строки Supabase для запуска всего стека Supabase локально с вашего компьютера.

Чтобы установить CLI и подключить ее к управлению вашим сервером, см. руководство по установке. Интерфейс командной строки Supabase предоставляет инструменты для локальной разработки вашего проекта, развертывания на платформе Supabase, управления миграцией базы данных и создания типов непосредственно из схемы вашей базы данных, управления edge functions и многими другими ресурсами Supabase.

Запустите Supabase на своем сервере

Cloud MSK 15

477 ₽/мес

Процессор

1 x 3.3 ГГц

Память

1 ГБ

NVMe

15 ГБ

Канал

1 Гбит/с

Публичный IP

Заказать VPS VDS сервер

Cloud MSK 30

657 ₽/мес

Процессор

1 x 3.3 ГГц

Память

2 ГБ

NVMe

30 ГБ

Канал

1 Гбит/с

Публичный IP

Заказать VPS

Показать еще 6 тарифов

Заключение

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

Также в следующих гайдах мы разберем примеры написания мобильных приложений, демонстрирующих использование Supabase для remoteControl, отправки сообщений пользователям, создания чатов техподдержки и много другого, а также попробуем создать полезные сервисные функции отслеживания состояния здоровья вашего сервера без использования решений типа Grafana+Prometheus. Задавайте вопросы в комментариях на тему, какие кейсы вам интересны и как их реализовать.