O Google fez de novo: Crie e Publique um Sistema Completo com IA (100% Grátis)

Esse vídeo é um desafio para você. É sério, só assiste ele até o final, seguindo os passos que eu vou passar. E eu duvido você não sair desse vídeo com uma aplicação rodando e a sua cabeça assim, ó, explodindo e você não vai gastar nenhum centavo.

Nos tempos que a gente tá vivendo, esse é um vídeo de utilidade pública. A Google chegou com a voadora mais uma vez e agora ela tá trazendo Google Antigravity para dentro do Google AI Studio. Se você não sabe o que é isso, você vai aprender nesse vídeo.

Mas basicamente com essas plataformas você pode criar sites, sistemas, apps com inteligência artificial. Mesmo sem saber programar, todo mundo já quis criar um aplicativo próprio, um sisteminha para controlar coisas pessoais às vezes, ou pra própria empresa ou quem sabe até mesmo para vender, por que não? Mas sempre esbarrou aonde?

Na dificuldade. Só que essa dificuldade ela tá acabando. E esse vídeo aqui é um convite para você conhecer esse novo universo de criação de sistemas com IA.

É sério, não sai daqui, não sai. Aprende isso daqui. Eu tentei fazer da forma mais didática possível para você aprender e agregar valor na tua vida.

Esse outro vídeo que eu fiz com o mesmo assunto é o vídeo mais assistido do meu canal. Eu recebi muitos, muitos comentários de pessoas agradecendo que salvaram eles no trabalho, porque precisava desenvolver algo com aquele conhecimento. Só que naquele vídeo foi tudo muito básico, não tinha o back end que você vai aprender o que que é nesse vídeo, não tinha banco de dados que você também vai aprender a criar do zero aqui.

Então é só isso que eu queria falar, tá? A minha missão aqui é te ajudar se você quiser aprender a criar um sisteminha hoje, sair daqui com o sisteminha pronto. E a sua missão é aprender a fazer só seguindo o passo a passo.

É uma receitinha de bolo, não tem como dar errado. A única coisa que você precisa é, e isso eu não negocio, é me ajudar a chegar nos 100. 000 inscritos que tá ali, tá pertinho.

Como? se inscrevendo no canal, comentando, compartilhando esse vídeo com o máximo de pessoas que você puder. Com certeza você vai ajudar um amigo hoje e deixando o seu joinha.

Muito obrigado. Bora pro vídeo. A primeira coisa que nós precisamos é de uma conta do Google.

Criei essa conta nova aqui, zerada. Agora precisamos de um layout. Na verdade, a gente até poderia pular essa etapa, mas eu não quero que o sistema fique com cara de sistema criado por IA.

Para isso, você vai pesquisar aqui no Google, Google Stitch. vai entrar no primeiro link, quero testar e enviar o prompt. O Google Stitch é uma plataforma da Google para criar interfaces, layout para site, aplicativos e eu vou deixar o link aqui de um vídeo que eu já produzi sobre ela na descrição.

Vale muito a pena conhecer todo o potencial dela, porque aqui a gente vai conhecer o básico do básico. E quando eu falo básico é básico mesmo. Quero criar um CRM.

Eu vou mudar aqui pra web e vou enviar. Agora é deixar o Google Stitch trabalhar. Pronto, ele gerou várias telas aqui, tudo bagunçado.

E eu vou dar uma organizada, vou tirar o zoom e arrastar uma para cada lado. Olha que legal, ele gerou um dashboard, uma lista de contatos e uma tela de pipeline. Eu poderia pedir para fazer várias alterações aqui na imagem.

É só clicar e escrever no prompt aqui embaixo. Mas eu recomendo você começar com menos. Menos é mais.

foca em uma funcionalidade e depois vai evoluindo. É por isso que eu vou deletar esse pipeline. O legal é que aqui no Stitch, além de gerar a imagem, se eu clicar aqui, ó, em more e mostrar código, eu vejo o código HTML dele, que é usada para todos os sites.

Você entrou num site, você tá vendo um HTML no seu navegador. Se você copiar esse código aqui, ó, salvar em um arquivo ponm e abrir, vai ser exatamente essa tela, ó. Eu salvei aqui num bloco de notas, abri no navegador esse arquivo e tá aqui o nosso CRM, mas ele não tem funcionalidade ainda, é só o HTML.

Agora a gente vai criar as funcionalidades dele lá no Google AI Studio. O que que eu vou fazer, ó? Eu vou selecionar os dois aqui.

Aqui em More, eu vou clicar em exportar. Vai abrir essa telinha aqui do lado, já selecionado a I Studio. E eu vou escrever aqui na descrição, torne esse CRM real.

e clicar aqui, ó, em criar com AI Studio. Como é o meu primeiro acesso com essa conta da Google aqui no AI Studio, eu vou aceitar os termos, clicar em continuar e aí ele tá explicando as novidades aqui. Cliquei para pular e ele me trouxe aqui pro AI Studio com um prompt e as imagens e códigos lá do Stitch.

Ele vai usar isso como referência. Como eu falei, a gente não precisava desse passo. Eu poderia entrar no Google, pesquisar Google Studio, clicar aqui, ó, no primeiro link e aqui, ó, no menu Build Starter, eu tenho o prompt.

Eu poderia escrever crio um CRM, mas vamos voltar pra versão que já tem as imagens e código gerado para ele usar como referência. Aqui tem um passo importante, repara que ele tá selecionado o modelo Gemini 3 Flash Preview. Eu vou clicar aqui e eu consigo ver algumas outras configurações.

Consigo mudar o modelo. A gente vai deixar esse mesmo. Consigo adicionar instruções.

Por exemplo, use emojis ao invés de ícones SVG. SVG é um formato de imagem. Use gradientes para ficar com aquele degradê de fundo.

Você pode passar aqui qualquer instrução para IA, mas a gente não vai colocar nada aqui. Eu vou clicar para fechar. O que nós vamos mudar é aqui, ó, o framework.

Quando eu clico aqui, aparece React. js e Angular. Esse é o Framework que vai construir a sua aplicação.

Basicamente é um conjunto de ferramenta pronta que te ajuda a criar uma aplicação mais rápido. Ao invés de começar do zero, você já tem uma base pronta. Quando a gente tá falando de linguagem de programação, a gente tem vários frameworks para cada uma dessas linguagens, mas tem as que são mais utilizadas.

Nesse caso aqui, as três são, mas nós vamos escolher aqui o next. js. É importante esse passo, tá?

Vou fechar e clicar aqui em build para ele construir. Pronto. Agora é deixar ele criar o nosso projeto.

O Google AI Studio é uma plataforma onde a gente consegue interagir com todos os modelos da Google. Aqui a gente tá vendo a parte de construção de sistema, de aplicativos, mas tem toda a parte de gerar vídeos com V3, de gerar imagens, de gerar áudio. E é aqui também que você gera uma API para utilizar inteligência artificial nas suas aplicações.

Já já você vai entender o que é uma API. Ele mudou um pouquinho a interface desde o último vídeo, mas a dinâmica do que você faz na plataforma continua a mesma. Toda vez que a gente acessa um site, um sistema, geralmente a gente ou tá no celular ou num tablet ou também aqui, ó, no nosso desktop.

Vou deixar só esses dois exemplos. E aí, através da internet, a gente vê a telinha da aplicação, que é o que a gente acabou de criar ali, a interface. É todo o conteúdo da tela, inclusive o que nós vamos preencher, enviar.

Então eu acesso aqui a internet, certo? www. E a partir dela eu vejo a tela que nós chamamos de front end, tá?

Então vou escrever aqui só front. Nesse estágio, tudo que a gente tá vendo, mexendo, tá acontecendo na nossa máquina, no nosso celular, no nosso navegador. Só teve uma etapa aqui, ó, da internet que ele bateu aonde?

Num servidor aqui, ó, que é o que nós chamamos de back end. Então, o seu celular, seu computador, através da internet bateu nesse cara aqui, ó, nesse servidor e falou: "Ó, me dá o conteúdo dessa tela". Aí ele respondeu, retornou aquele código que a gente acabou de ver e o seu front end, o seu PC, seu celular montou todo o conteúdo aqui.

Esse servidor aqui, ó, ele tá nas nuvens. Quando você pedir para ele fazer alguma coisa, por exemplo, eu quero adicionar um novo contato, deletar um contato, o que que tem que acontecer? O seu front end, quando você clicar no botãozinho lá enviar, ele tem que mandar pro servidor, pro back end, o que que você tá querendo fazer.

Geralmente aqui no meio nós temos um negócio chamado API, que é a interface de aplicação. Ou seja, é como que o front vai comunicar com o back, como que o seu celular, seu computador vai se comunicar lá no seu servidor. Lembrando que esse servidor aqui, ó, ele fica 24 horas ligado.

Essa API aqui, ó, ela também serve caso eu queira permitir que outra aplicação acesse o meu backend. Vamos pegar aqui, ó, o Pix como exemplo. Então, o seu banco, ele se comunica com o Banco Central através de o quê?

De uma API. É por isso que você consegue fazer um Pix a partir do Bradesco, do Santander, de qualquer banco e todos eles têm essa comunicação com o Banco Central. Só que é lógico, para conseguir fazer isso daqui, ó, a gente precisa o quê?

Terça. E aí nós temos uma coisa que chama API que, que é a chave de API. E aí, se o back end reconhecer essa chave, ele vai falar: "Opa, essa pessoa é quem ela tá falando que é mesmo".

E ela pode fazer essa alteração aqui no banco. Alteração aonde? Por exemplo, num banco de dados.

Então, geralmente lá no backend vai ter um banco de dados que a gente vai salvando as informações. E a gente vai fazer tudo isso agora. Então, ele tá gerando aqui, ó, os componentes seguindo a estrutura do framework que a gente selecionou.

É um pouquinho demorado esse processo, então vamos lá pegar um cafezinho. Enquanto ele vai criando, eu vou explicar para vocês aqui essa novidade. Por quê?

Agora a gente consegue gerar o back end Studio. E quando ele terminar, você vai ver que aqui no código, ó, a gente vai ter acesso aí, ó. Na verdade, a gente já tem acesso, tá vendo?

A tudo que ele tá gerando, ó. Olha só. Aqui tem alguns contatos que ele tá colocando como exemplo.

A gente consegue, ó, mudar as configurações do editor. Consegue fazer também download, ó. Se eu clicar aqui, eu faço o download de um zip do projeto.

Você vai ver e a gente vai utilizar isso, que a gente consegue colocar uma chave de API. Se você já conhece o Google Antigaravity e tem vídeo aqui no canal, tá já falando sobre ele, que é uma plataforma de desenvolvimento que você instala no seu PC, é como se eles estivessem evoluindo o Google aí Studio para plataformas que a gente já conhece, como Lovable, Raplit, tem bastante vídeo aqui no canal também. E a prova disso é que aqui em cima eles estão pedindo desculpa, ó, porque tá muito lento tudo.

E realmente às vezes acontecem alguns bugs aqui porque eles estão trazendo grandes novidades. Então vamos aguardar, né? Olha só, ele terminou aqui.

Então aqui tá todo o processo, ó, de construção dele. Ele explica o que que ele fez. Então ele usou o Framework NextJS 15.

Ele usou o Tailwin de CSS. CSS é toda a parte de estilização de cores, de caixinha. Como que funciona?

Aqui, ó. No caso, essa sombrinha, tá vendo? Usou também aqui os ícones, a parte de animação.

E é isso. Temos aqui o nosso CRM. Vamos lá.

Vamos ver se tá funcionando. Se eu clicar aqui, ó, em contatos, beleza, mudou pra tela de contatos. Olha que legal, a tela ficou bem bonita, né?

Deals não tá indo. Tes reports, settings. Beleza, eu passei para ele o dashboard e a tela de contato.

Então ele fez dashboard e contato. Tá ótimo. Você pode tentar passar mais tela se você quiser.

Já as tabs aqui, ó, e busca não tá funcionando. Vamos ver se a gente consegue criar um contato, que é o mais importante também, não. Então, a gente vai ter que pedir para ele, ó, eu quero conseguir criar um contato.

Só que eu já vou pedir o seguinte, eu quero fazer o crude do contato, que é c r, que é create, criar, read, que é ler, update, que é atualizar, e delete, que é deletar. Eu quero que você implemente o crude do contato. E vou enviar enquanto ele tá gerando, ó, aqui em cima também.

Às vezes ele acerta, às vezes não, né? Se eu colocar tablet tá um pouco melhor, mas não ficou tão legal. E se eu colocar mobile, ele não ficou muito legal, não.

Ó, tá vendo? Mas por quê? Ele não fez com responsividade.

Então é interessante agora você também pedir, olha, não ficou responsivo. Mude todo o sistema para funcionar a responsividade, ou seja, ele se adaptar em qualquer tamanho de tela. Vou voltar aqui pro modo computador.

Essa fase, ela vai ser muito aleatória. O que ele vai criar, o que não vai. Ontem eu fiz um teste sem imagem nenhuma.

Eu só passei para ele crie um CRM. E ele criou de primeira ali o dashboard, a tela de contato e o crude tava funcionando. Só que, lógico, foi no padrão de estilo dele, não ficou tão bonito quanto esse.

Aqui é como se ele tivesse se preocupado mais em criar a interface igual eu pedi para ele, igual eu passei, do que criar as funcionalidades em si. Então você pode testar dos dois jeitos, beleza? Se a gente parar para pensar, ele criou do jeito certo.

Eu passei imagens e HTML para ele e ele transformou isso agora numa estrutura com nextJs. Tá certinho? Seguinte, seguinte.

Aqui embaixo tem um link para você se cadastrar numa lista de espera, tá? Eu tô faz um tempo já trabalhando num projeto bem legal que sim, tá demorando um pouquinho, mas ele vai sair. Então não deixa de se cadastrar para receber ali a notificação quando ele chegar.

Continua o vídeo aí. Ele falou que criou aqui, ó. Tá todo o processo de criação, mostra os arquivos que ele mexeu.

Aí ele fala aqui, ó, implementei o CRUD completo para gestão de contato, gestão do estado global, criação, tá vendo? Leitura, atualização, exclusão, validação. E vamos ver se ele criou mesmo, porque pode acontecer também de dar algum bug aqui, ele falar que criou e não criou.

Beleza? Contato. Adicionar novo contato.

Beleza. Tá aqui. Eli@eli.

com $100 e create. Beleza, entrou aqui, ó, o Eli. Vamos editar editobell e 101 update.

Mudou tudo, ó. Tá vendo? 101.

Ele rigober tá tudo certinho, funcionando o nosso crude. E se eu deletar um, vou deletar esse aqui de 12. 000.

O delete não funcionou. Então nós vamos pedir para ele consertar isso. Só que é o seguinte, se eu vou disponibilizar esse sistema para as pessoas acessarem, eu preciso o quê?

De um login e senha. Então vou pedir também para ele criar uma página de login e senha. Ele trocou tudo pro modo dark aqui, ó.

Ó o que eu escrevi. Apenas o delite não funcionou. Faça a correção.

Aproveite e crie o recurso de login e senha. Enviar. O ideal aqui seria a gente fazer funcionalidade por funcionalidade.

Tudo isso já integrado com o nosso github, que é a parte de versionamento, pra gente sempre conseguir voltar caso ele faça uma coisa errada. Como eu tô fazendo o exemplo aqui, eu vou fazendo tudo de uma vez essa primeira versão. Mas lembra, a gente vai chegar aqui na parte de versionamento e vocês vão entender.

É muito interessante pegar uma funcionalidade específica e desenvolver ela, pedir para ele fazer, testar, ficou legal? Aí a gente vai comitar isso. A gente vai enviar lá pro servidor que faz o versionamento, que tem várias versões.

Aí a gente, beleza, tá lá, tem o backup, tá tudo certinho, agora faz outra coisa. E assim a gente evolui o sistema com segurança. Já já a gente entra nessa parte do versionamento e vocês vão entender.

Ele terminou, mas não tá carregando a aplicação. Eu vou colocar esse texto aqui para ele, ó. Não tá aparecendo a tela.

Coloquei o erro e enviar. Deixa ele trabalhar aí e ver o que que aconteceu. Beleza, resolveu.

Agora sim, hein? Repara que ele colocou aqui embaixo também, ó. Default credentials.

Então, eu tenho um e-mail e um password para testar aqui na aplicação. Eu acho que já é o que tá aqui. Vou clicar em sign in.

E pronto, fizemos login na aplicação. Lógico, se eu deixar assim, todo mundo vai acessar ela. Deixa eu ver se já funcionou o logout.

Beleza, também. Então, agora eu quero publicar essa aplicação. Aqui em cima no menu, ó, nós temos duas opções, né?

Eu posso vir aqui em share, compartilhar de modo público, certo? Com qualquer pessoa que tem o link que vai gerar aqui, ou selecionar pessoas específicas. E aí eu vou copiar o link aqui que ele gerou.

A gente enviar esse link então pra outra pessoa que tá logado numa conta Google, ele vai receber dessa forma, ó. Ele vai falar: "Esse app é de outro desenvolvedor. " Aí eu vou clicar em continuar pro app.

E eu tô aqui no app, mas tá vendo? Eu tô no app, mas eu também tô aqui no Google Studio. Não faz muito sentido.

Ah, mas agora tem essa opção aqui, ó. Quando eu clico aqui em share de novo, eu posso habilitar aqui, ó, de full screen. Beleza, habilitei, copiei o link.

Aí quando abre mostra a mesma coisa. Tá vendo que o app é de outro desenvolvedor? E aí eu vejo na tela cheia aqui.

Legal, né? Só que ainda assim, ó, eu estou dentro do Google Studio. Se eu clicar aqui nesse iconezinho aqui, ó, ó, o que que acontece?

Pronto, voltou. Eu consigo ver o código. Então, não é isso que a gente quer.

Vamos lá. Vamos tirar daqui. Vamos colocar num outro ambiente, só o app mesmo, só o sistema.

Aqui em publish, eu teria que ter uma conta no Google Cloud para conseguir colocar método de pagamento e ele colocar lá no Google, lá no Google Cloud, o nosso sistema. Lembra que eu falei que o back end fica num servidor 24 horas nas nuvens? Seria isto aqui.

Aqui a gente estaria usando a infraestrutura da Google, mas não é isso que nós queremos. A gente vai pegar uma de graça. Aqui em versions são as versões da nossa aplicação.

Olha que legal. A gente consegue inclusive voltar para alguma outra. Tá vendo?

É só eu selecionar aqui e clicar em restaurar versão. Nós não queremos, né? Nós queremos a última.

Muito importante aqui, ó. Secrets é onde a gente vai salvar as nossas chaves secretas. O que a gente precisa mesmo aqui é tirar desse ambiente do Google e colocar no outro servidor.

Mas para isso a gente também precisa de um banco de dados. Lembra que ele criou uma tela de login com usuário e senha? A gente não quer que mostre isso.

A gente quer entrar com usuário e senha de verdade. A gente quer criar um contato e ele ir para um banco de dados que a gente tenha controle. É por isso que agora a gente vai pedir para ele integrar com o Supas, que é o banco de dados que a gente vai utilizar.

Ele tem a versão paga, mas também tem a versão gratuita, que dá para fazer muita, mas muita coisa mesmo. Aqui no Google eu pesquisei por supas e vou clicar no primeiro link, start your project, signup e vou preencher com e-mail e senha. Confirmei o e-mail, preenchi aqui, ó, meu sistema, minha vida, tipo personal, e vou manter aqui o plano free, criar organização.

A gente cria uma organização e dentro dela a gente consegue criar vários bancos de dados. Nessa tela aqui, ó, ficou minha organização com esse nome, não tem problema, tá? Mas o primeiro nome é a organização, depois o nome do projeto.

Coloquei sistema do Eli, pedi para gerar uma senha aqui, copiei, salvei a senha. Aqui em região eu vou colocar Brasil, América do Sul, São Paulo. Vou manter aqui habilitado e clicar em create new project, criar novo projeto.

Beleza? A gente tá dentro do Supe, dentro do banco de dados. E o que que é legal aqui?

Ele não é só um banco de dados onde a gente salva os dados na tabela, mas ele também é um storage. Ou seja, se a nossa aplicação tivesse lá a opção do usuário enviar uma imagem, alguma coisa, ele poderia salvar a imagem aqui também, entendeu? Ele também tem a parte de autenticação, que é a parte de login e senha.

Isso a gente vai utilizar aqui, ó. Aqui nesse menu lateral a gente vê, né, a parte de edição de tabela. Aqui é para executar comando SQL.

Aqui é o banco de dados, autenticação e storage que eu falei para você, ó. A gente vai usar database e autenticação. Mas para isso a gente precisa pedir agora pro Google AI Studio integrar com o Super Base.

Uma coisa que pode acontecer aí no AI Studio é ele pegar alguns erros. Tá vendo? aparece essa tela vermelha, mas o legal é que aparece aqui, ó, que ele encontrou seis erros e tem um botãozinho aqui, ó, fix, consertar.

Eu vou clicar e deixar ele trabalhar também. Corrigir os erros, ó. Tá vendo?

Funciona, tá, pessoal? Pode ir tentando aí que ele vai fazendo. E eu vou pedir o seguinte: faça a integração com Supas e gereviar.

O que que são as migrations? Basicamente são arquivos em SQL que ele vai passar pra gente pra gente colocar lá no Superabase e ele criar todas as tabelas. Por quê?

Aqui tem uma estrutura de tabela, por exemplo, a tabela do usuário ali que a gente cria do contato. Então tem o nome, tem o e-mail. Essa estruturinha ele vai me passar num arquivinho SQL, que é a migration, pra gente fazer essa migração lá.

Eu vou executar e ele vai criar as tabelas lá no Superbase. Então, se futuramente você criar uma nova tabela, aí você vai falar: "Olha, agora eu quero enviar lá pro Super Base, me passa a migration dela". E por aí vai.

E olha que legal, que que ele tá pedindo pra gente aqui, ó. Next public super base URL. E essa K aqui, ó, onde que a gente vai pegar essa informação?

Lá no Superbase. Então, aqui no Supasem connect API key. Essa aqui, ó, é o project URL.

Eu vou copiar e vou colar lá na primeira opção aqui. Vou colar aqui e dar um apply. E lembra o login e senha que é a parte de autenticação?

Olha o que que ele fala aqui, ó. que a gente precisa criar um usuário. Como a autenticação agora é real, as credenciais antigas que ele criou lá não funcionarão a menos que você crie esse usuário no Supase.

Lá em authentication user ad user. Então aqui no Superabase eu vou vir aqui em authentication. Não tem nenhum usuário aqui, ó.

Eu vou vir aqui em add user, create new user. Parece essa telinha bonita aqui. Eu vou colocar um e-mail que eu quero utilizar.

E aí você coloca o seu e-mail real, tá? Ó, coloquei meu e-mail, meu@email. com e coloquei uma senha, create.

Pronto, eu criei esse usuário. Significa que com esse usuário agora eu vou fazer login lá na minha aplicação. Então agora é a hora da verdade, tá?

Então temos aqui esse e-mail que não serve mais. Eu vou colocar meu @email. com e a senha que eu cadastrei.

Mas eu vou colocar a senha errada aqui, tá? Vou colocar um caracter a mais e enviar. Não pode entrar.

Beleza. E-mail e sem errado. Outra coisa, ele deixou isso aqui na interface, ó.

Mas depois é só pedir para tirar. Inclusive, tem uma coisa muito legal aqui, um recurso, ó, que eu tenho aqui, ó, Anotate App. Eu seleciono ele.

Aí ele vai mostrar aqui um vídeo de como funciona, ó. Mas basicamente eu posso vir aqui e selecionar isso tudo ou até mesmo pegar aqui um retângulo, ó, e fazer isso aqui e colocar uma anotação, ó. Adicionar pro chat.

Eu aceito aqui. Ele vem pro chat essa imagem, ó. E aí eu falo: "Remova isso aqui do layout".

Entendeu? É bem prático. Mas agora eu vou colocar aqui então a senha correta, ó.

meu@mail. com e a senha entrou. Entrou, voltou.

Vamos tentar de novo. Pera aí. Meu@email.

com. Entrar. Realmente deu um bugzinho aqui.

Então, como não tá aparecendo o botão para corrigir aqui, ó, eu vou selecionar aqui. Eu vou copiar tudo isso daqui mesmo, ó, e vou escrever. Estou pegando esse erro.

Estou pegando esse erro. Enviar. Muito provavelmente esse erro tem relação com a falta da tabela no banco de dados.

Lembra que a gente gerou aquele arquivo migrations para construir toda a estrutura lá no Supase. Eu dei uma reiniciada aqui, mas se a gente vir aqui na parte de código, ó, em algum lugar ele colocou essas migrations. Vamos ver aqui no final, ó.

Supas migrations. Então é esse arquivo, ó. Eu cliquei para abrir, tá vendo?

Então tem toda a estrutura da tabela. Eu vou dar um contrl A nisso aqui para copiar tudo. Control C.

E aqui no Super Base, ó, eu vou vir nesse menu lateral em SQL Editor. SQL é uma linguagem, né, de programação para banco de dados. Eu vou colar tudo aqui e vou executar nesse botão run.

E mostra aqui que tá rodando, ó. E deu sucesso, não apresentou nenhum erro. Isso significa que agora, ó, se a gente entrar aqui em database, nós vamos ver que no nosso banco de dados tem uma tabela.

Olha só, tem duas, na verdade, três, três tabelas ele criou. Ou seja, embora ele tenha criado crude ali só pra parte dos contatos, que é isso aqui, ó, ele também já criou uma tabela aqui, ó, de atividades. Criou essa daqui de tarefas, todas relacionadas aqui com a autenticação do usuário.

E aqui, ó, em table editor, a gente consegue ver as colunas delas, ó. Então, por exemplo, se eu chegar aqui em contatos, que é o que nós queremos ver, tá vendo aqui? Abriu aqui a estrutura dela, ó.

ID, nome, e-mail, companhia, status, último contato, tá tudo aqui. Então, quando a gente salvar um contato, ele vai ter que entrar aqui. Beleza, eu dei um reload aqui, funcionou.

Vou preencher aqui com o meu @email. com, a minha senha. Signin.

Beleza. Então, era isso mesmo, ó. Vou aqui colocar em tela cheia contatos, adicionar contato, criar contato e pronto, criamos o nosso primeiro contato.

Será que tá lá no banco de dados do Supasat? Entrou com esse ID, o Eli Rigobell com esse e-mail nessa companhia, com esse status, exatamente como a gente planejou. Então agora a nossa aplicação ali no Google AI Studio já tá conectada com Super Base.

Tudo que a gente criar, editar, deletar tá acontecendo no Superbase. Mas aí a gente precisa tirar ela dali, colocar num outro servidor pra gente conseguir compartilhar com as pessoas. E como que a gente faz?

Primeira coisa, a gente vai precisar subir esse projeto num repositório. Para isso, a gente vai clicar aqui, ó, em publish. Vamos navegando aqui até GitHub.

Beleza? E aí, ó, ele abre essa telinha e tá pedindo para fazer login no GitHub. A gente vai clicar aqui, vai abrir uma telinha aqui e nós vamos criar uma conta no GitHub.

Eu vou criar uma conta com esse e-mail novo que eu acabei de criar mesmo. Preenchi o e-mail, escolhi o nome de usuário. Aí eu venho para essa tela aqui, ó, que tá autorizando o GitHub, que eu já vou explicar para vocês o que é.

Vincular a conta aqui com o Google I Studio. E aqui ele tá deixando pegar, ó, todos os repositórios. Mas beleza, eu vou instalar e autorizar.

Prontinho, ele já conectou. E aí eu consigo agora criar um repositório no meu GitHub através do A Stúo. Aqui, então eu vou dar um nome para ele.

Meu app, minha vida. Tutorial de como criar um app. Aí eu tenho duas opções.

Colocar ele como um repositório privado ou público. Se eu colocar público, qualquer pessoa vai conseguir fazer um fork dele, ou seja, pegar o projeto para ele e utilizar. Lógico, tem toda a parte de licença que você pode colocar, escolher qual licença que você quer, mas aqui a gente vai colocar, ó, privado.

Para não ter problema, vou criar aqui embaixo, ó, create repositório. Pronto, ó, ele pegou todos os arquivos que mudou. No caso, aqui são todos.

E ele tá colocando que são novos, ó, foram adicionados. Então, eu vou fazer um commit. Ele volta a sincronizar aqui.

Pronto, agora não tem nenhuma mudança mais para sincronizar. Se eu clicar nesse link aqui em cima, vamos ver para onde que a gente vai. Pro repositório do KitHub.

Tá vendo? Isso daqui, ó, é o nosso projeto. Todos os arquivos que tava lá no Google A Stúo, continua lá, mas agora tá aqui também.

E para publicar, falta o servidor lá nas nuvens, 24 horas por dia, de graça. Vou entrar no Google, pesquisar por VCEL, entrar nesse primeiro link, vou clicar em start deploying. Que que é fazer um deploy?

É você subir a sua aplicação. Aqui eu vou criar uma conta e como eu acabei de criar minha conta do GitHub, eu vou com ela. Continue com o GitHub.

Aí eu já tô dando a permissão aqui, ó. Autorizar Versel, porque ele vai ver os meus repositórios lá. Tá pedindo só para confirmar o número de telefone aqui.

Eu vou confirmar. E confirmado. Pronto, me cadastrei no Verscel.

E agora como é que eu vinculo aqui a minha conta? Tá vendo que tem um botãozinho aqui, ó? Install the gitation.

Eu vou clicar nele, tá? Install. Vou deixar pegar todos os repositórios da install.

E agora olha quem apareceu aqui. Ele mesmo, ó. O meu app minha vida.

Se eu der um import, eu consigo escolher um nome para ele. Eu vou deixar aqui meu app Minha Vida. Ele identificou que é NextJs.

Tá vendo? Eu não vou mexer aqui também porque ele já veio selecionado certinho, ó. Então, mantém, escolhe o nome que você quer, mantém aqui, porque é o framework que nós utilizamos.

Mantém também aqui, ó, o ponto barra, não mexe em nada. E clica aqui embaixo em deploy. Só que antes a gente vai abrir aqui, ó, e configurar quem?

as variáveis de ambiente. Daria para configurar depois lá em configurações, sim, mas aqui a gente já vai fazer agora para ganhar tempo. Então são duas, né?

Já tem essa daqui que eu vou preencher. Vou adicionar mais uma só. Pronto, tem essas duas aqui.

Vamos lá buscar essas variáveis. Então aqui no Google AI Studio para ficar mais fácil, ó, tem o Settings. A gente vai vir aqui em Secret e são essas duas.

Essa daqui a gente não tá usando, tá? Então, ó, eu copio isso daqui, colo aqui, copio o valor dela, colo aqui. Agora eu pego a outra variável, copio tudo isso daqui, colo aqui, pego aqui o valor dela, ó, e colo aqui.

Agora é só clicar em deploy. E ele começa a fazer o deploy aqui. E pronto, ele fez o deploy, tá?

Eu vou fazer o quê? Eu vou clicar aqui em continue to dashboard. Aqui tem um monte de configurações, mas nós vamos vir aqui, ó, em visitar.

E pronto, estamos aqui na nossa aplicação, meu@mail. com. 1 2 3 4 5 6.

Enter. Olha isso, pessoal. Fala sério.

Ó, velocidade, ó. Contato. Vamos adicionar contato.

Vamos aqui adicionar um contatinho. Criar. Vamos editar para ver.

Vou editar aqui esse mesmo contato que eu acabei de criar, ó. Editar. Vou colocar aqui tudo um um.

Atualizar. Beleza, atualizou. Olha só, eu adicionei todos esses contatos aqui, criei novos, deletei, funcionou tudo.

Tá aqui no Supase. Ó, os contatos estão aqui. Então, tá tudo certinho com a nossa aplicação.

Sabe o que é mais legal agora? E agora que vocês vão ver que interessante é essa conexão aqui dessas plataformas. Ah, eu acabei no mostrando.

Olha só aquele nome que a gente escolheu, ó. meu app minhaavida. versel.

Tá vendo? É aquele nome que você vai escolher. O Versel.

É porque eles te dão um subdomínio, mas você pode vir aqui e contratar um domínio também. Ó, aqui mesmo já tem a opção, ó, add custom domain. Então você consegue vir aqui ou pesquisar por um domínio ou comprar ou também adicionar um já existente.

Às vezes é um domínio que já é seu. Aí tem um processinho que você precisa configurar o DNS. Não é complicado, mas é para você saber que dá para fazer.

Mas então, lembra que a gente tinha aqui, ó, eu vou sair da aplicação e a gente tinha isso daqui, ó, de full credentials. Vamos tirar isso daqui. Como que a gente faz para atualizar essa aplicação?

Vamos voltar aqui no Google Aí Stúio, beleza? Vou dar um logout aqui também. Aí, ó, eu vou vir aqui, lógico, eu poderia vir no código, tá?

Para ganhar tempo, olhar aqui também. Nada impede, né? Eu vi aqui, ó.

Essa aqui é a página do login, certo? Ó, tá vendo, ó? Eu trou dentro de uma pastinha chamada login.

Então tem esse pag. tts tsx. Vamos procurar aqui o que que eu quero.

O que que eu tô querendo, ó? The full credentials. Se eu dar um contrl F aqui, ó, default.

Esse bloquinho aqui, ó. Deful credentials, tá vendo? Spun.

É aquele textinho lá. Eu poderia tirar por aqui, certo? Só deletar, tá?

Hard code mesmo, não tem problema nenhum. Mas é lógico que a gente vai fazer com a IA. Então eu vou selecionar aqui, ó, o annotate app.

Aí eu vou selecionar aqui o retângulo, vou colocar aqui adicionar ao chat. Ele traz aqui, ó, essa imagem aqui, que se a gente abrir exatamente a imagem de login, só aqui com essa anotação. E eu vou escrever remova o texto com a senha default.

Enviar. Pronto, fez um barulhinho aqui legalzinho falando que terminou. E aqui realmente fez, ó.

Tá tudo certinho. Que que é legal aqui, pessoal? Testar bastante, tá?

E aí, testou? Tá tudo certinho? O que que nós vamos fazer?

A gente vai clicar aqui nas configurações de novo. Vamos vir aonde? Em GitHub.

E olha que legal, lembra do versionamento? É isso aqui. Isso aqui é até legal pra gente ver o que que a IA fez no meu código aqui, né?

Será que ela não fez nenhuma nenhuma bobeira? Não, ela só atualizou esse arquivo aqui, ó. Ela só modificou isso daqui.

A gente consegue garantir, ó, que ela sabe o que ela fez. Ela não alterou mais arquivos. Inclusive aqui eu não tô conseguindo ver, tá?

Mas geralmente as outras aplicações deixa a gente ver a alteração, né? Talvez é uma melhoria que eles vão fazer aqui, mas eu posso colocar aqui agora como uma descrição. Remoção do texto padrão de login na tela de login.

Pronto. E aqui embaixo, ó, eu vou vir em enviar o commit, né? Vou fazer um commit.

Pronto. Não tem mais nenhuma mudança aqui no app para fazer. Então aqui no GitHub agora, se eu der um F5, tá vendo que tinha aqui um commit?

Agora tem três commits, ó. Eu vou clicar aqui nesse último commit. Aí eu consigo pelo menos ver aqui, ó, remoção do texto, tá vendo?

De login na tela de login. Se eu clicar aqui, eu vejo o código. Vamos ver.

Olha só, em vermelho é o que saiu, em verde é o que entrou. Então ele tirou essa linha toda aqui, ó. Colocou essa outra linha aqui e tirou esse bloquinho aqui.

Tá vendo? Mas o mais interessante é que se a gente voltar aqui, ó, no nosso site, vamos atualizar ele. Sumiu.

[risadas] Tá vendo? Tem que tomar cuidado o que você vai comitar. Tem como fazer de forma diferente para você comitar no ambiente de teste, depois subir pra aplicação em produção.

Tem, mas aí é assunto para outro vídeo. Mas é isso, pessoal. Então, espero que eu tenha ajudado.

Me ajuda aí, vai dá essa moral para mim aqui. Comenta embaixo que ajuda bastante. Deixa o gostei, se inscreve no canal.

Tô quase batendo 100k. Me ajuda aí a chegar rápido nessa meta. Eu espero ter ajudado mesmo, de verdade.

O outro vídeo lá, eu vi vários comentários assim que, pô, me motivaram, sabe? Porque eu vejo pessoas, cara, você me salvou, poxa, você me ajudou muito no trabalho, eu tava precisando de um negócio. E é para isso mesmo que a gente tá aqui, meu, pra gente crescer junto, pra gente evoluir.

E eu espero realmente que ajude muitas pessoas esse tutorial. Tamo junto, tá bom? Não deixa de se inscrever na lista aqui embaixo para receber as novidades.

Eu sei, tá demorando para sair o treinamento, mas vai sair. Uma coisa legal assim é que as coisas vão acontecendo muito rápido, a inteligência artificial tá muito rápida e eu tô gravando o curso, fazendo as coisas e ao mesmo tempo trazendo conteúdo aqui no canal para vocês. É assim, tem que conciliar tudo, mas uma hora vai sair e eu quero fazer uma coisa bem feita, uma coisa legal que realmente agregue valor pras pessoas.

Então, estamos junto. Muito obrigado por assistir esse vídeo e até o próximo. Tchau.

Não deixa de ver um dos dois vídeos que vai aparecer aí, que é muito interessante para você.