Conectar Supabase

Visão geral

O Supabase é uma plataforma de backend open-source que permite aos usuários armazenar dados e fornecer funcionalidades de backend. Você pode se conectar ao Supabase para resolver o problema de que sua equipe no Atoms armazena apenas na memória do navegador, que pode ser perdida ao atualizar ou fechar. Ao integrar o Atoms ao Supabase, você pode transformar seu site em uma aplicação totalmente funcional, com armazenamento persistente e recursos avançados.

Veja mais instruções aqui:

Principais vantagens

Além de não precisar de experiência em desenvolvimento, ele ainda oferece mais três vantagens principais:

1. Configuração Rápida: Coloque seu backend em funcionamento e acelere seu processo de desenvolvimento.
2. Altamente Escalável: Adapte-se ao crescimento dos usuários, permitindo que seu projeto se expanda sem limitações.
3. Custo-Benefício: Oferece uma camada gratuita ideal para pequenos projetos e startups.

Conectando o Supabase ao Atoms

Aqui está um guia curto para conectar o Atoms ao Supabase.

1. Inicie a Integração do Supabase no Atoms

   • Abra Configurações.

   • Selecione Conectores na barra lateral esquerda.

   • Encontre o conector do Supabase e clique em Conectar.

     

   • O Atoms apresentará uma interface de configuração de conexão que você poderá seguir.

2. Autentique e Configure Seu Projeto

   Uma janela pop-up aparecerá, solicitando que você entre na sua conta do Supabase.

   • Selecione sua organização no menu suspenso.

   • Clique em Autorizar Atoms para autorizar sua conta do Supabase. (A conexão é concluída em segundos – nenhuma configuração manual é necessária)

   • Depois de autorizado, você pode:

     • Escolher um projeto existente do Supabase na lista, ou
     • Clicar em +Adicionar Novo para adicionar uma nova organização instantaneamente. (Se precisar de orientação, o Assistente do Atoms está disponível para guiá-lo na conexão do Supabase ao Atoms.)

3. Configuração Automática

   • Assim que seu projeto for selecionado, o Atoms se conectará automaticamente ao seu projeto do Supabase. Ele coletará a estrutura do seu banco de dados, tabelas e configurações de segurança.
   • Quando você vir a notificação "Supabase Conectado", seu backend estará totalmente configurado e pronto para uso.

Autenticação de Usuário

Depois de criar seu app no Atoms, talvez você queira implementar autenticação de usuário. O Supabase Auth simplifica a adição de autenticação e autorização ao seu app. Nesse processo, o Atoms orientará você por dois métodos: (1) Email e Senha e (2) Logins Sociais (Google).

Email e Senha

1. Conecte o Supabase ao Atoms

   • Certifique-se de que você tenha uma conta válida no Supabase.
   • Clique no botão de autorização no canto superior direito da interface de chat para autorizar sua conta do Supabase.
   • Selecione o projeto do Supabase que você deseja usar.

2. Diga aos Agentes Seus Requisitos

   • Insira seus requisitos no chat. Por exemplo, você pode simplesmente usar o prompt: "Adicionar autenticação".
   • Isso normalmente gerará uma página básica de login e cadastro conectada ao sistema de autenticação do Supabase.

3. Crie Usuários para Teste

   • Use a interface de login/cadastro recém-adicionada para criar um usuário de teste.
   • Atualize a página para verificar se a sessão do usuário persiste.
   • Como alternativa, acesse seu painel do Supabase, navegue até Authentication > Users e adicione manualmente um usuário para teste.

4. Implante Seu App

Logins Sociais (Google)

1. Configure o Google OAuth no Projeto do Supabase

   • Navegue até a página Authentication no seu painel do Supabase.
   • Vá até a subpágina Sign In/Up.
   • Localize a opção Google e ative a chave para habilitá-la. (Para etapas detalhadas de configuração do Supabase, consulte Configurando o Google OAuth no Supabase ou Supabase Docs.)

2. Diga aos Agentes Seus Requisitos

   • Insira seus requisitos no chat. Por exemplo: "Adicionar autenticação com Google".
   • Isso adicionará um botão Continuar com Google à sua página de login.

3. Teste a Autenticação com Google

   • Vá para a página de login.
   • Clique no botão Continuar com Google.
   • Faça login com uma conta Google e verifique se o perfil do usuário foi atualizado corretamente.
   • Conclua o fluxo do Google OAuth para garantir que o usuário seja redirecionado de volta para seu app.

4. Implante Seu App no Mundo de Apps do Atoms

Configurando o Google OAuth no Supabase

1. Crie um Projeto no Google Cloud

   • Acesse o Google Cloud Console

     • Abra o Google Cloud Console e faça login na sua conta Google.

   • Crie um Novo Projeto

     • Clique no menu suspenso no topo e selecione Novo Projeto.
     • Insira um nome para o projeto, selecione uma conta de faturamento e clique em Criar.

2. Configure as Credenciais do Google OAuth

   • Configure a Tela de Consentimento

     • Na barra de pesquisa, digite OAuth e abra a tela de consentimento do OAuth.
     • Preencha o nome do seu app, o email de suporte ao usuário e outros campos obrigatórios.
     • Selecione Externo ou Interno e, em seguida, clique em Criar.

   • Crie um ID de Cliente OAuth

     • Clique em Create OAuth Client e, em seguida, selecione OAuth Client ID.
     • Em Application Type, escolha Web application.
     • Em Authorized redirect URIs, adicione a URL de callback do painel do Supabase.
     • Clique em Create e anote o Client ID e o Client Secret gerados.

3. Configure o Google OAuth no Supabase

   • Faça login no Painel do Supabase

     • Abra o Painel do Supabase e faça login no seu projeto.

   • Habilite o Google OAuth

     • Navegue até a página Authentication.
     • Na seção Providers, encontre a opção Google e habilite-a.
     • Adicione o Client ID e o Client Secret gerados anteriormente aos respectivos campos.

   • Salvar Configuração

     • Clique em Salvar para aplicar as alterações.

Armazenamento de Dados

Você também pode querer armazenar dados do usuário após configurar a autenticação de usuário para seu web/app.

Depois de se conectar ao Supabase, basta dizer ao Atoms quais dados você quer salvar no banco de dados. Os agentes configurarão automaticamente as tabelas do banco de dados e as integrarão diretamente à sua UI.

1. Defina Seus Requisitos

   • Insira seus requisitos no chat. Por exemplo: "Por favor, garanta que novos registros de viagem sejam salvos no banco de dados".
   • Descreva os dados que você deseja armazenar da forma mais clara possível.
   • O Atoms configurará automaticamente a estrutura de banco de dados necessária com base na sua entrada.

2. Teste a Funcionalidade no Atoms

   • Crie dados de exemplo no seu app, como adicionar alguns "registros de viagem" pela UI.
   • Salve os dados e atualize a página. Os dados serão sincronizados com o banco de dados do Supabase.
   • Faça login no Supabase e verifique se os dados recém-adicionados existem no banco de dados.

3. Valide a Sincronização de Dados Entre o Atoms e o Supabase

   • Abra o painel do Supabase e navegue até o Editor de Tabelas.
   • Modifique dados existentes ou crie novos dados.
   • As alterações feitas no Supabase serão sincronizadas em tempo real com seu app do Atoms.
   • Volte ao Atoms e verifique se os dados modificados ou recém-criados são exibidos corretamente.
   • Se os dados forem sincronizados com sucesso, então sua configuração estará concluída.

4. Implante Seu App

Edge Functions

As Supabase Edge Functions são programas de backend serverless implantados em nós de servidor próximos aos seus usuários. Elas eliminam a necessidade de criar e manter servidores tradicionais, permitindo que você execute qualquer lógica personalizada com menor latência de rede e tempos de resposta mais rápidos. Na maioria das aplicações web, o frontend (botões, formulários, UI) lida com interações básicas, mas algumas operações críticas precisam ser executadas no backend, como:

• Enviar automaticamente um email de boas-vindas após o cadastro do usuário;
• Invocar APIs de IA para analisar ou pontuar conteúdo ao enviar um formulário;
• Integrar gateways de pagamento de terceiros e registrar detalhes do pedido durante o checkout.

Todas essas operações são implementadas por meio de Edge Functions.

Casos de Uso

Usando Supabase Edge Functions no Atoms, você pode:

• Enviar emails de boas-vindas: Enviar automaticamente para novos usuários uma mensagem de boas-vindas com orientações sobre os próximos passos após o cadastro, aumentando o engajamento e a experiência de onboarding.
• Processar envios de formulários de usuários: Ao enviar feedback, cadastro ou comentário, gerar e enviar automaticamente uma notificação de confirmação (por exemplo, "Recebemos seu feedback e vamos analisá-lo em breve") para que os usuários saibam que a ação foi concluída com sucesso.
• Agendar lembretes: Definir notificações diárias ou semanais por email ou push (para reuniões, tarefas ou eventos) para ajudar os usuários a gerenciar seu tempo e manter a produtividade.
• Aproveitar serviços de IA: Depois que o usuário inserir texto, chamar automaticamente APIs de IA como OpenAI para verificação gramatical ou reescrita inteligente e retornar os resultados otimizados ao usuário.
• Processar pagamentos online: Quando os usuários iniciarem um pagamento na sua plataforma de e-commerce ou serviços, integrar com gateways como Stripe para processar transações com segurança e exibir páginas claras de sucesso ou falha com os detalhes do pedido.

Gerenciamento e Armazenamento de Chaves

Muitas aplicações exigem chaves ou credenciais de API para se conectar a serviços de terceiros (por exemplo, Stripe, OpenAI). Quando o Supabase está conectado, o Atoms fornece uma forma segura de gerenciar e usar esses segredos. Por meio da integração do Atoms com o Supabase, sempre que uma função precisar de um segredo, o Atoms o detectará automaticamente e solicitará que você insira o valor necessário. Você só precisa clicar no botão "Add API Key" do Agente e inserir sua chave; o Atoms então a criptografa e a armazena no Gerenciador de Segredos das Edge Functions do Supabase. Em tempo de execução, essas chaves são injetadas com segurança na função, evitando que as credenciais sejam armazenadas em texto simples.

Adicionar e Implantar Funções de Backend

Depois de se conectar ao Supabase, diga ao Agente o que você precisa:

• Digite sua solicitação no chat. Por exemplo: "Gere uma página web que chame a API Gemini para estimar calorias de alimentos e retorne o resultado quando eu enviar uma foto de comida."

• Quando o Agente tiver gerado o código, dois botões aparecerão: Add API Key e View in Edge Function.

• Clique em Add API Key.

• Insira sua chave de API e clique em Send.

• Clique em View in Edge Function.

• Você será redirecionado para a página Supabase Edge Function.

  Nota de segurança: Todas as chaves são criptografadas e armazenadas no Supabase; o Atoms não pode acessá-las.

Perguntas frequentes

Como adiciono recursos de backend do Supabase à minha aplicação?

Integre o Supabase à sua aplicação em três etapas simples:

• Clique no botão de autorização no canto superior direito da interface de chat para autorizar sua conta do Supabase.
• Selecione e vincule o projeto do Supabase que você deseja usar.
• Compartilhe seus requisitos no chat, e os agentes desenvolverão recursos com base no seu projeto do Supabase conectado.

O Supabase oferece suporte a logins sociais?

O Supabase oferece suporte a vários métodos de autenticação, incluindo:

• Email e Senha.
• Autenticação sem senha: opções como senhas de uso único (OTP) ou links mágicos.
• Logins Sociais: suporte a provedores de terceiros como Google, Twitter e GitHub.
• Autenticação por telefone.
• Single Sign-On (SSO): suporte a SAML SSO.
• Login anônimo: permite que os usuários façam login anonimamente.

Preciso criar um projeto separado no Supabase para meu app?

Você pode selecionar um projeto existente do Supabase ou criar um novo. Cada chat pode se conectar a apenas um projeto por vez.

Depois de me conectar ao Supabase, a conexão permanecerá se eu fizer Remix do meu projeto?

A conexão será desconectada após o Remix e precisará ser restabelecida. Além disso, se um app no Mundo de Apps compartilhado por outros usuários estiver conectado ao Supabase, outros usuários não poderão fazer Remix dele.

Posso usar um banco de dados do Supabase para vários projetos do Atoms?

Sim, você pode usar um banco de dados do Supabase para vários projetos do Atoms. No entanto, você precisa gerenciar as conexões e configurações com cuidado.

Por que meu projeto não está aparecendo nas organizações do Supabase?

No plano gratuito do Supabase, qualquer projeto sem atividade por sete dias consecutivos é pausado automaticamente. Na lista de Organizations do Atoms, alterne para o filtro Inactive para ver qualquer um dos seus projetos que tenha sido pausado.

Por que vejo \

O Supabase impõe um vínculo OAuth um-para-um entre cada organização e uma conta do Atoms. Se a organização “Test” já tiver sido autorizada por outro usuário do Atoms, qualquer tentativa posterior de vinculá-la a uma conta diferente será rejeitada com esse erro. Para corrigir isso, abra a barra lateral do Painel do Supabase em Settings → API → OAuth Apps, exclua a concessão OAuth existente do Atoms para essa organização e, em seguida, volte ao Atoms e reconecte usando sua própria conta.