Nunca te ensinaram Claude Code assim (GUIA COMPLETO DO ZERO)

0:00Masterclass em Cloud Code, o guia mais

0:03completo que você vai ver de Cloud Code

0:04na sua vida. Espero muito conseguir

0:07chegar lá. Que que vocês vão aprender

0:08aqui hoje? Criar um aplicativo do zero.

0:12Porque eu não quero só ficar te falando

0:13de teoria, de recurso abstrato. Eu quero

0:15que você entenda como que as peças se

0:16conectam. E nós vamos criar juntos esse

0:19exato aplicativo aqui, ó. Então, a gente

0:21puxou um catálogo de filmes em tempo

0:24real, 100% atualizado, que você consegue

0:26ir lá filtrar, ver, assistir trailer,

0:29marcar como assistir, quero assistir,

0:31vem qual streaming tá rodando, fazer

0:32cadastro, login de usuário, tudo isso a

0:35gente vai fazer juntos. Depois a gente

0:38vai aprender sobre como usar o Cloud

0:40Code, não só para desenvolver um

0:41aplicativo, mas para usar como

0:43ferramenta de produtividade, ou seja,

0:46para criar conteúdo pro seu trabalho do

0:48dia a dia, para gerar apresentações,

0:50relatórios, analisar dados. Inclusive, a

0:53gente vai criar juntos um carrossel

0:55inteiro para Instagram e uma

0:57apresentação para palestra mesmo, para

0:59você aprender como que é possível fazer

1:00isso no Cloud Code. Você vai entender

1:03para que serve Cloud Code, qual a

1:06diferença entre Cloud Code e outras

1:09ferramentas, como por exemplo Codex,

1:11Lovable, Cursor e todas as outras. Você

1:14vai aprender a como usar o máximo do

1:17cloud code gastando o mínimo, ou seja,

1:20tudo que eu faço na prática aqui para

1:23economizar tokens e a gente extrair o

1:25máximo da ferramenta. E a gente vai para

1:27uma parte avançada lá no final, onde eu

1:30vou te falar de cloud MD, de skills,

1:33como economizar tokens, como automatizar

1:35tarefas. E eu vou te mostrar por dentro

1:37o meu setup de cloud code, quais skills

1:40eu uso no dia a dia, como que eu faço

1:42para economizar tokens, como que eu faço

1:44para extrair o máximo, como que eu faço

1:45para começar um novo projeto, como que

1:47eu faço para melhorar um recurso

1:49existente, como que eu faço para

1:50corrigir um bug, tudo. E inclusive no

1:53final desse vídeo, eu vou te entregar

1:54tudo isso aqui, esse mindmap inteirinho

1:56aqui e os meus arquivos, o meu cloud.md,

2:00eu vou te entregar também. Agora

2:02definitivamente não vai aprender aqui

2:05hoje. Não vai aprender como ficar usando

2:09cloud no modo leigo. Que eu quero dizer

2:11com isso? Internet é né? A gente

2:13vê muito conteúdo assim que o pessoal

2:15parece que tem medo de te mostrar um

2:16recursinho a mais, mas que desbloqueia

2:18um monte de coisa, sabe? Então, pô, não

2:20vou lá. Ah, vamos usar aqui no

2:22aplicativo do desktop porque é o jeito

2:24mais fácil. Pô, não vou ficar te

2:26mostrando os jeitos mais fácil te te

2:29cortando teus braços, tuas pernas.

2:31Imagina o seguinte, né, galera? Imagina

2:33um gráfico assim, ó, onde aqui são

2:36recursos que o Cloud Code te dá e aqui é

2:38o esforço que você precisa aplicar. Pô,

2:41aí quando você fica só lá no basicão,

2:44que é o que você geralmente vê na

2:45internet hoje, cara, você não consegue

2:47acessar os recursos mais avançados, mas

2:49de repente se você faz uma outra mudança

2:51com 10% a mais de esforço, faz isso

2:53aqui, ó. Você consegue acessar infinitos

2:56recursos aqui. Você consegue desbloquear

2:58tudo que tem de mais avançado, com muito

3:00pouco esforço a mais. Então é isso que

3:02eu vou te ensinar. Eu quero te ensinar

3:03aquele ponto ótimo onde você se esforça

3:0810% a mais, mas desbloqueia 10 vezes

3:12mais recursos para você conseguir fazer

3:14qualquer coisa na ferramenta. E o que

3:17que definitivamente você não vai

3:19aprender aqui hoje? Os prompts mágicos.

3:21Porque isso é o que mais tem na internet

3:23hoje, né? Veja os 10 prompts mágicos que

3:25uso, galera, que você vai aprender

3:26fundamentos reais para usar o cloud code

3:2910 do zero. A gente vai instalar a

3:31ferramenta do zero, criar tudo aquilo do

3:33zero, publicar juntos nosso primeiro

3:35aplicativo até as dicas mais avançadas.

3:38Então, acho que vai ser uma jornada

3:39muito bacana,

3:44turma. Vamos botar a mão na massa agora.

3:47Então, a gente vai instalar o Cloud

3:49Code, começar a usar e criar um

3:51aplicativo do zero aqui ao vivo juntos.

3:55Então, vamos lá. Primeiro passo, quais

3:57são as formas de se usar ou de se

4:00instalar o Cloud Code? Tem três

4:03principais formas de você usar e

4:05instalar, tá? O primeiro deles é o

4:08Desktop App, que você pode instalar

4:11tanto no Windows, quanto no Mac, quanto

4:12no Linux. Então, se você vier aqui em

4:14cloud.com/download, já vai aparecer as

4:16opções para você baixar. Basicamente é

4:20esse aplicativo aqui que você vai

4:21instalar no teu sistema operacional, que

4:23ele já tem a modalidade chat, ele tem a

4:26modalidade cowork e ele tem a modalidade

4:29code, que se você instalar em português

4:30vai est como código, né? Então, por aqui

4:33você já consegue usar o cloud Code. Esse

4:36aqui é uma forma de você usar o cloud

4:39code. No entanto, eu já aviso que o

4:43desktop app ele é, vamos dizer assim,

4:46para leigos, é um uso mais inicial.

4:50Então assim, ele é uma interface um

4:51pouco mais simples, né? Você vê que não

4:52tem muita coisa, ó. você esconde aqui,

4:54pô, super clean, super tranquilo, só que

4:57ao mesmo tempo ele também te tira vários

5:00recursos que a gente vai precisar muito

5:02aqui no decorrer da nossa jornada

5:04durante esse curso que você tá fazendo,

5:06tá? Então assim, bem francamente, eu não

5:09sugiro, pode usar de boa. Sei que tem um

5:12monte de gente que usa, mas eu não uso

5:13porque eu não vejo sentido. Lembra do

5:15que a gente falou na aula anterior, né?

5:17Não tem por a gente ficar se

5:19restringindo ali, sendo que por um

5:21pouquinho a mais de esforço a gente

5:22consegue liberar um monte de recurso. A

5:24segunda forma que a gente tem de

5:26instalar é pelo terminal. Então, como

5:29que é o cloud terminal? Ó, ele te ensina

5:31aqui como instalar. Então, basicamente,

5:33você vai na linha de comando do teu

5:36Windows ou do teu Mac, o que for, aquela

5:38leiazinha de comando, que se você for um

5:40pouco mais velho igual eu, você vai

5:42saber que era assim, que a gente usava o

5:43Do Windows, né? E aí você vai botar uns

5:46códigos lá e ele vai instalar o cloud. E

5:48aí você vai executar o cloud assim, ó.

5:50Você escreve aqui cloud, não? Dá um

5:51enter. E aí ele abre o terminal.

5:56Essa experiência absolutamente maluca

5:59que você está vendo aqui, ó. Isso é o

6:01terminal. [risadas]

6:02Tem muita gente que usa assim, muitos

6:04alunos nossos, inclusive que usam assim.

6:07Mas bem francamente, eu pessoalmente não

6:10uso no terminal. Quem você vai ver

6:12usando no terminal é a galera mais raiz,

6:15é a galera que curte aquela experiência

6:17raizaça, assim, foi uma experiência raiz

6:19demais, que também não tem uns recursos

6:21que a gente precisa, que a gente já vai

6:22falar sobre isso. Então, por isso que a

6:24melhor forma de todas, na minha opinião,

6:27é muito pessoal isso, galera, é usar a

6:30extensão em IDE. Ai, meu Deus, Renato,

6:33que que é IDE? Você falou que era um

6:34curso para iniciando. Você já me vem com

6:36ideia, galera, vai na manha, vai na boa.

6:39Tudo isso vai ficar muito, muito, muito

6:41claro no decorrer dessa aula aqui. Que

6:43que é extensão em IDE? É isso aqui, ó.

6:46Isso é uma IDE e a gente já vai falar

6:48bastante sobre isso. Então, essa é a

6:50forma que eu gosto muito de usar. E você

6:52vai entender no decorrer dessa aula o

6:54porquê. Aqui tem todos os recursos que a

6:55gente precisa para fazer absolutamente

6:57tudo, tá? Você vai ver que quem usa

6:59extensão em IDE geralmente são aquelas

7:01pessoas mais assim emocionalmente

7:03equilibradas. Aquela pessoa que você

7:05olha na rua e fala: "Pô, esse cara é

7:07normal, sabe? [risadas]

7:10Diferente do cara do terminal. O cara do

7:11terminal é meio doido. Eu sei que muitos

7:13de vocês usam o terminal, tô ligado."

7:15Então, agora a gente vai botar a mão na

7:17massa para instalarmos isso. Então, o

7:20primeiro passo pra gente instalar é

7:23instalarmos uma IDE.

7:26IDE, galera, é um ambiente de

7:28desenvolvimento. Se você quer saber o

7:29que significa isso aqui, é integrated

7:33development

7:35environment [risadas]

7:37ou ambiente de desenvolvimento

7:40integrado. Essas ferramentas ficaram

7:42muito famosas na época que elas eram

7:45usadas 100% por programadores, por

7:48desenvolvedores que iam lá e pô, sempre

7:50mexendo diretamente no código,

7:52escrevendo o código. Só que hoje essas

7:54ferramentas se tornaram o ambiente mais

7:56propício possível pra gente usar e há

7:59para fazer absolutamente tudo. Inclusive

8:01trabalho de produtividade que a gente

8:03vai falar ainda nesse curso aqui, que é

8:05o quê? É quando você, pô, vai lá e cria,

8:07por exemplo, um carrossel para

8:08Instagram, não tem nada a ver com

8:09desenvolvimento de aplicativo, entendeu?

8:11Então, a IDE é o melhor ambiente

8:13possível. E eu sei que a ideia é meio

8:15intimidante no começo, mas assim que

8:17você quebrar esse paradigma que você tem

8:19na sua cabeça de que ai não é muito

8:20complicado, cara, um dizinho ali se

8:24familiarizando com ela, você vai ver o

8:26tanto de recursos que ela tem que vão te

8:28permitir fazer absolutamente qualquer

8:29coisa. Então é como eu falei lá atrás, a

8:31gente não vai aqui no modo very easy,

8:32não. A gente vai no modo pô pra gente

8:34conseguir extrair o máximo da

8:36ferramenta. Quais são as ideias que

8:38existem? A mais famosa é uma que se

8:40chama Visual Studio Code, também

8:42conhecida como VS Code. Só que assim,

8:44hoje em dia tem várias no mercado, né?

8:46Como por exemplo, Google Anti Gravity é

8:48uma IDE, Cursor é uma IDE, todas elas

8:51são são forks, né? São são cópias, por

8:55assim dizer, do VS Code, porque o VS

8:57Code é um software que tá liberado

9:00gratuitamente na internet para você

9:01baixar e customizar se você quiser, né?

9:03Então, antigravity, todos esses são

9:05cópias do PS Code com ajustes próprios.

9:07Eu gosto do VS Code, ele é o mais

9:10tradicional assim, vejo por não usar

9:12ele. Então a gente vai simplesmente

9:14botar lá VS Code download,

9:16vai abrir o primeiro link, ele é da

9:18Microsoft, esse software, tá? Você vai

9:20baixar aqui pro teu sistema operacional,

9:22vai instalar e vai abrir ele. E quando

9:24você abrir ele pela primeira vez, ele

9:26vai ter essa carinha aqui, ó, VS Code

9:28aberto pela primeira vez. Talvez o seu

9:29TG em modo claro, aí você troca para

9:31modo escuro, enfim, mas é mais ou menos

9:33essa cara aqui. Então, instalada a IDE,

9:36o próximo passo é instalar a extensão do

9:40Cloud Code. Se você vier aqui do lado

9:42direito, ó, nesses essas pecinhas meio

9:44de bloquinho que tem aqui, são as

9:46extensões, tá? E aí todas as grandes

9:50ferramentas já tem extensões prontas

9:52aqui. Então se você procurar, por

9:54exemplo, ó, o Codex da Open AI, tá aqui,

9:57o Cloud Code tá aqui. Então tudo que

9:59você procurar vai ter aqui de uma forma

10:00ou de outra, tá? Basta procurar aqui por

10:03cloud Code. Pega o oficial da Antropic

10:06que vai aparecer aqui, ó. Tem o selinho

10:07azul, tá vendo? Tá escrito Antropic, ó.

10:10Pega ele e instala ele. Tem segredo. No

10:12teu vai tá assim, né? Ó, desse jeito. Aí

10:15você vai lá e dá um install aqui, ó. Ele

10:17instala rapidinho. E aí quando você

10:20volta aqui pro explorador de arquivos,

10:22ó, clica aqui em cima, você vai ver que

10:24já vai ter aparecido esse iconezinho

10:26aqui, ó, cloud code, tá vendo? Clica

10:28nele e aí ele vai abrir essa barrinha

10:31aqui do lado. A minha já está logada.

10:34Talvez a sua esteja deslogada, né? Então

10:37vou até logar de novo aqui para te

10:38mostrar. Ó, a sua provavelmente vai

10:40aparecer com essa cara aqui, ó, em que

10:43ele pergunta como é que você quer fazer

10:44login com a sua assinatura do cloud ou

10:47você quer usar aqui por API. Lá pra

10:50frente, quando eu for falar de custos,

10:51eu vou explicar essas diferenças todas,

10:54tá? Por enquanto imagino que você já

10:56assina o cloud, se você tá aqui nesse

10:57curso conosco, então a gente só vai

10:59clicar no botão laranjinha, que é a

11:00assinatura do cloud, e ele vai te levar

11:03lá para uma URL, lá para um site onde

11:06você autoriza com a tua conta. Cloud

11:07Code. Gostaria de se conectar ao seu sua

11:10conta cloud, etc e tal. Dou um

11:11autorizar. Pode fechar essa janela. E aí

11:13quando eu volto, eu já tô aqui, ó. Você

11:14vê que já sumiu aquilo da assinatura, já

11:16tô liberado aqui para poder usar o cloud

11:18code. Pode fechar aqui essa aba da

11:20extensão, já tá instalada, tá tudo

11:22certo. Então aqui a gente já está pronto

11:24pro próximo passo. Próxima coisa que a

11:26gente vai fazer aqui são, a gente vai

11:28instalar umas dependências. Isso aqui é

11:31um negócio que você não vai entender o

11:32por que você vai fazer agora, mas em

11:34muito do processo o Cloud Code vai

11:37precisar disso para fazer o trabalho

11:38dele direito. Então a gente vai

11:39instalar, ó, as dependências que são o

11:42quê? Node e Python. Node e Python,

11:45basicamente são o seguinte, são

11:47softwares que você instala no teu

11:48computador. Tudo de graça aqui, tá

11:49galera? Tudo que a gente tá fazendo é de

11:51graça aqui. A não ser a tua assinatura

11:52do cloud que é paga obviamente, né?

11:54Tudas essas coisas que a gente tá

11:55instalando aqui, não tem estresse. O

11:57Node é algo que permite você executar no

12:00seu computador uma linguagem de

12:01programação que se chama JavaScript e o

12:03Python é uma linguagem de programação.

12:05Então, mesma coisa, você vai instalar os

12:06dois aqui para quê? Pro Cloud Code

12:08conseguir rodar essa linguagem de

12:11programação no teu computador. E isso

12:13vai ser necessário para várias coisas.

12:14Então, se você não instala isso aqui,

12:16você vai ver que no meio do processo do

12:17desenvolvimento, ele começa a dar uma

12:20uma perguntada para você: "Ah, mas eu vi

12:21que você não tem o node, como é que você

12:23quer fazer? Você quer instalar, então já

12:24deixa instalado, já faz parte desse

12:26pacote inicial da instalação aqui. Node

12:29download e Python download, galera. Sem

12:33segredo, ó. Baixa o node aí. Aqui já

12:35tem, ó, instalador do Windows, ou seja,

12:37seleciona o teu sistema operacional aí e

12:39no Python, baixar o Python. que ele

12:41baixa um gerente de instalação que

12:43instala tudo direitinho no teu

12:45computador, tudo de graça, baixa sempre

12:47das fontes oficiais, não tem segredo.

12:49Instalado o Python e o Node, a gente tá

12:52com tudo que a gente precisa para

12:54começar o nosso projeto. Algo que eu

12:56gostaria de criar com vocês aqui, que

12:58não seja um projeto chato, que às vezes

12:59o pessoal, ah, vamos criar uma lista de

13:01tarefas, pô, que saco, ninguém aguenta

13:03mais criar lista de tarefas, né? Eu

13:04pensei no seguinte, vamos criar um

13:06cadastro aqui de filmes e séries que a

13:10gente consiga buscar informações que têm

13:12reais na internet, né, pra gente ver

13:14quais são os filmes que estão agora em

13:15cartaz, quais são os filmes que estão

13:17agora no Netflix, no Prime, pro usuário

13:20poder ir lá e marcar quais ele quer

13:21assistir, quais ele já assistiu. Então,

13:23acho que ficou um projeto mais legal,

13:25né? Aí, antes da gente começar a criar o

13:26nosso projeto, a gente vai fazer o

13:28seguinte aqui,

13:30vamos destravar o modo full power do

13:34cloud code. Aqui, galera, já começa

13:36aquelas dicas mais tops, que é o quê,

13:40pô? A gente tem duas, dois plugins que a

13:42gente pode instalar no Cloud Code que

13:44fazem ele desempenhar muito, muito,

13:46muito melhor. E é isso que eu quero

13:48mostrar para vocês agora. Olha só,

13:50quando você tá aqui no VS Code com o

13:52cloud Code aberto, você pode vir aqui no

13:54barra e procurar por plugins, ó, ele vai

13:56te dar o gerenciar plugins. Ou você pode

13:59digitar um barra plugins aqui que ele

14:01também acha, né? Clica aqui em gerenciar

14:03plugins. Ele vai te mostrar uma cacetada

14:06de plugins que ele já tem aqui dentro do

14:10dentro do ecossistema do Cloud Code, né?

14:12tanto plugins próprios dele como plugins

14:14criados pela comunidade. Você pode ver

14:16que eu tenho, pô, plugin que faz

14:17auditoria de SEO nos meus sites e blogs,

14:20por exemplo. Cara, tem um monte assim,

14:22mas o que eu te sugiro fortemente

14:25instalar, que ele vai aparecer logo no

14:27comecinho da tua lista aí, tá? Que é

14:29super poderes em inglês, então ele vai

14:30est desmarcado, você simplesmente vai lá

14:33e marca ele aqui, ó. Pum. Aí você vai

14:35ver que ele vai ficar com a bolinha

14:36verde, ó. Então, instala o Superpowers,

14:38plugin Superpers e um outro plugin muito

14:42bom que se chama front end design, que

14:45ele te ajuda a criar interfaces bonitas.

14:49Então, ele é como se fosse, pô, ele tem

14:50habilidades de design melhores que nós

14:53humanos normais. Então, toda vez que

14:55você pedir alguma coisa e esse plugin

14:57tiver instalado, ele vai conseguir

14:58deixar as interfaces mais bonitas. Tem

15:00gente que vai te recomendar instalar 50

15:02plugins, galera, na boa, você não

15:04precisa de nada disso. Instala esses

15:05dois. que eles já vão dar literalmente

15:08super poderes pro teu cloud code, tá?

15:09Então pega lá o front end design, esse

15:11aqui, ó, e ativa ele também, tá? E um

15:13último ajuste que a gente vai fazer aqui

15:15no nosso cloud code é o seguinte, para

15:17destravar o modo full power. E a

15:19terceira coisa que você tem que fazer

15:21aqui é a seguinte, quando você tiver com

15:23Cloud Code R instalado, aí você vai ver

15:25que vão aparecer aqui, ó, algumas opções

15:28no teu cloud code aqui nesse cantinho

15:31inferior direito, né? Isso aqui é o modo

15:34em que ele estará operando. Então, olha

15:36só, vou traduzir para vocês aqui, tá? O

15:38primeiro modo se chama perguntar antes

15:41de edições. Cláudio vai pedir por

15:43aprovação antes de fazer cada edição.

15:46Então, o tempo todo ele vai te

15:47perguntar: "Tem certeza que você quer

15:48fazer isso?" Aí você clica: "Sim, tem

15:50certeza?" Sim. Tem certeza? Sim. Tem o

15:52editar automaticamente, que ele edita

15:55ali o teu texto selecionado, o arquivo

15:56inteiro, enfim, ele é um pouco mais

15:58liberal. Existe um modo planejamento

16:00aqui, ó, que ele, na verdade, não vai

16:01fazer nenhuma edição, ele vai só te

16:03ajudar a planejar. Então, ó, ele só vai

16:06pensar junto contigo para depois ele

16:09começar a executar. Existe um modo

16:12automático em que ele você só deixa no

16:14alto e ele vai selecionando de acordo

16:17com ele entende o que você pediu e aí

16:20ele seleciona automaticamente o modo.

16:22Seria o ideal. problema. Isso aqui

16:23aumenta muito o teu consumo, ou seja,

16:26faz você gastar mais dinheiro na

16:28prática. Lá quando a gente for falar de

16:30como economizar tokens, como é que

16:31funciona esse modelo de precificação,

16:33você vai entender bem o porquê disso.

16:34Não vou entrar nisso agora. E aí tem o

16:35modo que é o que eu uso e acho que todo

16:38mundo que eu conheço assim que usa no

16:40avançado utiliza que é o contornar

16:43permissões. Ou seja, o Cláudio não vai

16:45te pedir aprovação para nada. Aqui,

16:48galera, eu sugiro você usar isso quando

16:51você tá começando na jornada, porque,

16:52pô, nada que você vai fazer tem muito

16:54comprometimento de segurança, entendeu?

16:56Então, deixa ele fazendo, tá na boa, vai

16:58aprendendo, você não vai explodir nada.

16:59Ou quando você já tem bastante a manha

17:01de cloud code, então você sabe

17:02exatamente o que que pode e o que que

17:03não pode fazer, né? Só que isso não vem

17:05habilitado por padrão. Então você tem

17:07que fazer o seguinte para habilitar,

17:09aperta contrl P para abrir essa barrinha

17:11aqui em cima, ó. Sinalzinho de mais,

17:14configurações.

17:16Aí você aperta essas configurações aqui,

17:18ó. Preferências, abrir configurações na

17:20interface do usuário, tá? Ó, seleciona

17:23essa opção. Então você vai em control

17:28mais

17:31configurações

17:33interface do usuário. E aí aqui, ó, em

17:37extensões

17:38cloud code, você vai ver que logo a

17:41primeira permissão que tem aqui, ó, é

17:43essa, permitir que você consiga

17:46perigosamente pular as permissões. Ele

17:48faz questão de falar que é

17:49perigosamente. Por quê? Porque você tá

17:51dando carta branca pro cloud code,

17:52entendeu? Cara, faz o que quiser, tá na

17:54boa, entendeu? O teu vai vir desmarcado

17:56por definição, então você vem e marca.

17:59Aí você pode fechar aqui e você vai ver

18:01que aparece essa opção bypass

18:03permissions. Se não aparecer ainda, que

18:06que você faz? Fecha o VS Code, abre de

18:08novo. Ou melhor ainda, dá um contrl P,

18:12sinalzinho demais, recarregar a janela,

18:16ó, pum, que aí ele atualiza tudo. É tipo

18:19um refresh do navegador ali, um

18:20atualizar, né? Aí seleciona esse bypass

18:23permissions aqui. Cara, isso aqui é, ele

18:26vai trabalhar na boa, porque senão você

18:27tem que ficar confirmando cada ação,

18:29entendeu? Então, aproveita que a gente

18:31vai criar um projeto de teste e já bota

18:34esse módulo permissão. Simbora. Então,

18:35ativamos o bypass permissions e com isso

18:38a gente destravou o modo full power do

18:41cloud code. Galera, agora a gente

18:43consegue começar a criar o nosso

18:47primeiro aplicativo. Agora sim, vamos

18:49lá. Que que eu pensei de projeto pra

18:51gente? Pô, a gente pode fazer aqueles

18:52projetos que geralmente o pessoal faz em

18:54curso de programação, assim, que é uma

18:55lista de tarefas. Mas, pô, galera, que

18:58saco. Ninguém mais aguenta criar a lista

19:00de tarefas, né? Então, o que que eu

19:01pensei em a gente criar um catálogo de

19:04filmes? que estão em cartaz,

19:07que estão em cartaz, entenda, que estão

19:09no Netflix, que estão no Prime, enfim,

19:11pra pessoa marcar os que já assistiu e

19:14os que quer assistir, por exemplo. Acho

19:17legal, pô, porque aí traz filme, ele já

19:19é todo visual, então vai ter as thumbs

19:21dos filmes ali. E para isso a gente vai

19:24usar um serviço que tem na internet

19:26liberado que se chama TMDB, que é theve

19:30database, ó, onde a gente já tem, pô,

19:33quais são os filmes mais recentes, a

19:35gente já recebe as imagens, a gente já

19:37tem acesso aos trailers, então a gente

19:40consegue pegar exatamente de forma

19:42atualizada isso aqui. E esse é um

19:43serviço gratuito da internet, então a

19:46gente consegue brincar bastante com ele.

19:48Qual o primeiro passo pra gente tirar

19:51qualquer ideia do papel em Cloud Code?

19:54[roncando] Se você tá com ele sem

19:57absolutamente nada ainda, qual que é o

19:59primeiro passo para você tirar qualquer

20:01ideia do papel no Cloud Code? Primeira

20:04coisa, você vai aqui em abrir pasta,

20:06porque ele tá aqui o o VS Code aberto,

20:09mas ele tem que sempre trabalhar dentro

20:11de alguma pasta no teu computador,

20:13porque basicamente o que que o que que a

20:14IDE faz, o que que o VS Code faz? Ele

20:17vai lendo arquivos, modificando arquivos

20:20e criando arquivos, entendeu? Então você

20:23precisa selecionar uma pasta para ele

20:24fazer isso. Então vai em abrir pasta, eu

20:26vou aqui nos meus projetos malucos e vou

20:28criar uma nova pasta chamada curso cloud

20:31code. YouTube curso cloud code. Só criei

20:35uma pasta aqui, ó. Selecionei pasta e aí

20:38você já vai ver que ele abre essa pasta

20:40aqui, ó. Tem alguma coisa dentro dela?

20:42Não, claro que não. A gente acabou de

20:44abrir a pasta, né? Pode fechar essa

20:45telinha do meio. E aqui, galera, ó,

20:47vocês vão se dar conta do seguinte. Não

20:49confunda esse chat aqui do VS Code, ó,

20:53com o cloud Code. São coisas diferentes,

20:56entendeu? Esse chat que geralmente ele

20:58vai abrir por padrão, isso aqui é um

21:01chat do Copilot que chama, da Microsoft,

21:04né? É uma outra IA. Ela é tipo uma irmã

21:07do Cloud Code, mas é um outro serviço de

21:09assinatura, não tem muita gente que usa.

21:12Então, cuidado, se você começar a mandar

21:14mensagem aqui, ele vai falar: "Ah, você

21:16não tem um plano?" Como o meu tem plano,

21:18talvez ele vai executar, mas como você

21:20não tem plano aqui nesse copilot, ele

21:22vai falar: "Ah, você não tá conseguindo

21:23usar, pode ser que te confunda". Então,

21:25lembre-se, sempre se certifique que você

21:28está no cloud code aqui mandando

21:29mensagens, tá? Então, a gente tá lá com

21:31a nossa pasta cloud code. E aí eu vou

21:33clicar nessa caixinha aqui, ó, para

21:35maximizar essa barra, ó. Tá vendo? Para

21:38ficar mais limpo, né? Ó, esconde essa

21:39parte do meio, esconde os arquivos, ó.

21:42Vou maximizar. O legal é que eu consigo

21:45inclusive jogar isso aqui aqui, ó. Pum.

21:47E aí eu vou com as duas janelas lado a

21:49lado. E agora a gente vai começar a

21:51planejar o nosso aplicativo, tá? Se você

21:55não instalou aquele plugin Super Powers,

21:57qual que é o primeiro passo? você fala

21:59assim, ó, me ajude a planejar o nosso

22:03aplicativo, etc e tal. Mas como nós

22:06instalamos o Superpers, ele tem um

22:08recurso que eu sou apaixonado, que se

22:10chama brainstorming. Brainstorming é

22:12quebrar a cabeça, quase que numa

22:14tradução literal, né? Aí você digita

22:16assim, ó, barra brain, ó, ele já vai

22:19trazer aqui, ó, barra brainstorming. Tá

22:21vendo, ó? Isso aqui é o quê? É uma

22:22habilidade que vem daquele plugin

22:24superpers.

22:26E assim, galera, acreditem, eu não gosto

22:28de ficar instalando extensões opcionais

22:31nas aulas que eu dou. Quem me acompanha

22:32nas aulas sabe disso. Eu sempre prefiro

22:34trabalhar muito com a ferramenta nativa

22:36como ela é, sabe? Sem modificações. Mas

22:38é que isso aqui é tão poderoso, galera,

22:40e tá aqui disponível pra gente que não

22:41tem como ignorar, porque, pô, eu uso

22:43isso no dia a dia, eu sei a diferença

22:45que dá. Isso aqui realmente melhora

22:46muito o Cloud Code. Então, ó, eu boto um

22:48brainstorm aqui, ó, aperto tab para ele

22:50já dar um espacinho aqui. E aí sim eu

22:53explico o que eu quero, ó.

22:55Que que eu quero? Me ajude a planejar

23:00um novo aplicativo que quero criar. O

23:03objetivo é que seja um catálogo de

23:06filmes,

23:08mostrando todos os filmes que estão

23:12disponíveis nos streaming. Agora vamos

23:15fazer o seguinte, pra gente quebrar em

23:17partes aqui o nosso projeto. Vamos num

23:19primeiro momento mostrar só os filmes

23:21que estão disponíveis que a gente puxa

23:23lá em tempo real. E aí depois eu mostro

23:26para vocês como fazer o usuário poder se

23:28cadastrar, logar e interagir com isso,

23:31tá? Então vamos criar primeiro uma

23:32versão um do nosso produto, que vai ser

23:34super simples e aí depois a gente estica

23:37isso para que cada usuário consiga

23:39personalizar tua experiência. Então o

23:41objetivo é que seja um catálogo de

23:42filmes mostrando todos os filmes que

23:43estão disponíveis nos streaming. Agora

23:47para isso, vamos usar a API do TMDB. Que

23:51que eu quero dizer com isso, galera?

23:53Vocês estão vendo esse TMDB aqui que a

23:56gente que eu citei para vocês, né?

23:58Demove Database. E o legal é que eles

24:00têm uma API. API significa o seguinte,

24:04significa que você consegue conectar o

24:07teu sistema com os dados do TMDB,

24:10entendeu? e eles liberam esse tipo de

24:12informação de graça. Inclusive, eu posso

24:14até pegar essa documentação aqui, ó, e

24:17colar lá no meu cloud code. Posso colar

24:19assim, ó, pum, para ele já ir lá e ler a

24:21documentação de API do TMDB. E aí, aqui,

24:24galera, uma das melhores dicas que eu

24:27posso dar para vocês é sempre, sempre

24:31pedir para te fazer perguntas. Isso, ó.

24:34Isso eu dou em aulas e palestras, pô, do

24:37nível mais básico da IA até aqui, pô,

24:40que é uma aula avançada de cloud code,

24:42eu não canso de falar isso. As IA, elas

24:44não têm por definição o hábito de te

24:46fazer perguntas, porque elas têm que

24:48resolver o teu problema. É isso que elas

24:50são instruídas a fazer. Quando você dá

24:52essa liberdade aqui, ó, me faça

24:54quaisquer perguntas necessárias. Cara,

24:56isso muda absolutamente tudo no jogo.

24:59Isso muda tudo porque aí é você tá dando

25:02para ela autorização de fazer algo que

25:03ela não faz por intuição. Ela vai te

25:05fazer duas, três, quatro perguntas só

25:07para entender melhor o que você quer,

25:08pontos cegos que nem você sabia. E ela

25:11sempre, sempre vai melhorar muito o

25:13resultado, sempre. E aí, antes de

25:15mandar, deixa eu só mostrar para vocês

25:17um detalhe que tem aqui, ó. Quando eu

25:19clico nessa barrinha, você vai ver que

25:21logo aqui tem o alterar modelo, switch

25:24model. Se você clicar aqui, você vai ver

25:27que ele vai mostrar todos os modelos que

25:30o Cloud disponibiliza para vocês. Então,

25:33tem o modelo high, ó, que é o quê?

25:36Fastest for quick answers, ou seja, o

25:38mais rápido para respostas rápidas.

25:41Entenda como o mais fraquinho de todos.

25:44É o que menos gasta token, é o que menos

25:46gasta dinheiro, mas é o mais fraquinho

25:47de todos. Tem o Sonet, 1 milhão de

25:50contexto, que eu não sugiro você usar.

25:53Tem esse Sonet 4.6 aqui, ó, que ele é o,

25:56ó, eficiente para tarefas de rotineiras,

25:58ou seja, é o melhor para o dia a dia. O

26:01Fable, que é o mais poderosão de todos,

26:04é uma máquina de consumir token, não

26:06precisa para ele. E o que ele próprio

26:09recomenda aqui, ó, que é o padrão, é o

26:11Opus 4.8,

26:13o melhor para as tarefas mais complexas.

26:16Ainda vou falar muito disso na aula de

26:17hoje, mas assim, qual que é a grande

26:19recomendação de todo mundo que já tá num

26:21nível mais avançado em desenvolvimento

26:23que o próprio criador do Cloud Code diz

26:26que faz? Sempre use os modelos mais

26:29avançados, como Opos aqui para fazer os

26:31planejamentos.

26:33Depois, com bom planejamento em mãos,

26:36você pode até pedir para uma para um

26:38modelo mais simplesinho aqui para fazer

26:40a execução disso, entendeu? Deixa eu já

26:43mandar isso aqui no OPS, depois eu

26:44continuo falando, ó. Então, selecionei o

26:46modelo Opus ali, né? E vou dar um

26:48enviar.

26:49Aí ele já tá lá pensando, daqui a pouco

26:52ele começa a me fazer as perguntas.

26:53Então, entenda isso que eu te falei

26:55agora da seguinte forma, cara. Igual

26:58igual numa empresa. Se você tem um

27:01planejamento muito bom de como que é um

27:03determinado processo que funciona numa

27:05empresa, ah, a pessoa lá do Contas a

27:08pagar, por exemplo, cara, tá tão claro

27:10qual que é o trabalho dessa pessoa. Você

27:12tem que pegar a nota fiscal, você tem

27:13que olhar o que tem naquele campo, jogar

27:15numa planilha de Excel, tipo, tá muito

27:17bem documentado, o plano tá muito bem

27:18feito. Você pode botar literalmente

27:21qualquer pessoa. Você pode botar um

27:23menor aprendiz de qual que é o mínimo?

27:2614 anos, né? De 14 anos que no primeiro

27:28dia ele vai conseguir fazer porque o

27:30processo tá muito bem montado, entendeu?

27:32Então invista no planejamento das

27:34coisas. Aí ele já tá aqui, ó. Projeto

27:36vazio começando do zero. Antes de entrar

27:38nas perguntas, parte do que vamos

27:40discutir, pode ficar mais fácil se eu te

27:41mostrar mo cupon telas, né? Num

27:43navegador em vez de só de escrever em

27:45texto. Quer experimentar?

27:47Sim. Isso aqui é um recurso do superpers

27:50que às vezes ele desenha uma tela para

27:51mim. Então ele vai lá e fala: "Cara, eu

27:53desenhei um negócio aqui. Vê vê vê que

27:54layout que você prefere". Isso é bem

27:56legal. Então, em paralelo, vamos lá. Aí

27:58que que a gente mandou aqui um

27:59brainstorming

28:01para iniciarmos o planejamento. Aí ele

28:03começa a me fazer as perguntas, ó. Qual

28:05o foco principal do aplicativo? Pense no

28:08que o usuário faz em 80% do tempo.

28:11Descobriu que assistir, então ele quer

28:13navegar, explorar filmes em alta com

28:14aquela vibe Netflix, tal.

28:17Foco em descoberta e navegação bonita.

28:19Ele quer buscar um filme específico e

28:21ver onde está esse filme. Então, o

28:22usuário já sabe o nome, quer descobrir

28:24qual streaming tá disponível ou os dois

28:26igualmente.

28:28Minha recomendação,

28:30isso é legal, o Superpowers aqui, ele

28:32sempre ele ele te dá opções, mas ele

28:35sempre te dá uma recomendação também,

28:36né? Minha recomendação, opção um para um

28:38primeiro app. Então, bora. Um. Próxima.

28:41Onde o aplicativo vai rodar? É um

28:43aplicativo web que roda no navegador,

28:45desktop, roda igual qualquer coisa,

28:48igual esse aqui próprio do TMDB, né? Ou

28:51vai ser um aplicativo nativo que você

28:52instala no celular, ou vai ser um

28:54desktop que você instala no computador.

28:57Web app, com certeza, né? O cara acessa

28:59aqui e deu. Bom, você percebe que eu te

29:00falei de pontos cegos. Eu não tinha

29:02pensado nisso. Poderia ser um aplicativo

29:04para celular, não sei, não deixei claro.

29:06Então ele vai pegando todos os pontos

29:07cegos que a gente deixou passar.

29:09Essencial pro disponível nos stream.

29:10Agora, qual região e país?

29:13Eh, Brasil só, né, galera? Nada de

29:15trocar de país, não. Só que ele já fala

29:17também, se você quiser trocar de país,

29:18não tem problema. Aí ele já tem até

29:19recursos aqui, ó, para traduzir em

29:21diversos idiomas. Isso é muito massa.

29:23Próxima. Define se precisamos de banco

29:24de dados e login. Tá vendo que a gente

29:26havia falado? O aplicativo vai ter

29:28recursos pessoais, favoritos, quero

29:30assistir, não, só navegação. Sim, com

29:33favoritos salvos no navegador. Aí a

29:35pessoa não precisa fazer login. Ou sim,

29:37com conta de usuário, aí a pessoa faz

29:39login, eh, e-mail e senha. Aí realmente

29:43precisa de um banco de dados. Aqui.

29:46Aqui, galera, eu concordo. OK, poderia

29:49ser a opção dois, mas eu vou falar

29:51assim, ó. Por enquanto, vamos só de um.

29:55Estou dando uma aula de cloud code ao

29:58vivo e quero por enquanto mostrar só a

30:02navegação.

30:04Depois eu vou te pedir para conectarmos

30:08com um banco de dados

30:10para que o usuário faça login, cadastro

30:16e consiga salvar os favoritos e os que

30:20já assistiu. Perfeito, entendi. MVP

30:23agora só navegação, sem banco, mas vou

30:25arquitetar deixando o caminho aberto

30:27para plugar autenticação e favoritos

30:28depois sem retrabalho. Como você já

30:30mencionou o Supase em outros momentos,

30:32ele pega um um histórico assim de pô

30:34outras sessões que eu tenho, né? Então

30:36ele já sabe que eu uso base. Daqui a

30:38pouquinho a gente vai falar mais sobre

30:39isso quando a gente for lá falar de

30:40banco de dados. Legal é que é um banco

30:42de dados gratuito que a gente vai usar,

30:44né? Stack. Opa, que o papo começa a

30:47ficar técnico, galera. Você quer react?

30:52Ou você quer white, React, Til Wind,

30:56recomendação forte, opção um. Galera,

30:59aqui eu preciso muito bater numa tecla

31:02com vocês. Entenda que não existe

31:04pergunta estúpida pro Maá. Não existe.

31:07Eu tenho certeza absoluta, né? Não sei

31:10se vocês estão da época aqui no colégio,

31:11a gente fazia umas perguntas meio

31:13idiota, porque a gente era meio burro.

31:14Eu sempre fui meio burro. E aí a turma

31:16inteira fazia,

31:19[risadas]

31:19só para deixar claro quão burro você é e

31:22te deixar ainda mais constrangido. Isso

31:24não existe na Iá, galera. Jamais a Iá

31:27vai falar: "Seu burro, nunca eu te

31:29garanto." Sempre que tiver na dúvida,

31:32sempre, pelo santo amor de Deus,

31:33pergunte. Você vai me ouvir nesse curso

31:35falar isso umas 50 vezes ou mais. Na

31:38dúvida, pergunte para a Iá sempre.

31:42Inclusive, se aqui embaixo, nos

31:44comentários dessa aula

31:46você quiser me mandar alguma dúvida,

31:49claro, fique bem a vontade para me

31:50mandar, mas eu te imploro. [roncando]

31:53Reflita primeiro se não é uma dúvida que

31:56não faz mais sentido você mandar pra IA,

31:59entende? Então assim, Renato, não

32:00entendi bem a parte do nextide, qual que

32:02é a pro e contra de cada um, cara?

32:04Pergunta isso pra Ia, porque não só a IA

32:05vai te dar uma resposta melhor para

32:07você, como ela já vai conseguir

32:09executar. Então assim, não sei, sou

32:12leigo, não entendo nada disso. Quais

32:17prós e contras de cada opção? Sem

32:19problema. Vou em linguagem simples.

32:21Pensa assim, os dois constróem o mesmo

32:23aplicativo de fora. A diferença é onde o

32:25aplicativo, opa, onde o aplicativo fala

32:27que o TMDB e o quanto ele já vem

32:28preparado pro futuro. Next. Esconde a

32:32chave de API. Ó, ele te dá uma senha que

32:33é a chave de API. No essa senha fica

32:35salva lá no servidor. Já fica pronto pra

32:38fase dois. as páginas carregam rápido, é

32:40mais didático pro curso. Por quê? Porque

32:42é mais comum, o mercado usa mais, só que

32:45um ponto de atenção, ó, um pouco mais

32:46robusto, tem mais conceitos, etc e tal.

32:50White, mais simples e leve, eh, build

32:53instantâneo durante o desenvolvimento,

32:55mas a chave de API fica exposta e a fase

32:57dois fica mais trabalhosa.

32:59Por isso, minha recomendação é um. Ah,

33:01então você percebe, sempre, sempre

33:03pergunte para aí, ó, topa next, topa o

33:05next, bora. Isso vai acontecer o tempo

33:08todo, tá? O tempo. Lembre-se que você

33:10está desenvolvendo um negócio aqui,

33:12então direto isso vai acontecer. Tipo

33:13assim, você vai falar: "Eh, ah, eu

33:17preciso incorporar aqui um recurso de

33:20mapa para ter um mapa em tempo real no

33:23meu aplicativo. Ele vai te falar:

33:24"Beleza, você quer ir de Mapbox ou não

33:26sei o que charts?" Fala: "Não sei, cara.

33:29Quais os prós e contras e qual a sua

33:31recomendação técnica?"

33:33Destrincha, pede para ele, não se

33:35esqueça disso, pergunte para Iá. Não

33:37existe pergunta estúpida para Iá. Aqui,

33:39ó, ele já começa a falar: "Opa, vou te

33:42mostrar três opções de layout pra tela

33:45principal do catálogo."

33:47Aí ele já me dá um link para eu clicar

33:49aqui, ó. Está no ar em tal. Se eu clicar

33:51aqui, ó, aí abriu aqui no meio. Agora

33:53vou ter que aumentar a tela, né?

33:56Ó, que legal. Ele já tá me dando três

33:58opções aqui que a gente pode usar. Ah, é

34:01estilo Netflix, ó.

34:03Banner grande no topo, fileiras

34:05horizontais por categoria que você

34:07arrasta, cinematográfico e familiar.

34:10Interessante. B. Grade e filtros. Eu

34:13acho que o grade e filtros era o que o

34:15próprio TMDB usa, né?

34:18Deixa eu ver lá. [roncando] É, eu acho

34:21que é tipo isso aqui mesmo, né?

34:24Busque filtros no topo, grade densa de

34:26postures, ou se híbrido, destaque menor,

34:29mais filtros, mais grade, meio termo. Dá

34:32uma olhada e me diz qual curte. Minha

34:33recomendação a para dar aquele clima de

34:35catálogo de streaming logo de cara. É o

34:37mais au numa aula ao vivo. Agora ele

34:39nunca mais vai esquecer que eu tô dando

34:41uma aula, né? Ah, então simbora. Estilo

34:43Netflix. Então, clima de catálogo. Agora

34:45o conteúdo dessas fileiras. Quais

34:46trilhas horizontais você quer na Home?

34:50Cada uma é uma chamada pro TMDB, ou

34:52seja, cada uma é uma é um pedido de

34:55informações que a gente tem que fazer lá

34:56pro TMDB, né? Então, o que que você quer

34:58que apareça em cada uma daquelas

34:59sessões? Em alta nesta semana por

35:02streaming, ou seja, uma fileira para

35:04cada serviço, por gênero, lançamentos

35:06recentes ou mais bem avaliados?

35:09E ele me dá uma recomendação, ó. 1 + 2 +

35:114 em alta por stream, em lançamento. Ah,

35:14galera, eu não sei. Pode ser, pode ser

35:16por gênero somente, acho que fica mais

35:18intuitivo, que é muito pessoal, né? Não

35:20tem mais nada a ver com a parte técnica

35:22do Cloud Code. Fileiras por gênero para

35:23manter a promessa de app. Cada fileira

35:25mostra só o que está disponível em

35:26stream no Brasil agora. Netflix, Prime,

35:28terã. [roncando] Quantos gêneros? Todos.

35:31TMDB tem 19 gêneros ou um conjunto

35:34curado, só os seis, oito principais. É

35:37opção dois, menos opções. Quanto ponto

35:40cego, hein, galera? Você percebe? Ah,

35:41não, Renato, meu briefing tá muito bom.

35:43Sempre vai ter ponto cego. Sempre vai

35:45ter muitas perguntas que a vai precisar

35:47tirar contigo. Beleza? Quando o usuário

35:48clica no filme, abre a página de

35:50detalhes. Que que você quer que apareça?

35:52Poster, nota, onde assistir, trailer,

35:55elenco principal e filmes parecidos.

35:58Recomendo 1 2 3 e 4. Sempre que você

36:00mandar um OK, ele vai entender que é só

36:02a recomendação dele, tá vendo, ó? Então,

36:04recomendação 1 2 3 e 4. OK? Ou seja,

36:08aceito a sua recomendação e você é um

36:10pouco mais inteligente do que eu.

36:12Fechado. Detalhes com poster, título

36:13anop onde assistir e trailer. Última

36:15pergunta. O visual catálogo estilo

36:17Netflix combina com tema escuro, mas

36:19quero confirmar.

36:22Mostrando lado a lado. Ah, já sei que

36:23ele vai querer me mostrar naquele

36:24negócio. E aí, você quer escuro ou

36:27claro? [risadas]

36:29Escuro, né, galera?

36:31Óbvio que escuro. Tem nem que perguntar,

36:34né? Ok, tenho tudo que eu preciso. Aqui

36:36vai o design para você aprovar. Aí aqui

36:38ele passa uma revisão de tudo que a

36:40gente combinou, né? Ó, você aprova esse

36:42design. Claro que assim, p teu projeto,

36:45que que você tá fazendo? Você vai dar

36:47uma lida, você vai dar uma revisada,

36:49deixa eu ver se é isso mesmo, tal.

36:51Vistam bons 60 segundos em dar uma lida

36:54aqui, mas como é uma aula aqui onde a

36:56gente tá no liga total, aprovadaço.

37:01Ah, ele pergunta aqui, ó, você já tem

37:02uma chave de API da TMDB? Não precisa

37:05colar agora, só saber se já existe ou se

37:07eu te guio para criar. Não tenho chave,

37:10você vai precisar me guiar. Galera, aqui

37:13um outro ponto de atenção, tá?

37:15Sempre que você tiver dificuldade com

37:18esse tipo de coisa, o Cloud Code é muito

37:20bom. te ajudar, mas é muito bom. Tipo

37:22assim, Renato, agora você precisa, cara,

37:24fazer o seu cadastro lá no PayPal para

37:28pegar sua chave de pagamento, pra gente

37:30conseguir transicionar dinheiro por não

37:32sei onde. Cara, ele sempre consegue te

37:34ajudar muito nisso. Onde eu pego essa

37:36chave? Então, eu vou junto com vocês

37:39fazer esse processo daqui a pouco, tá?

37:40Isso é muito legal porque a galera

37:42empaca muito nisso. Eu tenho vídeo aqui

37:43no no canal do YouTube, por exemplo,

37:45mostrando como fazer carrosséis de

37:47Instagram pelo Cloud Code. Eu vou falar

37:49disso nesse curso ainda. E que publica

37:52sozinho no Instagram. E aí, pô, pegar a

37:54chave do Instagram é um saco, né? Que a

37:56meta é muito chata nisso. Sim, dá para

37:59você fazer, mas é um monte de passinho,

38:00um monte de botão que você tem que

38:01clicar. E a gente vai fazendo isso só

38:03com o cloud code nos instruindo. Cara,

38:04agora acessa esse link aqui, clica não

38:06sei onde, vai não sei onde, é, sei lá,

38:08faz 50 clica, uma hora você pega a

38:09chave, entendeu? Então, sempre, mais uma

38:12vez pergunte para ela. Beleza, Renato?

38:14Escrevi o spec.

38:16Galera, spec é um termo muito técnico

38:18assim de programação que significa

38:20especificação. As boas práticas de

38:23desenvolvimento dizem que o ideal sempre

38:26antes de você criar um projeto, criar

38:28uma melhoria, um novo recurso, o que

38:30for, é você escrever uma especificação

38:32antes. Então é isso que a faz muito bem,

38:34ó, spec escrito, ó. Clica ali, pum, ele

38:36vai te mostrar, ó. Isso aqui é spec que

38:39ele criou. É um EBEP de descoberta de

38:42filmes. Parará parar parará. Inclusive,

38:44como ele tá aqui numa formatação de

38:46arquivo que se chama markd, que é essa

38:49formatação bonitinha, ó, você pode até

38:52apertar com o botão direito aqui nesse

38:54arquivo, tá vendo, ó? Ah, lembra que a

38:56gente falou que aqui, pô, nada mais é do

38:58que uma pasta com arquivos? Ó, já

38:59começaram a aparecer os primeiros

39:01arquivos. Aqui são os arquivos de

39:02planejamento.

39:04Aperta com o botão direito e vai em

39:05abrir visualização, ó, que ele abre num

39:08layout mais bonitinho, tá vendo? Então,

39:11o que que é isso? um EBP de descoberta

39:13de filmes. Aí que que a gente decidiu,

39:15ó, plataforma, a região, toda a

39:18arquitetura. Olha a estrutura de pastas

39:20que ele já criou. Quais são as telas que

39:22vão ter, ó, tela home, tela detalhes,

39:24tela busca. Quais são os dados que eu

39:26preciso buscar lá na PI? Quais são os

39:28possíveis erros que vão aparecer, ó? Se

39:30o serviço lá do TMDB sai do ar, qual que

39:33é o visual? Olha que massa, galera.

39:35Então, isso aqui é uma spec completa, ó.

39:37E aí com isso ele me fala, me disse que

39:38quer mudar alguma coisa antes, tá tudo

39:41show de bola. Tu é fera demais. Valeu.

39:44Vou encerrar o servidor visual, é aquele

39:46que ele tava nos mostrando os layouts,

39:48né? E seguir pro plano de implementação.

39:51Então, enquanto ele faz o plano de

39:52implementação, galera, a gente vai

39:53atualizando o nosso nossa listinha aqui.

39:56Que que a gente fez? Brainstorm para

39:58iniciar o planejamento. Respondemos

40:01todas as perguntas do briefing inicial.

40:05E agora a gente vai aguardar. Ele

40:07escreveu o plano completo. Então ele fez

40:10lá uma spec, né, que é uma especificação

40:12dizendo meio que em linguagem natural o

40:15que que ele vai fazer. Agora ele está

40:18criando um plano de implementação. Cara,

40:20esse plano de implementação é um

40:22documento 100% técnico. Aí já vai ter o

40:25código que ele vai implementar em cada

40:27parte só para depois executar, entende?

40:30Assim que ele terminar aqui, eu volto e

40:31mostro para vocês.

40:32>> Alguns momentos depois,

40:34>> plano completo e salvo. Se liga nesse

40:37plano, plano de implementação. A

40:39primeira mensagem que tá aqui, ó, é para

40:41trabalhadores agênticos, ou seja, para a

40:44use a skill, não sei o qu, construir o

40:46web app. Aí, ó,

40:50olha o nível, ó. Tarefa zero, scaffold,

40:52ou seja, scaffold é a estrutura, né?

40:55Como se fosse a estrutura de um prédio,

40:56assim. Olha, isso é código, galera. que

40:59é o código puro. Ó, ele já tá dizendo

41:00exatamente qual código criar, em qual

41:03lugar, quais arquivos. Por isso que eu

41:05falo, isso é bacana porque assim, depois

41:09quando você for, pô, mais avançado

41:10assim, você pode até brincar um pouco

41:12com o quê? Com esse nível de

41:14planejamento de modelos robustos para

41:17depois executar isso aqui com modelo

41:18mais barato, porque tá tão claro aqui o

41:20plano que qualquer modelo executa isso

41:22aqui bem, entendeu? Depois você vai

41:23verificar no navegador, ver se isso aqui

41:25tá funcionando, você vai ver se o onde

41:27assistir tá funcionando. Pô, show de

41:29bola, galera. Então, com isso pronto,

41:31ele nos pergunta o seguinte: como que

41:33você quer executar? O Superpers, ele tem

41:36sempre duas formas de execução, a

41:39execução com subagentes e a execução

41:42inline. Se quiser, pergunta para ele os

41:44prós e contras de cada uma. Assim, não

41:45se preocupa muito com isso, mas o

41:47subagentes é mais ou menos o seguinte,

41:49deixa eu até já botar ele aqui, ó. Qual

41:51prefere? Você vê que ele já recomenda

41:52um, né? Vou botar um. Mas basicamente

41:55que que é isso? Vamos dizer que tem, ó,

41:5611 tarefas para fazer. Ele vai disparar

41:5911 agentes separados pros 11 irem

42:02fazendo em paralelo cada uma das

42:03tarefas, entendeu? E aí com isso acaba

42:06ficando pronto mais rápido e geralmente

42:08de forma performance melhor assim. Então

42:10botei um sub agent. Aí agora ele vai

42:13começar a criar. Volto assim que tiver

42:15criado em paralelo. Enquanto ele tá

42:17criando, ó, aqui ele já listou todas as

42:19tarefas que ele vai fazer, né? Aí ele tá

42:21fazendo, ó, tá trabalhando agora.

42:23Diga-se de passagem, é uma delícia ver a

42:26preenchendo cada uma dessas tarefas

42:28aqui, tá? Mas enfim, ele te fala o

42:30seguinte: "Já vai lá criar a sua chave

42:32do TMDB pra gente poder conectar com

42:34eles." Então, pô, vamos criar nossa

42:37chave API do TMDB, né? Vamos já

42:39aproveitar. Crio uma conta aqui. Então

42:42vou criar Renato Wass,

42:44uma senha qualquer, um e-mail,

42:49registrar, confirmar que eu sou humano.

42:52Será? Te mandamos um e-mail, clique no

42:54link de verificação. E-mail verificado.

42:57E aí, ó, vá em nessa tela aqui, ó,

42:59depois que tiver logado e solicite uma

43:01API aqui, uma chave de API aqui, ó.

43:03Solicitar chave de API. Para gerar uma

43:05nova chave de API, clique aqui. É para

43:07uso, pessoal? Com certeza. tá dizendo

43:09que é só para uso pessoal, enfim, não é

43:11para utilização comercial, né? E ele me

43:13pediu vários dados aqui, ó. Não sabe o

43:16que preencher. Faz o seguinte, ó. Bate

43:18um print, copia,

43:21abre uma sessão nova aqui, ó. Eu faço

43:23isso direto para preencher esse tipo de

43:24formulário, ó. Tá vendo que eu abri uma

43:26sessão nova no Cloud Code, né? Então, a

43:28gente estava naquela sessão do

43:29planejamento, ó. Cliquei aqui para abrir

43:31uma nova sessão, ó. E pergunta assim, ó:

43:34"O que preencher aqui no TMDB para pegar

43:37a chave de API?

43:39Aí, esse é o típico exemplo que você

43:41pode usar um modelo mais simples, ó.

43:42Altera o modelo para um highiku, que é o

43:44mais baratinho, ó, para não ficar

43:45gastando token à toa e simbora. Nome do

43:48aplicativo, cine catálogo. URL,

43:52essa aqui. Tipo de uso, se for web, mude

43:55para website. Pum. Sobre o aplicativo,

43:58copiar e colar. Primeiro nome, Renato

44:01As. Deixa eu tentar me cadastrar assim,

44:03ver se vai. Não, preenche tudo. Você

44:06está no plano desenvolvedor gratuito.

44:08Acesse os detalhes da sua chave API

44:10aqui, ó. Tá aqui então a minha chave de

44:11API. E aí o que ele precisa, ó, é o API

44:15read access token, ou seja, token

44:17somente leitura. Aqui em português é

44:19esse token de leitura aqui, não. Então,

44:22vou copiar esse token todo. E aí eu

44:25posso ou colar aqui, que é o que ele

44:28pediu, né, ó. cola aqui. Mas assim, já

44:31adianto que uma boa prática é não colar

44:35senhas e chaves de API para o chat,

44:38porque, pô, embora seja assim bem

44:40seguro, ele sempre vai falar: "Ai, não

44:41pode, agora que você colou aqui, existe

44:44um risco de vazamento dessa chave API.

44:47Então, embora eles façam de tudo para

44:48proteger, ainda assim eles sempre falam:

44:49"Putz, não deveria ter colado". Por isso

44:52que assim, o que eu sempre faço quando a

44:55gente vai colar senhas, chaves de API, é

44:58o seguinte, vem aqui no planejamento,

44:59olha como já tá cheio de arquivo aqui,

45:02ó. Tá vendo que ele já criou um arquivo

45:04ENV local aqui, ó, com TMDB Access

45:08Token. Se ele não tivesse criado, nós

45:10mesmos criaríamos esse arquivo, que ele

45:12já tinha até adiantado pra gente. Aqui,

45:14ó. Aqui, ó. Me manda tarã que eu vou

45:16gravar no arquivo envio local, ó. Então,

45:18a gente mesmo pode criar esse arquivo

45:20aqui. É uma boa prática em

45:22desenvolvimento você sempre ter esse

45:24tipo de arquivo ENV, que é onde você

45:26cola sua senha, suas chaves de API, tá?

45:29Então vou vir aqui e colo aqui, ó. Tá

45:33aqui o meu token de acesso. Quando

45:35sempre que tem uma bolinha branca aqui

45:36em cima no VS Code, é porque o arquivo

45:38não está salvo. Aí você dá um contrl S

45:41para salvar. Ó, tá vendo que somou a

45:42bolinha branca? Já posso fechar isso

45:44aqui. E agora a gente já está então com

45:47a nossa chave de API salva. Então

45:49criamos a nossa chave de API e ele já

45:51fez quatro tarefas das 10. Vamos

45:53continuar aguardando tudo verde. 11 de

45:5611 testes passando. Toda a implementação

45:59pronta. Precisa da chave real agora.

46:01Colhe aqui o API aqui. Não sei o quê. Já

46:04colei a chave lá no arquivo ENV.

46:06Primeiro, validação rápida do token.

46:09Token válido. Ou seja, ele conseguiu ir

46:11lá no TMDB. Aí retornou os filmes de

46:14ação nos streamings do Brasil, voltaram

46:164773

46:18filmes. Show. Servidor no ar aqui nessa

46:21URL. Vou verificar. E aí, ó, você já

46:23consegue pegar essa URL aqui, ó. Esse

46:26local host você já deve ter visto em

46:28alguns lugares assim. Que que significa

46:30isso? Que a gente construiu toda a

46:32aplicação, mas ela não vive ainda na

46:35internet, ela vive num ambiente local. É

46:37isso que local host diz, entendeu?

46:39Então, se você pegar essa URL e colar no

46:41seu navegador, a gente já consegue

46:44acessar a nossa primeira versão da nossa

46:47aplicação criada. Olha só, aí ele

46:49próprio já fez a verificação, ó. Opa, já

46:51ele consegue acessar e bater prints e

46:54olhar esses prints, né? Cláud Cláudio é

46:55inteligente para caramba. E ali, ó,

46:57dados reais, fileiras carregando os

46:59detalhes, ele confirmou, ele próprio já

47:01foi clicando sozinho aqui nos

47:02bastidores, você nem viu. Então, ele já

47:04foi lá, clicou, viu que os detalhes

47:06carregaram, voltou, ele já fez esse

47:08teste, ó, já tem até o trailer. Aí ele

47:10tá fazendo uns ajustes finais aqui,

47:12coisa técnica, ah, corrigindo uma URL,

47:15olhando. Mas enfim, enquanto isso, eu já

47:18quero fazer o seguinte, ó. Com isso, a

47:20gente já tem o nosso primeiro aplicativo

47:24criado, galera. O que que a gente vai

47:26fazer agora? Corre melhorias. E esse é o

47:30verdadeiro dia a dia de quem tá criando

47:32qualquer coisa no cloud Code. Você foi

47:34lá, criou, tá beleza, show de bola. A

47:37partir de agora eu quero fazer melhorias

47:38e correções. Então, como é que a gente

47:40faz melhorias e correções? A primeira

47:43que eu quero fazer junto com vocês é um

47:46retrofit no design. Então, ajustar o

47:49design e layout. Por quê? Porque eu

47:51achei que tá muito simplão, né, galera?

47:53Pô, tá tá legal, tá bonito, mas eu quero

47:56que fique muito bonito. Então, o que eu

47:58vou fazer? Vou pegar uma imagem de como

48:00que é a interface do Netflix aqui, ó.

48:02Pega esse aqui, por exemplo, aqui, ó,

48:04mais cara de Netflix mesmo. Vou dar um

48:07copiar imagem e aí eu vou chegar aqui no

48:09Cloud Code e eu vou fazer o seguinte, ó.

48:11Eu vou abrir uma nova sessão. Por quê?

48:13Porque aqui eu tô criando, tá tudo

48:15certo. Não adianta eu vir aqui e começar

48:17a pedir fazer ajuste de design. Tem nada

48:19a ver uma coisa com a outra. Só vai

48:20confundir o cloud. Pô, mas que eu tô

48:22criando o aplicativo do zero. Se for

48:25falar de design, eu falo numa outra

48:26sessão, entendeu? Então, crio uma nova

48:28sessão. Modelo, cuidado com isso, ó.

48:30Lembra que eu escolhi o modelo high lá

48:32para, pô, só para pegar um dado de chave

48:34de API. Cuida que se você for tentar

48:36fazer alguma coisa mais complexa com

48:38high ruim. Então, volto aqui pro padrão,

48:40por exemplo. E aí, agora que que eu

48:42faço, ó? Eu recruto aquele plugin que a

48:44gente instalou, que era o frontend

48:47design, ó. Então imagina como se fosse

48:49para uma empresa e você fala: "Ô,

48:51desesigner, vem cá, vou precisar de você

48:52agora." Frontin design.

48:55Aí eu falo, ó, vou dar um contrtrl V

48:57para colar aqui a imagem do Netflix, ó.

49:00Eu vou falar, quero que o layout fique

49:03muito mais bonito.

49:07Veja a imagem em anexo,

49:10estilo Netflix mesmo, até mais bonito

49:13que Netflix. Eu quero essa fotona

49:16bonita.

49:17na parte de cima, degradez, estilos

49:21visuais, etc, etc.

49:24Trabalha aí, bicho. Deixa esse troço

49:27lindo de cair o queixo.

49:31Mandei. Pronto, bicho. Transformei o

49:33cine catálogo num troço de cair o

49:35queixo. O que mudou? A hero. Hero é

49:38sempre a parte superior assim da página,

49:40né? Full bleed com a fotona em backdrop,

49:42degradê cinematográfico, cabeçalhos, os

49:45cards, as fileiras. O problema é que eu

49:47fechei a aba e aí perdi aquela URL do

49:51servidor, né? Então assim, que que você

49:53faz sempre que você perdeu a URL do

49:55servidor? Na verdade, o ideal é que

49:56sempre a gente aprenda a abrir esse

49:59servidor para testar a aplicação, né?

50:01Então, olha só, vou voltar para cá e aí

50:04lá em cima no teu no teu VS Code vai ter

50:09a opção terminal aqui em cima, ó. No meu

50:11só tinha sumido por causa do zoom, que

50:12eu sempre dou muito zoom para facilitar

50:14a vida de vocês aí que estão assistindo,

50:15né? Então, no meu caso, o terminal veio

50:16para cá. Aí vai aparecer ali terminal,

50:19novo terminal. Aí vai abrir aquele

50:21terminalzinho assim com aquela cara de

50:23terminal que você já conhece. E aí você

50:25manda o seguinte comando para ele, ó.

50:27NPM

50:29espaço run espaço dev. Esse é o comando

50:34para você abrir um servidor de teste pro

50:36teu aplicativo ali. Então ele vai

50:38construir uma versão do aplicativo para

50:40você poder testar. Aí você vê que ele

50:41liberou aqui, ó, uma URL local. Tá

50:44vendo, ó? Copio ela e aí abro lá no

50:47nosso navegador. Vamos ver se ficou

50:48assim de cair o queixo, como ele falou,

50:50ficou mais bonito, sem dúvida nenhuma. A

50:53imagem full bleeding backdrop. Já peguei

50:56uns errinhos aqui, ó. Esse ação aqui, tá

50:58vendo? Aí é legal que a gente já

51:00consegue te mostrar como fazer uma

51:02correção em tempo real aqui, tá? E aí,

51:04deixa eu abrir uma qualquer só para ver

51:07se a tela de detalhes tá boa, até para

51:09testar, para ver se no celular vai ficar

51:10bom. Ó, foi. Ah, é outra vida, né? Você

51:13vê, antes a gente precisava fazer esses

51:15ajustes na mão de responsividade assim,

51:17tá? Então tem um errinho aqui. Vamos

51:20implementar uma correção que é essa e

51:21depois eu vou fazer uma melhoria, tá?

51:23Então olha só como é que a gente faz

51:25correções.

51:27Sempre que possível bata prints. Isso

51:28ajuda muito aí a a entender o que que tá

51:30acontecendo. Então eu vou bater um print

51:33aqui, ó.

51:35Copiar.

51:38E aí eu colo lá no meu cloud code. Pode

51:40ser inclusive numa nova sessão. E aí o

51:43bacana é o seguinte, sempre que a gente

51:46for fazer uma correção de um bug que tá

51:49ocorrendo, o superpers, basicamente ele

51:51tem dois comandos, o brainstorming que a

51:53gente já mostrou e o systematic

51:56debugging, ou seja, o debug sistemático,

51:58resolução de problemas. É os dois

52:00comandos dele que você precisa usar.

52:01Então esse aqui, ó, é exatamente para

52:03isso. É uma abordagem diferente do

52:05brainstorm em brainstorm para planejar o

52:07negócio do zero. Debug sistemática para

52:09ele, cara, deixa eu entender que que

52:11pode ser, deixa eu isolar a variável,

52:12deixa eu resolver essa parada, entendeu?

52:15Então a gente vem aqui, eu colei a

52:16imagem do erro, ó, ação ali, ó. E aí eu

52:20explico o erro da melhor forma possível.

52:23Galera, não sejam preguiçosos. Pia já

52:26faz 99% do nosso trabalho. Você só

52:30precisa fazer o zoom. % que é explicar o

52:32problema. Não seja preguiçoso nesse 1%.

52:35Então assim, explica mesmo. Isso vai

52:37ajudar muito a IA a achar o problema

52:39mais rápido, economizando tokens. A

52:43gente vai falar sobre precificação lá e

52:44resolvendo de forma mais eficaz. Então

52:47só tem vantagens em você explicar mais.

52:49Está vendo o texto ação ali na primeira

52:53fila?

52:56Esse texto está sobreposto ao botão

53:01ver detalhes. Corrija. Então assim, só

53:03de eu falar o texto que tem ali e outro

53:06texto, essa é uma dica boa que eu te dou

53:08assim, isso ajuda muito a Iá a encontrar

53:11onde que tá, porque aqui quando ele

53:12começa a pensar, ele vai aqui, ó, tá

53:14vendo que ele tá procurando exatamente

53:16pelo pelo termo que você mandou ver

53:18detalhes, ó? Então, na lata, rapidinho,

53:21ele já vai achar onde tá esse botão. Aí

53:23ele vai procurar pelo ação, vai achar

53:25onde tá o texto ação. Cara, achei esse

53:27elemento, achei esse elemento, vou

53:28corrigir tudo. Então ele vai corrigir

53:29isso de forma muito rápida e muito

53:31eficaz. Então, rapidinho aqui, ele já

53:33corrigiu, ó. É isso aqui que ele faz, ó.

53:35Identifica, causa raiz, ó. A dívida das

53:38fileiras usa p negativo. Você precisa

53:40entender isso, absolutamente nada. Mas

53:43ele tá destrinchando aqui qual que é o

53:45erro, ó.

53:47não sei o quê, é 16 pixels maior que o

53:49espaçamento de fundo, hipótese de

53:51correção. Aí ele vai lá, faz a correção,

53:54testa para ver se corrigiu. Foi de

53:56primeira. Então, com isso a gente

53:57ajustou o designer layout, fizemos

54:00correção de bug visual e agora vamos

54:03implementar uma melhoria que é a

54:04seguinte, ó. Filtro por nota do IMDB.

54:07Cara, eu eu pessoalmente eu sinto muita

54:09falta disso, assim, eu queria pegar e

54:11ver, pô, quais filmes tem uma nota acima

54:13de oito, por exemplo, no IMDB para eu

54:15filtrar, entendeu? E não tem isso, só

54:17tem busca por filme aqui, né, que até

54:19funciona. Procurei por Mortal aqui, ele

54:20achou Mortal Kombat. Show. Então, quero

54:22implementar esse filtro agora. Vamos lá.

54:25Nova sessão. Posso mandar um

54:27brainstorming de novo. Ah, mas é só uma

54:30implementação de um recurso, não tem

54:31problema. Aí ele vai ser um brainstorm

54:32super curtinho.

54:34Quero implementar um filtro na página

54:37inicial

54:38por nota do IMDB.

54:42Quero que o usuário possa, por exemplo,

54:45filtrar somente filmes com nota acima de

54:49oito. Mandei um brainstorming. Aí o

54:51brainstorming aqui, ó, já começa, né?

54:53Qual que é o processo do brainstorming?

54:55Explora o contexto do projeto para

54:56saber, pô, deixa eu ver que que foi

54:58criado. Faz as perguntas, propõe

55:00possíveis abordagens, apresenta o

55:02design, escreve a spec, escreve o plano

55:04e monta. Lembra? É igualzinho a gente

55:07fez lá no início. Então, como que o

55:09filtro deve afetar o layout da home?

55:11Manter as fileiras por gênero filtrando

55:13dentro de cada uma? Trocar por uma grade

55:15única dos filmes acima da nota ou

55:17adicionar uma fileira nova? Prefiro a

55:19manter as fileiras de gênero. Como o

55:21usuário escolhe a nota, botões de

55:24presets, de pré-opões, assim, né? Ó,

55:26minha recomendação rápido ou slider

55:28botões. Aí foram só essas duas dúvidas

55:31que ele tinha, tá vendo? Por isso não

55:32tenha medo do brainstorming aqui, ó. É,

55:34duas perguntinhas. É coisa rápida, é

55:36feature rápido. Agora ele já captou um

55:39possível BO aqui, ó, que eu não tinha

55:40pensado, pô. Com nota muito alta, muitas

55:43fileiras vão esvaziar, tipo assim, sei

55:45lá, em comédia vai sumir tudo, porque

55:47não tem muito filme de comédia com nota

55:48acima de oito, né? Esconder fileiras que

55:50ficaram vazias, com certeza. Decisões

55:53fechadas. Como os três pontos já

55:54definiram a abordagem, vou direto pro

55:56design. Ah, esse é o design. Blá blá blá

55:58blá blá blá. Tá alinhado com o que você

55:59imaginou. Aqui uma dica, galera, que eu

56:01faço direto. Quando é coisa assim, pô,

56:03que eu sei que ele vai acertar de

56:04primeira, coisa rápida, coisa tranquila,

56:06eu sempre mando assim, ó, OK, pode

56:08prosseguir e implementar direto. Tipo

56:11assim, não precisa ficar confirmando as

56:12coisas comigo, eu confio em você, Cloud

56:14Code. Você é melhor que unis. Pronto,

56:16filtro por nota implementado e comitado

56:19que foi feito. Parar parar pararã. Tá

56:22aqui o filtro por nota. Se eu filtrar

56:24por nota sete, quase todos. Se eu

56:26filtrar por nota oito, uma cacetada.

56:29Terror só um. [risadas]

56:31Então, o filtro por nota é redondinho,

56:33galera. E com isso a gente encerra a

56:36parte de melhorias e correções do nosso

56:38aplicativo. Então, a gente criou o

56:40projeto, a gente fez um super ajuste

56:43visual para ele ficar bem mais bonito,

56:45corrigimos bugs e fizemos melhorias.

56:47Agora a gente pode partir pra segunda

56:50parte do nosso projeto, que é o quê?

56:52Como colocar banco de dados e

56:54autenticação, ou seja, como colocar o

56:56que os desenvolvedores chamam de back

56:58end. Front end é o que tá acontecendo

57:01aqui na frente do projeto, né, ó, aqui

57:03no navegador. Back end tá acontecendo

57:05nos bastidores, então onde a gente vai

57:06conseguir salvar informações, fazer

57:08autenticação, guardar informações dos

57:11nossos usuários. Vamos lá, turma. Agora

57:13vamos falar de backend, banco de dados,

57:15autenticação. Embora esse aqui seja um

57:18tutorial mais iniciante de cloud code, é

57:21o que eu prometi para vocês, a gente tem

57:23que ir do iniciante pro avançado. Então,

57:25quero que você tenha essa jornada

57:27inteira aqui nessas horas comigo. E

57:29assim, não tem como não falar de

57:31backend, porque se você tá usando Cloud

57:32Code para criar basicamente qualquer

57:34coisa, em 99% dos teus projetos, você

57:38vai precisar de um banco de dados para

57:41armazenar informações, para registrar um

57:44usuário, para que o usuário possa fazer

57:46um cadastro, login dentro do teu

57:48projeto. Então assim, backend é algo que

57:50você tem que conhecer. Então vamos lá,

57:52você precisa armazenar essas informações

57:54em algum lugar, tá?

57:57Então, quais são as opções

58:01de backend? Se você procurar aí, procura

58:04lá ah, melhores bancos de dados para

58:06aplicações web. Melhores bancos de dados

58:09para aplicações web. Post, Mysql,

58:13SQLite, Mongo DB, Supase. Então, ele vai

58:17te dar várias opções aqui, ó.

58:20Basicamente a internet inteira adotou

58:23esse cara aqui, ó, que é o Supase. Por

58:26quê? O Supas ele é uma ele é um serviço

58:30pago, mas com um plano free muito

58:32robusto, mas muito robusto mesmo assim.

58:35É só quando o teu projeto já tá com uma

58:37cacetada de usuários que você vai

58:39precisar ir para plano Pague quando

58:40precisa é

58:41ó por mês. Tô sem internet inteira

58:43adotou esses caras como backend. Porque

58:46você começa, faz tudo no free, escala

58:48para caramba no free tem recurso de

58:51mais, é super simples de integrar todas

58:53as ferramentas de IA, inclusive Cloud

58:55Code conversam muito bem com super base,

58:57tipo, a coisa funciona, entendeu? E a

59:00gente não vai pagar nada por isso ainda

59:01por cima. Então você vai ver isso na

59:03prática. Como é que a gente vai fazer

59:04aqui agora? Então, olha só, vamos dar um

59:06passinho para trás e nos perguntarmos

59:08por que que a gente quer mesmo um banco

59:09de dados brainstorming. Vamos perguntar

59:12para eh ya olha só, eu quero agora que o

59:17usuário possa

59:19favoritar os filmes preferidos dele.

59:24Favoritar, não vou chamar de favoritar,

59:26favoritar é meio vago, né? Possa marcar

59:29os filmes que ele quer assistir. Tipo o

59:31conceito de uma watchist inglês, né? que

59:34ele é a lista que ele quer, é aquela

59:36lista que você tem todos os streaming,

59:38né? Sua lista de coisas que você quer

59:39assistir e marcar os que ele já

59:41assistiu.

59:43Quero que lá na página inicial tem essas

59:46abas, né? Então a gente tem lá no cine

59:48catálogo, ó. Eu quero que aqui em cima

59:49apareça, ó, quero assistir e já

59:51assistidos pra pessoa poder

59:54navegar.

59:57Então, possa marcar os filmes que ele

59:58quer assistir, marcar os que ele já

59:59assistiu. Quero que lá na página inicial

1:00:00tenha essas abas para ele navegar. E

1:00:04para isso quero que ele possa entrar com

1:00:09login e senha. Ah, mas Renato, e se eu

1:00:12quiser que seja só com número de

1:00:15telefone? Cara, tudo pode. Vou botar

1:00:17aqui e senha. Botei login e senha, né?

1:00:20E-mail e senha porque é o mais comum. Se

1:00:22você por acaso quiser fazer uma

1:00:24desconstrução da coisa dos superabas que

1:00:26eu te falei, você pode perguntar aqui,

1:00:28ó, me sugira as melhores opções de back

1:00:31end. Pergunta para ele, deixa ele te

1:00:32responder. Aí de repente você segue a

1:00:34indicação dele. Mas assim, eu já tô te

1:00:36dando a dea base porque, pô, imagino que

1:00:38você esteja aqui nesse vídeo porque você

1:00:39quer pegar um pouco de experiência de

1:00:41quem já tá fazendo isso há muito tempo.

1:00:42Então, vai na fé. Vamos usar super base

1:00:45para isso. Quais próximos passos? Já vou

1:00:48adiantar, ó. Não tenho conta no Supasa,

1:00:52mas já vou criar, pois o Renato está me

1:00:56ensinando. Pode falar bem assim. Então,

1:00:57vai em supase.com,

1:01:00criar conta grátis. Então, vamos lá,

1:01:02supabase.com.

1:01:05E vamos começar o nosso projeto. Vou

1:01:08fazer um cadastro com uma conta nova

1:01:10aqui, porque eu já tenho várias contas

1:01:11aqui, mas tudo já com com projetos

1:01:13pagos, né? Signup, que é cadastro.

1:01:17Vamos para Renato @ibabr.

1:01:20Senha sugerida.

1:01:23Salvar. Cadastrar. Confirmei aqui meu

1:01:26e-mail. Nome, qual que é o teu uso?

1:01:29Plano vai no grátis, já vai no pago.

1:01:31Tudo aqui vai ser no grátis. Criar

1:01:33organização. E ele já me jogou para

1:01:34criar um projeto aqui, tá?

1:01:37Organização. Mantém GitHub. Não precisa

1:01:39conectar. Nome do projeto. Esse aqui vai

1:01:41ser o projeto teste

1:01:44YouTube Cloud. Code cinecatálogo.

1:01:48Senha. Aqui você tem que colocar uma

1:01:49senha forte, gerar uma senha.

1:01:53Anota essa senha. Importante, tá? Região

1:01:55aqui é onde que vão ficar os pedados os

1:01:58teus dados. Como geralmente a maioria

1:02:00dos usuários são brasileiros, eu sempre

1:02:01boto São Paulo aqui, né? Mas enfim, pode

1:02:03deixar padrão também. Habilita tudo,

1:02:06criar novo projeto. Então, estamos já

1:02:09com o nosso projeto criado no Supase.

1:02:11Voltamos lá para o nosso cloud code.

1:02:14Renato, quem precisa tá logado para quê?

1:02:16a navegação vai ser pública e a pessoa

1:02:19faz login só para marcar e ver listas,

1:02:21ou seja, ele consegue usar o cine

1:02:23catálogo aqui de boa, sem precisar

1:02:24alugar, mas se ele quiser guardar os

1:02:26dados, aí ele tem que logar. Eu gosto.

1:02:28Ou app inteiro atrás de login. Não,

1:02:29vamos de um. Como as abas convivem com

1:02:31catálogo de descoberta que já existe?

1:02:33Descobrir, quero assistir. Já assisti.

1:02:36Gostei da um. Por padrão, Supas que o

1:02:39usuário confirme o e-mail. Clica num

1:02:41link enviado antes de conseguir logar.

1:02:42Você é mais seguro. Tarã. quer desativar

1:02:45a confirmação de e-mail. Na verdade, ele

1:02:47já se adiantou aqui, porque eu ia te

1:02:49fazer essa sugestão, tá? Para esses

1:02:51projetos de teste, eu sempre tiro isso,

1:02:53esse processo que a gente fez agora, né,

1:02:55de, ah, vai no seu e-mail e confirma

1:02:57para ver se você pode se cadastrar

1:02:58mesmo. Então, eu vou colocar desativar

1:03:01confirmação de e-mail. E aí eu posso até

1:03:03fazer, ó, ele já me deu o caminho. Isso

1:03:04eu preciso fazer manualmente, tá? Então,

1:03:06ó, supase autenticação, providers,

1:03:08e-mail, desligar.

1:03:11Supase,

1:03:13autenticação

1:03:14providers.

1:03:16Aí tem aqui, ó, confirmar e-mail.

1:03:18Desmarca essa opção e dá um salvar. Aí

1:03:23vai ser bom. Quando a pessoa se

1:03:24cadastra, ela tipo já cadastra de uma

1:03:25vez, não precisa ficar confirmando

1:03:26e-mail. Retiramos confirmação de e-mail.

1:03:30Um filme pode estar nas duas listas ao

1:03:32mesmo tempo ou marcar como já assisti,

1:03:34tira ele de quero assistir. Com certeza,

1:03:37né? Mutuamente exclusivos. de onde o

1:03:40usuário marca quero assistir ou já

1:03:41assistir na página de detalhes ou nos

1:03:44cards também, mais na página de

1:03:45detalhes. Ele recomenda só na página de

1:03:48detalhes. Então é isso aí. Agora,

1:03:52agora a principal escolha técnica, como

1:03:54integrar os pais neste aplicativo. Aí

1:03:57ele apresenta uma abordagem A aqui, que

1:04:00é a melhor recomendação técnica dele,

1:04:03como você pode ver. Ou uma abordagem B.

1:04:06Recomendo a abordagem A. É o padrão

1:04:08oficial. Encaixo no que já existe.

1:04:10Simbora. Bora. Aqui está o design

1:04:12completo em sessões compactas. Marca o

1:04:14que quiser ajustar. Aí ele me apresenta

1:04:16o modelo de dados, ou seja, como que vai

1:04:18funcionar aqui o banco de dados, né? Vai

1:04:20ter os usuários, os filmes, o status de

1:04:23cada filme, se é um filme que ele quer

1:04:24assistir ou se ele já assistiu. Enfim,

1:04:26ele vai apresentar toda a parte técnica

1:04:28aqui, inclusive autenticação, né? Que é

1:04:30autenticação, entenda que é cadastro e

1:04:32login de usuários, né? Tudo aqui. E se

1:04:34eu desenho algum ponto para ajustar?

1:04:36Aprovo ou reprovo ou reescrevo. Aprovo

1:04:39spec escrito e comitado. Dá uma

1:04:42revisada, me diz que mudar alguma coisa.

1:04:44Aí ele fala aqui que eu preciso fazer o

1:04:45quê? Revisar o spec e fazer a

1:04:46configuração lá no Supas

1:04:49para desligar o confirme e-mail. Isso a

1:04:51gente já fez, mas eu já vi que ele tá me

1:04:53pedindo aqui, ó, a URL do projeto e a

1:04:57chave anônima do projeto, tá? Isso aqui

1:05:00é o quê? Igual a gente fez a chamar a

1:05:02chave API lá do TMDB para conectar. A

1:05:06gente também precisa pegar as chaves

1:05:07agora do Superbase para conectar, né? No

1:05:09Supas que tem um botão connect aqui em

1:05:11cima, ó, onde você já consegue pegar

1:05:13esses dados, tá? Ó, aqui mesmo já

1:05:15aparece descer aqui, ó, o próprio

1:05:18conteúdo do arquivo envcal, que é

1:05:20exatamente o que ele tava querendo aqui,

1:05:22né? Então, só vou copiar esses dados.

1:05:24Cliquei aqui em copiar

1:05:26e aí lá no nosso projeto,

1:05:29deixa eu ver se ele já criou aquele

1:05:30arquivo envoocout aqui, ó.

1:05:33Ah, a gente já tinha usado por causa do

1:05:34TMDB, né? Eu vou só colar aqui, ó,

1:05:38exatamente o que eu copiei lá do Super

1:05:39Base, tá? Colei

1:05:42e aí eu vou avisar ele

1:05:45o quê? Que o spec aprovada e já colei

1:05:49URL e publishable key no arquivo ENV.

1:05:54Então, já colei as credenciais que ele

1:05:56precisa aqui, ó. Simbora. Esse plano

1:05:58demorou para ele montar. Olha o tamanho

1:06:02desse plano e assim me dá um prazer ver

1:06:05um plano desse bem feito que tipo assim

1:06:08reduz muito a chance de dar um problema

1:06:10na execução, né? Quero executar como

1:06:12subagentes ou inline subagentes. Simora.

1:06:16Aí agora ele tá me pedindo para eu

1:06:18conceder para ele uma autorização

1:06:21para ele mexer na minha conta do Supase.

1:06:24Ele me fala o seguinte, ó. Abra esta URL

1:06:27aqui no navegador, ó. Copia ela toda,

1:06:29conttrl C e cola lá no navegador e

1:06:33autorize. Então é aquela conta do

1:06:35Supase. Ó, você quer conceder acesso a

1:06:38esse projeto para uma organização tua?

1:06:40Sim. Autorizar. E aí, ó, sei que parece

1:06:43que deu pau aqui, mas esse é um

1:06:45procedimento comum. O que ele te fala é

1:06:46o seguinte, ó. Se a página de redirect

1:06:48der um erro de comunicação, é normal.

1:06:51Copia a URL inteira da barra de

1:06:52endereços. Ou seja, essa URL aqui, ó.

1:06:54Copia e cola. Por quê? Porque aqui no

1:06:57meio tem exatamente o que ele precisa,

1:07:00que é o código para ele entender que ele

1:07:03recebeu essa autorização, não. Então,

1:07:05mandei esse código e temos a nossa

1:07:07aplicação já com esse novo recurso,

1:07:09galera. Quero assistir, já assistir,

1:07:11entrar, já vamos testar. Que que eu

1:07:14quero antes correr contigo? Só algumas

1:07:16alguns detalhes, tá? Primeiro, pô, a

1:07:19gente falou de MCP do Sup, a integração

1:07:22com Supa Base

1:07:24e assim, eu sei que em alguns momentos o

1:07:27que ocorre contigo vai ser completamente

1:07:30diferente do que tá ocorrendo comigo

1:07:31aqui. Não só em alguns momentos,

1:07:34em 100% dos momentos. Se você mandar a

1:07:37mesma mensagem pra mesma IA, duas vezes

1:07:40diferentes, vai dar duas respostas

1:07:41diferentes. Você entende? A I não é

1:07:43determinística. Aí ela não vai sempre

1:07:46dar a mesma resposta, vai ficar com

1:07:47layout completamente diferente, vai

1:07:49ficar com outra interface, cara, vai

1:07:52mudar de acordo com o que você já tem

1:07:53instalado no teu computador. Então, de

1:07:56repente, ele vai te falar: "Ah, eu achei

1:07:57melhor conectar pelos Pabs por esse

1:07:58outro método aqui". Aí você, ah, mas por

1:08:01quê? Tem que trocar ideia. Então, se

1:08:03você pegar, por exemplo, olha só, vamos

1:08:05em dois clouds diferentes, vamos fazer a

1:08:07mesma pergunta. Quantos planetas tem no

1:08:10sistema solar?

1:08:13fazer essa pergunta aqui e vou fazer

1:08:15essa pergunta aqui. O sistema solar tem

1:08:18oito planetas. Aí ele me dá uma lista em

1:08:20bullet points e diz que Plutão foi

1:08:22rebaixado em 2006. Aqui na outra ele me

1:08:24diz: "Tem oito planetas". Aqui ele já me

1:08:26dá informação, ele não me deu no final.

1:08:28Então você entende como a mesma

1:08:30requisição pra mesma IA no mesmo momento

1:08:34gera duas respostas diferentes. Então o

1:08:37que vai acontecer aí contigo vai ser

1:08:39diferente do que está acontecendo aqui

1:08:41comigo. E a lição mais importante desse

1:08:43vídeo, caso não tenha ficado claro

1:08:46ainda, é a importância de você aprender

1:08:48a perguntar as coisas para ir a, porque

1:08:50é isso que vai te deixar completamente

1:08:53invulnerável,

1:08:55antifrágil

1:08:57a qualquer BO que a IAT traga. Ah, mas

1:08:59pô, eu vi aqui, você não tem o Node

1:09:01instalado, porque às vezes você esqueceu

1:09:02de instalar lá no começo. Puts, ferrou,

1:09:04Renato. E agora, cara? Como eu faço

1:09:06isso? Me deu o passo a passo. Pum, pum,

1:09:08pum. Pronto, e agora tá funcionando. É

1:09:10assim, galera, que a gente resolve as

1:09:12coisas. Então, enfim, já está aqui.

1:09:14Código 100% implementado, Banco Vivo.

1:09:17Vamos lá no nosso Supase. Ó, aqui, só

1:09:19pra gente ver o que que aconteceu. Se

1:09:22você vier aqui no seu projeto do Supase

1:09:24e for em editor de tabelas aqui do lado,

1:09:27ó, você vai ver que já apareceu uma

1:09:28tabela aqui chamada watchlist, que é

1:09:31lista de de assistir, né? Ele já criou

1:09:34essa lista, ó, para armazenar as

1:09:36seguintes informações. ID do usuário,

1:09:39qual o ID do filme, qual o status, qual

1:09:42o título? Caminho do poster, ano de

1:09:46release, né, de de lançamento do filme,

1:09:49a média do voto e a data de criação,

1:09:51quando que eu criei esse registro aqui

1:09:53no banco de dados. E se você for em

1:09:55autenticação aqui, já tá tudo pronto

1:09:57também para começar a receber os

1:09:59usuários. Nenhum usuário ainda, claro,

1:10:00ninguém se cadastrou ainda, né? Então,

1:10:02com isso, a gente já consegue começar a

1:10:04testar. Vou dar um quero assistir aqui,

1:10:07ó. Opa, você vê que ele já me traz pra

1:10:09tela de login. Já assisti. Me traz pra

1:10:11tela de login. Por quê? Porque eu não

1:10:12estou logado. Não tem conta. Criar

1:10:15conta. Renato. Pararã pararã pararã.

1:10:18Senha de um a oito. Criar conta. Opa,

1:10:22você vê que já não aparece mais aqui em

1:10:23cima login. Já aparece meu e-mail, ó. e

1:10:27aparece um sair. E aí, se eu for em

1:10:29quero assistir aqui, você ainda não

1:10:31adicionou nenhum filme. Já assisti, você

1:10:34ainda não marcou filmes. E se eu vier

1:10:36aqui no justiceiro e marcar, por

1:10:39exemplo, como quero assistir, ficou

1:10:41vermelhinho. E se eu for na minha tela,

1:10:44quero assistir, ele está aqui. E se eu

1:10:46for no Jack Ryan e marcar um assistido,

1:10:51opa,

1:10:52e forem já assistir. Tá aqui, galera.

1:10:55Isso aí tá funcionando de primeira. Ah,

1:10:57Renato, mas eu queria que aparecesse um

1:10:59iconezinho aqui para mostrar que já tá

1:11:01assistido, que ficasse verde. Galera,

1:11:04são esses ajustes que a gente faz no dia

1:11:06a dia. Então, com isso, a gente criou a

1:11:08nossa conta no Supase. A gente retirou a

1:11:10confirmação de e-mail, solicitamos ao

1:11:13cloud code fazer a integração com o

1:11:16Supase.

1:11:18Pegamos as informações do Supas

1:11:22ali, né?

1:11:24e demos ao cloud code

1:11:27e que mais que a gente fez? E testamos,

1:11:29galera. Basicamente foi isso, né? Essa

1:11:31foi a nossa integração com o banco de

1:11:33dados. Como é que ficou lá, ó? Se eu for

1:11:35em usuários aqui, atualizar a tela, eu

1:11:38vou ver que agora já existe um usuário

1:11:39cadastrado no nosso projeto, ó. Renato

1:11:42@babr. Com esse ID aqui, ó, já está

1:11:45cadastrado. E se eu for lá nas tabelas

1:11:49watchlist, eu vou ver que já tem dois

1:11:51novos registros.

1:11:54Watched e o, né? Quero assistir e já

1:11:56assistir. O justiceiro Jack Ryan, tá

1:11:58tudo aqui, galera, ó. Então, ele já está

1:12:00populando o nosso banco de dados. Ah,

1:12:03mas Renato, quanto que esse banco de

1:12:04dados aguenta? Boa pergunta. Quantos

1:12:07itens posso colocar no banco de dados do

1:12:11Supas?

1:12:13Não há um limite exato. O limite é de

1:12:15500 me, Jesus. É comum conseguir

1:12:18armazenar de centenas de milhares até

1:12:20mais de 1 milhão de registros leves.

1:12:22Então, claro, vai na boa para ver isso

1:12:23vai dar conta. Então, com isso, a gente

1:12:25colocou banco de dados e autenticação. E

1:12:29agora, como é que a gente publica? Como

1:12:31publicar nosso primeiro aplicativo?

1:12:34Porque olha só, se você pegar esse local

1:12:37host aqui, tem uma piadinha na internet

1:12:38que é assim, o cara pessoas não

1:12:40técnicas, né? Vamos lá, começa a

1:12:43desenvolver aqui. Aí vai lá e passa pro

1:12:44amigo, ó, criei um aplicativo muito

1:12:46massa aqui. Dá um contrtrol C,

1:12:47conttroltrol V, manda pro WhatsApp.

1:12:48Local host. É uma piada interna de

1:12:50programadores. Por quê? Porque isso aqui

1:12:52só vai funcionar no teu computador,

1:12:54entendeu? Tipo, não tá na internet isso

1:12:56aqui. Então não adianta, não está

1:12:59publicado ainda. Tá aqui só num ambiente

1:13:01de teste local para você fuçar.

1:13:03[roncando] O que eu quero fazer é

1:13:05publicar. Como é que eu faço para

1:13:07publicar isso para qualquer pessoa poder

1:13:10usar? Agora, galera, onde publicar? Você

1:13:12vai ter várias opções de publicação,

1:13:14todas elas, acredite ou não, gratuitas.

1:13:17Versel vai ser a mais comum, é a mais

1:13:20popular para aplicações. Cloud Flare

1:13:23Pages, extremamente popular. Netlify,

1:13:27galera, tem dezenas aqui, tá? Quais eu

1:13:31pessoalmente uso? Eu uso Verscel para

1:13:34aplicativos web [roncando] e eu uso

1:13:37Cloud Flare Pages para páginas

1:13:39estáticas. Que que eu quero dizer com

1:13:41isso? Que a gente criou agora é um

1:13:43aplicativo web, porque você faz login,

1:13:46cadastro integrado ao SPA Base. Eu

1:13:48gosto, tudo que eu tenho tá publicado na

1:13:50Versel para isso, tá? No Cloud Flare

1:13:52Pages, eu tenho as minhas páginas

1:13:53estáticas, como por exemplo a página

1:13:56aqui do Instituto. Você viu como

1:13:57carregou rápido, né? Cloud Florpage é

1:13:59galera. Então assim, ó, aqui tudo

1:14:02que é do instituto tá tá criado lá no

1:14:05Cloud Flare Pages, nosso blog, mesma

1:14:07coisa, ó, no Cloud Flor Pages, é que eu

1:14:10prefiro porque com base em 1000

1:14:12perguntas que eu já fiz para ela, ela me

1:14:14apresentou com as melhores opções aqui,

1:14:16ambas de graça. Então você pode

1:14:17destrenchar essa pergunta com a tua IA

1:14:19ou pode ir direto na Versel. Eu vou lá

1:14:22na Versel. Então eu tenho aqui já uma

1:14:24cacetada de projetos na Versel. Como

1:14:26você pode ver, eu vou criar um novo

1:14:28projeto na versão. Adicionar novo

1:14:30projeto. Como é que você sobe um projeto

1:14:32para ser publicado na versão? Por meio

1:14:35do GitHub. Opa. É aqueles conceitos,

1:14:38galera, todo mundo tem que conhecer. Faz

1:14:40parte desse novo mundo. Qualquer pessoa

1:14:41que mexa com isso aqui tem que saber o

1:14:43que é Versel, tem que saber o que é o

1:14:45GitHub. Então, a gente já sabe que a

1:14:46Versel é onde publicamos nossas

1:14:50aplicações.

1:14:52Para publicar, precisamos hospedar nosso

1:14:55código em algum lugar, porque você

1:14:58concorda comigo que o nosso código ele

1:15:01está aqui no nosso computador?

1:15:04Tá aqui nessa pasta, ó, YouTube Cloud

1:15:07Code. Tá aqui, galera, ó. É uma pasta no

1:15:10meu computador com todos os arquivos,

1:15:11entendeu? Então, assim, como é que eu

1:15:13vou mandar isso para Vercel? O ideal é

1:15:15sempre a gente usar o GitHub no meio do

1:15:17caminho, tá? GitHub é uma plataforma

1:15:20exatamente para isso, para hospedar

1:15:22código. Ela faz muito outras coisas, é

1:15:24uma plataforma muito massa, também

1:15:26gratuita. Esse mundo é impressionante,

1:15:27né? E o bacana é que o GitHub, além de

1:15:30te permitir hospedar o teu código, ele

1:15:33te permite fazer versionamento de

1:15:35código. É tipo assim, você vai lá e

1:15:37subiu uma nova alteração no teu código,

1:15:40por exemplo, que ferrou, destruiu, caiu

1:15:42para todo mundo, a parada parou

1:15:45completamente de funcionar. O GitHub ele

1:15:47guarda cada versão que você subiu, então

1:15:50você vai lá e só reverte pra última

1:15:51versão, entendeu? Então é uma maravilha.

1:15:54Isso é muito muito muito muito fácil de

1:15:56fazer. Que que você precisa fazer paraa

1:15:58Versel? Você precisa ter uma conta

1:15:59gratuita na Versel. E pro GitHub você

1:16:02precisa ter uma conta gratuita no

1:16:03GitHub. Então você vai lá em github.com,

1:16:07cria sua conta gratuita. Eu já tenho a

1:16:09minha conta gratuita aqui com infinitos

1:16:11projetos. E aí com a sua conta gratuita

1:16:14criada no GitHub, o que que você vai

1:16:16fazer? Você vai publicar pelo VS Code.

1:16:20Então você vem aqui no VS Code, ó. Tá

1:16:22vendo que tem um, como é que eu vou

1:16:24explicar? uns nodes assim que formam

1:16:25meio que uma bifurcação aqui, ó. É o que

1:16:27ele chama de source control em inglês ou

1:16:30controle do código fonte aqui, porque

1:16:32tudo que você tem é um código fonte.

1:16:34Isso é o código fonte, essa cacetada de

1:16:37arquivo que você tem aqui, ó. E aí você

1:16:39vai lá e manda isso pro GitHub. Simples

1:16:42assim. Como é que você faz isso? Clica

1:16:44aqui em publicar brand

1:16:47e ele vai te perguntar aqui, ó, quer

1:16:49publicar isso num repositório do GitHub

1:16:51privado ou público?

1:16:54Hum. Isso só apareceu aqui porque a

1:16:56minha conta já está conectada no GitHub

1:16:58aqui, tá? Provavelmente aí vai aparecer

1:17:01primeiro uma tela assim, ó, connect aqui

1:17:04no GitHub. Aí você dá um clique,

1:17:05autoriza. Aquele esquema de sempre que

1:17:07você já conhece, né? Dá um clique,

1:17:08autoriza. Aí sim ele vai aparecer. Você

1:17:10quer publicar num repositório público ou

1:17:11privado? Eu sempre publico num privado,

1:17:14não é para ninguém ficar vendo meu

1:17:15código, ele é só meu, só eu vou ter

1:17:18acesso, né? Então vou publicar num

1:17:19repositório privado. Ó, olha como é

1:17:22fácil isso, galera. Tem um clique, dois

1:17:25cliques. O repositório, tarã, foi

1:17:27publicado com êxito no GitHub. Posso até

1:17:30clicar aqui em abrir no GitHub, ó, que

1:17:31ele já vai abrir. E aí tá aqui, ó, YT,

1:17:34né? YouTube Curs, Cloud Code. Todos os

1:17:36arquivos que a gente criou estão aqui

1:17:39já, ó. Tudo, tudo, tudo. Fazendo isso,

1:17:42então, publicado pelo VS Code, criamos

1:17:45um repositório

1:17:47privado, né? Que que eu faço agora? Vou

1:17:50lá na Versel, vou até arrastar a Versel

1:17:52para depois aqui para ficar mais

1:17:53intuitivo, né? Criamos a nossa conta

1:17:55gratuita na Versel

1:17:58e aí importamos o repositório do GitHub

1:18:02que criamos. Olha só aqui na Versel, ó,

1:18:07pode ver que eu nem precisei atualizar a

1:18:09página. Já apareceu aqui, ó, o

1:18:11repositório YouTube curso Cloud Code.

1:18:14Importar.

1:18:16Basicamente aqui ele já entendeu tudo

1:18:18sobre teu projeto, ele já sabe qual que

1:18:20é a tecnologia que a gente usou. Clica

1:18:22em deploy. Deploy é enviar, decolar,

1:18:26publicar. [roncando] Tá aqui fazendo, ó.

1:18:29Tá construindo, tá mandando. Você acaba

1:18:32de publicar um novo projeto no IBIA.

1:18:37Vamos testar, ó. Já posso clicar aqui

1:18:39para ver o que acontece. Erro interno de

1:18:42servidor. Mas que caracoles que que

1:18:46aconteceu aqui? Jesus. Galera,

1:18:5090% das vezes vai dar certo, 10% vai dar

1:18:52errado. Que que a gente faz? Recorre.

1:18:55Recorre IA. Então, a gente vai lá para

1:18:57IA e explica tudo que aconteceu. Ó, uma

1:19:00nova sessão, publiquei o nosso

1:19:03aplicativo no GitHub

1:19:06e depois na Versel.

1:19:10Mas ao abrir essa URL aqui, ó, que a

1:19:13versão nos deu, apareceu internal server

1:19:16error, que é o erro que está escrito

1:19:18aqui na tela, né? Ó.

1:19:20Aí eu vou mandar aquele systematic

1:19:22debuging aqui, né? O que é o debug

1:19:23sistemático para ele me ajudar a

1:19:25resolver esse problema. Causa raiz

1:19:26confirmada. Que que acontece, ó?

1:19:31Isso é bem comum.

1:19:33A gente tem aqui algumas senhas do nosso

1:19:37aplicativo, o nosso token de acesso do

1:19:40TMDB, que é onde a gente puxa as

1:19:42informações dos filmes, e as nossas

1:19:44senhas aqui do Supas, né? Então, a gente

1:19:47tem três senhas aqui no nosso arquivo

1:19:50de ENV, que são as ENV é de variáveis de

1:19:54ambiente, né, por assim dizer. Só que

1:19:58a Iá é inteligente, então via de regra,

1:20:02ela não vai mandar essas senhas para o

1:20:05teu projeto. Tanto é que se você vier

1:20:06aqui, ó, cadê aquele arquivo Env?

1:20:09Percebe que ele não está aqui? Aqui já é

1:20:11uma questão bem técnica, né? Mas por que

1:20:14isso?

1:20:15Porque a IA geralmente ela já cria um

1:20:18arquivo chamado Git ignor. Que que é o

1:20:20gitnor? Ó, é o seguinte, é, cara, não

1:20:23manda nada disso aqui, ó, pro GitHub.

1:20:27Nada disso aqui pro GitHub. Por quê?

1:20:29Porque algumas coisas são desnecessárias

1:20:31e outras coisas são sigilosas. Tá aqui,

1:20:34ó, no caso do nosso Envy, tá vendo?

1:20:36Então, não mande senhas pro GitHub. Por

1:20:39quê? Porque de repente se eu faço um

1:20:41repositório público que qualquer pessoa

1:20:43possa acessar, cara, essa pessoa vai ter

1:20:45acesso a minha senha do TMDB, daqui a

1:20:48pouco a minha senha lá do Stripe do meio

1:20:49de pagamento, eu não quero. Por isso que

1:20:52elas ficam só no meu computador. Só que

1:20:54aí naturalmente a gente acabou não

1:20:56mandando também para Versel que não

1:20:57conseguiu ler. Então o que que ele fez

1:20:59aqui, ó?

1:21:02Ele já incluiu sozinho essas senhas lá

1:21:06na Versel. Eu nem pedi, ele já saiu

1:21:09incluindo. Talvez isso seja porque o meu

1:21:12VS Code já tem aqui a versel conectada.

1:21:15Não sei se no seu isso vai acontecer.

1:21:16Talvez ele te peça para fazer isso

1:21:19manualmente. Talvez ele te peça para

1:21:20conectar na versel. Mas enfim, como eu

1:21:22te falei lá atrás, a não é

1:21:23determinística, né? O que ela faz aqui

1:21:25não é necessariamente o que ela vai

1:21:26fazer aí. vai depender do do teu

1:21:28cenário. Então, a princípio, ele diz que

1:21:31ele já adicionou essas três variáveis,

1:21:33ó, lá na Versel, e já fez um novo

1:21:36deploy, ou seja, ele já mandou o Verscel

1:21:39atualizar. Fala, ó, lê de novo aí que

1:21:41agora você tem três senhas novas. Vamos

1:21:43ver. Dar um atualizar

1:21:46aí, galera.

1:21:49E está no ar, então, o nosso aplicativo.

1:21:52Deixa eu testar ele. Entrar agora, ó.

1:21:54Não tô mais em local host agora, eu tô

1:21:56na internet, galera, logado como Renato

1:21:59@ebia. Inclusive posso fazer esse teste

1:22:01também no meu celular. Tô aqui agora, ó,

1:22:03navegando pelo celular, tá vendo?

1:22:06Entrar, Renato. E tô logado, galera.

1:22:10Quero assistir.

1:22:12Pá, show de bola, já assisti. É isso aí,

1:22:15100% funcional. Então, com isso, a gente

1:22:19importou o repositório do GitHub que

1:22:20criamos e enviamos as chaves ENV, que é

1:22:25para ele ter armazenado lá também. Deixa

1:22:27eu até te mostrar isso na prática que é

1:22:28legal você saber. Olha só, vamos lá na

1:22:31Versel, ó, lá no nosso projeto Curso

1:22:33Cloud Code. Aqui vão ter todas as

1:22:35informações dele, um print de como é que

1:22:37ele tá, ó, a quantidade de requisições,

1:22:39quantidade de acessos, visitantes, vai

1:22:42ter um monte de coisa legal aqui. Agora,

1:22:44se você for em variáveis de ambiente,

1:22:46nesse cantinho esquerdo aqui, ó, você

1:22:48vai ver todas as variáveis, todas as

1:22:51senhas que a gente salvou aqui, ó, o RL

1:22:53do

1:22:55Supas tá aqui, por exemplo, ó. Então,

1:22:57isso que é legal. Você percebe que essas

1:22:58senhas estão no meu computador e estão

1:23:01lá na Versel, na minha conta. Elas não

1:23:03ficam no GitHub, o o usuário não

1:23:05consegue acessar essas senhas. Então,

1:23:08por isso que assim, às vezes o pessoal,

1:23:09ah, mas aplicativo criado com Vibe Code

1:23:11não é seguro. É porque a galera não se

1:23:12liga dessas coisas, entendeu? Basta

1:23:14saber minimamente o que você tá fazendo.

1:23:16Aí já é esperto bastante, mas você

1:23:18sabendo como deixar um aplicativo

1:23:19seguro, o povo fica 100% seguro. Com

1:23:22isso, então, publicamos o nosso primeiro

1:23:25aplicativo, galera. E se eu puder deixar

1:23:27algumas lições aqui da criação do

1:23:31aplicativo,

1:23:33são duas. Primeiro, não tenha medo de

1:23:37perguntar para ya. Sério, eu acho que eu

1:23:40falei isso aqui umas 10 vezes. Então,

1:23:41até o final desse curso você vai ouvir

1:23:42falar mais umas 40 vezes, porque esse é

1:23:45de longe o ponto mais importante. Essa é

1:23:47uma das respostas que eu mais dou para

1:23:49alunos. E assim, às vezes eu fico, putz,

1:23:51parece até chato falar isso. Um aluno

1:23:52vai me faz uma pergunta, mas eu falo:

1:23:55"Cara, você já perguntou isso para

1:23:56toiá?" Porque não é uma má vontade minha

1:23:58em não querer responder, você entende? É

1:24:00porque se você perguntar isso para Iá,

1:24:03pô, ela já vai ter o contexto do teu

1:24:05projeto e ela vai ter capacidade de

1:24:07execução. Então, quer ver um exemplo?

1:24:09Você vai lá e me pergunta assim: "Ah,

1:24:11Renato, mas, pô, não quero só filmes, eu

1:24:13quero filmes e séries também. Como é que

1:24:16eu faço, Renato?" Mas sabe o que o

1:24:18Renato vai fazer? Aí o Renato vai abrir

1:24:20o Cloud ou chat GPT e vai falar: "Tem

1:24:22alguma API que eu consiga integrar para

1:24:27puxar dados não só de filmes, mas séries

1:24:31também?" É IA que vai nos dar essas

1:24:33respostas. Mas o bacana de você fazer

1:24:36essa pergunta pro seu próprio cloud

1:24:38code, sabe o que que é? Que não só ele

1:24:40vai conseguir pesquisar na internet, não

1:24:43só ele vai conseguir te dar essa

1:24:44resposta, mas ele vai conseguir

1:24:46executar. Então ele vai falar: "Olha,

1:24:49Renato, verifiquei aqui, cara. Tem

1:24:51várias APIs que entregam aqui séries

1:24:53também, mas, por exemplo, pô, essa aqui

1:24:57só vai entregar séries do Netflix. Que

1:24:59que você acha? Pode ser?" Tá, pode ser.

1:25:01Então, bora. Quer que eu implemente?

1:25:03Sim, eu quero. Você percebe perguntar

1:25:05pra Iá é de longe a melhor coisa que

1:25:07você pode fazer, porque você vai ter

1:25:09contexto e capacidade de execução.

1:25:11Então, não tenha medo disso. E a segunda

1:25:14grande lição que eu gostaria de trazer

1:25:16para você aqui é o seguinte: seja o

1:25:18cientista maluco. Eu percebo, pô, a

1:25:21gente já formou mais de 25.000 alunos,

1:25:22né? Eu percebo que os alunos que mais

1:25:24evoluem são aqueles que não têm medo de

1:25:26serem cientistas malucos. O que que eu

1:25:28quero dizer com isso, cara? Não tenha

1:25:30medo do que acontece de diferente.

1:25:33Renato, do céu, você criou, ficou com a

1:25:36cara do Netflix, mas eu fui criar o meu,

1:25:37ficou com a cara do Disney Plus. Ferrou,

1:25:40Renato. Não sei o que fazer. Estou

1:25:42perdidaço. Meu Deus do céu. Esse é o

1:25:44espírito. O cientista maluco é aquele

1:25:46que testa as loucuras. Pô, que cara de

1:25:48Netflix, o qu eu quero que fique que

1:25:50fique com cara de, sei lá, do prime. Eu

1:25:54quero que fique com cara de qualquer

1:25:55outra coisa, com cara de site da IBM,

1:25:57aquelas cara chata, corporativa, tanto

1:25:59faz. Faz alguma coisa diferente do que

1:26:01eu tô fazendo, só para você entender que

1:26:03o teu computador não vai explodir, não

1:26:05vai derreter, não vai acontecer nada

1:26:07disso. Você só entende que você pode

1:26:09brincar muito com essas coisas, porque

1:26:11em último caso você volta atrás, em

1:26:13último caso você pede para ele melhorar.

1:26:15Por isso que assim, eu, por exemplo,

1:26:17dificilmente eu vou começar um projeto

1:26:19já fazendo ele bonito desde o começo.

1:26:22Meu foco não é design quando eu crio um

1:26:23aplicativo. Meu foco é, pô, trazer as

1:26:25funcionalidades principais. Porque,

1:26:26galera, é muito fácil você chegar depois

1:26:29e pedir para ir assim: "Ó, agora que

1:26:31estamos com o aplicativo criado, cara,

1:26:32vou te mandar um print, deixa o nosso

1:26:33aplicativo com essa cara, refatore todo

1:26:35o design." Ele faz na boa, fica lá uma

1:26:38hora, 1 hora e meia trabalhando, pronto,

1:26:40Renato, fiz tudo. Então, não tenha medo

1:26:42de refazer, de recriar, de voltar atrás,

1:26:44de fazer de novo. É esse tipo de

1:26:47mentalidade de experimentação que vai te

1:26:49levar muito longe, tá? E com isso,

1:26:51galera, a gente conclui a nossa parte do

1:26:54primeiro aplicativo. Então, turma, agora

1:26:55a gente vai explorar o Cloud Code

1:26:57enquanto ferramenta de produtividade,

1:27:00não mais para desenvolvimento. E os

1:27:03estudos da Antropic, da Open AI, mostram

1:27:06que esses são os usuários que mais

1:27:07crescem. crescem três vezes mais rápido,

1:27:10inclusive do que desenvolvedores.

1:27:12pessoal usando o cloud code não para

1:27:14fazer aplicativos, sites, mas para fazer

1:27:19conteúdo,

1:27:21apresentações,

1:27:23fazer tráfego pago, por exemplo,

1:27:25integrar com Metaads e Google Ads para

1:27:28ir criando campanha, para produzir

1:27:30roteiros de vídeos e vídeos também, para

1:27:34produzir imagens, para responder

1:27:37comentários de YouTube, para fazer

1:27:40monitoramento dos teus concorrentes,

1:27:42análise de área de performance da tua

1:27:46empresa, para fazer o dashboard da tua

1:27:48empresa, até, enfim, você pode fazer

1:27:50basicamente qualquer coisa com Cloud

1:27:53Code. Eu vou te mostrar como na prática.

1:27:55Primeiro, VS Code numa nova pasta.

1:27:57Concorda comigo? Então vou criar uma

1:27:59nova pasta aqui, ó. YouTube, curso,

1:28:02Cloud, Code, Instagram, por exemplo.

1:28:05Pum. E aí eu aperto com o botão direito

1:28:07aqui nessa pasta e ponho abrir com code,

1:28:10que vai abrir o VS Code já direto nessa

1:28:13pasta, ó. E já abriu aqui. Ou então você

1:28:16pode simplesmente lá no VS Code que você

1:28:18já tá, arquivo nova janela, ó, ele vai

1:28:21abrir uma do zero. Aí você escolhe abrir

1:28:24uma pasta.

1:28:26Qual pasta que eu acabei de criar? Vamos

1:28:28já posicionar ela aqui do lado. Então,

1:28:30abrimos aqui o VS Code numa nova pasta.

1:28:32Pasta não tem absolutamente nada. A

1:28:35gente já puxa o nosso cloud code aqui do

1:28:37ladinho. A gente fecha sábado meio.

1:28:39Podemos até já aumentar aqui, ó. Uh,

1:28:41show de bola. Estamos prontinhos. E aí,

1:28:44que que a gente vai fazer, galera? Qual

1:28:46é o primeiro passo para fazer

1:28:48absolutamente qualquer coisa? Perguntar

1:28:52pra né, galera? Então, vamos lá. Quero

1:28:55criar um carrossel para Instagram. Vou

1:29:00te dar uma ideia. Aí você gera o

1:29:02roteiro.

1:29:05Depois que eu aprovar o roteiro, você

1:29:08gera a imagem. Fechou? Fechou. Manda a

1:29:12ideia do carrossel. Quanto mais

1:29:13contexto, melhor. Mas o mínimo que me

1:29:15ajuda. Tem uma ideia central, objetivo,

1:29:18público, número de slides. Então, vamos

1:29:20fazer assim, ó. Faça um carrossel

1:29:23comparativo entre Cloud Code, que é o da

1:29:27Antropic, né? E Codex, que é da Open AI.

1:29:31O codex é a é a ferramenta de IA que faz

1:29:35basicamente o que a gente tá fazendo

1:29:37aqui, só que é a Open AI que produziu,

1:29:38né? Quero que você pesquise na internet

1:29:42para trazer dados bem fiéis e reais

1:29:47sobre preço de cada uma,

1:29:50qual é mais fácil de usar

1:29:53e qual é mais poderosa com base na

1:29:56opinião dos usuários

1:29:59e nos benchmarks. Benchmarks são aqueles

1:30:01testes que o pessoal faz, né? Público é

1:30:03a galera que gosta de criar coisas com

1:30:08IA.

1:30:09Mas não é público

1:30:11programador. Pode ser uns

1:30:15seis a sete slides.

1:30:18Tom bem descontraído e engraçado. Boa.

1:30:22Comparativa para cheio para carrossel.

1:30:23Antes de escrever, eu vou pesquisar

1:30:24dados reais. Ó, ele já tá fazendo

1:30:26pesquisas atualizadas, ó. Pesquisa

1:30:29feita, dados na mão. Aqui vai o roteiro

1:30:30para você aprovar. E aí, galera, isso

1:30:32aqui não é uma aula de roteiro, então

1:30:34não vou ficar aqui encasquetando com o

1:30:37roteiro da parada, né?

1:30:39Vou falar, tá beleza, pode gerar imagem

1:30:41agora. Tá maravilha.

1:30:44Tu é um redator nato. Agora pode gerar

1:30:48as imagens. E aí ele já tá gerando aqui.

1:30:51Mas que que é o mais interessante? Eu

1:30:53sei que às vezes você pode pensar assim:

1:30:55"Nossa, mas para gerar imagem como IA

1:30:59não precisa usar aqueles aquelas

1:31:01ferramentas de geração de imagem com IA

1:31:05ou o Gemini lá, o Nano Banana do Google,

1:31:08por exemplo, ou o sistema do da Open AI,

1:31:11do chat GPT de gerar imagem.

1:31:14E olha só como há sempre muito mais

1:31:17recursos do que a gente imagina. Olha

1:31:20como o Cláudio é esperto. Não sei se

1:31:22pode ser. Não sei se no teu ele vai

1:31:23chegar na mesma conclusão, né? O que que

1:31:25ele fez? Ele gerou um arquivo HTML. Que

1:31:29que é um HTML? HTML, galera, é o arquivo

1:31:32que se gera para fazer páginas pra

1:31:35internet. Mas ué, como assim? Olha só,

1:31:39eu vou copiar o caminho aqui, ó, desse

1:31:41arquivo e vou colar lá no navegador.

1:31:43Olha que interessante,

1:31:46ó. Cloud Code versus Codex. Aí eu desço,

1:31:49ó. Olha

1:31:52só, galera do céu. Olha que

1:31:55interessante. Você percebeu que isso

1:31:58aqui que ele montou é uma página, é um

1:32:01HTML. Eu tô abrindo no navegador. Você

1:32:03concorda comigo? Mas aí o que que ele

1:32:05faz? Ele vem aqui, ó. Ele montou vários

1:32:08slides e aí [roncando] ele próprio já

1:32:10vai executar um sistema em Python.

1:32:13Digase de passagem, por isso que eu te

1:32:15falei para instalar Python lá no

1:32:16comecinho, lembra? Ele tem um código

1:32:18Python lá que ele roda em que ele abre

1:32:20isso aqui. Aí ele bate print. É como se

1:32:22ele fizesse isso aqui, ó. Ele vem aqui e

1:32:26bate print. Olha só. Bati um print aqui,

1:32:28ó. Isso aqui virou um slide. Concorda

1:32:30comigo? Então é isso que ele tá fazendo.

1:32:33Aí ele já foi gerando. Ficaram ótimos.

1:32:35Então ele próprio já leu e ele botou na

1:32:38pasta alt aqui, ó. Slides aqui. Tá aqui,

1:32:41ó. Vamos abrir slide um, slide dois,

1:32:47slide três, slide 4, 5, 6 e 7, galera. É

1:32:54aí, claro que agora entra o quê, pô? Tá

1:32:57um arroba seu perfil aqui. Ele não sabe

1:32:59meu perfil, né? Eu não falei para ele,

1:33:01eu posso vir aqui e trocar. Ah, não.

1:33:03Bota um @renato. Ah, sim. Eu posso vir

1:33:05aqui. Não, não gostei desse contador de

1:33:06slide, nada a ver. Então, enfim, aí eu

1:33:09posso agora fazer os ajustes, cara. Eu

1:33:11quero que seja fundo escuro, eu quero

1:33:14que tenha minha fotinha e meu nome aqui

1:33:16em cima, quero um outro tipo de layout.

1:33:19Agora você faz todos os teus ajustes e

1:33:22pode inclusive deixar prontinho para

1:33:24você depois só vir com outras ideias de

1:33:26conteúdo e gerar com o mesmo layout,

1:33:28entendeu? Porque ele vai se lembrar. É

1:33:30aquilo, né? Qual que é a grande vantagem

1:33:32da IA? É que você tem que treinar a IA

1:33:34da mesma forma que você treina um

1:33:35colaborador na tua empresa, né? Só que a

1:33:37IA nunca se esquece. Então, depois que

1:33:39ela entender o que que você gosta, ela

1:33:40faz sempre igual. E que que eu queria

1:33:43explorar um pouquinho com vocês aqui?

1:33:45Olha só, você percebe que o que

1:33:47diferencia uma ferramenta de

1:33:49produtividade de uma ferramenta de

1:33:52código e de desenvolvimento?

1:33:54É só um motivo pelo qual você tá usando

1:33:56a ferramenta, porque o que ela faz é

1:33:58igual? Olha só, galera, para criar um

1:34:00carrossel de Instagram, que que ela fez?

1:34:02Criou um HTML, que é um arquivo de

1:34:04código aqui, ó. Aí criou um JavaScript.

1:34:08para conseguir fazer a renderização das

1:34:11imagens e transformar o HTML em imagens.

1:34:14É trabalho com pastas e arquivos da

1:34:16mesma forma, entende? Por isso que tem

1:34:18crescido tanto o uso do Cloud Code

1:34:20enquanto ferramenta de produtividade.

1:34:22E se eu chegar aqui e falar assim, ó,

1:34:24agora transforme isso numa apresentação

1:34:28HTML para eu mostrar numa palestra, por

1:34:32exemplo. Olha só. E ele criou aqui um

1:34:34deck. Olha só. Vou copiar aqui e vou

1:34:38abrir no navegador. Galera, virou uma

1:34:40apresentação. Se eu apertar, ó, ele tá

1:34:42me mostrando lá embaixo, ó. F, tela

1:34:44cheia, né? Tela cheia.

1:34:47Ai, galera, se ligaram? Ele transformou

1:34:49isso numa apresentação para eu mostrar

1:34:51num palco, numa palestra, o que for,

1:34:53entende? Ah, mas eu tenho que

1:34:55transformar isso num PDF. Só pede. Ah,

1:34:58eu quero converter para PowerPoint. Só

1:35:00pede. E ele consegue, confia. Então,

1:35:03esse é o passo a passo, galera. O que

1:35:04vocês quiserem fazer, basta perguntar

1:35:06para Iá e aquela metodologia de sempre,

1:35:10quais são os métodos que você me

1:35:12recomenda? Você vê que ele próprio já te

1:35:13recomenda, né? Pô, quais pr e contras de

1:35:15cada método? Ah, legal, gostei disso

1:35:17aqui. Fazer o que você precisa. Não tem

1:35:20muito segredo. É assim que o pessoal tem

1:35:23usado tanto cloud code para fazer tudo

1:35:26isso aqui que eu tô te falando. Só para

1:35:28você ter uma ideia, esse vídeo eu

1:35:30planejei com Cloud Code. Então tá aqui,

1:35:32ó, a tá inteirinha dele. Agora a gente

1:35:34tá aqui, ó, criar um carrocel de

1:35:36Instagram, o que mais dá para fazer. Aí

1:35:38no próximo bloco, a gente vai pras

1:35:40dúvidas comuns de cloud code. E aqui,

1:35:42inclusive, ele me ajuda, pô, a lembrar

1:35:45das principais dos principais

1:35:47ensinamentos que eu preciso passar. Ó,

1:35:48bordão principal, pergunta para ir. Ah,

1:35:50lá pra frente eu vou te falar disso

1:35:51aqui, ó. Você vai fazer mais de uma vez,

1:35:53cria uma skill. Isso aqui tudo é quando

1:35:56a gente entra na parte mais avançada do

1:35:58cloud code.

1:36:00Bem francamente, eu não faço mais nada

1:36:02no meu trabalho, no meu dia a dia, que

1:36:04não seja dentro do cloud code. Só para

1:36:06você ter ideia, ó. Esse aqui é o sistema

1:36:08operacional. Eu chamo de IBIAOS, né, que

1:36:11é o sistema operacional da nossa

1:36:13empresa, com a pasta de cada

1:36:15departamento, aulas, marketing, gestão,

1:36:18mentoria, RH, tráfego e tudo que eu

1:36:20preciso fazer tá dentro de uma pasta.

1:36:22Então, por exemplo, em tráfego aqui, ó,

1:36:24tem todas as skills que eu preciso para

1:36:26ir lá, por exemplo, no Metaads, ele puxa

1:36:29um relatório em tempo real e já me traz.

1:36:32Aqui na parte de marketing, ó, eu tenho

1:36:35assessoria de imprensa, os artigos de

1:36:37blog que ele cria sozinho, conteúdo

1:36:39criativos, depoimentos, as palestras,

1:36:42vídeos, vídeo de venda, webinário,

1:36:44trabalho no meu YouTube, tá tudo aqui,

1:36:46galera. E sabem qual que é a grande

1:36:48vantagem disso? Que eu nunca mais começo

1:36:50um trabalho do zero. Quando foi que eu

1:36:52tive essa ideia de criar um sistema

1:36:55operacional no Cloud Code? Foi um dia

1:36:57que eu abri o ClickUp, que é nosso

1:36:59sistema de gestão, né? E eu fui escrever

1:37:01um criativo, é um anúncio que eu faço

1:37:03para Instagram, né? E eu, cara, me bateu

1:37:05uma bed, assim, me bateu uma depressão.

1:37:07Falei: "Gente do céu, eu já devo ter

1:37:10escrito mais de 1000 criativos.

1:37:13Eu não consigo acreditar que eu vou ter

1:37:14que começar a escrever isso aqui do

1:37:16zero, cara. Porque não tem IA, eu

1:37:19pensando na época, né? Não tem a, pô,

1:37:21que eu consiga pegar tudo que eu já

1:37:22escrevi, esses mais de 1000 criativos

1:37:24que eu já escrevi que me ajudem a

1:37:26escrever esse.

1:37:28Aí me veio a ideia, eu falei: "Cara, e

1:37:31se eu criar uma pasta no Cloud Code, foi

1:37:33assim que nasceu, se eu criar uma pasta,

1:37:35jogar tudo que eu já tenho de material

1:37:36lá, ó, o que eu já tenho de material,

1:37:38por exemplo, ó, toda a minha história

1:37:41enquanto fundador da empresa, qual que é

1:37:43o posicionamento da nossa empresa, quais

1:37:44são os nossos produtos, quais são os

1:37:46preços do dos nossos produtos, quem é o

1:37:47nosso público alvo? qual que é o nosso

1:37:49tom de voz, ou seja, como que eu

1:37:51escrevo, como que eu falo? Tá tudo aqui,

1:37:53galera, ó. Tudo aqui. [roncando] Então,

1:37:55peguei tudo que eu já tenho de

1:37:57conhecimento e joguei aqui. Aí agora eu

1:37:59posso vir aqui e falar assim, ó, quero

1:38:02mostrar em aula como eu produziria,

1:38:06por exemplo,

1:38:08um criativo se eu fosse lançar um novo

1:38:12curso de cloud code, por exemplo. Me

1:38:14ajude a planejar com base no que já

1:38:17temos. Já tem o contexto que eu

1:38:18precisava. Você tem um pipeline de

1:38:20criativo montado, a gente tem skills

1:38:21aqui já para produção de criativos. Tem

1:38:23a própria Masterclass Cloud Code. Ó que

1:38:25espertinha. Ele tá pegando a ementa

1:38:26dessa aula que eu tô gravando agora para

1:38:28já produzir um curso. Ah, sacana. A

1:38:30sacada da aula é meta. Usar Cloud Code

1:38:32para produzir o criativo de lançamento

1:38:33de um curso de cloud code. Cloud Code se

1:38:35vendendo. [risadas]

1:38:37Contexto da aula. Onde isso entra? Então

1:38:38ele já me conhece, ó. Ele já enxergou

1:38:41tudo que a gente tá fazendo. Vamos fazer

1:38:43a partir desse documento aqui.

1:38:45Basicamente, se eu começar a responder

1:38:47isso aqui, ele produz sozinho para mim.

1:38:50Olha esses criativos para Instagram que

1:38:52eu produzi para um curso nosso de, é um

1:38:54curso nosso que a gente tem de como

1:38:55criar a máquina automática de

1:38:57carrosséis, né? Olha esses criativos, ó,

1:38:59animados, tá vendo, ó? Tudo assim, ó.

1:39:01tudo com animação. Isso aqui 100% disso

1:39:05criado com IA pelo Cloud Code. Então,

1:39:07enfim, quero te provocar aqui a usar o

1:39:09Cloud Code não só para criar

1:39:11aplicativos, sites, mas para pro seu

1:39:14trabalho do dia a dia. Eu sei que pode

1:39:17parecer estranho, meio confuso nos

1:39:19primeiros dias, eu te garanto, daqui uma

1:39:22semana você vai pensar o seguinte:

1:39:24"Santo Deus, como é que eu demorei tanto

1:39:26para fazer isso e como é que eu vivia

1:39:28sem isso?" Você vai chegar naquele ponto

1:39:29igual eu, que às vezes acaba teus token,

1:39:31teus créditos aqui do Cloud Cod, sabe o

1:39:33que você faz? Vai brincar com teus

1:39:35filhos, [risadas]

1:39:37vai dormir, tirar, porque, cara, você

1:39:39não vai mais querer trabalhar sem, você

1:39:41vai desempenhar 10 vezes mais. Parada

1:39:44insana. Enfim, galera, com isso a gente

1:39:46encerra também a parte do carrossel.

1:39:49Agora vamos para as dúvidas comuns sobre

1:39:51cloud Code. Começando com ela, quanto

1:39:54custa, afinal de contas, para eu usar

1:39:56Cloud Code? Então, olha só. Vamos lá nos

1:39:59planos e preços do cloud. E aí você vai

1:40:01ver que, basicamente eles têm três

1:40:04modalidades de planos, né, que são os

1:40:06planos gratuitos que te permitem

1:40:09conversar com o cloud na web, no iOS, no

1:40:11Android, você baixa o aplicativo e tal,

1:40:14beleza? Mas não inclui o cloud code, tá?

1:40:18Pode ser que isso mude no futuro, pode

1:40:19ser que quando você tiver assistindo,

1:40:21por algum motivo, eles têm, ah, a gente

1:40:23incluiu aqui um uso de cloud code

1:40:24pequeno, mas hoje quando eu tô gravando

1:40:26esse vídeo, você precisa estar no plano

1:40:29pro, que é 17 por mês aqui, para

1:40:32conseguir usar o cloud code, tá? Depois

1:40:35você tem o plano Max, que vai para $ por

1:40:39mês, que ele te deixa usar cinco vezes

1:40:42mais do que no Pro. E depois tem o max

1:40:45de 200, que te deixa usar 20 vezes mais

1:40:49do que no pro.

1:40:51Então assim, ó, basicamente é o

1:40:52seguinte, você assina aqui, aí você vai

1:40:55ter acesso a uma quantidade X de uso.

1:41:00Essa quantidade X de uso, galera, eu

1:41:02gostaria muito de dizer para vocês, ah,

1:41:04vão ser 50 mensagens por dia, mas, cara,

1:41:08ninguém dá esse número. O próprio

1:41:10Cláudio aqui não dá esse número ou Open

1:41:12não dá esse número. Por quê? Porque eles

1:41:14meio que mudam isso toda hora. Então

1:41:15eles eles não têm números claros sobre