Ako si vytvoriť aplikáciu na počasie s pomocou JavaScriptu
Aplikácia na počasie vypíše po zadaní názvu mesta základné informácie o počasí, ako teplotu a vlhkosť vzduchu, stav oblohy a rýchlosť vetra. Základné informácie o počasí budeme čerpať z portálu OpenWeatherMap, na ktorý je potrebné sa zaregistrovať. Získame tak API kľúč potrebný pre našu aplikáciu.
Návod:
1) Získajte API kľúč pre počasie
- Existuje mnoho poskytovateľov počasie API, ktorí ponúkajú bezplatné a platené plány. Medzi najpopulárnejšie patrí OpenWeatherMap, Weather Underground a AccuWeather.
- Po získaní API kľúča pre počasie sa uistite, že máte povolenie používať počasie API na svojom webe.
2) Vytvorte základ HTML a CSS
- Vytvorte základné rozhranie pre svoju aplikáciu počasie pomocou HTML a CSS.
- Vytvorte formulár na zadanie mesta, pre ktoré chcete zobraziť počasie.
3) Použite JavaScript na získanie počasie údajov
- Pomocou XMLHttpRequest alebo Fetch API získajte počasie údaje z API počasie pre zadané mesto.
- Analyzujte JSON odpoveď a zobrazte relevantné údaje, ako sú teplota, vlhkosť, rýchlosť vetra a podobne.
- Zobrazte grafiku, ktorá zodpovedá aktuálnemu počasiu.
4) Spracujte chyby a aktualizujte údaje o počasí
- V prípade chyby zobrazte chybovú hlášku a umožnite používateľovi opakovať požiadavku na počasie.
- Aktualizujte údaje o počasí každú hodinu alebo po inú dobu, ktorú zvolíte.
Pre vytovenie aplikácie budeme potrebovať tri súbory (index.html, style.css, script.js), ktoré umiestníme do koreňového adresára. Kódy by mohli vyzerať takto:
index.html:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>OpenWeatherApp</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<h1>Počasie</h1>
<form>
<label for="city">Mesto:</label>
<input type="text" id="city" name="city" required>
<button type="submit">Zobraziť</button>
</form>
<div id="weather"></div>
</div>
<script src="script.js"></script>
</body>
</html>
style.css:
.container {
max-width: 600px;
margin: auto;
padding: 20px;
text-align: center;
}
form {
margin-top: 20px;
}
label {
display: inline-block;
margin-right: 10px;
}
input[type="text"] {
padding: 5px;
}
button[type="submit"] {
padding: 5px 10px;
background-color: #008CBA;
color: #fff;
border: none;
cursor: pointer;
}
#weather {
margin-top: 20px;
}
script.js:
//Tento riadok definuje premennú form, ktorá odkazuje na prvok formulára v HTML dokumente.
const form = document.querySelector('form');
//Tento riadok definuje premennú input, ktorá odkazuje na prvok textového vstupu v HTML dokumente.
const input = document.querySelector('input');
//Tento riadok definuje premennú weatherDiv, ktorá odkazuje na div s id "weather" v HTML dokumente, ktorý bude slúžiť na zobrazenie údajov o počasí.
const weatherDiv = document.querySelector('#weather');
/*Tento blok kódu pridáva poslucháča udalostí pre odoslanie formulára. Pri odoslaní formulára sa zavolá funkcia getWeather s hodnotou textového vstupu ako argument. Taktiež sa použije metóda preventDefault(), aby sa zabránilo predvolenému správaniu odoslanie formulára (teda aby sa stránka znovu nenahrávala).*/
form.addEventListener('submit', e => {
e.preventDefault();
getWeather(input.value);
input.value = '';
});
//Definuje funkciu s názvom getWeather a parameter city. Táto funkcia bude získať údaje o počasí pre zadané mesto. ideo asynchrónnu funkciu - funkcia v ktorej sa môžu vykonávať určité operácie, ktoré môžu trvať nejaký čas (napr. sieťové požiadavky) bez toho, aby sa blokovala ďalšia časť kódu. V tejto funkcii môžeme použiť kľúčové slovo awaint, ktoré zabezpečuje, že funkcia počká na dokončenie asynchrónnych operácií (ako napr. na dokončenie sieťového požiadavku) predtým, ako sa bude vykonávať ďalší kód. To znamená, že async funkcie ponúkajú lepšiu kontrolu nad časom spracovania kódu a umožňujú nám jednoduchšie a čitateľnejšie programovanie asynchrónnych operácií.
async function getWeather(city) {
//Definuje konštantu apiKey, ktorá obsahuje API kľúč pre OpenWeatherMap.
const apiKey = 'sem vložte váš API kľúč';
//Definuje premennú url, ktorá obsahuje URL na získanie údajov o počasí pre zadané mesto z OpenWeatherMap API. Parameter q označuje názov mesta a parameter units označuje jednotky, v ktorých sa majú údaje vrátiť (v tomto prípade Celsius).
const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;
//blok kódu, môžu sa v ňom vyskytovať výnimky
try {
//Spúšťa asynchrónnu funkciu fetch, ktorá získa údaje o počasí zo zadaného URL. Potom čaká na odpoveď pomocou await a uloží odpoveď do premennej response.
const response = await fetch(url);
//Následne používa await na prevod odpovede na JSON formát a uloží ho do premennej weatherData.
const weatherData = await response.json();
//Z premennej weatherData získa údaje o aktuálnej teplote, popise počasia, vlhkosti vzduchu a rýchlosti vetra a uloží ich do zodpovedajúcich premenných.
const temperature = weatherData.main.temp;
const description = weatherData.weather[0].description;
const humidity = weatherData.main.humidity;
const windSpeed = weatherData.wind.speed;
//Aktualizuje obsah div elementu s id weatherDiv zobrazovaním získaných údajov o počasí. Obsah div elementu sa nastaví pomocou HTML kódu, ktorý obsahuje premenné s hodnotami získanými z OpenWeatherMap API.
weatherDiv.innerHTML = `
<p>Teplota: ${temperature}°C</p>
<p>Popis: ${description}</p>
<p>Vlhkosť: ${humidity}%</p>
<p>Rýchlosť vetra: ${windSpeed} km/h</p>
`;
//blok kódu v časti catch ošetrí chybu a zobrazí chybovú správu v div-e weatherDiv.
} catch (error) {
console.log('Error:', error);
weatherDiv.textContent = 'Nepodarilo sa získať údaje o počasí pre zadané mesto.';
}
}