https://github.com/fernandozuchi/pratica2503
Repositório template para a aula prática do dia 23/03/2025 que ministrei para os alunos da turma da manhã (Fullstack) na escola Codi Academy
https://github.com/fernandozuchi/pratica2503
Last synced: 6 months ago
JSON representation
Repositório template para a aula prática do dia 23/03/2025 que ministrei para os alunos da turma da manhã (Fullstack) na escola Codi Academy
- Host: GitHub
- URL: https://github.com/fernandozuchi/pratica2503
- Owner: FernandoZuchi
- Created: 2025-03-25T17:07:51.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-25T17:10:12.000Z (over 1 year ago)
- Last Synced: 2025-04-02T07:18:13.446Z (over 1 year ago)
- Size: 3.91 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🏋️ Aula Prática: Buscador de Endereço via CEP (Duração: 1h30)
## ✨ Objetivo da Aula
Desenvolver uma aplicação web simples que consome uma API externa para buscar dados de endereço a partir de um CEP informado pelo usuário. A aula abordará conceitos de HTML, CSS, JavaScript e consumo de APIs.
---
## ⌛ Roteiro da Aula (1h30)
### ✅ 1. Apresentação do Projeto (10 min)
- Mostrar o projeto final funcionando (demonstração rápida):
- Aluno digita o CEP, clica em "Buscar" e os dados aparecem.
- Explicação do que é uma **API**:
- Interface de comunicação entre dois sistemas.
- Exemplo: BrasilAPI fornece dados de CEP de forma gratuita.
---
### 📁 2. Estrutura HTML (15 min)
**Arquivo:** `index.html`
```html
Buscador de Endereço
Buscar Endereço
Buscar
```
**Explicação:**
- `div#app`: estrutura principal.
- `input` e `button`: para interação do usuário.
- `div.result`: onde os dados aparecerão.
- Script JS no final garante que o HTML já esteja carregado.
---
### 🎨 3. Estilo com CSS (20 min)
**Arquivo:** `css/style.css`
```css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
background-color: #232323;
color: #fff;
}
#app {
display: flex;
gap: 40px;
max-width: 900px;
width: 100%;
margin: 20px auto;
}
img {
width: 64px;
}
.container-form {
background-color: #171717;
width: 50%;
border-radius: 20px;
padding: 32px;
display: flex;
flex-direction: column;
gap: 12px;
}
input {
padding: 12px;
border-radius: 8px;
background-color: #232323;
border: none;
outline: none;
color: #fff;
}
button {
padding: 12px;
border-radius: 8px;
background-color: #7fff00;
border: none;
color: #232233;
font-size: 20px;
font-weight: 700;
cursor: pointer;
}
.result {
flex: 1;
background-color: #171717;
padding: 20px;
border-radius: 20px;
}
p {
font-size: 20px;
font-weight: 700;
margin-top: 16px;
}
```
**Explicação:**
- Reset com `*` para padronizar.
- `Flexbox` para layout responsivo.
- Estilo moderno, escuro, com destaque no botão.
- Classes reutilizáveis.
---
### ⚖️ 4. Lógica com JavaScript (30 min)
**Arquivo:** `scripts/main.js`
```js
const input = document.querySelector('input')
const button = document.querySelector('button')
const result = document.querySelector('.result')
button.addEventListener('click', async () => {
const cep = input.value.trim()
if (cep === '') {
alert('Digite um CEP válido.')
return
}
const url = `https://brasilapi.com.br/api/cep/v2/${cep}`
try {
const response = await fetch(url)
if (!response.ok) {
throw new Error('CEP não encontrado')
}
const data = await response.json()
result.innerHTML = `
CEP: ${data.cep}
Rua: ${data.street}
Cidade: ${data.city}
Bairro: ${data.neighborhood}
Estado: ${data.state}
`
} catch (error) {
result.innerHTML = `Erro: ${error.message}
`
}
input.value = ''
input.focus()
})
```
**Explicação:**
- Selecionamos elementos do DOM.
- Criamos um evento de clique.
- Usamos `fetch` + `async/await` para consumir a API.
- Validamos CEP vazio e tratamos erros com `try...catch`.
---
### 📊 5. Testes e Melhorias (10 min)
- Testar CEPs reais (ex: 01001000).
- Testar CEPs errados para verificar o tratamento de erro.
**Sugestões de melhorias:**
- Adicionar loading (carregando...).
- Bloquear caracteres não numéricos no input.
- Criar mensagem "Digite um CEP" antes da busca.
---
## 🎓 Conteúdos Aprendidos
- Estrutura HTML de uma aplicação web.
- Estilização com CSS.
- Manipulação de eventos e DOM com JS.
- Consumo de APIs públicas com `fetch`.
- Tratamento de erros com `try...catch`.
- Experiência simulada de integração de dados externos.
---
## 💼 Valor de Mercado
- Saber consumir APIs é essencial em sistemas modernos.
- Trabalhar com JS assíncrono é prática comum em front-end.
- APIs são a base da comunicação entre front-end e back-end.
---
## 📅 Tarefa para Casa (Extra e Opcional)
- Adicionar barra de carregamento. (HTML + CSS)
- Criar versão responsiva para celular. (HTML + CSS)
- Validar CEP com Regex (ex: `/^\d{8}$/`). (HTML + CSS + JS)
---