Colocando seu Projeto no Ar e Expandindo sua Base com IA – Aula 04
Por Ricardo Costa Val do Rosário auxiliado por ChatGPT 5,0 Plus
Resumo Estruturado
1. Objetivo Central da Aula
• Publicar o projeto desenvolvido na imersão (HTML + CSS + JS) no GitHub Pages.
• Aprender a instalar e usar um projeto externo em Node.js para:
1. Gerar automaticamente novos itens da Base de Conhecimento.
2. Integrar o Google Gemini ao seu projeto.
• Ensinar como editar, adaptar e entender códigos criados por outras pessoas.
• Mostrar como participar da premiação oficial da Imersão Dev com Alura & Google.
Passo a Passo Ensinado na Aula
1. Hospedar o Projeto no GitHub
- Criar conta no GitHub (caso não tenha).
- Criar um novo repositório público.
- Fazer upload dos arquivos:
1. index.html
2. style.css
3. script.js
4. data.json
- Realizar o “commit” das alterações.
2. Habilitar GitHub Pages
1. Abrir Settings > Pages
2. Selecionar:
3. Source: Main
4. Salvar.
5. Aguardar entre 1 e 5 minutos.
6. Resultado final: um link público do seu projeto.
3. Instalar e Executar o Node.js
1. Acessar nodejs.org
2. Baixar o instalador
3. Instalar com next-next-finish
Rodar o Projeto em Node para Expandir a Base de Conhecimento
1. Etapa 1 — Abrir o Projeto no VS Code
- Importar o projeto “Node” disponibilizado pela imersão.
2. Etapa 2 — Criar a API Key no Google AI Studio
1. Acessar Google AI Studio
2. Gerar uma chave (“Create API Key”)
3. Copiar a chave
3. Etapa 3 — Criar o arquivo .env
- Criar no projeto Node um arquivo chamado:
.env
Inserir nele exatamente esta variável (com seu valor real):
GEMINI_API_KEY=SUA_CHAVE_AQUI
4. Etapa 4 — Ajustar Estruturas JSON
- No código Node:
1. Configurar quantos itens deseja gerar.
- Ajustar:
1. nome
2. descrição
3. ano/lançamento
4. URL
5. tags
- Editar o System Prompt para definir a personalidade e a especialidade da IA.
- Editar o User Query para determinar:
1. formatação JSON
2. número exato de itens
3. regras de duplicação (guardrails)
5. Etapa 5 — Instalar dependências
- No terminal/Prompt:
npm install
6. Etapa 6 — Executar o Gerador
npm start
O Node:
1. Lê seu data.json
2. Chama o Gemini
3. Gera novos itens seguindo o seu prompt
4. Atualiza seu base-de-conhecimento.json
7. Substituir sua Base de Conhecimento
1. Copiar o conteúdo atualizado gerado pelo Node
2. Colar dentro do seu data.json do projeto HTML
3. Ajustar eventuais diferenças de nomes de campos no script.js
Participação na Premiação da Imersão
- Para concorrer:
1. Publicar o projeto no GitHub (repositório público)
2. Fazer um post no LinkedIn com:
1. Link do GitHub
2. **Mensagem obrigatória:**
“Estou participando da seleção dos melhores projetos da Imersão Dev com Alura e Google.”
3. Enviar no formulário:
1. Link do GitHub
2. Link do LinkedIn
3. Uma descrição caprichada do projeto
4. Critérios de avaliação:
1. Criatividade
2. Utilidade
3. Eficácia
4. Apresentação visual e clareza
Conceitos Técnicos Explicados
Node.js
- Permite rodar JavaScript fora do navegador
- Usado para servidores, automações, scripts, APIs e integração com IA
- Fundamental para:
1. executar código JS local
2. instalar pacotes (npm)
3. integrar o Gemini à sua aplicação
# Dependências e npm
- Comandos essenciais:
npm install → baixa bibliotecas necessárias
npm start → executa o projeto
System Prompt e User Query
1. System Prompt: define quem é a IA (persona).
2. User Query: define o que ela deve entregar.
3. Ambos devem ser detalhados para evitar erros e manter consistência.
GitHub Pages
1. Serviço gratuito que transforma seu repositório em um site público
2. Não exige cartão, servidor ou publicação manual.
Exemplo de estrutura JSON gerada pelo Node:
{
"nome": "Elixir",
"descricao": "Linguagem funcional baseada em Erlang...",
"data_criacao": 2012,
"url_oficial": "https://elixir-lang.org",
"tags": ["funcional", "back-end"]
}
Exemplo de variável no .env:
GEMINI_API_KEY=AIzaSyC0v...
Exemplo de erro comum corrigido (da aula)
- Troca de parâmetro:
- código original
dado.ano
- corrigido
dado.data_criacao
Mensagem Final da Aula
1. A jornada não acaba: existe a carreira completa na Alura.
2. Continue estudando HTML, CSS, JS, Node, IA e Gemini.
