Como integrar Supabase à web app na Hostinger Horizons

A Hostinger Horizons permite que você desenvolva uma aplicação web totalmente funcional sem escrever nenhum código. Basta descrever o seu projeto, e essa plataforma de IA cuidará do resto.

E para expandir o leque de possibilidades, a Hostinger Horizons se integra com o serviço de banco de dados Supabase. Isso significa que você pode configurar facilmente uma infraestrutura de backend para sua aplicação web, permitindo o processamento e armazenamento de dados dinâmicos.

Neste tutorial, você vai aprender como integrar sua aplicação web com um banco de dados Supabase na Hostinger Horizons. Também vamos ver alguns erros comuns e suas soluções.

Por que eu preciso do Supabase?

Supabase é um provedor de serviço de banco de dados que permite configurar facilmente um serviço de back-end para o seu aplicativo. Ele é essencial se você deseja adicionar recursos avançados ao seu aplicativo web, como personalização de conteúdo, colaboração, compartilhamento de espaço de trabalho e alertas.

Quando integrado à Hostinger Horizons, o Supabase amplia as capacidades do seu aplicativo, indo além do que qualquer plataforma pode oferecer sozinha.

Se você está desenvolvendo uma aplicação web simples e estática que não precisa de entrada do usuário, usar a Hostinger Horizons por si só é suficiente. Este criador de aplicativos com IA oferece uma solução de desenvolvimento sem código, ambiente de hospedagem e armazenamento de dados estáticos prontos para uso. No entanto, ao conectá-la ao Supabase, você pode transformar seu aplicativo estático em uma experiência dinâmica e interativa.

Aqui estão alguns casos de uso comuns do Supabase para aplicações web:

• Armazenamento de dados dinâmico – um banco de dados permite que sua aplicação web receba e armazene as informações do usuário. Isso é crucial para funcionalidades básicas como criar uma conta de usuário e mostrar conteúdo personalizado.
• Autenticação – A Supabase oferece funcionalidade de autenticação pré-configurada para garantir que apenas usuários legítimos usem seu aplicativo. Você também pode ativar o login social integrando provedores suportados como Google e GitHub.
• Processamento de dados em tempo real – O Supabase Realtime oferece capacidades instantâneas de sincronização e processamento de dados. Isso permite que você adicione recursos como colaboração ou bate-papo ao seu aplicativo. 
• Integração de API – uma API permite que você conecte vários serviços de terceiros com seu aplicativo para habilitar funcionalidades adicionais. Por exemplo, você pode conectar o LLM do OpenAI para incluir um recurso alimentado por IA. 

Integre o Supabase com a Hostinger Horizons

Integrar o Supabase com a Hostinger Horizons é simples, e você pode fazer isso diretamente do painel da plataforma.

Antes de prosseguir, certifique-se de que você construiu completamente sua aplicação na Hostinger Horizons e incluiu todos os recursos necessários. Dessa forma, a plataforma de IA entenderá quais tabelas de banco de dados precisa adicionar.

Por exemplo, use o seguinte comando para pedir à Hostinger Horizons para criar uma página de login e cadastro de usuário:

Crie uma página de login que solicite aos usuários seu endereço de e-mail e senha. Nessa página, adicione um link que redirecione os usuários para a página de cadastro caso eles não tenham uma conta. Configure o método de autenticação, que será habilitado usando o Supabase mais tarde.

Assim que seu aplicativo estiver pronto, é hora de criar uma conta no Supabase e configurar o banco de dados. Aqui está como fazer isso:

• Abra a página de inscrição do Supabase (EN).
• Insira seu e-mail e crie uma senha. Depois, clique em Inscrever-se (Sign Up).

• Vá até sua caixa de entrada e abra o e-mail de confirmação.  Clique em Confirmar endereço de e-mail.
• Você será direcionada à página de configuração da sua organização no Supabase. Escolha um nome, selecione o tipo de organização e escolha um plano (para começar, o plano gratuito é o ideal). 
• Clique em Criar organização (Create organization) para confirmar. 

• Agora, você será redirecionada para a página de criação do projeto. Complete as informações necessárias e clique em Criar novo projeto (Create new project).

Após configurar seu banco de dados no Supabase, vamos continuar com a integração. Siga os passos abaixo:

• Abra o painel de controle da Hostinger Horizons e clique em Supabase → Adicionar Organização.

• Uma janela pop-up aparecerá. Faça login na sua conta do Supabase. 
• O Supabase pedirá para autorizar a solicitação de acesso à API. Clique em Autorizar Hostinger Horizons. 

• Retorne ao painel da Hostinger Horizons e clique em Supabase → Sua organização. 
• Escolha o projeto que deseja integrar com sua aplicação e clique em Conectar.
• Uma nova janela pop-up vai aparecer. Clique em Conectar novamente para confirmar. 

Pronto! Agora, ao abrir o menu Supabase na Hostinger Horizons, o status do seu projeto deve aparecer como Conectado.

Dependendo da sua aplicação, a Hostinger Horizons pode pedir para você rodar uma consulta SQL no Supabase para criar as tabelas necessárias.

Se isso acontecer, faça login no Supabase, acesse o projeto conectado à Hostinger Horizons, vá para a barra lateral e clique em Editor SQL. Cole o comando SQL e clique em Executar.

Testando sua integração com o Supabase

Agora que você conectou seu banco de dados Supabase, é hora de testar a funcionalidade do seu aplicativo web para garantir que a integração esteja funcionando corretamente. A maneira mais fácil de fazer isso é usar o aplicativo como um usuário comum faria.

Esse processo pode variar bastante dependendo das funcionalidades e do propósito da sua aplicação. No entanto, você pode verificar todos os recursos diretamente do menu de visualização da Hostinger Horizons, que fica na barra lateral direita.

Neste tutorial, vamos testar como o nosso aplicativo de anotações, que criamos anteriormente, lida com recursos como cadastro, login e alertas em tempo real. Vamos criar uma conta, fazer login e adicionar uma nota sensível ao tempo.

Após criar a conta e fazer o login, criamos uma nota e configuramos um alerta com base no horário. Tudo funcionou conforme o esperado: As notas criadas anteriormente continuam acessíveis ao fazer login novamente. O sistema enviou uma notificação de alerta, conforme programado.

Vale ressaltar que, como a Hostinger Horizons ainda está em fase inicial, a integração pode não funcionar perfeitamente na sua primeira tentativa. É possível que você precise corrigir alguns recursos e fazer ajustes em várias áreas.

Agora, vamos passar por alguns problemas comuns que podem surgir ao integrar o Supabase com a Hostinger Horizons e sugerir soluções para resolvê-los.

Solução de problemas de conexão com o banco de dados

Erros podem ocorrer ao integrar o Supabase com seu aplicativo. Embora a Hostinger Horizons consiga identificar e resolver problemas automaticamente, questões no lado do banco de dados exigem solução manual.

Aqui estão alguns dos problemas mais comuns ao conectar o Supabase, suas implicações e soluções.

Comportamento de autenticação inesperado

Por padrão, o Supabase implementa um método de autenticação por e-mail para criação de contas e login. O usuário precisa clicar no link de confirmação enviado para o e-mail para completar o processo de registro.

Se você não consegue fazer login após criar uma conta no seu aplicativo, verifique se você autorizou sua conta. Caso contrário, verá o status Aguardando verificação no Supabase.

Solução: Se a URL de autenticação estiver inválida, verifique se o link começa com localhost:3000. Se for o caso, substitua pelo endereço do seu aplicativo web para que o Supabase possa verificar corretamente o seu e-mail.

Para fazer isso, vá para o seu painel do Supabase → barra lateral → Autenticação → Configuração de URL. Substitua a URL do site pelo endereço do seu aplicativo e clique em Salvar alterações. Após isso, repita o processo de verificação e você deverá conseguir criar uma conta.

Sincronização em tempo real não está funcionando

Se o recurso de colaboração do seu aplicativo não está funcionando corretamente, o problema provavelmente está na configuração do Realtime do Supabase (EN).

Isso acontece porque, ao solicitar à Hostinger Horizons a adição de recursos como colaboração, ele apenas configura o código do seu aplicativo. A configuração do Realtime no Supabase ainda precisa ser feita manualmente.

Para solucionar, ative a replicação para as tabelas do seu banco de dados. Vá para o painel do Supabase → barra lateral → Banco de Dados → Publicações. Vá para a coluna Origem, clique em Tabelas e alterne a configuração de Replicação para ativado.

Se a sincronização em tempo real continuar com problemas após a configuração, peça ao Hostinger Horizons para realizar a solução de problemas. A plataforma será capaz de identificar o erro e fornecer instruções detalhadas para resolver.

Chaves de API inválidas

As chaves de API são credenciais que permitem que sua aplicação se comunique com seu banco de dados Supabase. Se essas chaves forem inválidas, você enfrentará problemas de conectividade.

Esse problema geralmente ocorre quando você conecta o banco de dados manualmente, inserindo as credenciais diretamente no código do seu aplicativo. Isso é improvável de acontecer se você usar o recurso de integração com o Supabase incorporado na Hostinger Horizons.

Se você se deparar com esse erro, basta copiar o código de erro e colá-lo no Hostinger Horizons. A plataforma resolverá o problema automaticamente.

Boas práticas de segurança

Garantir a segurança da conexão entre o seu aplicativo web e o banco de dados Supabase é fundamental. Cibercriminosos podem tentar interceptar essa conexão para acessar informações sensíveis. Aqui estão algumas considerações de segurança ao integrar o Supabase com a Hostinger Horizons:

Garantindo a segurança das suas chaves em produção

As chaves de API do Supabase são credenciais altamente sensíveis. Se comprometidas, podem conceder acesso não autorizado ao seu banco de dados.

Armazene suas chaves de API em uma variável de ambiente, em vez de deixá-las no código do seu aplicativo. Embora a Hostinger Horizons não permita acesso ao código-fonte do projeto por padrão, recomendamos pedir para incluir essas credenciais em um local seguro.

Além disso, solicite à Hostinger Horizons o uso de chaves de banco de dados (EN) que não sejam expostas aos clientes para operações que requerem permissões mais altas. Certifique-se também de que suas chaves não sejam visíveis na interface do usuário.

Usando HTTPS, domínios e CORS corretamente

Garanta que a integração do Supabase com o seu aplicativo seja feita apenas via HTTPS. Esse protocolo seguro e criptografado protege a transmissão de dados, impedindo adulterações e ataques.

Substitua o domínio temporário por um domínio adequado. Isso pode ser feito diretamente pelo painel da Hostinger Horizons após publicar seu projeto.

Usar um domínio que você controla oferece maior segurança e controle sobre a integridade do seu aplicativo. Além disso, configure políticas de CORS (Compartilhamento de Recursos de Origem Cruzada) para permitir que apenas o seu domínio interaja com o backend do Supabase.

Gerenciando funções de usuário e políticas de RLS de banco de dados

O Supabase fornece o sistema de Segurança em Nível de Linha (RLS) (EN), que permite criar regras de acesso e políticas para o seu banco de dados.

Crie políticas que permitam aos usuários visualizar, acessar e modificar apenas seus próprios dados. Isso evita que partes não autorizadas acessem os registros de outros usuários, garantindo maior segurança.

Também é importante verificar regularmente as funções dos usuários e suas permissões no banco de dados. Certifique-se de que eles não tenham privilégios excessivos que possam conceder acesso a dados sensíveis ou tabelas desnecessárias.

Conclusão

A Hostinger Horizons por si só é suficiente para criar uma aplicação web simples e estática. No entanto, se você deseja adicionar recursos avançados, como armazenamento e processamento dinâmico de dados, é necessário integrar um serviço de banco de dados, como o Supabase.

Para integrar o Supabase com sua aplicação web, basta clicar no botão Supabase no painel da Hostinger Horizons. Faça login na sua conta e autorize o acesso à API. Selecione uma organização e um projeto, e clique em Conectar.

Em seguida, siga as instruções fornecidas pela Hostinger Horizons para criar as tabelas necessárias no painel do Supabase. Se você encontrar algum problema de integração, peça à Hostinger Horizons para corrigi-los ou forneça um guia de solução de problemas.

Pronto! Agora que o Supabase está integrado à sua aplicação web, você pode adicionar funcionalidades mais avançadas, como armazenamento dinâmico de dados e autenticação. Se surgir qualquer dificuldade durante a configuração, deixe um comentário abaixo e não se esqueça de participar da nossa comunidade no Discord. Boa sorte!

Entre no nosso canal do Discord para mais dicas e inspiração sobre como aproveitar ao máximo a Hostinger Horizons. Conecte-se com a comunidade, obtenha conselhos de especialistas e fique atualizado sobre os recursos mais recentes!

Todo o conteúdo deste tutorial está alinhado com os rigorosos padrões editoriais e valores da Hostinger.