Transcription
Tem uma coisa acontecendo agora que muita gente ainda não percebeu. Você não precisa mais separar design, código e automação. Hoje já existe um fluxo onde você descreve um aplicativo e ele praticamente nasce pronto com interface, lógica e funcionamento real. E o mais interessante, isso não tá em uma única ferramenta, tá na combinação de duas. De um lado, o Google State criando toda a interface visual. Do outro, o Google EA Studio transformando isso em um sistema funcional com lógica e automação. Se você entender como essas duas coisas se conectam, você sai da ideia e vai direto pro produto usando duas ferramentas gratuitas.
Então, antes de colocar a mão na massa, inscrevam-se no canal. E para ver os vídeos sem anúncios, é só clicar no botão seja membro. Fechou? Então bora pro vídeo.
Bom, pessoal, hoje eu quero compartilhar com vocês um fluxo de trabalho que eu achei muito interessante. A gente vai utilizar o Google Street para criar o design de um aplicativo e depois o Google AI Studio para dar vida a esse aplicativo. E o que é mais legal, durante esse processo, eu vou mostrar para vocês como colocar esse aplicativo no ar utilizando uma plataforma que até certo ponto também é de graça.
Então vamos lá, começando aqui pelo Google Stitch. Para quem não conhece, já tem outros vídeos aqui no canal mostrando exatamente como essa ferramenta funciona. Basicamente, você vai digitar o seu prompt, vai escolher se você quer um aplicativo paraa web ou para celular, vai selecionar o modelo e aí você vai enviar o seu comando e ele vai entregar a interface do seu aplicativo. Como nesse exemplo aqui, primeiro eu vou mostrar para vocês o que eu já consegui fazer e depois a gente vai construir tudo isso juntos do zero, beleza?
Então, tenho aqui o meu aplicativo, eu tenho uma tela aqui referente à paleta de cores e depois uma, duas, 3, 4, 5, seis telas diferentes, todas elas criadas pela inteligência artificial. Que que eu fiz aqui? Digitei um prompt, pedi para criar o meu aplicativo e ele me entregou esse resultado aqui.
Bom, que que eu fiz? Para que você consiga exportar isso daqui pro Google EA Studio, basta que você selecione todas as telas que você quer. Aí você vai vir aqui em exportar. E na primeira opção a gente já tem aqui EAI Stúio. Ainda tá na prévia, mas funciona direitinho. Então a primeira coisa que a gente vai fazer é exportar lá pro Google AI Studio. Só selecionar e clicar aqui para criar com o AI Studio. Feito isso, ele já vai colocar esse prompt aqui automaticamente. Crie um app com telas como estas. é possível adicionar links diretos para as imagens do HTML. Ele vai pensar um pouquinho, vai fazer ali todo o cronograma de implementação e depois vai me entregar um resultado parecido com esse daqui. Eu vou mudar aqui para celular só pra gente conseguir visualizar direitinho. Pronto, tenho aqui a minha primeira tela, tela número dois aqui. garagem, mercado, perfil, tenho aqui o carrinho de compras, tudo funcionando perfeitamente do jeito que eu previ aqui dentro do Google State, onde eu tinha todas as telas e agora elas estão funcionando dentro do Google AI Studio.
Então, dá para perceber que a gente consegue utilizar aqui uma ferramenta para criar o design e outra para dar vida a esse design. Aí tem muita gente que pergunta: "Ah, mas por que que você não faz tudo dentro do Google EA Studio?" simplesmente porque aqui no stit eu tenho muito mais controle. Se eu clicar em qualquer uma dessas telas aqui, eu tenho a opção, por exemplo, de criar variações dessa tela. Eu posso fazer edições pontuais, posso trocar a paleta de cores, posso acrescentar uma outra tela, enfim, como eu tenho esse canvas infinito aqui, eu consigo trabalhar de forma totalmente visual. E outra coisa muito interessante, é uma ferramenta gratuita. Então eu não vou ter que me preocupar com créditos para criar o design do meu aplicativo. Eu monto tudo direitinho e mando lá pro Google AI Studio.
Só para efeito de comparação, eu fiz a mesma coisa, só que utilizando o Cloud Code. E vejam o resultado. Eu vou mudar aqui para celular também. Vejam, tela número um, tela número dois, mercado, perfil, carrinho de compras, tudo funcionando do jeito que eu previ. Então, o que que eu quero mostrar aqui para vocês? que utilizando o Google AI Studio, que é uma ferramenta gratuita que você consegue utilizar com uma API grátis, você vai conseguir um resultado muito parecido, como se você estivesse usando o Cloud Code, que é uma ferramenta paga. Obviamente que tem muita gente que trabalha com código que prefere o Cloud Code para trabalhar, porque aqui você tem mais liberdade. Você pode pedir para que ele faça implementações, pode trazer sua chave de API para cá, você tem acesso ao código de uma forma mais abrangente e mais profissional. Eu não tô questionando isso. A ideia é mostrar para vocês que com Google AI Studio a gente consegue fazer algo parecido, OK?
Antes de voltar lá pro Google EA Studio, como é que eu fiz para transportar os dados do Google Stitch aqui para dentro do Cloud Code? Também é bem simples. Eu fiz a mesma coisa, selecionei todas as telas, só que em vez de exportar pro Google EA Studio, eu cliquei aqui para copiar o código pra área de transferência. Código copiado. Entrei aqui no cloud code. Colei aqui todo o meu código do jeitinho que tá aparecendo aqui. Vejam que é um código bastante extenso porque ele tava relacionado à criação de seis páginas. E aqui nessa parte final, logo abaixo do código, eu coloquei o meu prompt. Como é que eu fiz esse prompt? Eu vim aqui no Google State, copiei o meu prompt inicial, entrei aqui no chat EPT, colei esse prompt inicial e pedi para ele melhorar, ou seja, para que ele desse mais instruções pra inteligência artificial criar um aplicativo completo. Então você pode fazer isso utilizando qualquer modelo de inteligência artificial. Pode ser o próprio Cloud, Gemini, chat EPT, não importa. Você coloca a sua ideia central e pede para ia transformar esse prompt, dá mais corpo para esse pedido. E aí com certeza quando você for prototipar isso, o resultado vai ficar bem melhor.
Aí aqui dentro do Google EA Studio, como é que eu fiz para publicar esse meu app? Existem algumas formas. Se você clicar aqui em publish, você vai escolher um projeto, vai pedir para publicar. Só que o que que vai acontecer? você vai ter um link gerado pelo próprio Google AI Studio. Então, se você quiser publicar, você vai selecionar aqui o projeto e vai clicar para publicar. Vai demorar um pouquinho. Aparece a mensagem aqui que o aplicativo tá sendo publicado. Pronto. Quando ele terminar, eu vou ter essa URL aqui. E aí é só eu clicar em open. E eu já tenho aqui o aplicativo que foi criado pelo Google AI Studio. Reparem que eu tenho aqui uma URL genérica criada automaticamente pelo Google AI Studio. E aí você pode utilizar, compartilhar da forma que você quiser.
Porém, existe uma ferramenta parcialmente gratuita chamada Netlafly. Eu vou deixar o link direitinho aqui na descrição desse vídeo. Como é que ela funciona? Bom, você tem um plano gratuito aqui que funciona na base de créditos. Você pode desenvolver aqui alguns projetos, só que se você quiser algo mais avançado, aí você tem que pagar por uma assinatura. Vejam aqui o meu site de motos antigas que eu publiquei utilizando o Netfly. Então, essa versão do meu aplicativo foi publicada utilizando o Netfly. Tenho todas as funções, todos os menus, tudo funcionando perfeitamente. Obviamente que se você quiser colocar, por exemplo, um sistema de pagamentos, aí você tem que linkar com a sua conta, por exemplo, do Stripe utilizando uma chave de API. Mas isso é outra história. O que eu quero mostrar aqui para vocês é a publicação de um site simples. E deu certo aqui utilizando o Netlfly. Beleza?
Então, vamos construir algo do zero que eu quero mostrar para vocês todo esse processo na prática. Voltando aqui pro Google Stitch, vou escolher aqui uma aplicação web. Vou colar o meu prompt. Cria um aplicativo moderno de acompanhamento de hábitos. Inclua a tela inicial com resumo do dia, lista de hábitos com cheque diário, progresso semanal em gráfico e uma tela de estatísticas. Use um design escuro, minimalista e responsivo para celular e desktop. Aqui no modelo eu vou colocar o 3.1 Pro. Na paleta de cores eu vou deixar que o próprio Stitch decida para mim e vou enviar. O agente aqui já começou a trabalhar dizendo para mim o que que ele vai criar e já começou a gerar o meu design. Primeiro ele montou aqui a paleta de cores e agora ele começou a criar as telas. No total serão quatro telas. Pronto, ele já terminou de gerar. Vou aumentar aqui pra gente visualizar melhor. Então eu tenho aqui a minha paleta de cores, tela número um, lista de hábitos, estatísticas detalhadas e aqui progresso semanal. Então tenho aqui as minhas quatro telas. A geração aqui saiu em inglês, mas pro vídeo não ficar muito longo, eu vou deixar do jeito que tá. Mas obviamente se você selecionasse aqui todas as telas, daria para pedir pra inteligência artificial traduzir o aplicativo. Eu já mostrei isso em outro vídeo.
E agora eu vou fazer o seguinte, eu vou selecionar todas elas, vou clicar em exportar e vou mandar lá pro Google EA Studio. Pronto, as telas já foram carregadas. Aí ele já colocou aquele prompt automático. Crie um app com telas como estas. É possível adicionar links diretos para as imagens do HTML. E aí, agora eu vou complementar esse prompt aqui. Implógica para um app de hábitos com armazenamento de dados. Permita criar, editar e marcar hábitos como concluídos diariamente. Gere persistência de dados, cálculo automático de progresso semanal e exibição de estatísticas com base no histórico do usuário. Feito isso, eu posso escolher aqui qual modelo eu quero utilizar. Vou deixar aqui o 3.1 Pro e vou pedir pro Google EA Studio criar o meu aplicativo.
Lembrando que eu tô usando aqui o Google EA Studio, que é o objetivo desse vídeo, mas como eu mostrei anteriormente, se você quiser, você pode entrar aqui no Google Stitch, clicar em exportar, copiar o código pra área de transferência, entrar aqui no cloud Code. Aí você vai iniciar uma nova sessão, vai colar o código, logo abaixo vai colocar o seu prompt e aí você vai deixar que o Cloud Code crie o aplicativo para você. OK? Então, dá para fazer usando praticamente qualquer tipo de modelo de inteligência artificial que a gente tem disponível hoje em dia. Eu fiz com o Google EA Studio porque é gratuito, mas você pode usar aquele que você gosta mais.
Voltando lá pro Google EA Studio. Pronto, ele já terminou de criar o meu aplicativo. Então, essa daqui era a interface que foi prevista, que foi desenhada pelo Google Street, que aqui o aplicativo funcional. Se eu quiser visualizar para celular, é só clicar aqui. E aí eu tenho todos os menus, tudo funcionando perfeitamente.
Bom, aplicativo criado, tudo funcionando. Se você quiser, você pode utilizar aqui o campo do prompt para dar outras instruções, para pedir para acrescentar, para traduzir, enfim, para fazer o que você quiser. Ou ainda utilizar essas sugestões que aparecem aqui embaixo, que são dadas pelo próprio Google EA Studio para deixar o seu aplicativo ainda mais profissional. Se estiver tudo certo, se o seu app já estiver pronto para publicar, basta clicar aqui em publish. Aí você vai selecionar aqui o seu projeto, clicar em publicar, ele vai gerar URL. Aí é só clicar em open. E aí eu já tenho aqui o meu aplicativo funcionando perfeitamente.
Agora como é que a gente faz para publicar esse app naquela plataforma Netlafly? Também é bastante simples. Vou voltar aqui no Google EA Studio, vou clicar em código e agora eu vou fazer o download do meu código aqui pro meu computador, clicando aqui nessa flechinha. Download S a zip file. Vou salvar na área de trabalho. Aí eu vou descompactar. Vejam que eu tenho aqui todos os arquivos que foram criados para gerar o meu aplicativo.
Agora eu vou voltar aqui no Netlfly, vou clicar para adicionar um novo projeto. Eu posso colocar aqui uma descrição. Aí para trazer o meu site para cá existem algumas opções. Se eu já tiver colocado o meu código numa dessas plataformas aqui, eu posso fazer o link com a minha conta e baixar o meu repositório. Ou senão, você pode fazer o upload dos seus arquivos aqui para dentro da plataforma, que é o que eu vou mostrar para vocês agora. Basta clicar aqui no link to upload. Aí você vai selecionar aquela pasta que você descompactou agora a pouco, fazer o upload. Ele vai começar a os seus arquivos. Lembrando que eu tô fazendo isso daqui numa conta gratuita, mas se você precisar de mais, aí eles têm planos de assinatura aqui que você pode escolher. Pronto, terminou aqui de fazer o deploy. Eu vou pré-visualizar. Olha, já tem aqui o meu site dentro da plataforma, porém com essa URL esquisita aqui. Para mudar essa URL esquisita aqui, eu vou voltar aqui no project preview. Vou clicar em Quick Setup e aqui eu vou escolher o meu nome, por exemplo, Obsidian Day. Você pode colocar o nome que você quiser e vou pedir aqui para fazer o update do nome do meu projeto. Aí aqui aparece aquela opção que eu posso colocar um domínio que eu já tenha ou eu posso comprar um. Mas se eu quiser deixar do jeito que tá, é só clicar aqui em finish later. E pronto, já tenho aqui a minha nova URL, obsidianday.netlafly.appap. E aí agora eu tenho aqui o meu site completamente funcional.
Então, viram só, utilizando apenas ferramentas gratuitas, Google State, Google A Studio e essa versão aqui do Netlafly, eu consegui publicar o meu aplicativo. Então, pessoal, testem aí. Como eu mostrei para vocês, isso também pode ser feito com o Cloud Code. A diferença é que com a ferramenta Down Tropic você vai ter que ter um plano pro aqui. Não, usando apenas contas gratuitas você consegue criar o design, gerar o seu aplicativo e depois publicar sem ter que gastar um único centavo.
E aí, que que vocês acharam dessa combinação? Dá para usar um dia a dia? Vocês ainda preferem o cloud, mesmo sendo pago? Contem para mim nos comentários, tá bom? Te vejo no próximo vídeo. >> [canto]