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

Больше не нужно искать работу мечты — присоединяйтесь к команде Клауда

11 сентября 2024 г.

16 минут чтения

Пакет 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 и не отвлекаться на железо.

cloud

Админка Supabase

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

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

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

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

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

Далее вы увидите основное окно (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, ключи замените на ваши, сгенерированные по нашей инструкции):

<!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>

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

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

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

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

Создайте на своем компьютере простой 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>

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

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

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

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

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

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

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

Создайте на своем компьютере простой 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>

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

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

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

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

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

Далее, создайте на своем компьютере 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.

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>

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

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

CLI-утилита

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

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

Заключение

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

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

Хотите внести свой вклад?

Участвуйте в нашей контент-программе за
вознаграждение или запросите нужную вам инструкцию