Latest / Entre Chaves / Snippet #19 Google Stitch e MCP: como fazer a prototipação direto no editor

Transcript

Snippet #19 Google Stitch e MCP: como fazer a prototipação direto no editor · Entre Chaves

• 0:02
  Olá pessoal, tudo bem? Meu nome é Mateus, eu sou tech
• 0:05
  lid aqui no DT digital e hoje vou mostrar para vocês uma
• 0:07
  ferramenta muito legal, que é o Street, né?
• 0:11
  Do Google. Ele é uma ferramenta que permite
• 0:13
  aqui que a gente transforme em linguagem natural ou até
• 0:16
  desenhos, imagens, alguma, algumas coisas em.
• 0:19
  Protótipos de aplicações web, aplicações mobile de uma forma
• 0:24
  muito rápida e muito legal pra gente que é desenvolvedor.
• 0:28
  Eu, por exemplo, sou mais back end.
• 0:30
  Eu tenho um pouco de dificuldade para gerar telas bonitinhas e
• 0:33
  tal e seguir um design system. E o Street tem me ajudado
• 0:35
  bastante porque apenas descrevendo ali qual que é o
• 0:38
  sistema que eu quero criar. O Street consegue gerar várias
• 0:41
  telas, várias navegações diferentes e diversas outras
• 0:45
  coisas, certo? Então vamos colocar a mão na
• 0:47
  massa que eu vou mostrar para vocês como que funciona essa
• 0:49
  ferramenta aqui. Bom, beleza, aqui na tela
• 0:52
  inicial aqui do Street nós temos algumas funcionalidades, né?
• 0:56
  Eu posso, por exemplo, adicionar é imagens, URL de websites.
• 1:02
  Eu posso alternar aqui entre app e web app, né?
• 1:07
  Então é uma aplicação web no site, algo do chip ou então um
• 1:09
  aplicativo mesmo de telefone. Eu vou criar uma aplicação web
• 1:12
  mesmo, que acho que é mais fácil pra gente poder visualizar aqui.
• 1:14
  E depois eu vou criar essas telas num projetinho next GS
• 1:17
  mesmo que já estou com ele pronto aqui só vou puxar depois
• 1:20
  dos protótipos e aqui a gente também pode adicionar um
• 1:24
  designer e ponto MD. É basicamente uma documentação
• 1:26
  com regras e passo a passos que o que o Street pode utilizar pra
• 1:30
  poder gerar de fato as telas da da melhor forma possível.
• 1:33
  Aqui eu posso trocar o modelo. Posso utilizar Oo 3 flash, que é
• 1:36
  o de m Nine, ou o 3.1 pro, que vai preferir a qualidade AAA
• 1:40
  velocidade. Eu tenho a opção de redesign
• 1:42
  também com o nano banana pro, então eu posso jogar aqui uma
• 1:45
  tela no site já existente, pedir para fazer um rembrange, ele vai
• 1:48
  rodar também. Eu tenho também a opção de IDAT,
• 1:50
  onde nós vamos passar para ele problemas e ele vai devolver
• 1:53
  soluções para gente, tá, mas hoje a gente pode utilizar o
• 1:55
  flash mesmo, então eu vou colocar aqui o um prompt que eu
• 2:00
  pedi para IA criar aqui para mim, então eu vou rodar aqui.
• 2:03
  E deixar ele trabalhar, ele demora um pouquinho coisas de
• 2:07
  minutos pra poder gerar, mas ele gera várias telas, então é, é, é
• 2:11
  aceitável, ele já muda pra essa tela aqui, que é um canva, eu
• 2:14
  consigo navegar aqui dentro, enfim, aqui do lado eu consigo
• 2:17
  ver a linha de raciocínio dele, né?
• 2:19
  Então tudo que ele tá pensando tá aqui desse lado você consegue
• 2:22
  acompanhar e ele já criou o design system, que é o que vai
• 2:25
  garantir a consistência entre as telas, né?
• 2:27
  Ele vai gerar uma tela por tela, então isso aqui garante.
• 2:31
  Que todas as telas tenham a mesma base ali, né?
• 2:34
  O mesmo botão, mesma fonte, as mesmas cores.
• 2:37
  Enfim, vamos aguardar aqui a criação das telas.
• 2:41
  Boa aqui, ele terminou de de de criar as telas, né?
• 2:45
  Então nós temos primeiro uma tela de home aqui na logo no
• 2:49
  início. A nossa lending page tem também
• 2:52
  é páginas de dashboard. Criou também uma página de login
• 2:56
  e registra outras telas específicas, como telas de
• 2:59
  transações. Enfim, criou várias teclas aqui,
• 3:02
  tá? Aqui tem uma funcionalidade bem
• 3:03
  legal pessoal, que é o seguinte, beleza, ele criou Oo protótipo,
• 3:06
  mas alguma coisa que eu não gostei, por exemplo, pode fazer
• 3:09
  edições, certo? Então se você clica na tela, ele
• 3:12
  vai trazer aqui para o chat como contexto essa tela aqui eu posso
• 3:15
  pedir para ele fazer alterações, por exemplo.
• 3:16
  E aí eu quero que você adicione um novo plano chamado.
• 3:24
  Max, de 49 e 90, e também um switch para planos anuais com
• 3:33
  10% em desconto. Ele vai pensar, ele vai
• 3:40
  desenvolver. Só esperar ele terminar aqui.
• 3:44
  Ele já puxou as telas para o lado e é uma outra coisa, ele
• 3:46
  não deleta a tela anterior, ele vai criar outra do lado.
• 3:52
  Basicamente igual, só que quase as mudanças que eu pedi, né?
• 3:55
  Justamente para que beleza eu fiz, pedi mudanças e tal, mas eu
• 3:58
  não gostei, eu quero voltar como estava antes, eu só deleto
• 4:00
  aquela nova que ele criou ali e volto para onde eu estava, só
• 4:03
  espero ele renderizar tudo certinho, beleza?
• 4:06
  Então ele já fez tudo que eu pedi.
• 4:08
  Agora ele tem 3 modelos, 3 planos, desculpa e o suíte para
• 4:12
  é anual ou mensal com 10% off. Outra funcionalidade bem legal é
• 4:17
  que eu posso criar um protótipo. Navegável.
• 4:21
  E aí, como que eu faço isso? Eu vou selecionar algumas telas,
• 4:24
  então eu vou tirar primeiro essa tela de login daqui.
• 4:27
  Vou arrastar essas aqui para cá, porque eu vou querer usar só
• 4:30
  essas as de login. Eu não vou querer colocar numa
• 4:32
  protótipo navegável, mas eu vou selecionar aqui 4 telinhas e eu
• 4:36
  vou clicar aqui para conectar e fazer 11 prévia, certo?
• 4:40
  Então eu posso clicar aqui e esperar uns uns segundinhos para
• 4:44
  que ele gere a nossa visualização de estar preparando
• 4:47
  aqui. Hã, as telas que que eu
• 4:49
  adicionei, né? Então, por exemplo, eu consigo
• 4:51
  navegar aqui nessa primeira tela, eu consigo é trocar de ir
• 4:57
  para o dash, borjou, ir para tela de transactions, consigo
• 5:00
  ver tudo certinho, posso ir para tela de budgets, toda a
• 5:03
  navegação, como seria, né? No, no, no projeto, quando ele
• 5:07
  tivesse criado de fato, né, o código, tudo certinho, ele já
• 5:11
  ele faz aqui pra poder visualizar antes de chegar numa
• 5:15
  parte que eu vou desenvolver de fato, então.
• 5:17
  Isso facilita bastante, porque aí eu consigo visualizar as
• 5:21
  nuances ali do meu aplicativo, da minha web app.
• 5:23
  Então vamos voltar aqui. Agora a gente vai mostrar outra
• 5:27
  ferramenta pra vocês e agora eu vou lá pro visual Studio code
• 5:29
  pra gente poder seguir com o nosso o nosso projeto aqui.
• 5:33
  Bom, pessoal, já estou de volta aqui.
• 5:35
  Na interface do verscode, tá com o Copilot.
• 5:39
  Eu já criei aqui um projeto next básico, não tem nada demais aqui
• 5:43
  tem só as páginas iniciais, projeto cru, acabei de criar e
• 5:48
  agora a gente vai utilizar a ferramenta do MCP server do
• 5:52
  Street, né? Que a gente pode é ver como
• 5:54
  configura por essa documentação aqui, tá?
• 5:57
  Street ponto bifegoogle.com barra docs barra ICP barra
• 6:01
  setup, ele vai explicar. Aqui como que a gente pode fazer
• 6:04
  essa configuração? Ele é OMCP via TP, tá?
• 6:08
  Então a gente precisa de uma API k pra que ele funcione.
• 6:11
  Aí você pode conseguir essa API k por aqui, tanto aqui no site
• 6:15
  da documentação clicando aqui em settings, quanto aqui pelo
• 6:20
  próprio Street, se se eu não me engano é por aqui e temos
• 6:24
  settings aqui e aqui a gente consegue ver, você pode gerar a
• 6:27
  sua pq por aqui, aqui embaixo você consegue fazer um setup.
• 6:32
  Então você pode trocar aqui a sua, colocar a sua ideia e tal,
• 6:35
  mas é que está o Jason, basta você colar no seu arquivo de
• 6:38
  configuração de j sons da sua ideia, certo?
• 6:40
  Então vamos voltar pro verscude. Então aqui eu vou, eu tenho um
• 6:44
  prompt já preparado para utilizar aqui no Copilot, então
• 6:47
  eu vou colar esse prompt. Ele basicamente está pedindo
• 6:50
  para que eu pegue um link do eu estou passando o link do projeto
• 6:54
  aqui para ele, estou explicando para ele o que que tem que fazer
• 6:56
  e tal, etapa um e tal, então vamos deixar.
• 7:00
  Oo compadre de trabalhar aqui. Bom, basicamente ele terminou a
• 7:03
  primeira etapa, que era a etapa de descoberta.
• 7:05
  Ele buscou todas as telas, todas as cores, tipografia e tal,
• 7:10
  todas as estruturas que ele precisa, mapeou as rotas e agora
• 7:13
  ele está pedindo permissão pra começar fazer a etapa 2.
• 7:16
  Então eu vou permitir. Bom pessoal de volta aqui.
• 7:18
  Finalizamos o desenvolvimento das telas, né?
• 7:21
  Então ele licitou aqui pra gente.
• 7:23
  Tudo que foi implementado vou rodar aqui só pra mostrar pra
• 7:25
  vocês como é que ficou o desenvolvimento disso daqui e já
• 7:27
  volto. Bom, já dei, já instalei as
• 7:29
  dependências, rodei o npm roomdeve aqui e nós já podemos
• 7:32
  ver a tela criada seguindo basicamente ali em grande parte,
• 7:36
  né? O protótipo.
• 7:37
  Bom pessoal, já rodei aqui um install, já rodei o run Dev, ela
• 7:42
  já está renderizada aqui na nossa tela vocês podem ver
• 7:45
  desenvolveu ali todo o nosso, nosso protótipo, grande parte
• 7:49
  dele vou adicionar aqui pra gente poder navegar a nossa
• 7:52
  dashboard pra gente poder ver. Tudo que ele fez tá tudo aqui,
• 7:57
  tá? Então todas as telas navegáveis,
• 7:58
  a gente consegue alguns botões, a gente não desenvolveu ainda
• 8:01
  que não tinha protótipo, né? Então de fato ele não fez ainda.
• 8:04
  Bom pessoal, eu espero que vocês tenham gostado, que que tenha
• 8:07
  sido esclarecedor para mostrar essa ferramenta nova que é muito
• 8:10
  legal, então recomendo que vocês testem, explorem bastante, me
• 8:14
  digam o que que vocês acham, o que que vocês acharam mais legal
• 8:18
  na hora de utilizar mesmo as dúvidas e tal, e é isso, espero
• 8:21
  que vocês tenham gostado, valeu?