Unidade 1 | Seção 3

Roteiro
Aula Prática

Desenvolvimento
de Sistemas para
internet com
Framework
 ROTEIRO DE AULA PRÁTICA
NOME DA DISCIPLINA: Desenvolvimento de Sistemas para internet com Framework
Unidade 1
Seção 1.3

OBJETIVOS
Definição dos objetivos da aula prática:
• Desenvolver uma interface que contenha um formulário de pesquisa com um campo para
inserir o nome da cidade;
• Criar a lógica para consultar a API que retorna as informações referentes ao clima da cidade
escolhida;
• Criar a lógica para realizar a troca e background;
• Criar a lógica para a troca de ícone de acordo com o a resposta da API referente à visibilidade
meteorológica;
• Testar a aplicação desenvolvida.

INFRAESTRUTURA
Instalações:

Laboratório de Informática

Materiais de consumo:
Quantid. de materiais por
Descrição
procedimento/atividade
Não se aplica

Software:
Sim (X) Não ( )
Em caso afirmativo, qual? Visual Studio Code
Pago ( ) Não Pago ( X )
Tipo de Licença: Gratuita.
Descrição do software:

2
 VSCode: O Visual Studio Code é um editor de código-fonte desenvolvido pela Microsoft para
Windows, Linux e macOS. Ele inclui suporte para depuração, controle de versionamento Git
incorporado, realce de sintaxe, complementação inteligente de código, snippets e refatoração de
código.
Equipamento de Proteção Individual (EPI):
Não se aplica.

PROCEDIMENTOS PRÁTICOS

Procedimento/Atividade Nº 1

Atividade proposta:

Desenvolver uma página front-end em React que contenha um formulário de pesquisa onde o
usuário insira o nome de uma cidade e o sistema devolva informações referentes ao clima daquela
região. Para obter estas informações, o aluno deverá realizar uma chamada a uma API que forneça
tais dados. Altere o background da página de acordo com o clima: um para climas acima de 15°C e
outro para o caso contrário. Crie uma lógica para representar a visibilidade do céu através de um
ícone dependendo do valor retornado na API.
Procedimentos para a realização da atividade:

Para a realização desta aula prática você deverá ter o software VSCODE instalado no seu
computador. Ademais, você precisara ter o NODE também instalado na sua máquina. Para isso
acesse https://nodejs.org/en/download/ e faça o download/instalação no seu computador.
1. Abra o VSCode (lembre-se de fechar e abrir novamente o programa após a instalação do
Node). Abra o Terminal (opção entre os menus no VsCode), selecione a opção “New
Terminal” e escolha a alternativa “Command Prompt”, conforme a imagem abaixo:

Figura 1 - Command Prompt

Fonte: Elaborada pelo autor.

3
 2. Para criar um novo projeto em React, vamos usar a ferramenta npx. Para isso, escreva a
seguinte linha no terminal:

- npx create-react-app clima-app

3. O comando do passo anterior criou uma estrutura de projeto em React em uma pasta
local chamada “clima-app”. Agora abra esta pasta no VsCode selecionando o menu File >
Open Folder > caminho-local-escolhido/ clima-app.
4. Escolha duas imagens para background: uma para climas quentes (acima de 15°C) e
outra para climas frios (abaixo de 15°C). Agora vamos modificar o componente App.js:
• Adicione no início do seu componente os seguintes dados para consultar a API de
informações climáticas:

const api = {
key: "3ee32176fbc4070662893138e0e9dea6",
base: "https://api.openweathermap.org/data/2.5/"
}

• Adicione duas propriedades: uma para receber o valor do campo de pesquisa e

uma para receber o resultado retornado da API. Monte a chamada para a API
utilizando as informações da propriedade “const api” e o valor inserido pelo usuário
no campo de pesquisa.

${api.base}weather?q=${query}&lang=pt_br&units=metric&APPID=${api.key}

• Crie o formulário que o componente ira retornar ao “renderizar” a página.

5. Crie a lógica para realização da chamada à API assim que o usuário clicar do botão de
pesquisa.
6. Crie a lógica para a visualização das informações retornadas pela API
7. Crie a lógica para a troca de background: um para climas quente (acima de 15°C) e outro
para o inverso.
8. Crie a lógica para alterar o ícone de visibilidade de acordo com a seguinte propriedade:

weather.weather[0].icon

9. Crie a estilização da página como preferir utilizando o arquivo App.css

4
 Figura 2 - resultado - calor

Fonte: Elaborada pelo autor.

Figura 3 - resultado - frio

Fonte: Elaborada pelo autor.

Checklist:

1. Aquisição do software VsCode;

2. Criação da estrutura do projeto;
3. Modificação do componente App.js;
4. Criação da lógica para realizar a consulta na API e visualização das informações recebidas;

5
 5. Criação da lógica para mudança do background;
6. Criação da lógica para a mudança do ícone;
7. Criação do arquivo CSS para estilizar a página;
8. Teste da aplicação.

RESULTADOS
Resultados da aula prática:
Um conjunto de pastas conforme descrito, contendo os arquivos App.js e App.css, que possua os
elementos e logica necessários para compor uma aplicação que consulte uma API que retorne as
informações sobre clima/tempo e exiba para o usuário com um layout variável.