00:00Como é que eu falo isso para vocês? A Google pegou pesado

00:00A Google entrou com a voadora na briga do Vibe Code e agora ficou ainda mais fácil e praticamente de graça criar seu próprio app, sistema SAS sem saber programar

00:13E no vídeo de hoje eu vou te mostrar uma forma diferente de usar esse poder todo

00:18Nada de app que gera imagem, que gera vídeo, que conversa com a IA, porque hoje nós vamos construir uma aplicação simples, mas é um aprendizado que pode ser uma base para qualquer projeto que você quiser criar

00:31Como eu falei, tudo de graça, até mesmo o servidor que você vai instalar essa aplicação

00:38Para isso, nós vamos utilizar a nova funcionalidade de criar apps no Google AI Studio

00:46Depois de criar a aplicação, nós vamos extrair todo esse código com poucos cliques e subir em dois tipos de servidores

00:51Como eu sei que tem bastante pessoas que já contrataram a Hostinger, até mesmo aqui pelo link do meu canal, eu quero trazer essa possibilidade para ser mais uma fonte de renda

00:58Ou seja, você vai poder oferecer, vender sites, apps e colocar na sua hospedagem que você já contratou

01:11E o segundo servidor é uma opção gratuita

01:11é a forma mais fácil de colocar para rodar uma aplicação criada nessas plataformas de vibe coding lovable, Rapit, Abacos

01:18E no final desse vídeo ainda vai ter uma dica extra para você usar tanto o Google e a Studio, mas ao mesmo tempo a lovable ou Rapid e também esse novo modelo de hospedagem para economizar e muito

01:35Então fica comigo até o final desse vídeo porque o que você vai fazer aqui hoje pode explodir sua cabeça

01:41É sério, depois dessa dica aqui, só não cria 1 milhão de sites, sistemas, apps, quem não quiser

01:49Se você gosta de inteligência artificial, programação no code, automação, considera se inscrever no canal que eu trago conteúdo aqui toda semana

01:54E se puder, deixa o seu like para me ajudar

01:54Bom vídeo

01:54Então, aqui estamos na plataforma Google AI Studio

02:00O link vai est aqui embaixo

02:00Eu vou explicar rapidamente para quem não conhece a plataforma

02:07Inclusive, tem uma função que as pessoas gostaram bastante aqui no canal, um vídeo antigo meu onde eu conversava com a IA, ela via a tela do meu PC e até eu senti dificuldade de encontrar isso

02:13Eu falei, será que eles tiraram? Mas não, que era uma função que eles chamava de stream

02:20Então eu já vou mostrar isso para vocês também

02:20Mas basicamente, ó, aqui na home tem as opções do que que nós podemos fazer

02:26Mostra o que que tem de novo aqui

02:26No caso, eles consideram o nano banana, tá vendo? Que é alguma coisa nova dentro da plataforma

02:32o Google V 3.1, que é para gerar vídeos

02:41Mas a ideia aqui é a gente vir primeiro no playground, só para vocês verem o que que mudou, ó

02:47Playground

02:47E aí vem opções do que nós podemos fazer

02:47Então, tem aqui as principais, né, ó, Nando Banana, Gemini 2.5 Pro, Gemini Flash, né, a última versão

02:58Então, eu posso clicar e conversar aqui como se eu tivesse no chat GPT, por exemplo

02:58OK? Se eu quiser vir aqui também escolher Gemini, eu tenho os modelos do Gemini, que basicamente é o mesmo que tá aqui, certo? Tem o Live, que é a versão que eu falei para vocês, ou melhor, a opção de stream que ficou aqui

03:11Então, quando eu seleciono, tá vendo? É esse Gemini flash audio preview

03:18Quando eu clico, aí sim aparece, ó, a opção de talk para conversar, webcam, né, para ela me ver e também, ou melhor, para ya me ver, né, e o share screen, que é para compartilhar a tela do meu PC

03:30Então, por exemplo, vou clicar aqui em share screen

03:36Tem a parte de gerar imagens, que também aparece o Nano Banana e outros modelos de imagem do Google

03:42A parte de vídeos, que aqui só tá aparecendo, o vel 2, o vel 3, eu consegui pelo aplicativo do Gemini

03:48E aqui também a parte de áudio, que é para você gerar texto para fala

03:55Você escreve um texto e ele gera um áudio

03:55Beleza? O que nós queremos não está aqui, que é o build

03:55Então é essa opção aqui, ó, que eles colocaram que é para você criar apps

04:02Agora sim, chegamos na parte do build

04:02E vocês vão ver, pessoal, que é muito parecido com RPL, Lovable, só que com uma diferença, é de graça

04:15Isso é top demais

04:15Olha só, ele dá alguns exemplos do que nós podemos fazer, tá? Tá em inglês, eu tentei traduzir pro português aqui direto na plataforma, não consegui

04:22Vou clicar aqui, ó, para traduzir

04:22Então, o que que ele me traz de exemplos? Tá? Eu posso criar um aplicativo alimentado pelo Nano Banana, que é o gerenciador de imagens

04:34Ou seja, posso criar algum app, alguma coisa que vai gerar imagens

04:41Também posso criar um app que vai animar imagens utilizando o V

04:41No caso aqui ainda tá com V3, ó

04:41Ah, eu quero que a minha aplicação utilize dados do Google Maps

04:48Então, eu vou selecionar esse aqui

04:48Mas você não precisa selecionar nenhuma dessas opções

04:55Isso daqui é para você ter uma ideia

04:55E se o seu aplicativo tiver essa característica aqui, faz todo sentido você selecionar porque ele já sabe o que que ele vai fazer, entendeu? Já tá meio que pré-programado, vamos dizer assim

05:07Mas a ideia aqui é você criar do zero app

05:07Então, é utilizar o quê? O prompt

05:07O que que tem no prompt? Eu posso escolher o modelo que eu quero, que aí abre nessa lateral aqui, ó

05:15Então, eu posso escolher o padrão, que é o Gemini 2.5 Pro

05:21Eu vou deixar ele mesmo

05:21Tem também, ó, instruções do sistema

05:21Se eu quiser preencher, OK? Eu não vou preencher, mas dependendo do seu aplicativo, você pode passar instruções ali para ele específicas do nicho, como que ele deve se comportar ao criar o app

05:36Aqui fala também que através dessas instruções você pode controlar o estilo, os modelos que serão utilizados, adicionar conhecimento específico sobre o que você tá querendo criar

05:51Então é muito útil

05:51E nessa opção aqui, ó, ele dá duas opções para nós, que é Angular com TypeScript e React com Typecript

05:57Isso daqui nós não vamos mexer

05:57Por padrão vem o React

06:02O React é uma biblioteca e o Angular é um framework

06:02E aí é um conjunto de mais informações ali que prepara todo o seu software, mas os dois são para criar o front end

06:08Eu vou fazer uma explicação bem rápida agora, só para você entender o que que é front end, back end, caso você nunca tenha ouvido falar sobre isso

06:21E eu vou explicar também porque vocês vão precisar entender esse conceito na hora da gente publicar a aplicação, tá bom? Esse aqui é o José e ele tá entrando na internet, navegando nos sites usando o PC dele

06:33Imagina que o José tá preocupado com o futuro financeiro dele e ele acessa um site para pesquisar ali quando que ele vai chegar no primeiro milhão dele

06:40Inclusive, nós vamos criar algo parecido com isso hoje

06:40Aqui ele pesquisou calculadora do primeiro milhão no Google, caiu nesse site aqui, ó

06:45Beleza? Só que para aparecer essa imagem aqui da calculadora na tela do computador dele, o que que aconteceu? Ele digitou a URL, certo? Então ele colocou lá o wwworinho até chegar onde? Até chegar num servidor

07:06O servidor entendeu que ele queria a calculadora do milhão e falou: "Ah, beleza"

07:12Então é o seguinte, ô PC do José, a calculadora do milhão tem esse monte de código aqui, ó, que eu vou passar para você e você executa aí aonde no seu navegador

07:23Esse código ele é HTML, beleza? Então ele mandou esse código aqui e o PC do João vai receber esse código e ele vai mostrar na tela o que que representa esse código, que nesse caso é todo esse conteúdo

07:35Tem esse menu superior, tem esse ícone aqui, tem essa imagem aqui, tem esse texto, entendeu? Isso aqui é uma formatação HTML

07:49E aí a gente tá falando do front end

07:49E o que que seria o back end? O back end seria o que aconteceu aqui, ó

07:56Tá? Só que aqui, nesse caso, foi mais só uma requisição

07:56Então ele não fez muitos tratamentos

08:03Quando que você precisa mais de um back end? Digamos que o João, ao invés de acessar esse site aqui, ele foi comprar alguma coisa no Mercado Livre

08:14Então ele foi lá, digitou o www, certo? foi pro site do Mercado Livre e o Mercado Livre retornou um monte de informação para ele também aqui um código HTML e o navegador ele simplesmente desenhou tudo isso daqui na tela

08:29Esse processo de mostrar as coisas na tela é o front end

08:29Nós já vimos

08:36Inclusive, é por isso que às vezes o seu computador fica pesado se você abre muitas guias do Google Chrome, por exemplo, porque todo o processamento, tudo que tá acontecendo ali por trás dos panos, porque às vezes tem alguns scripts executando que a gente já vai chegar lá, ele tá sendo feito no seu computador

08:53Agora, se o José ele quer, por exemplo, salvar um item como favorito, aí tem um coraçãozinho aqui de favorito, o que que ele vai fazer? Ele vai mandar de novo essa mesma requisição pela internet, certo? Ele vai acessar um outro arquivinho lá que ao invés de pedir a página, vai falar pro servidor, ó, adiciona como favorito aí

09:13E o servidor, ao invés de retornar aqui um código HTML, aí ele já vai por um outro caminho, OK? e vai retornar um outro código específico que a gente chama de API, mas isso vai acontecer no backend

09:31Ou seja, o servidor vai ver, ah, o José tá pedindo uma informação, deixa eu ver se ele tem permissão

09:31Tem, ele tá logado aqui

09:37Ah, ele quer adicionar na lista de favoritos esse produto

09:37Aí esse produto tem esse ID

09:43Aí ele vai salvar e vai falar: "Beleza, adicionei"

09:43Aí o front end vai receber isso, vai falar item adicionado com sucesso, vai cadastrar num site, nós estamos falando de back end

09:50Então, ao invés de criarmos aqui a calculadora do primeiro milhão, eu vou voltar e vou pegar esse aqui, ó, uma calculadora de juros compostos, OK? Nesse momento aqui que eu tô gravando, o Google AI Studio, ele tá criando só o front end, diferente da Raptit, Lovable, Abacos, que eles criam também o back end

10:13Então, nessas outras plataformas, a gente já tem uma integração melhor com o banco de dados para girar as APIs, que é todo esse processo de comunicação entre o front e o back, mas aqui ainda não tem isso, só que eu consigo sim pedir para ele gerar, para ele me passar os modelos, vincular com o banco de dados, só que aí ficaria um pouco mais difícil o processo

10:34Então, nesse vídeo, nós vamos focar em criar essa calculadora, só que ao invés de ir lá pro servidor, por exemplo, e fazer um cálculo, né, nesse caso do milhão, ah, quanto tempo eu vou levar para chegar a 1 milhão, eu não preciso bater lá no servidor, pro servidor fazer o cálculo e retornar para cá e mostrar os dados

10:53Eu também não preciso fazer login, cadastrar um usuário, eu não preciso

11:00Então, eu não preciso do back end

11:00Todo o processo de cálculo vai ser utilizado usando o TypeScript na máquina da pessoa, no front end

11:07Dessa forma, fica muito, mas muito fácil da gente colocar uma aplicação real no ar

11:12E nós vamos utilizar duas formas aqui que vocês vão achar muito interessante

11:17Uma delas é de graça

11:17Qual que é a minha ideia? Eu vou descrever aqui

11:17Crie um simulador de juros compostos

11:25Ele deve conter os campos

11:25Aí eu não sou nada bobo

11:25Vou vir aqui, valor inicial, valor mensal, vou colocar aqui em reais, tá? Taxa de juros, ó, a taxa de juros é anual ou mensal

11:39Então vou colocar aqui que é porcentagem anual ou mensal

11:39E o período que é a quantidade de anos ou meses

11:45Beleza? Tá aqui anos ou meses

11:51Mas para ele entender melhor ainda o que eu quero fazer, ó, eu vou tirar um print dessa tela

11:51Ó, o site tem uma dica bem legal aqui

11:57Então, eu vou pedir para ele adicionar tudo isso daqui, ó

11:57Vou selecionar tudo que tá aqui, beleza? E vou explicar o seguinte para ele antes de colar

12:04O site que eu estou utilizando como referência tem as dicas abaixo para o usuário entender como funciona a calculadora

12:11Faça algo parecido, mas modifique para não ficar 100% igual

12:11E aí, colei o texto aqui

12:18Agora eu quero mostrar o resultado

12:18Então, vou colocar aqui, ó

12:18O resultado apresentado deve ser o seguinte

12:25Preenchi aqui, tá? Valor inicial mensal

12:25Vou calcular e eu quero mandar esse cara aqui para ele

12:30Tá vendo, ó? Eu vou mandar essas duas imagens, ó

12:30Tirei o print, vou dar um crl V

12:36Tirei o print da parte da tabela aqui e também vou dar um crl

12:36Beleza? Então o resultado deve ser um gráfico e uma tabela com a evolução

12:44Beleza? Coloquei aqui, ó, imagens anexadas

12:52Ok, agora é só enviar e ver o que que ele vai criar aqui

12:52Lembra que eu falei que ele tá bem parecido com a lovable rapid? Porque olha só, tá aqui, ó, menuzinho na parte lateral esquerda aqui

13:06Daqui a pouco vai aparecer, né, o build dele ali, o que que ele construiu, porque, ó, tá aqui em pré-visualização

13:13Se eu clicar em código, aí eu vejo o código que ele tá criando

13:13Então, aqui vai começar a surgir vários códigos, ó

13:19Tá vendo, ó? Tempo real aqui, ó

13:19criou o index html index.tsx metadata jason, o typescript, tá vendo, ó? Tipo pts ts utilitários, a calculadora, que aqui no caso é o typescript, lembra que eu falei lá do back end, front end? Então, todo o cálculo tá sendo feito aqui, ó

13:37Olha só, vendo a calculadora aqui, ó

13:37P TS é o Typescript, então é o computador da pessoa que tá fazendo, não vai ser nada no servidor

13:43Vamos voltar para a pré-visualização

13:49E pronto, já temos aqui o nosso sistema, ó, simulador de juros compostos

13:49Inclusive, ele acabou mantendo até a mesma cor, colocou explicação, nem vi se tá muito diferente, mas beleza

13:55Ó, o que eu não gostei aqui foi que teve dois bugzinhos, ó

14:01O dado tá aqui, tá vendo? Oito

14:01Aqui também no período 10

14:06Mas como ele precisou mudar o input, porque por padrão o input que é esse campo aqui, ó, que a gente entra com os dados, ele não tem essa opção aqui, tá vendo? Esse com as opções

14:12Então ele teve que mudar isso e ele se perdeu um pouquinho, mas já já a gente corrige, tá? Lembra que eu falei aqui em cima a parte de dispositivo? Vou clicar, ó

14:27Se eu colocar móvel, a gente consegue ver como que fica no celular

14:27A gente consegue aqui girar o celular, ó, né? Simular, né? Que eu girei o celular

14:34Consigo também ver aqui, ó, comprido

14:40Então, já é mais tipo um tablet, tá vendo? E voltar aqui para tamanho de tela atual

14:40Então, esse aqui é o desktop

14:47Aqui do lado esquerdo, ele mostra tudo que ele criou, ó

14:47Que legal

14:47Tá vendo? Todos os arquivos

14:47Tanto que se a gente voltar lá no código de novo, tá tudo aqui

14:54Certo? E vamos testar

14:54Mas antes, vamos pedir para ele corrigir, né? Tá com erro

14:59Aqui tem uma opção muito legal aqui, ó, que é esse desenhinho aqui, ó

14:59Tá vendo? que é você fazer anotações

15:05Eu vou clicar nela e aí aparece esse menu aqui, ó

15:05Tem várias opções aqui

15:05O que que eu vou fazer? Eu vou selecionar esse quadrado aqui

15:12Vou selecionar aqui essa área

15:12Ótimo

15:12Vou selecionar essa outra área aqui também

15:19E vou adicionar um comentário, ó

15:19Posso adicionar um texto, um comentário

15:24Vou adicionar esse texto aqui, ó

15:24Ó

15:24Vou escrever aqui que os inputs ficaram com o fundo preto

15:31Mantenha branco, tá? Inclusive, deixa eu colocar preto aqui, ou melhor, vou colocar em vermelho para ficar mais fácil de enxergar

15:37Vou dar um contrtrl Z, ó, e vou colar e vou enviar de novo

15:42Beleza? Então, agora o que que eu vou fazer? Tá vendo aqui embaixo, ó? Eu poderia adicionar mais itens, setinhas, assim, ó

15:48Por exemplo, ó, adicionei essa seta aqui, mas eu vou vir aqui, ó, em adicionar ao chat

15:54Aí ele automaticamente cria esse cara aqui

15:54Eu poderia escrever aqui de novo o que que eu quero, né? Por exemplo, ah, os inputs ficaram com fundo preto, mantenha branco e clicar em enviar

16:08E aí deixa ele trabalhar aqui e fazer essa correção

16:08Claro, corrigi o problema de estilo nos campos de entrada

16:14Eles agora t fundo branco conforme solicitado

16:14Vamos ver

16:14Por enquanto ainda não, ó

16:14Tá atualizando

16:19Agora sim

16:19Só que um deles ficou sem borda

16:19Olha que estranho

16:24Então, a vantagem aqui, pessoal, é que é de grátis

16:24A gente não paga para ajustar isso daqui

16:30É só selecionar de novo aqui, ó

16:30Certo? Vou mandar isso daqui

16:37Nem vou escrever nada, já vou escrever aqui, ó

16:37Adicionei a tela e olha só, um deles ficou sem borda

16:37E enviar

16:46Perfeito, resolveu

16:46Aqui

16:46Eu vou pedir para ele tirar essa opção aqui, ó

16:51Tire a opção simular retiradas semanais, ou melhor, mensais

16:51Beleza, tirou a opção

16:57Agora a gente precisa o quê? Testar, né? Então, primeira coisa, vou adicionar alguns valores aqui e clicar em limpar

17:02Beleza, tá funcionando, ó

17:02Zerou tudo

17:02Vou clicar em calcular

17:08Beleza, apareceu tudo errado aqui, certo? Porque eu tô colocando, ou melhor, não apareceu errado, né? apareceu zero

17:14Se eu adicionar aqui, por exemplo, que eu tenho um valor inicial de 1000 e vou guardar 1000 todos os meses a uma taxa de juros de 8%, a um período de 10 anos, vamos calcular

17:21Olha só

17:28Caraca, meu

17:28Vamos comparar aqui com o do investidor sardin

17:28Olha só, 182.000 seria o valor total e o total em juro, 61.000

17:35Ó, tá um pouco maior aqui

17:35Eu vou perguntar para ele o que que tem de errado, porque os dados do site que eu usei como referência aqui tá com valor diferente, beleza? Só para não ficar quebrando a cabeça

17:47E vou colar aqui, ó

17:47Dei um contrtrl V

17:47Então, ele já carregou esse PNG aqui da tela

17:54Preenchi com coloquei os valores no site de referência e nesse que você criou

18:00O site de referência mostrou, coloquei os valores do site de referência e o que você criou mostrou esses daqui

18:05Aí vou perguntar por essa diferença? Será que você fez algo errado? Vou enviar

18:12Você fez uma excelente observação e está absolutamente correto em apontar as diferenças

18:17Peço desculpa pela divergência

18:17A sua análise está perfeita

18:23Eu não analisei nada, né? O motivo da diferença está em um detalhe sutil, mas crucial na ordem do cálculo, o momento em que o aporte mensal é adicionado

18:30Cálculo anterior incorreto

18:35O meu código primeiro somava o valor mensal montante acumulado

18:35Caraca, tá vendo, ó? Um pequeno detalhe, mas vamos ver se ele corrigiu agora

18:42R$ 1.000

18:42R$ 1.000 valor mensal porte

18:428% ao ano e um período de 10 anos calcular

18:50Vamos comparar

18:50182 283, beleza? 121.000 total investido

18:58Total em júrio 6183,20

18:58E beleza, tudo certinho agora

18:58Agora tá perfeito

19:05Se a gente colocar aqui, por exemplo, 10000 por mês e digamos que eu tinha 1600 aqui inicial, só pra gente ter certeza que tá certo, colocar até 9% ao ano

19:13Ó lá, calcular 288.365

19:21Então aqui a gente colocou 1600, aqui 100 e há uma taxa de 9% ao ano

19:28288 365 total de juros 106.765 765, tudo certinho

19:35Então, o cálculo tá perfeito

19:41Agora temos uma calculadora online e eu posso subir isso daqui lá no meu servidor ou colocar em outro servidor que já a gente vai fazer isso de graça

19:48E eu quero fazer isso por quê? Ah, o projeto é meu

19:48Eu quero pegar esse código aqui, ó, fazer download dele e instalar lá no meu servidor, entendeu? Não quero deixar aqui no Google, até porque, e aqui vem uma diferença muito legal que eu vou explicar para vocês

20:01Eu não utilizei nada de IAC

20:01Eu poderia ter utilizado para alguma coisa, mas não utilizei, certo? O app que vocês vão criar, vocês podem utilizar a inteligência artificial nele

20:16Só que tem um detalhe, se eu deixar ele aqui, né, e eu posso compartilhar com as pessoas, publicar ele, mas aqui no Google, eu não pago nada, certo? vai continuar aqui

20:26A partir do momento que eu venho aqui e gero essa chave, ó, e aí é o que tá falando aqui, ó

20:32Você não precisa configurar uma chave de API para usar o nível gratuito

20:38A ideia do Google é você criar os seus aplicativos, né, e divulgar pras pessoas, mas é natural você querer exportar isso, você querer passar uma ORL pra pessoa com o nome do seu aplicativo

20:50E aí o que que eles vão obrigar você? a criar uma chave lá vinculada ao seu Google Cloud, configurar um método de pagamento e aí conforme as pessoas forem utilizando a sua aplicação e a sua aplicação for gastando ali créditos de IA, cada imagem tem um valor, cada vídeo tem um valor, cada vez que o usuário conversa ali com a IA e realiza alguma ação, vai consumindo os créditos ali da sua conta

21:20Então eu vou deixar a senha aqui, tá? Porque nós vamos tirar daqui

21:20Aí eu também tenho a opção de compartilhar o aplicativo

21:26Tem a opção aqui, ó, de implantar o app, ou seja, fazer o deploy

21:26Olha o que que ele fala, ó

21:33Implante o aplicativo no Google Cloud, certo? Nós vamos fazer isso numa outra ferramenta que tem o plano gratuito

21:40Então, o que que ele fala? que ele vai deixar uma URL ali, um link pr as pessoas acessarem o seu produto

21:40Só que a sua chave de API, ela não vai ser exposta, mas ela será usada por ele

21:47Tá aqui, ó

21:54A API não será exposta no aplicativo, mas será usada

21:54Então você seleciona aqui, né, um projeto que você tem configurado lá no Google Cloud e aí você vai subir a sua aplicação lá e você vai pagar também cada vez que a pessoa utilizar

22:05Por se você não publicar ele, você vai compartilhar o seu projeto, por exemplo, nesse botão aqui, ó

22:11Você vai compartilhar isso daqui, essa parte da criação, e não uma URL pra pessoa utilizar o projeto, entendeu? Olha só, vou até clicar aqui para vocês verem, ó

22:24compartilhar

22:24Aí ele fala, você precisa salvar o seu aplicativo no Drive antes de compartilhar

22:24Salvar

22:24Aí aqui em cima ele mostra que tá salvando, ó

22:31Beleza

22:31E ele me dá uma URL

22:31Então eu consigo publicar o aplicativo, certo? E copiar a URL

22:40Mas vamos abrir em uma outra conta do Google e ver como que aparece

22:40Ó, acessei até o outro navegador do Playerplex

22:46Inclusive, eu recomendo demais você ver esse vídeo aqui, que esse navegador é bem legal

22:46Vou abrir

22:52Já tá com a minha conta logada aqui

22:52Vamos ver

22:52Olha só o que que ele tá falando

22:52Esse app é de outro desenvolvedor

22:52Tome cuidado

22:52Seja cauteloso ao adicionar informações

22:59Então, não faz muito sentido, concorda comigo, você compartilhar isso aqui com as pessoas? Não

23:06Eu quero compartilhar tipo um link que vai levar pro site

23:11Então, basicamente eles meio que colocam essa opção de você ficar utilizando e compartilhar o aplicativo, mas no fundo, no fundo, você tem que publicar a versão final em algum lugar

23:22É por isso que nós vamos fazer dois tipos de publicação aqui, uma no servidor gratuito e a outra na Hostinger, que eu já tenho

23:29Mas tem um detalhe aqui, se você utilizar IA na sua aplicação, pode ser um pouquinho mais difícil de você fazer essa configuração, porque você vai precisar em algum local do seu código configurar o quê? A chave de API, por exemplo, do Gemini ou do Chat EPT

23:43Eu posso até trazer um outro vídeo aqui sobre isso, né? Se eu quiser colocar, por exemplo, um banco de dados, login e senha, é perfeitamente possível

23:55Já fiz alguns testes

23:55Ele cria também, ele passa todo o esquema ali, todo o script do que que precisa ser feito para criar o banco de dados

24:00Só que ia complicar demais nesse vídeo

24:07Então eu estou publicando um site mais simples, mas você poderia também criar um site qualquer

24:12Então se você quer hoje criar um site para qualquer pessoa e fica até uma dica para levantar uma grana rápida, oferecer para alguém, ó, você não quer que eu crie o seu site, sei lá, cobra um valor lá, você vem aqui, pega outros sites como referência, muda e faz esse processo agora que eu vou fazer de publicar o site

24:29Beleza? Vamos lá

24:29Eu posso fazer o download aqui, certo? Ó, baixa o aplicativo

24:34Cliquei e vou salvar

24:34Nessa fase aqui, nós vamos utilizar a Hostinger

24:41O próximo vai ser o gratuito, mas, ó, criei uma pastinha chamada calculadora, OK? E aqui, ó, tá o arquivo que a gente acabou de fazer download, ele zipado

24:47Eu vou arrastar para cá

24:52Pronto, descompaci

24:52Só que essa pastinha aqui, ela não tá pronta pra gente publicar, certo? Eu tenho que montar a partir de todo o código que tá aqui uma nova pastinha, que aí sim vai ser a de distribuição, que eu vou subir via FTP, vocês vão entender já já, né? Ou subir através do painel de controle lá do meu servidor e aí os arquivos vão para lá e ficar disponível e a pessoa conseguir acessar

25:17Como que a gente faz isso? através de um comando chamado npm, que é node package manager

25:22É um gerenciador de pacotes do Node

25:22Basicamente, esse comandinho vai baixar todas as dependências, todas as peças que tá faltando ali pro nosso sistema rodar

25:35Então, para isso, eu vou abrir aqui um terminal, tá? Eu tenho aqui, ó, Windows Powerhell

25:41Então eu vou abrir ele

25:41Você pode baixar ele de graça aí na loja da Microsoft

25:47Vou lá na pastinha, lembra que tá no meu desktop? Então vou voltar aqui, ó

25:47CD dois pontinhos

25:47Voltei um diretório

25:55CD dois pontinhos

25:55Agora eu vou dar um de para ver o que que tem aqui

25:55Olha, tem todos esses arquivos

26:02Isso é como se eu tivesse lá no C2 pontos, que é aqui, ó, C2 pontos

26:02E aí eu tenho toda essa estrutura que a gente acabou de ver

26:07Uma delas é usuários

26:07Então eu vou entrar em usuários, depois vou até desktop

26:14É exatamente o que tá aqui

26:14Então eu vou digitar CD agora, que é para eu entrar

26:14Lembra? Eu coloquei CD dois pontos para ir voltando

26:21Agora eu quero entrar em qual diretório? O users

26:27Vou dar aqui, ó, vou colocar o S

26:27Vou dar tab e ele preencheu porque tem o diretório user aqui, ó

26:27Tá vendo? Então, entrei dentro dele

26:34Vou dar um dear

26:34É para listar o que que tem lá dentro

26:34Olha só, tem uma pastinha errigo e errigo

26:41PCwin

26:41A sua vai est com seu nome, é o seu nome de usuário

26:41Eu sei que a que eu quero é essa aqui, ó

26:48Errigo

26:48Vou dar um tab

26:48Não é essa

26:48Beleza

26:48É essa daqui

26:48Desceu win

26:48Entrei

26:48Vou dar um deir

26:48Aí vão ter vários arquivos ali no seu Windows aí, né? Pode ter, inclusive, você consegue fazer isso no Linux, no Mac, tá, pessoal? Mas se você tiver usando Windows, às vezes vai ter aí, por exemplo, área de trabalho, desktop, né, para chegar até a pastinha lá

27:08No meu caso aqui, ó, eu quero entrar onde? No OneDrive, porque eu sei que tá no OneDrive o Desktop, ó

27:13OneDrive, tab desktop

27:19Tá vendo? Eu fui, digitei desk, dei tab, ele preencheu porque existia e a gente criou uma pastinha chamada calculadora

27:25Vou dar um tab

27:25lá entrei

27:25Então agora se eu der um de eu vejo o conteúdo do meu projeto

27:32A Eli, mas não tem um jeito mais fácil de fazer isso? Tem

27:32Eu poderia abrir a pastinha, pegar o conteúdo aqui em cima todo, ó

27:39Control A, control C, vim no terminal, CD e colar aqui

27:45Lá, ó

27:45Pronto, tô dentro

27:45Colei e entrei

27:45Ou poderia clicar com o botão direito na pastinha e abrir no terminal, mas eu quis mostrar para vocês ali como que navega

27:51Beleza? Uma vez que eu tô aqui dentro dessa pasta, certo, que tá o conteúdo lá, ó, vou listar de novo

27:58Dear, o comando que eu preciso executar é o npm install

28:04Só que eu executei e deu erro porque ele não reconheceu o termo npm, ou seja, não tem o npm instalado nessa máquina

28:10Para ter o npm instalado, a gente vai pesquisar por nodejs.org

28:16Vamos cair nesse site aqui, ó, nodejs.org e instalar o Node, que aí já vai vir junto com npm, ó

28:27Vou clicar aqui em download

28:27E aqui tem o Windows Installer, ó, MSI

28:27Vou clicar nele

28:35Salvar o arquivo, abrir

28:35Primeira opção aqui, dar um next, aceitar

28:35Next, next, next, next

28:44Install

28:44Geralmente é finish, né? Mas tá install

28:44Rapidinho, vai instalar o Node na sua máquina

28:49E agora sim, finish

28:49Beleza, vamos ver se tem o npm agora lá no terminal

28:49Vou colocar uma setinha para cima porque eu já digitei o comando

28:56Tem todo o histórico aqui, tá vendo? npm install

29:03Deu erro ainda

29:03Por quê? Porque não pegou a variável de ambiente

29:03Quando eu executei aqui o terminal, ele carrega as variáveis de ambiente

29:10O caminho que tá o npm, ele não sabe que tem esse programa

29:10Então eu vou fechar e abrir o terminal de novo

29:17Agora sim, vou dar um npm install mais uma vez

29:17E deu o seguinte erro, ó

29:17O arquivo tá falando esse arquivo aqui não pode ser carregado porque a execução de script foi desabilitada nesse sistema

29:24Isso aqui é uma política de segurança do PowerShell

29:31Eu vou deixar esse comandinho aqui para vocês, ó

29:31Set execution policy

29:31Tem todos os parâmetros aqui

29:38Vou deixar aqui embaixo

29:38Beleza? E agora eu vou dar de novo o npm install

29:38Agora sim não deu erro e ele está pensando aqui, ó

29:46Tá executando

29:46Tá bom? Mais uma vez, você poderia fazer isso num terminal normal do Windows, tá? Mas eu optei por usar o Power Shell

29:56Então você pode baixar o Power Shell também na loja da Microsoft

30:01Executou

30:01Vamos ver o que que ele criou

30:01Ó, tem uma pastinha nova aqui, ó

30:01Node modules

30:07Lembra das permissões que eu falei? Olha o tanto de permissão aqui, ó

30:07Ele baixou todos esses arquivos aqui, que é o que a gente precisa para tá executando o nosso sistema

30:14Agora, a gente precisa executar um comando para empacotar esse projeto e separar uma pastinha que nós vamos colocar no servidor

30:20Lembra que nós deixamos lá React? O que acontece é que o React ele tá rodando aqui no no caso do Google, né? Ele tá rodando no Vit e o VIT é o que vai fazer esse empacotamento agora

30:34Então o comando que eu vou dar é um npm run build e vou dar um enter

30:39Olha só, até apareceu aqui, ó, vit, tá? Então ele tá criando todo o projeto ali, ou melhor, uma pastinha específica que a gente vai colocar lá no servidor

30:45E é simples assim, beleza? Terminou

30:52Se eu abrir essa pastinha aqui, ó, Dist, tem os arquivos que a gente vai colocar lá no servidor, mas eu quero ver um preview como que vai ficar no servidor

30:57Então eu vou dar um npm espaço run espaço preview

31:09Olha, ele me passou aqui o endereço que tá rodando, ó, local host, certo? Que é a minha máquina na porta 4173

31:15Vou copiar, vou jogar aqui no navegador, ó, e abrir

31:21Olha só

31:21está rodando na minha máquina, certo? Mas é só eu pegar aquele pacotinho agora e jogar lá no servidor

31:28Vamos fazer isso

31:28O Vit ele simula um ambiente de produção, esse preview aqui

31:34Só que o que a gente quer é colocar num ambiente real de produção

31:41Então o que que acontece na Hostinger? A URL base, o local dos arquivos, ele muda um pouco

31:47Então a gente precisa fazer uma alteração rápida aqui, ó

31:47Aqui tem um arquivo chamado Vit Config, tá vendo? A gente vai abrir ele

31:53Pode ser com bloco de notas mesmo, tá? Aqui, ó

31:53E aqui no final, ó, melhor, antes de fechar esses dois aqui, ó

32:00Tá? Antes de fechar essas duas chaves aqui, ó

32:00A gente vai vir aqui, vai dar um enter, tá vendo? E eu vou adicionar uma linha aqui, ó, escrevendo o seguinte: base dois pontos, que é a URL base do meu projeto, espaço aspas simples ponespaçula

32:20Vou salvar, certo? E aqui, ó, vou parar isso daqui dando um contrl C e vou rodar de novo

32:27NPM run build

32:27E deu erro

32:27Ah, já sei

32:27Eu acho que é uma vírgula que ficou faltando

32:33É isso mesmo, ó

32:33Aqui eu esqueci de adicionar uma vírgula

32:33Por quê? Eu adicionei mais uma informação aqui embaixo, então faltou essa vírgula aqui, tá bom? Eu vou salvar mais uma vez, fechar

32:46E agora sim executar o NPN Run build

32:46Aí, ó, agora foi

32:46Agora eu vou vir na Hostinger e poderia ser qualquer servidor, tá? Vou acessar minha conta aqui

32:52Pesquisei aqui, ó, o meu domínio, elirrigobelli.com

32:58E aí você poderia utilizar um FTP, que é um protocolo de transferência de arquivo, certo? ou vim aqui, ó, em gerenciador de arquivos e eu vou subir os arquivos aqui

33:10Geralmente, ou melhor, nesse caso aqui que a gente tá usando a page, né, que é o servidor, sempre vai ser aqui o public HTML

33:17Então, dentro de public HTML vai ter uma estrutura já se você já tiver um site, no meu caso aqui tem um WordPress, aí vai ter uma estrutura do WordPress dentro dele

33:22Eu vou criar uma pastinha lá chamada calculadora juros compostos

33:28Ó, eu entrei aqui, tem toda a estrutura do WordPress, mas não tem problema

33:33Eu vou clicar aqui em nova pasta, vou dar o nome, simulador de juros compostos, tudo minúsculo, sem acento

33:40Lembra que o URL não tem acento, nem letra maiúscula

33:45Vou criar

33:45E agora eu vou subir os arquivos para cá, ó

33:45Tá vendo? Tem um botãozinho de upload aqui, ó

33:52Vou clicar nele

33:52Eu quero subir uma pasta inteira

33:52Vou clicar aqui pasta

33:52Vou selecionar a pasta

33:58Ó, tá aqui

33:58É a pasta dis, lembra? Tô dentro de calculadora dis

34:04Vou selecionar fazer upload

34:04Fazer upload de dois arquivos para esse site

34:09Sim, fazer upload

34:09Ó, ele trouxe aqui a pasta dis

34:09Na verdade, eu poderia renomear ela agora, no caso, para simulador de juros compostos, mas como ele subiu o dist, eu vou entrar aqui e vou selecionar esses dois itens aqui, ó

34:22Vou segurar o shift, né, para selecionar os dois ou control, ó

34:22Control

34:22e vou clicando

34:29E aí aqui em cima eu vou vir em mover, tá? E aí eu vou mover para dois pontos que é na pastinha de trás, certo? Então ficou melhor

34:35Aí agora eu posso até remover esse disc aqui que não tem nada dentro dele, ó

34:41Deletar

34:41Então seria mais fácil até se dentro do public html eu fizesse o upload, ia vir com a pastinha chamada Dist

34:52Eu renomearia ela para simulador de juros compostos

34:52Nesse momento aqui agora eu tenho que conseguir acessar o site colocando o quê? O meu domínio/simulador de juros compostos

35:03Então é eli igobel.com/ para evitar erro, ó, venho aqui, tá vendo o nome dessa pastinha? Certo? Seleciono tudo aqui

35:10Simulador barra simulador de juros compostos, tá? Aí

35:15Então agora vocês podem acessar essa URL à vontade e fazer cálculos aqui

35:15Mas eu mostrei tudo isso que é muito interessante, é legal para caramba fazer isso

35:23É bom saber isso daqui, na verdade passei com muitos detalhes, mas eu preciso, nesse caso aqui, ter um servidor

35:29Pessoal, vocês t noção que vocês poderiam fazer sites, né, microssistemas assim paraa sua empresa, eh, ou para outras empresas vender

35:41Meu, isso aqui é muito útil

35:41Mas como eu falei, você precisa ter aqui um servidor e se você quiser subir sem pagar nada, de forma mais rápida ainda, vamos fazer isso

35:54Ah, mas antes vamos testar, né? R$ 1.000

35:54Vou acrescentar ali, fazer um aporte de R$ 1.000 todos os meses

36:00É um período de 15 anos

36:06Beleza? 370.000, tudo certinho

36:06Tá aqui, tá mostrando aqui o a tabela do acumulado

36:12Muito legal, né? Você vê a velocidade que a gente fez um software desse

36:12Que louco

36:12Beleza, vamos rodar isso daqui agora num servidor de forma gratuita

36:17Para isso, nós vamos utilizar esse cara aqui, ó, VCEL.com

36:23OK

36:23Repara aqui, ó

36:23Preço, lógico, tem a versão paga, tudo, mas você tá utilizando como hob aqui, ó, para começar, para brincar, para fazer e até mesmo utilizar, é gratuito

36:28Beleza? O nosso código tá onde? Tem um código na minha máquina que eu fiz download, certo? E tem um código que tá lá

36:43no Google AI Studio, tá aqui, ó, o código

36:43Nesse caso aqui, o Versel, ele vai ser muito prático pra gente subir uma nova aplicação, um deploy, que a gente fala, né, para botar para rodar através do GitHub

36:54E meu, é muito prático isso daqui

36:54Tá vendo que tem aqui, ó, salvar no GitHub? Você vai clicar aqui, vai vincular a sua conta do GitHub

37:06Se você não tem, é só clicar

37:06O que que é o GitHub? É um repositório onde a gente vai fazendo alterações no código

37:13E é muito, muito louco isso, porque vocês vão ver que a gente vai ter o site rodando na URL e aí a partir do momento que a gente faz uma alteração aqui mesmo e envia de novo por GitHub, ele já faz uma alteração lá no site

37:27Então alterou aqui no A Studio, no caso, ficou legal a correção, já foi para lá também, entendeu? Então, ó, eu vou clicar aqui e fazer login com a minha conta do GitHub

37:32Vou fazer melhor

37:32Eu vou criar uma conta do zero aqui no GitHub, porque sempre surge algum detalhezinho, né? Então vamos lá

37:38Vou vir aqui em criar uma conta

37:45Aí sim, preenche com seus dados

37:45Aqui eu vou escolher uma conta minha do Google que eu não utilizei ainda no GitHub

37:50Beleza? Fiz login aqui com e-mail que eu quase não utilizo

37:50Cí dentro do GitHub, mas eu não quero nada aqui

37:57Quero voltar aqui pro I Studio, clicar nesse ícone do GitHub e fazer login no GitHub para continuar

38:05Ele reconhece que eu tô com logado, certo? E tá pedindo aqui a autorização

38:05Repara que tá habilitado aqui, ó, todos os repositórios, porque eu não criei nenhum lá

38:12Se eu tivesse criado um repositório específico, eu poderia dar essa permissão para um repositório só, sabe? Mas aqui eu vou liberar geral aqui para todos os repositórios

38:25Instalar autorização

38:25Como eu não selecionei um repositório específico, ó, tá pedindo para eu criar

38:31Então eu vou dar um nome que é calculadora, juros compostos

38:31Posso dar uma descrição aqui, calculadora clone, investidor sardinha, teste IA

38:39É uma descrição qualquer

38:39Posso deixar privado ou público? Ah, deixa público

38:46Qualquer pessoa vai conseguir acessar esse programa, até mesmo baixar ele, melhorar

38:52E aí vou clicar aqui embaixo, ó, criar git repositório

38:52Ele tá sincronizando

38:58Beleza? Olha que legal, ele pegou todos os arquivos que estão ali, certo? Que eu tô trabalhando, que ele criou e que ainda não estão no repositório

39:05Ou seja, nesse caso, todos

39:05Então, pode ver, a maioria aqui, ó, tá com ad de adicionando

39:12Ele tá adicionando os arquivos, ó

39:12Tá vendo? Tem um que é modificado por quando a gente cria o repositório já tem esse readm, né, que é o layam, que tem as instruções

39:19Então ele tá alterando para funcionar com esse projeto aqui

39:26E nós vamos fazer o primeiro commit, certo? É a primeira versão

39:26Vou fazer assim, ó

39:32Primeiro commit, beleza? E aqui embaixo vou enviar

39:32A ideia é a cada atualização que a gente fizer lá no GitHub, a gente documentar, escrever quais foram alterações, né, nessa versão aqui

39:41No caso, foi o primeiro, por isso que eu escrevi primeiro commit

39:48Lá, nenhuma mudança para fazer commit, ele já fez

39:54Vamos lá olhar no GitHub como que tá

39:54Olha só, aqui no GitHub agora aparece um repositório

39:54Se eu clicar, eu entro dentro desse repositório

40:02Tanto se eu passar o RL para vocês, vocês vão conseguir acessar e fazer download dele normalmente

40:09Inclusive, ó, ele já colocou no RIDM as instruções, ó

40:09Tem o npm install

40:09Tá vendo que tem aqui os sete a variável Geminaia P? Porque se eu quisesse, tá na minha aplicação, na hora que eu criei, criar algo que utilizasse a API do Gemini, certo? Eu quero que utilize a inteligência artificial do Google, Gemini

40:27Então eu tenho que colocar a minha P aqui

40:27E é lógico que eu não vou colocar aqui nesse código, porque aí qualquer pessoa poderia pegar, certo? Então eu vou criar uma variável de ambiente no servidor que eu for rodar

40:40No caso, poderia ser no back end, né? Mas nesse caso aqui eu crio um arquivo de variáveis de ambiente e coloca a Pic lá de forma segura

40:46Mas nós não vamos precisar disso porque como eu falei, nós não utilizamos IA nesse projeto

40:53O que que nós vamos fazer agora? Vamos entrar lá no Versel, vamos conectar ele a esse GitHub, pegar esse repositório e colocar para rodar

41:04E é muito prático, vocês vão ver, ó

41:04Você pode criar sua conta, fazer login se você não tiver

41:10Vou falar aqui que eu vou usar, ó, para hobjetos pessoais

41:10Vou colocar meu nome Eliá

41:16Vou conectar com a conta do Google, ou melhor aqui, ó, eu já vou conectar com o Git Hub, ó

41:21Então, a mesma coisa

41:21Ele já tá pedindo aqui, ó, só para eu autorizar

41:27Maravilha

41:27Tô dentro do Versel

41:27Tá vendo aqui em cima, ó? Entre com a URL para fazer o deploy

41:27Eu poderia pegar a URL lá no GitHub, mas tá vendo que tem um botãozinho aqui instal, ó

41:34Vou clicar nele

41:34Vamos ver o que que acontece

41:39Ó, que legal

41:39Ele tá querendo pegar o quê? os repositórios da minha conta do GitHub, certo? Poderia ser um repositório específico, mas eu vou deixar todos

41:46Agora ele vai atualizar com os meus repositórios aqui

41:46E aí, qual que eu quero fazer o deploy? Ah, repara que ele já identificou que é o VIT, ó

41:53Esse aqui é o logo do VIT, certo? Eu vou dar um import nele

42:00Tá vendo? Tá aqui, ó

42:00Há 5 minutos atrás eu fiz atualizações

42:00Import

42:07Aí ele tá pegando a URL, tá criando aqui, ó, um time, colocando uma slug, ó, calculadora, juros compostos

42:14Tá vendo que ele identificou que é o VIT, o ponto barra aqui também não vou alterar nada, só vou fazer um deploy

42:20Vai ficar pensando um pouquinho aqui, tá? Instalando dependências, fazendo tudo que tiver de fazer, daqui a pouco vai falar para você: "Tá rodando." Parabéns, você acaba de fazer o deploy do seu projeto

42:32Coloca até um print aqui, ó

42:32Continue to dashboard

42:32Ah, repara, vou voltar aqui, ó

42:38Eu tenho algumas opções aqui, mas o que eu queria mostrar, só para vocês saberem também, que eu posso adicionar um domínio customizado, tá? Mas é isso

42:43Eu vou clicar aqui, ó, em dashboard

42:43Pera aí, pro dashboard, tá aqui

42:49Então, teoricamente, olha só, nós temos esse deploy aqui e o deploy ele vai mudando, tá? Mas nesse caso, esse aqui foi o último deploy e o domínio é esse aqui, ó

42:55OK? E tá read, tá pronto há 2 minutos atrás

43:04Tá rodando

43:04É isso

43:04O site tá rodando

43:04Se eu copiar essa URL aqui, ó, vou clicar já para abrir

43:10Aí, ó, a gente tá aqui no site

43:17Eu colocar aqui, ó

43:17Vou simular

43:17R$ 1.000, 1300

43:23Calcular

43:23Pronto, tudo funcionando normalmente

43:23Qualquer pessoa consegue acessar pela URL também

43:23Tá aqui a URL, ó

43:30calculadora, traço juros compostos, traço gold.versel

43:36Então, se vocês colocarem essa URL aí também, vocês vão acessar essa aplicação que eu acabei de criar pelo Google AI Studio

43:43Eu vou deixar os links aqui para vocês acessarem, inclusive o link aqui, ó, do Google AI Studio para vocês copiarem, duplicarem e mexerem à vontade

43:51Só para finalizar, digamos que eu quero mudar alguma coisa

43:51É muito simples

43:58Nós vamos colocar aqui, ó, por exemplo, para trocar tudo que tá em vermelho para esse padrão de azul que eu utilizo aqui

44:05Altere tudo que está em vermelho para a cor

44:05E coloquei a cor em exa do azul

44:05Enviar

44:05É claro

44:05Aí começou a alterar os arquivos aqui, ó

44:11Olha só que legal

44:11Tudo azulzinho, só que agora eu quero subir no servidor

44:11Se eu quiser subir lá na Hostinger, eu tenho que fazer o download, fazer todo o empacotamento, subir os arquivos novamente

44:24É um processo mais chatinho

44:24Já na Versel aqui, meu, eu só preciso vir aqui, ó, clicar em salvar no GitHub

44:30Olha o que que acontece

44:30Isso é o versionamento

44:36Ele tá mostrando que foram alterados aqui quatro arquivos

44:41Então, por exemplo, o que que eu mudou aqui? Alterei de vermelho para azul

44:49Beleza? Corrigir aqui, ó, de vermelho para azul

44:49E vou enviar aqui, ó, os quatro arquivos

44:56Tem um botãozinho aqui, ó, para fazer esse comit, comitar essas alterações

45:01Enviar

45:01Beleza, sincronizou tudo

45:01Se eu for lá no repositório agora, vamos ver

45:07Olha que legal, tem aqui todos os arquivos, certo? Primeiro comit, ó

45:07Lembra que eu fiz o primeiro comit a 2 horas tudo

45:13E aqui, ó, alterei de vermelho para azul

45:13Agora tá o now aqui, ó, de agora

45:21Se eu entrar em útils, ou melhor, em componentes, porque foi em componentes, né? Aí tem os arquivos aqui, ó

45:28Então, foi o calculator, o evolution, o info section e o results aqui, ó

45:33Então, ó, agora, agora, agora esse outro aqui também não foi alterado

45:39Agora, será que já alterou lá na Versel? Vamos ver, ó

45:39Essa aqui é URL, certo? V executar

45:44Pronto

45:44Então você vê que a partir do momento que eu faço o commit, já tá lá, atualiza

45:52Muito bom isso, né? Fala para mim, pessoal, o que que vocês acharam

45:57Não é legal isso, pô? Imagina assim, você pode agora criar qualquer aplicação e colocar para rodar sem ficar meio que refém dessas outras plataformas

46:05Eu não vou negar que ainda falta muito pra Google chegar ali aos pés da Lovable, da Raplit, que para mim é uma das melhores hoje

46:17Mas ela já resolve assim um problemão

46:17Por qu? Olha só a dica que eu vou dar para vocês

46:23Imagina que você quer construir um sistema e toda a parte do front end, lembra que eu expliquei para vocês? Você pode pedir aqui sem gastar nada pro Google AI Studio

46:28E eu não sei se vocês lembram, mas na Rapit, por exemplo, você consegue importar um código do GitHub, ou seja, você consegue criar todo o front end, todas as páginas da sua aplicação, sem gastar nada e depois lá na Rapit você importa do GitHub e cria a parte de banco de dados, até mesmo a parte de hospedagem, se bem que você já viu aqui, que você coloca na Versel, certo? e não precisa se preocupar com a hospedagem

47:03Então essa é a sacada

47:03Comecei a criar aqui minha aplicação no Google AI Studio

47:10Agora para eu pedir pro Google AI Studio, embora ele iria fazer isso, tá? Se você pedisse passar os esquemas, mas ainda tá um pouco complicado, né, de fazer integração com o banco de dados

47:21Eu teria que criar a parte do back end

47:27Então, pera aí

47:27Não, como ele não tem ainda, o que que eu vou fazer? Beleza, eu terminei todo o front end, vou subir no GitHub, faço download, né? Faço esse importe lá na Rapit, por exemplo, e falo Rapit é o seguinte, eu tenho esse código aqui, agora eu quero criar essas funções

47:39Terminei de criar as funções

47:46Na Rapit, eu também faço commit para onde? Para GitHub

47:46E depois vou na Versel e subo a minha aplicação

47:51Entendeu, galera? Tem que ser esperto para economizar e conseguir colocar aí o máximo de aplicações no ar

47:58Eu espero que você tenha gostado desse vídeo

47:58Eu sou Eli Rigobelli

47:58Muito obrigado por assistir e até o próximo

48:03Ciao.