Desenvolvimento de Sistemas para internet com Framework

Prévia do material em texto

Desenvolvimento 
de Sistemas para 
internet com 
Framework 
Roteiro 
Aula Prática 
Unidade 1 | Seção 3 
 
 
2 
 
 
 
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: 
Descrição 
Quantid. de materiais por 
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: 
 
3 
 
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. 
https://nodejs.org/en/download/
 
4 
 
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 
 
 
 
5 
 
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; 
 
6 
 
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.