Подключение Supabase

Обзор

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

Дополнительные инструкции смотрите здесь:

Ключевые преимущества

Помимо того, что опыт разработки не требуется, есть еще три ключевых преимущества:

1. Быстрая настройка: Запустите свой бэкенд и ускорьте процесс разработки.
2. Высокая масштабируемость: Адаптируйтесь к росту числа пользователей, позволяя вашему проекту расширяться без ограничений.
3. Экономичность: Предлагает бесплатный уровень, идеально подходящий для небольших проектов и стартапов.

Подключение Supabase к Atoms

Ниже приведено краткое руководство по подключению Atoms к Supabase.

1. Запустите Интеграция Supabase в Atoms

   • Откройте Settings.

   • Выберите Connectors на левой боковой панели.

   • Найдите коннектор Supabase и нажмите Connect.

     

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

2. Пройдите аутентификацию и настройте свой проект

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

   • Выберите свою организацию из выпадающего меню.

   • Нажмите Authorize Atoms, чтобы авторизовать свою учетную запись Supabase. (Подключение завершается за считаные секунды — ручная настройка не требуется)

   • После авторизации вы сможете:

     • Выбрать существующий проект Supabase из списка, или
     • Нажать +Add New One, чтобы мгновенно добавить новую организацию. (Если вам нужна помощь, Assistant Atoms поможет вам пройти процесс подключения Supabase к Atoms.)

3. Автоматическая настройка

   • После выбора проекта Atoms автоматически подключится к вашему проекту Supabase. Он получит структуру вашей базы данных, таблицы и настройки безопасности.
   • Когда вы увидите уведомление "Supabase Connected", ваш бэкенд будет полностью настроен и готов к использованию.

Аутентификация пользователей

После создания приложения в Atoms вы можете захотеть реализовать аутентификацию пользователей. Supabase Auth упрощает добавление аутентификации и авторизации в ваше приложение. В этом процессе Atoms проведет вас через два метода: (1) Email and Password и (2) Social Logins (Google).

Email and Password

1. Подключите Supabase к Atoms

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

2. Сообщите Agent свои требования

   • Введите свои требования в чате. Например, вы можете просто использовать промпт: "Добавить аутентификацию".
   • Обычно это создает базовую страницу входа и регистрации, подключенную к системе аутентификации Supabase.

3. Создайте пользователей для тестирования

   • Используйте недавно добавленный интерфейс входа/регистрации, чтобы создать тестового пользователя.
   • Обновите страницу, чтобы убедиться, что пользовательская сессия сохраняется.
   • Либо перейдите в панель управления Supabase, откройте Authentication > Users и вручную добавьте пользователя для тестирования.

4. Разверните свое приложение

Social Logins (Google)

1. Настройте Google OAuth в проекте Supabase

   • Перейдите на страницу Authentication в панели управления Supabase.
   • Откройте подпункт Sign In/Up.
   • Найдите опцию Google и включите переключатель. (Подробные шаги по настройке Supabase см. в разделе Configuring Google OAuth in Supabase или Supabase Docs.)

2. Сообщите Agent свои требования

   • Введите свои требования в чате. Например: "Добавить аутентификацию через Google".
   • Это добавит кнопку Continue with Google на вашу страницу входа.

3. Протестируйте аутентификацию через Google

   • Перейдите на страницу входа.
   • Нажмите кнопку Continue with Google.
   • Войдите с учетной записью Google и убедитесь, что профиль пользователя корректно обновляется.
   • Завершите процесс Google OAuth, чтобы убедиться, что пользователь перенаправляется обратно в ваше приложение.

4. Разверните свое приложение в Мир приложений Atoms

Настройка Google OAuth в Supabase

1. Создайте проект Google Cloud

   • Откройте Google Cloud Console

     • Откройте Google Cloud Console и войдите в свою учетную запись Google.

   • Создайте новый проект

     • Нажмите выпадающее меню вверху и выберите New Project.
     • Введите название проекта, выберите платежный аккаунт и нажмите Create.

2. Настройте учетные данные Google OAuth

   • Настройте экран согласия

     • В строке поиска введите OAuth и откройте экран согласия OAuth.
     • Заполните название вашего приложения, адрес электронной почты службы поддержки пользователей и другие обязательные поля.
     • Выберите External или Internal, затем нажмите Create.

   • Создайте OAuth Client ID

     • Нажмите Create OAuth Client, затем выберите OAuth Client ID.
     • В поле Application Type выберите Web application.
     • В Authorized redirect URIs добавьте URL обратного вызова из панели управления Supabase.
     • Нажмите Create и сохраните сгенерированные Client ID и Client Secret.

3. Настройте Google OAuth в Supabase

   • Войдите в панель управления Supabase

     • Откройте Supabase Dashboard и войдите в свой проект.

   • Включите Google OAuth

     • Перейдите на страницу Authentication.
     • В разделе Providers найдите опцию Google и включите ее.
     • Добавьте сгенерированные ранее Client ID и Client Secret в соответствующие поля.

   • Сохраните конфигурацию

     • Нажмите Save, чтобы применить изменения.

Хранение данных

После настройки аутентификации пользователей для вашего веб-/приложения вы также можете захотеть хранить пользовательские данные.

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

1. Определите свои требования

   • Введите свои требования в чате. Например: "Пожалуйста, убедитесь, что новые записи о поездках сохраняются в базе данных".
   • Как можно яснее опишите данные, которые вы хотите хранить.
   • Atoms автоматически настроит необходимую структуру базы данных на основе вашего ввода.

2. Протестируйте функциональность в Atoms

   • Создайте примерные данные в своем приложении, например добавьте несколько "записей о поездках" через UI.
   • Сохраните данные и обновите страницу. Данные будут синхронизированы с базой данных Supabase.
   • Войдите в Supabase и проверьте, существуют ли вновь добавленные данные в базе данных.

3. Проверьте синхронизацию данных между Atoms и Supabase

   • Откройте панель управления Supabase и перейдите в Table Editor.
   • Измените существующие данные или создайте новые.
   • Изменения, внесенные в Supabase, будут синхронизироваться с вашим приложением Atoms в реальном времени.
   • Вернитесь в Atoms и проверьте, корректно ли отображаются измененные или вновь созданные данные.
   • Если данные синхронизируются успешно, значит, ваша настройка завершена.

4. Разверните свое приложение

Edge Functions

Supabase Edge Functions — это бессерверные программы бэкенда, развернутые на серверных узлах, расположенных близко к вашим пользователям. Они устраняют необходимость создавать и поддерживать традиционные серверы, позволяя запускать любую пользовательскую логику с меньшей сетевой задержкой и более быстрым временем отклика. В большинстве веб-приложений фронтенд (кнопки, формы, UI) обрабатывает базовые взаимодействия, но некоторые критически важные операции должны выполняться на бэкенде, например:

• Автоматическая отправка приветственного письма после регистрации пользователя;
• Вызов AI API для анализа или оценки контента при отправке формы;
• Интеграция сторонних платежных шлюзов и запись сведений о заказе при оформлении покупки.

Все эти операции реализуются с помощью Edge Functions.

Сценарии использования

Используя Supabase Edge Functions в Atoms, вы можете:

• Отправлять приветственные письма: автоматически отправлять новым пользователям приветственное сообщение с рекомендациями по следующим шагам после регистрации, повышая вовлеченность и улучшая адаптацию.
• Обрабатывать отправку пользовательских форм: после отправки отзыва, регистрации или комментария автоматически создавать и отправлять подтверждающее уведомление (например, "Мы получили ваш отзыв и скоро его рассмотрим"), чтобы пользователи знали, что их действие прошло успешно.
• Планировать напоминания: настраивать ежедневные или еженедельные уведомления по электронной почте или push-уведомления (о встречах, задачах или событиях), чтобы помочь пользователям управлять своим временем и оставаться продуктивными.
• Использовать сервисы ИИ: после того как пользователь введет текст, автоматически вызывать AI API, например OpenAI, для проверки грамматики или интеллектуального переписывания и возвращать пользователю оптимизированные результаты.
• Обрабатывать онлайн-платежи: когда пользователи инициируют платеж на вашей платформе электронной коммерции или сервисов, интегрироваться с такими шлюзами, как Stripe, чтобы безопасно обрабатывать транзакции и отображать понятные страницы успеха или ошибки с деталями заказа.

Хранение и управление ключами

Многим приложениям требуются ключи или учетные данные API для подключения к сторонним сервисам (например, Stripe, OpenAI). Когда Supabase подключен, Atoms предоставляет безопасный способ управления и использования этих секретов. Благодаря интеграции Atoms с Supabase всякий раз, когда функции требуется секрет, Atoms автоматически обнаруживает это и предлагает вам ввести нужное значение. Вам нужно лишь нажать кнопку Agent "Add API Key" и ввести свой ключ; затем Atoms зашифрует его и сохранит в менеджере секретов Edge Functions Supabase. Во время выполнения эти ключи безопасно внедряются в функцию, предотвращая хранение учетных данных в открытом виде.

Добавление и развертывание функций бэкенда

После подключения к Supabase сообщите Agent, что вам нужно:

• Введите свой запрос в чате. Например: "Создай веб-страницу, которая вызывает Gemini API для оценки калорийности пищи и возвращает результат, когда я загружаю фотографию еды."

• После того как Agent сгенерирует код, появятся две кнопки: Add API Key и View in Edge Function.

• Нажмите Add API Key.

• Введите свой API-ключ и нажмите Send.

• Нажмите View in Edge Function.

• Вы будете перенаправлены на страницу Supabase Edge Function.

  Примечание по безопасности: Все ключи зашифрованы и хранятся в Supabase; Atoms не может получить к ним доступ.

Часто задаваемые вопросы

Как добавить функции бэкенда Supabase в мое приложение?

Интегрируйте Supabase в свое приложение за три простых шага:

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

Поддерживает ли Supabase социальный вход?

Supabase поддерживает различные методы аутентификации, включая:

• Email and Password.
• Аутентификация без пароля: варианты, такие как одноразовые пароли (OTP) или magic links.
• Social Logins: поддержка сторонних провайдеров, таких как Google, Twitter и GitHub.
• Аутентификация по телефону.
• Единый вход (SSO): поддержка SAML SSO.
• Анонимный вход: позволяет пользователям входить анонимно.

Нужно ли мне создавать отдельный проект Supabase для моего приложения?

Вы можете либо выбрать существующий проект Supabase, либо создать новый. Каждый чат может быть подключен только к одному проекту одновременно.

После подключения к Supabase сохранится ли соединение, если я сделаю Ремикс проекта?

После Ремикс соединение будет разорвано, и его нужно будет установить заново. Кроме того, если приложение в Мир приложений, которым поделились другие пользователи, подключено к Supabase, другие пользователи не смогут сделать его Ремикс.

Могу ли я использовать одну базу данных Supabase для нескольких проектов Atoms?

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

Почему мой проект не отображается в списке организаций Supabase?

На бесплатном тарифе Supabase любой проект без активности в течение семи последовательных дней автоматически приостанавливается. В списке Organizations Atoms переключитесь на фильтр Inactive, чтобы просмотреть все ваши проекты, которые были приостановлены.

Почему я вижу \

Supabase применяет привязку OAuth один к одному между каждой организацией и учетной записью Atoms. Если организация “Test” уже была авторизована другим пользователем Atoms, любая последующая попытка привязать ее к другой учетной записи будет отклонена с этой ошибкой. Чтобы исправить это, откройте боковую панель Supabase Dashboard в разделе Settings → API → OAuth Apps, удалите существующее предоставление Atoms OAuth для этой организации, затем вернитесь в Atoms и повторно подключитесь, используя свою собственную учетную запись.