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.