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.<\/p>
Quando integrado à Hostinger Horizons, o Supabase amplia as capacidades do seu aplicativo, indo além do que qualquer plataforma pode oferecer sozinha.<\/p>
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<\/strong><\/a> 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.<\/p> Aqui estão alguns casos de uso comuns do Supabase para aplicações web:<\/p> Integrar o Supabase com a Hostinger Horizons é simples, e você pode fazer isso diretamente do painel da plataforma.<\/p> Antes de prosseguir, certifique-se de que você construiu completamente sua aplicação na Hostinger Horizons<\/strong><\/a> e incluiu todos os recursos necessários. Dessa forma, a plataforma de IA entenderá quais tabelas de banco de dados precisa adicionar.<\/p> Por exemplo, use o seguinte comando para pedir à Hostinger Horizons para criar uma página de login e cadastro de usuário:<\/p> 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.<\/kbd><\/p> Assim que seu aplicativo estiver pronto, é hora de criar uma conta no Supabase e configurar o banco de dados. Aqui está como fazer isso:<\/p> Após configurar seu banco de dados no Supabase, vamos continuar com a integração. Siga os passos abaixo:<\/p> Pronto! Agora, ao abrir o menu Supabase na Hostinger Horizons, o status do seu projeto deve aparecer como Conectado<\/strong>.<\/p> Dependendo da sua aplicação, a Hostinger Horizons pode pedir para você rodar uma consulta SQL no Supabase para criar as tabelas necessárias.<\/p> Se isso acontecer, faça login no Supabase, acesse o projeto conectado à Hostinger Horizons, vá para a barra lateral<\/strong> e clique em Editor SQL<\/strong>. Cole o comando SQL e clique em Executar<\/strong>.<\/p> Agora que você conectou seu banco de dados Supabase, é hora de testar a funcionalidade do seu aplicativo web<\/strong><\/a> 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.<\/p> 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.<\/p> 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.<\/p> 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.<\/p> 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.<\/p> 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.<\/p> 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.<\/p> Aqui estão alguns dos problemas mais comuns ao conectar o Supabase, suas implicações e soluções.<\/p> Comportamento de autenticação inesperado<\/strong><\/p> 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.<\/p> 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<\/strong> no Supabase.<\/p> Solução: Se a URL de autenticação estiver inválida, verifique se o link começa com localhost:3000<\/strong>. Se for o caso, substitua pelo endereço do seu aplicativo web para que o Supabase possa verificar corretamente o seu e-mail.<\/p> Para fazer isso, vá para o seu painel do Supabase<\/strong> → barra lateral <\/strong>→ Autenticação<\/strong> → Configuração de URL<\/strong>. Substitua a URL do site<\/strong> pelo endereço do seu aplicativo e clique em Salvar alterações<\/strong>. Após isso, repita o processo de verificação e você deverá conseguir criar uma conta.<\/p> Sincronização em tempo real não está funcionando<\/strong><\/p> 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<\/strong><\/a> (EN).<\/p> Isso acontece porque, ao solicitar à Hostinger Horizons<\/strong><\/a> 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.<\/p> Para solucionar, ative a replicação para as tabelas do seu banco de dados. Vá para o painel do Supabase<\/strong> → barra lateral<\/strong> → Banco de Dados<\/strong> → Publicações<\/strong>. Vá para a coluna Origem<\/strong>, clique em Tabelas<\/strong> e alterne a configuração de Replicação<\/strong> para ativado.<\/p> 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.<\/p> Chaves de API inválidas<\/strong><\/p> 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.<\/p> 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.<\/p> 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.<\/p> 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<\/strong><\/a> ao integrar o Supabase com a Hostinger Horizons:<\/p> Garantindo a segurança das suas chaves em produção<\/strong><\/p> 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.<\/p> 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.<\/p> Além disso, solicite à Hostinger Horizons o uso de chaves de banco de dados<\/strong><\/a> (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.<\/p> Usando HTTPS, domínios e CORS corretamente<\/strong><\/p> 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.<\/p> 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.<\/p> 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.<\/p> Gerenciando funções de usuário e políticas de RLS de banco de dados<\/strong><\/p> O Supabase fornece o sistema de Segurança em Nível de Linha (RLS)<\/strong><\/a> (EN), que permite criar regras de acesso e políticas para o seu banco de dados.<\/p> 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.<\/p> 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.<\/p> 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.<\/p> 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<\/strong>.<\/p> 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.<\/p> 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!<\/p>\n
Integre o Supabase com a Hostinger Horizons<\/strong><\/h2>
\n
![\"criando](\"https:\/\/lh7-qw.googleusercontent.com\/docsz\/AD_4nXf2Xla5eILU4v_Ty30fKccyd-Ydg2THZYGxxwLHG3v-CIjnYtj2O8DLLv8ruLUaFGLlX9PDER2lF-us5Kremq4XAp-HKBX0Z5b_fVGpYGlpJGsvdftbSBXcv9q-pX-8w5wKXBYGeA?key=g7uoQXbuGOs9CNd83GMd3A\")
\n
![\"página](\"https:\/\/lh7-qw.googleusercontent.com\/docsz\/AD_4nXeliBFlTR6G2Utl_U3MPPmdXfiIB6jTdxen-9qxdawK_TAoaNQWJb1YyqqP49pvZ0JzaDSkhDC5KjSlX9q5Q__8417kJ6yy7Hv_oov1vV5E52jj5gFxN9ssVBvHNh9dgIC3B1vtug?key=g7uoQXbuGOs9CNd83GMd3A\")
\n
![\"página](\"https:\/\/lh7-qw.googleusercontent.com\/docsz\/AD_4nXeYCikiQloUtB6MzXlHOII93VGceGvj_Yu2qpBH3qz95TjhD5Z3d9-0QgLPu19MZvMcQAW2ge-gvXryvdnOS7GMxTUDDQGAJjz1a5obI0eRbTovIikfSB9p_E_AiLkNwUdEQbCEWg?key=g7uoQXbuGOs9CNd83GMd3A\")
\n
![\"O](\"https:\/\/lh7-qw.googleusercontent.com\/docsz\/AD_4nXdSUWj2k-ZYeFlIrSGBJNn_zZA4Rprr7QXT_zllfQdceFvepaNxkxVP_DkeSG4Na0PfvMEXv-02OB6n8NgwGdX_bXQLlX4H6bFbH0sWu2V-5XoqCj4eamKlv5lHP-QZcS3Nz4B7Jw?key=g7uoQXbuGOs9CNd83GMd3A\")
\n
![\"Página](\"https:\/\/lh7-qw.googleusercontent.com\/docsz\/AD_4nXeqILsS-JaV-sUADOTqEJACnftjwcmgokmrekwz_OUYyPblfxNnVnW18ONd7_O77VSTFPOEkiwMStK-nmRtmc4ogOh8X-LBZr-LFFoyJ96Jw9JsojdMMFpukb-kTrfvDAR9pSvaaQ?key=g7uoQXbuGOs9CNd83GMd3A\")
\n
![\"Status](\"https:\/\/lh7-qw.googleusercontent.com\/docsz\/AD_4nXfrANCIlLf8u1Nu4SvGZ040Vv-43mpw790aMFYcL0W_w_1jDyvvYHwARQC7Qdez8zi8vFXl41SWO_K-wvwDkGUqSQnoolIIlw0h1YLbncoCPpXNiBs6367X6HJPDvjsCAW6z7ujqw?key=g7uoQXbuGOs9CNd83GMd3A\")
Testando sua integração com o Supabase<\/strong><\/h2>
![\"Web](\"https:\/\/lh7-qw.googleusercontent.com\/docsz\/AD_4nXeHcwc2VCL9svuaLKvruyqTrvnYXmOCZM_1uZHidyU3SZy6xQ1063P1mXMeXwya8vt5Pvo4RAKbB3_IH_7UB04PKGslA6Rtqf898yD3gg25sFccj2qoS-sk7dd10vhWSmBVKPzX?key=g7uoQXbuGOs9CNd83GMd3A\")
Solução de problemas de conexão com o banco de dados<\/strong><\/h2>
![\"Status](\"https:\/\/lh7-qw.googleusercontent.com\/docsz\/AD_4nXfrYEUpHqBJXmK8WpgktmSazHl6S-tFITRjMr7vm_ciovbhg7QUUEmzLXWKykpNc_Ev4cgzdjxQdxzu-E10pQgHpribkmLb1xhLqTXoTOcByHI7T_URKPalRBLFHqAasYdLeFyw_w?key=g7uoQXbuGOs9CNd83GMd3A\")
![\"Configuração](\"https:\/\/lh7-qw.googleusercontent.com\/docsz\/AD_4nXflJ6F2A2KPKJqXBeEZYNm-4-A_3tTVyQcq5dkRUH_IkL8upf1ySxe3i10D6SgLEcF3nPwuvFGj0prKOSpSig_04IQHmPKoi36lySPDLewKhPyqYsO9J-LErIJpWLSuHq6Js5CjMA?key=g7uoQXbuGOs9CNd83GMd3A\")
![\"Ativando](\"https:\/\/lh7-qw.googleusercontent.com\/docsz\/AD_4nXdxwwlqWtYbCbk-MfX1235B8j52wPV7jF9Fkcsnm5FjuQnyw3xRx8PimbQr3DG-I0iIc_8PTGbX5qbge_X6LTJCgndzgqOZCMwlkWQth4u8Mxnv2WviwTIN3SP0OYs9ybETNYq1yQ?key=g7uoQXbuGOs9CNd83GMd3A\")
Boas práticas de segurança<\/strong><\/h2>
Conclusão<\/strong><\/h2>