UP

Prévia do material em texto

CIDADE 
2023 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
NOME 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
DESENVOLVIMENTO DE SISTEMAS PARA INTERNET COM 
FRAMEWORK 
RELATÓRIO DE AULA PRÁTICA: 
Desenvolvimento de Sistemas Para Internet Com Framework 
CIDADE 
2023 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
RELATÓRIO DE AULA PRÁTICA: 
Desenvolvimento de Sistemas Para Internet Com Framework 
Trabalho de portfólio apresentado como requisito parcial 
para a obtenção de média semestral. 
 
Orientadora: Profa. Elisa Antolli Paleari 
NOME 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
SUMÁRIO 
1 INTRODUÇÃO ..................................................................................................... 3 
2 CÓDIGO COMPLETO.......................................................................................... 4 
2.1 APP.JS ............................................................................................................. 4 
2.2 APP.CSS .......................................................................................................... 6 
2.3 ESTRUTURA DE PASTAS ............................................................................... 8 
3 RESULTADOS ..................................................................................................... 9 
4 CONCLUSÃO .................................................................................................... 11 
 3 
1 INTRODUÇÃO 
O trabalho em questão é um projeto em React que consiste em uma 
aplicação web para consultar uma API de informações climáticas e exibir os 
resultados com um layout adaptável. 
 
 
 
 4 
2 CÓDIGO COMPLETO 
 
2.1 APP.JS 
import React, { useState } from 'react'; 
import './App.css'; 
 
const WeatherComponent = () => { 
 const [query, setQuery] = useState(''); 
 const [weatherData, setWeatherData] = useState(null); 
 
 const api = { 
 key: "3ee32176fbc4070662893138e0e9dea6", 
 base: "https://api.openweathermap.org/data/2.5/" 
 }; 
 
 const fetchWeatherData = async () => { 
 try { 
 const response = await 
fetch(`${api.base}weather?q=${query}&lang=pt_br&units=metric&APPID=${api.key}`
); 
 const data = await response.json(); 
 setWeatherData(data); 
 } catch (error) { 
 console.error('Error fetching weather data:', error); 
 } 
 }; 
 
 const handleSearch = () => { 
 fetchWeatherData(); 
 }; 
 
 const getBackgroundColor = () => { 
 if (weatherData && weatherData.main.temp > 15) { 
 return 'quente'; 
 } else { 
 return 'frio'; 
 } 
 }; 
 
 return ( 
 
 <div className={`container ${getBackgroundColor()}`}> 
 <div className='pesquisa'> <input 
 5 
 type="text" 
 placeholder="Digite a cidade" 
 value={query} 
 onChange={(e) => setQuery(e.target.value)} 
 /> 
 <button onClick={handleSearch}>Pesquisar</button> 
 </div> 
 <div className='resultado'> 
 {weatherData && ( 
 <div className="retorno"> 
 <h2>{weatherData.name}</h2> 
 <p>Temperatura: {weatherData.main.temp}°C</p> 
 <p>Condição: {weatherData.weather[0].description}</p> 
 <img 
 
src={`https://openweathermap.org/img/wn/${weatherData.weather[0].icon}.png`} 
 alt={weatherData.weather[0].description} 
 /> 
 </div> 
 )} 
 </div> 
 </div> 
 ); 
}; 
 
export default WeatherComponent; 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 6 
2.2 APP.CSS 
* { 
 margin: 0px; 
 padding: 0px; 
 border-radius: 0px; 
 border: 0px; 
} 
 
.container{ 
 margin: auto; 
 min-width: 300px; 
 max-width: 80%; 
 height: 100vh; 
 display: flex; 
 flex-direction: column; 
 align-items: center; 
 
 background-repeat: no-repeat; 
 background-position: center; 
 background-size: cover; 
 
 
} 
input { 
 font-size: large; 
 border: 1px solid #333333; 
 text-align: center; 
 padding: 0.5%; 
 border-radius: 15px; 
} 
button{ 
 font-size: large; 
 border: 1px solid #333333; 
 text-align: center; 
 background-color: white; 
 border-radius: 15px; 
 padding: 0.5%; 
} 
button:hover{ 
 background-color: #00f134; 
 color: white; 
} 
.pesquisa{ 
 display: flex; 
 position: relative; 
 top: 10vh; 
} 
 7 
.resultado{ 
 display: flex; 
 flex-direction: column; 
 position: relative; 
 align-items: center; 
 justify-content: center; 
 top: 20vh; 
 height: 76%; 
 width: 100%; 
 border-radius: 15px; 
 backdrop-filter: blur(1.5rem); 
 font-size: x-large; 
} 
.retorno{ 
 text-align: center; 
} 
img{ 
 height: 100%; 
} 
.App { 
 text-align: center; 
 
} 
 
.quente { 
 background-image: url('/public/sol.jpg'); 
 
 
} 
 
.frio { 
 background-image: url('/public/frio.png'); 
 
 
} 
 
 
 
 
 
 
 
 
 
 
 
 8 
2.3 ESTRUTURA DE PASTAS 
 
Os demais arquivos não foram alterados 
 9 
3 RESULTADOS 
• Página inicial: 
 
• Cidade com temperatura alta: 
 
 10 
 
• Cidade com temperatura baixa: 
 
 
 
 Para cada cidade e tempo, a api retorna um icone 
que apresenta a condição climatica atual. 
É possivel acessar e baixar os arquivos do projeto atráves do link: 
https://github.com/nathanfordiani/Relatrio-Desenvolvimento-de-Sistemas-Para-
Internet-Com-Framework 
 
 
 11 
4 CONCLUSÃO 
 A aplicação obteve sucesso em apresentar os dados climáticos 
dos locais desejados. Embora funcional, ainda é possível refinar a apresentação, 
como por exemplo: um design melhor desenvolvido ou adicionar ferramentas para 
evitar erros ao digitar um nome de cidade errado ou nomes inexistentes..