📊 SLIDES DO MODULO 1.3

🔥 Executando no Firebase Studio

Screenshots reais do processo de criacao de um site no Firebase Studio - do prompt inicial ao codigo gerado.

5
Screenshots
~10
Minutos
Pratico
Tipo
1

Acessando o Firebase Studio

Slide 1

Acesse studio.firebase.google.com. Na pagina inicial voce encontra opcoes como "Prototype an app with AI" e "Start coding an app". Voce pode criar um novo workspace ou importar um repositorio existente.

2

Configurando o App e Inserindo o Prompt

Slide 2

Defina o nome do app (ex: "MarkeTop") e suas funcionalidades. A IA interpreta seu prompt com detalhes sobre Core Features e Style Guidelines. No painel direito, voce ve o blueprint sendo construido em tempo real.

3

Site Gerado - Preview Visual

Slide 3

O site e gerado instantaneamente! Neste exemplo, "MarkeTop - Your SEO Growth Engine" com hero section, navegacao funcional e CTA. No painel direito voce pode continuar refinando com novos prompts ou ajustar configuracoes.

4

Ambiente de Desenvolvimento (IDE)

Slide 4

O Firebase Studio oferece um ambiente completo de desenvolvimento. No painel esquerdo voce ve a estrutura de arquivos gerada automaticamente. Use os atalhos de teclado para comandos rapidos como "Go to File" ou "Open Settings".

5

Projeto no GitHub - Estrutura Final

Slide 5

O projeto pode ser exportado para o GitHub. Voce recebe uma estrutura completa com Next.js: package.json, tailwind.config.ts, components, e mais. O README explica como comecar: "This is a Next.js starter in Firebase Studio. To get started, take a look at src/app/page.tsx".

Slides 1.2 Voltar ao Modulo Trilha 1