Nesse vídeo, eu vou te ensinar a conectar a sua aplicação feita no Google EA Studio com o banco de dados de forma funcional e segura. Para quem quer criar uma aplicação real com usuários, login, salvamento de dados, esse é um passo crucial para que o seu projeto fique de fato profissional. E como essa é uma dúvida frequente aqui no canal, [música] eu vou ensinar o passo a passo de como fazer essa integração utilizando o Supase.
O Supas, para quem não conhece, é um serviço de banco de dados que integra com praticamente todas as ferramentas de vibe code. Ele é um banco de dados em pos que oferece aí autenticação, de functions, armazenamento e várias outras funções que ele desempenha aqui. E ele faz tudo isso em coordenação com a sua aplicação de vibe code.
você não precisa entender nada de banco de dados para poder utilizar o Superbase. O Super Base ele é gratuito, né? Ele tem um plano gratuito que é bastante generoso e que vai funcionar aqui pra maioria das coisas que vocês vão fazer.
A principal limitação aqui do plano gratuito é quantos projetos você pode criar. Você só pode ter dois projetos ao mesmo tempo, mas em relação a limite de uso, esse plano gratuito, ele é muito, muito generoso e às vezes, dependendo, claro, do da sua aplicação, do que que você tem lá em termos de função dentro dessa sua aplicação, vai dar aí para você ter mais de 1000 usuários, quase que certeza. Então, para começar aqui no Superbase é muito fácil, é só clicar aqui em start for free e criar sua conta, caso você não tenha ainda.
Com a sua conta criada, você vai entrar aqui para configurar a sua organização. Você vai dar um nome para ela e vai clicar em criar organização. Depois de criar a organização, você vai criar o nome do seu projeto.
Como eu falei, no plano gratuito, você vai ter direito a ter dois projetos. Aqui você vai criar a senha da sua base de dados. Utilize aqui uma senha forte com números caracteres especiais e salve essa senha em um lugar onde você vai conseguir encontrar.
Depois você clica para criar New Project. Com o projeto criado no Superbase, agora a gente vai fazer a integração lá no Google EA Studio. Eu vou fazer a integração com essa aplicação que eu criei em um outro vídeo onde eu ensino a usar o Google EA Studio.
Esse site é um site de imobiliária para cadastrar imóveis e vender. E a função aqui do banco de dados vai ser de cadastro, de imóveis, de itens, né, dentro daqui do do portfólio do site e de cadastro de usuários, que são as pessoas que vão cadastrar os seus imóveis aqui. Então, vou começar com um prompt bem simples aqui, dizendo que eu quero fazer a integração com o meu banco de dados do Super Base e que aqui são os dados do meu projeto.
E aí, esses dados eu vou conseguir eles aqui dentro do Superbase. O primeiro dado que vai ser preciso é o URL do meu projeto. Eu consigo esse dado vindo aqui no project settings, nas configurações do projeto, aqui em data API.
Esse URL aqui é a informação que a gente precisa. Então, vou copiar e vou jogar aqui. Agora a gente precisa da chave anônima, que se chama chave anônima, mas ela pode ser pública e por isso que a gente vai conseguir integrar ela aqui no front endão.
Ao criar aplicações com Vibe Coding, a gente tem que ter muito cuidado com a questão das APIs. Quando você utiliza APIs, que são formas de você integrar serviços, no caso, a gente tá integrando aqui o Google EA Studio com o serviço do Supase. Então, a gente precisa dessa API.
Quando a gente utiliza esse tipo de método, muitas vezes a gente corre o risco de expor as nossas chaves de API e qualquer usuário, alguns mal intencionados podem utilizar essa informação para acessar o banco de dados, para roubar informações, para prejudicar o seu sistema de alguma forma. Mas nesse caso, essa chave em específico que a gente vai tá utilizando aqui, não tem problema compartilhar, porque somente com ela um invasor aí mal intencionado não consegue fazer nada, porque o Super Base ele vai adicionar políticas de permissão para que somente usuários autenticados possam fazer alterações, ler e escrever dentro do banco de dados. E essa chave de API a gente vai conseguir aqui nas configurações do projeto na parte API KIS.
E a chave que a gente precisa é essa daqui, publishable key. Copiar e jogar aqui no projeto. E vou dar um send.
Enquanto ele processa aqui, deixa eu aproveitar para avisar uma coisa. Se você quer aprender de forma mais aprofundada, passo a passo, como criar aplicações com Vibe Coding, sem saber nada de programação, eu te convido a dar uma olhada no meu treinamento Vibe Code na Prática. Esse é um curso direto ao ponto, sem enrolação, para você aprender só o que você realmente precisa para criar suas aplicações e colocar suas ideias em prática com Vibe Coding.
Se você gosta do meu estilo de explicação aqui nos vídeos do canal, você também vai gostar desse curso. No momento da gravação desse vídeo, a gente tá em uma pré-venda com 50% de desconto e alguns bônus exclusivos. Para saber mais detalhes, acesse o primeiro link da descrição ou escaneie o QRcode que vai estar aparecendo em algum lugar aqui na tela.
Ele fez aqui alguns processos e deu, apareceram dois erros. Eu vou clicar para autofix. E perceba que aqui já sumiram os dados que eu tinha antes, já sumiram aqueles imóveis que estavam aqui cadastrados, porque no caso, a partir de agora, os imóveis que vão aparecer aqui são os imóveis que vão estar ligados à base de dados.
Porque antes aplicação tava mostrando aqui alguns exemplos que tavam tavam codados dentro da própria aplicação. Era como se fosse uns manequins que estavam aqui. Só que agora, uma vez que há um banco de dados cadastrado, não é necessário ter esses exemplos aqui.
Os imóveis que vão aparecer vão ser os que vão estar de fato lá dentro da base de dados. Ele me deu mais alguns erros aqui. Eu coloquei para ele fazer o autofix de novo.
Daí ele voltou com os dados de exemplo e me deu esse script aqui para eu rodar. lá dentro do Supeco de dados rodar aqui. Porque não basta criar a integração, você precisa ter as tabelas criadas lá dentro do Superbase.
Imagine que as tabelas são basicamente tabelas do Excel, são as tabelas com colunas e linhas onde você vai armazenando dados. Uma base de dados funciona de forma muito semelhante a uma tabela do Excel, só que obviamente é um pouco mais complexo porque dependendo do tamanho da aplicação, você vai ter várias tabelas que vão estar interconectadas. Só que de novo, você não precisa saber nada disso.
Sempre a Ia vai te orientar o que que você precisa fazer, como ela nos orientou agora. Ela deu esse código pra gente rodar lá no Superbase. Então vou copiar.
E esse código eu vou rodar aqui nesse menu aqui onde eu tenho SQL Editor. Daí eu vou jogar o código aqui dentro e vou dar um run. E aí ele vai fazer o processo sozinho aqui de criar todas as tabelas.
Então ele já até deu uma mensagem de sucesso aqui. Aí se eu vier aqui em table editor, eu já vou ver a minha primeira tabela aqui. Então eu volto aqui no painel do EA Studio, confirmo para ele que eu já rodei o script e peço para ele verificar se a conexão já está completa ou se ele precisa criar mais tabelas.
Cheque toda a aplicação e veja se já criamos todas as tabelas. Verifique se a integração com o Supas está completa. Beleza?
Ele confirmou que tá tudo certo e tirou aqui novamente os dados de exemplo que ele tinha cadastrado. Então agora eu vou só perguntar se a questão das políticas de permissão, as RLS, já estão corretamente aplicadas. Eu vou mandar um áudio aqui que é melhor.
Verifique se as políticas de permissões RLS estão corretamente aplicadas. Se existe alguma vulnerabilidade na minha aplicação, concerte elas se elas existirem. Ele traduziu aqui em inglês, né, pra gente ótimo.
Verifique as políticas de RLS. Se existe alguma vulnerabilidade, corrija-as. Enquanto ele verifica aí as RS, só para adicionar aqui uma informação, algumas APIs que você vai utilizar, elas não podem aparecer no fronte.
No caso essa de integração com o Super Base pode, mas tem algumas APs que você vai ter que esconder por conta das questões que eu falei de segurança. E aí, nesse caso, o próprio Super Base, ele tem uma função que chama ed functions, que você consegue cadastrar o seu a sua API lá dentro, de modo que ela não fique aparecendo aqui no fronte da aplicação. Então, se você tiver trabalhando, por exemplo, com algum modelo de LLM que você precisa fornecer a API aqui ou um web Hook do NN, não jogue ele diretamente dentro do Google EA Studio.
Peça para ele criar um ed functions e aí você coloca a sua API lá dentro para que ela não fique exposta no front end. Bom, aparentemente ele resolveu aqui alguns dos problemas e agora vamos testar para ver se o banco de dados tá funcionando. Então, a primeira coisa que eu vou fazer aqui é criar um usuário para mim.
Então vou vir aqui no meu projeto overview. Aqui na parte authentication eu vou criar um usuário, create a user. Vou deixar marcada aqui a opção de autoconfirme usuário e vou criar esse usuário.
Vou clicar para entrar e consegui entrar já com o meu login. Perfeito. Agora vou tentar cadastrar um imóvel aqui dentro.
Então vou vir aqui em meus anúncios e vou criar um novo anúncio. Vou clicar aqui para salvar anúncio. Cadastrei aqui uma imagem.
Vou clicar para salvar anúncio. Show de bola. Ele cadastrou aqui o anúncio.
Se eu vier aqui na base de dados, vi aqui em table editor, aqui nas propriedades, vai aparecer esse primeiro registro que eu fiz na minha base de dados. E se eu voltar aqui para o início, o móvel também tá aqui listado. Se você gostou do vídeo, se inscreva no canal para acompanhar os próximos vídeos sobre esse tema.
E se fizer sentido para você, confira a página aqui embaixo do VB Coding na prática. Lá você vai saber todos os detalhes sobre o treinamento. E caso você tenha alguma dúvida, lá tem também um botão de WhatsApp que se você clicar, você vai falar diretamente comigo e eu vou te responder todas as suas questões.
