Top.Mail.Ru
Публичное облако на базе VMware с управлением через vCloud Director
Вход / Регистрация

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

Сергей Дурманов
Сергей Дурманов
Технический писатель
11 сентября 2024 г.
489
16 минут чтения
Средний рейтинг статьи: 5

Пакет 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:

  
USERNAME: supabase PASSWORD: ВАШ_ПАРОЛЬ_ДЛЯ_АДМИНКИ

Image18

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

Image16

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

Image13

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

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

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

Image7

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

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

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

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

Image12

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

Image17

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

Image14

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

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

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

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

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

Image2

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

Image6

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

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

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

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

  
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Вставка данных в Supabase</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script> <style> .d-none { display: none; } .messages { font-family: 'Courier New', monospace; color: green; } .red { color: red; } </style> </head> <body> <div class="container mt-5"> <h1>Пример вставки данных в таблицу <code>test-table</code></h1> <form> <div class="mb-3"> <label for="fio" class="form-label">ФИО:</label> <input type="text" id="fio" name="fio" class="form-control" placeholder="Введите ФИО"> </div> <div class="mb-3"> <label for="age" class="form-label">Возраст:</label> <input type="number" id="age" name="age" class="form-control" placeholder="Введите возраст"> </div> <div class="mb-3"> <button type="button" class="btn btn-primary" onclick="addData()">Добавить</button> </div> </form> <div class="messages d-none mt-3"></div> </div> <script> // const { createClient } = supabase; const supabaseUrl = 'http://IP_ВАШЕГО_VPS:8090'; const supabaseAnonKey = 'ВАШ_КЛЮЧ_ДЛЯ_ANON'; const supabase_ = supabase.createClient(supabaseUrl, supabaseAnonKey); async function addData() { const fio = document.getElementById('fio').value; const age = document.getElementById('age').value; const msg = document.querySelector('.messages'); const { data1, error1 } = await supabase_ .from('test-table') .select('fio'); const { data, error } = await supabase_ .from('test-table') .insert([ { fio: fio, age: age } ]); msg.classList.remove('d-none'); // Показываем div if (error) { console.error('Ошибка при вставке:', error); msg.textContent = 'Ошибка при добавлении данных: ' + error.message; msg.classList.add('red'); } else { console.log('Данные успешно добавлены:', data); msg.textContent = 'Данные успешно добавлены!'; msg.classList.remove('red'); } setTimeout(() => { msg.classList.add('d-none') }, 3000) } </script> </body> </html>

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

Image4

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

Image5

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

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

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

  
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Пример выборки данных (поиск) в Supabase</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script> <style> .d-none { display: none; } .messages { font-family: 'Courier New', monospace; color: green; } .red { color: red; } </style> </head> <body> <div class="container mt-5"> <h1>Пример вставки и выборки данных из таблицы <code>test-table</code></h1> <form> <div class="mb-3"> <label for="fio" class="form-label">ФИО:</label> <input type="text" id="fio" name="fio" class="form-control" placeholder="Введите ФИО"> </div> <div class="mb-3"> <label for="age" class="form-label">Возраст:</label> <input type="number" id="age" name="age" class="form-control" placeholder="Введите возраст"> </div> <div class="mb-3"> <button type="button" class="btn btn-secondary" onclick="fetchData()">Поиск данных</button> </div> </form> <div class="messages d-none mt-3"></div> </div> <script> const supabaseUrl = 'http://IP_ВАШЕГО_VPS:8090'; const supabaseAnonKey = 'ВАШ_КЛЮЧ_ДЛЯ_ANON'; const supabase_ = supabase.createClient(supabaseUrl, supabaseAnonKey); async function fetchData() { const fio = document.querySelector('#fio').value.trim(); const age = document.querySelector('#age').value; const msg = document.querySelector('.messages'); let query = supabase_.from('test-table').select('fio, age'); // Добавляем условия, если поля заполнены if (fio) { query = query.ilike('fio', `%${fio}%`); } if (age) { query = query.eq('age', age); } const { data, error } = await query; msg.classList.remove('d-none'); if (error) { console.error('Ошибка при выборке:', error); msg.textContent = 'Ошибка при выборке данных: ' + error.message; msg.classList.add('red'); } else { console.log('Данные успешно получены:', data); if (data.length > 0) { msg.innerHTML = 'Найдены записи: <br>'; data.forEach(el => { msg.innerHTML += JSON.stringify(el) + '<br>'; }) } else { msg.textContent = 'Нет записей, соответствующих критериям поиска.'; } msg.classList.remove('red'); } setTimeout(() => { msg.classList.add('d-none') }, 15000); } </script> </body> </html>

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

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

Image3

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

Image15

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

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

Image1

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

Image11

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

Image19

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

  
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Пример Supabase Remote Config</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script> </head> <body> <div class="container mt-5"> <h1>Пример Supabase Remote Config</h1> <div id="config-values"></div> </div> <script> const supabaseUrl = 'http://IP_ВАШЕГО_VPS:8090'; const supabaseAnonKey = 'ВАШ_КЛЮЧ_ДЛЯ_ANON'; const supabase_ = supabase.createClient(supabaseUrl, supabaseAnonKey); async function fetchRemoteConfig() { const configDiv = document.getElementById('config-values'); const {data, error} = await supabase_ .from('remote_config') .select('config_key, config_value'); console.log('er', error) if (error) { configDiv.innerHTML = `Ошибка: <span style="color: red;">${error.message}</span>`; return; } configDiv.innerHTML = '<h2>Значения Remote Config</h2>'; data.forEach(config => { configDiv.innerHTML += `<p><strong>${config.config_key}:</strong> ${config.config_value}</p>`; }); // Пример использования const featureToggle = data.find(item => item.config_key === 'feature_toggle').config_value; if (featureToggle === 'true') { configDiv.innerHTML += '<p style="color: green;">Фичи включены</p>'; } else { configDiv.innerHTML += '<p style="color: red;">Фичи выключены</p>'; } } fetchRemoteConfig(); </script> </body> </html>

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

Image20

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

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

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

Image10

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

Image8

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

  
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Пример получения постоянной ссылки на файл в Supabase</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script> </head> <body> <div class="container mt-5"> <h1>Пример получения постоянной ссылки на файл в Supabase</h1> <div id="file-link" class="mt-3"></div> </div> <script> const supabaseUrl = 'http://IP_ВАШЕГО_VPS:8090'; const supabaseAnonKey = 'ВАШ_КЛЮЧ_ДЛЯ_ANON'; const supabase_ = supabase.createClient(supabaseUrl, supabaseAnonKey); async function getPublicUrl() { const bucketName = 'examples'; // Название вашего бакета const filePath = 'logo-1.jpg'; // Путь к файлу в бакете // Получаем публичный URL const { data, error } = supabase_ .storage .from(bucketName) .getPublicUrl(filePath); if (error) { document.getElementById('file-link').innerHTML = `<p style="color: red;">Ошибка: ${error.message}</p>`; return; } const publicUrl = data.publicUrl; const msg = document.getElementById('file-link') msg.innerHTML = `<a href="${publicUrl}" target="_blank">Открыть файл</a><br><br>`; msg.innerHTML += `Путь к файлу: ${publicUrl}<br><br>` msg.innerHTML += `<img src="${publicUrl}" style="padding: 30px 0; max-width: 50%; border: 1px solid silver;" />` } getPublicUrl(); </script> </body> </html>

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

Image9

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

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

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

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

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

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

  
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Вставка данных в Supabase</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script> <style> .d-none { display: none; } .messages { font-family: 'Courier New', monospace; color: green; } .red { color: red; } </style> </head> <body> <div class="container mt-5"> <h1>Пример вызова облачной (serverless) edge функции <code>hello</code></h1> <form> <div class="mb-3"> <button type="button" class="btn btn-primary" onclick="callFunction()">Вызвать</button> </div> </form> <div class="messages mt-3"></div> </div> <script> const supabaseUrl = 'http://IP_ВАШЕГО_VPS:8090'; const supabaseAnonKey = 'ВАШ_КЛЮЧ_ДЛЯ_ANON'; const supabase_ = supabase.createClient(supabaseUrl, supabaseAnonKey); const callFunction = async () => { const msg = document.querySelector('.messages'); msg.innerHTML = '<b>Запрос</b>: Запрашиваем функцию <b>Hello</b><br>'; const response = await fetch(`${supabaseUrl}/functions/v1/hello`); const data = await response.json(); msg.innerHTML += `<b>Ответ</b>: ${data}`; }; </script> </body> </html>

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

Image21

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

CLI-утилита

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

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

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

  • Premium 3.3 ГГц
  • Dedicated CPU
Москва
Cloud MSK 15

300 ₽/мес

Процессор
1 x 3.3 ГГц
Память
1 ГБ
NVMe
15 ГБ
Канал
1 Гбит/с
Публичный IP
Cloud MSK 30

550 ₽/мес

Процессор
1 x 3.3 ГГц
Память
2 ГБ
NVMe
30 ГБ
Канал
1 Гбит/с
Публичный IP

Заключение

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

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

Хотите внести свой вклад?
Участвуйте в нашей контент-программе за
вознаграждение или запросите нужную вам инструкцию
img-server
11 сентября 2024 г.
489
16 минут чтения
Средний рейтинг статьи: 5
  • Ваш комментарий
  • Предпросмотр
Пока нет комментариев
Произошла неизвестная ошибка
Мы используем на сайте куки.
В интернете без них никак