Со помош на оваа статија, ќе можеш да ја изградиш твојата прва веб апликација за временска прогноза.
Иако постојат многу начини како да го постигнеме тоа, се одлучивме за еден од полесните начини, односно со помош на HTML, CSS, и JavaScript. За влечење на сите податоци, ќе користиме нешто што се нарекува API, односно application programming interface.
Всушност, за овој проект ќе бидат потребни две API-ња: Преку првиот API ќе ја повлечеме локацијата на корисникот, додека со вториот ќе повлечеме податоци за временска прогноза, врз основа на локацијата на корисникот.
За градење на оваа веб апликација, потребни се неколку важни алатки односно:
- Text editor по твој избор - Алатка преку која ќе го пишуваме кодот
- Geolocation Web API - Алатка за извлекување на локацијата на корисникот
- OpenWeatherMap - Алатка за извлекување на податоци за временска прогноза
- Fetch API - Алатка за извлекување на ресурси од целиот интернет
Потребно е да се искористи Geolocation Web API, сè со цел автоматски да ја извлечеме локацијата на корисникот. Потоа, ќе направиме “request” до алатка која претставува извор на податоци за временска прогноза, односно OpenWeatherMap. Како што напоменавме погоре, оваа алатка ги извлекува податоци за временска прогноза, во зависност од локацијата на корисникот.
Најпрво потребно е да се регистрираме на OpenWeatherMap за да добиеме беслатен API клуч, преку овој линк. Откако ќе се најавиш, кликни на ”API keys” и креирај сопствен клуч.
Пример за тоа како треба да изгледа клучот: a146799a227e8ab658304c1b30cc8cfa.
Следен чекор во почетната фаза на овој проект е креирање на следните file-ови:
- index.html - за markup
- style.css - за дизајнирање
- app.js - за влечење на податоците од API-њата
Откако ќе го изградиме овој проект, ќе можеме да ги прикажуваме: Моменталната темература, краток опис, и координати според локацијата на корисникот. За да се постигне тоа, најпрво потребно е да се провери во html документот дали се поврзани file-овите style.css и app.js.
Потоа, во <body> тагот, ќе креираме три елементи со три различни “IDs”. Ќе креираме <h1> таг со ID за температура, <h2> таг со ID за краткиот опис и <p> таг со ID за локацијата на корисникот.
Во иднина ќе имаш можност и да додадеш повеќе елементи за обележување и прикажување на подетални податоци од ова API.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="style.css" />
<title>Weather App</title>
</head>
<body>
<h1 id="temperature"></h1>
<h2 id="description"></h2>
<p id="location"></p>
</body>
<script src="app.js"></script>
</html>
Сега, откако веќе го имаме markup-от, следен чекор е повлекување на податоците. Во оваа фаза од проектот, доколку нашиот file е прикажан во browser, би требало истиот се уште да биде празен.
Пред да го започнеме овој процес, потребно е да доделиме варијабли на секој ID во нашиот HTML markup. Тоа може да се оствари преку користење на функцијата document.getElementById. Дополнително, getWeather() функцијата ги поставува сите ID во нашиот HTML markup да бидат еднакви со варијабла.
Следно, ќе продолжиме да ја пишуваме нашата getWeather() функција преку додавање на варијабли за endpoint на нашиот API (односно URL) и apiKey.
let api = "https://api.openweathermap.org/data/2.5/weather";
let apiKey = "YOUR API KEY HERE";
Откако ќе го постигнеме ова, можеме да го повикаме веб API-то за геолокација преку следната фукција:
navigator.geolocation.getCurrentPosition(success, error);
Всушност, оваа функција претставува вграден веб API кој ќе ни помогне да ја извлечеме локацијата на корисникот. Откако корисникот ќе ја отвори веб апликацијата, автоматски самата ќе постави прашање дали има дозвола да ја искористи нивната локација. Доколку кликне “да”, веб апликацијата ќе ја повлече локацијата на корисникот.
Сè со цел ова да функционира, ќе биде потребно да се спроведат следните две фунцкии: success() и error().
Овие функции ќе бидат повикани во зависност од тоа дали navigator.geolocation.getCurrentPosition() функцијата враќа валидни локациски податоци или пак се појавува error.
Откако ќе се повика API-то за геолокација, ќе се обидеме да спроведеме console logging на податоците кои се добиени од success или error.
function success(position) {
console.log(position);
}
function error() {
console.log("error");
}
Сè со цел да се прикажат овие податоци, потребно е повикување на getWeather() функцијата некаде надвор од истата.
getWeather()
Следно, ќе го отвориме index.html file-от во нашиот browser и ќе се навигираме до нашиот console. Податоците за геолокација ќе бидат прикажани на овој начин:
coords: GeolocationCoordinates
accuracy: 8979
altitude: null
altitudeAccuracy: null
heading: null
latitude: 37.348352
longitude: -71.3344
Откако ќе добиеме пристап до овие податоци, следен чекор е да се испратат податоците од локацијата на корисникот до OpenWeatherMap за да можеме да извлечеме податоци за временската прогноза. За таа цел, потребно е да ја прошириме нашата success() функција.
Гледајќи ги достапните податоци, ќе ги поставиме географската ширина и должина да бидат еднакви на варијаблите кои се наречени latitude и longitude.
Во однос на JavaScript, ќе го искористиме fetch API-то кое обезбедува интерфејс за преземање ресурси од интернетот. Ќе го искористиме овој url за да ги добиеме податоците:
let url =
api +
"?lat=" +
latitude +
"&lon=" +
longitude +
"&appid=" +
apiKey +
"&units=imperial";
Обиди се сам/а да ја конструираш оваа низа со географската ширина и должина која што ја најави претходно. Доколку го отвориш линкот во твојот browser, ќе можеш да ја видиш временската прогноза во JSON, врз база на локацијата која е внесена во URL-от. Токму овие податоци ќе ги влечеме со оваа веб апликација.
Понатаму, ќе ги повлечеме податоците преку пренесување на нашиот url во fetch() веб API-то. Во овој сегмент од проектот, ќе искористиме нешто што се нарекува promise за извршувањето на сетот од кодот откако ќе ги повлечеме податоците. Во однос на овој пример, ќе биде потребно да ги превземеме податоците и да ги прикажеме на нашата веб страница.
За тоа да се реализира, ќе поставиме innerHTML на таговите кои ги креиравме претходно (температура, опис, и локација на корисникот).
fetch(url)
.then(response => response.json())
.then(data => {
console.log(data);
let temp = data.main.temp;
temperature.innerHTML = temp + "° F";
location.innerHTML =
data.name + " (" + latitude + "°, " + longitude +
"°)";
description.innerHTML = data.weather[0].main;
});
Податоците кои ги повлековме, сега се прикажани на нашата веб страница!
Дополнително, додадовме и текст доколку локацијата не е пронајдена (односно доколку има error) и текст да им прикаже на корисниците дека се “лоцирани” и дека сè уште се load-ираат сите податоци. Оваа порака потоа се препишува со вистински податоци за временска прогноза.
Еве како треба да изгледа JavaScript кодот.
function getWeather() {
let temperature = document.getElementById("temperature");
let description = document.getElementById("description");
let location = document.getElementById("location");
let api = "https://api.openweathermap.org/data/2.5/weather";
let apiKey = "f146799a557e8ab658304c1b30cc3cfd";
location.innerHTML = "Locating...";
navigator.geolocation.getCurrentPosition(success, error);
function success(position) {
latitude = position.coords.latitude;
longitude = position.coords.longitude;
let url =
api +
"?lat=" +
latitude +
"&lon=" +
longitude +
"&appid=" +
apiKey +
"&units=imperial";
fetch(url)
.then(response => response.json())
.then(data => {
console.log(data);
let temp = data.main.temp;
temperature.innerHTML = temp + "° F";
location.innerHTML =
data.name + " (" + latitude + "°, " + longitude + "°)";
description.innerHTML = data.weather[0].main;
});
}
function error() {
location.innerHTML = "Unable to retrieve your location";
}
}
getWeather();
Сега имаме функционална веб апликација за временска прогноза!
Прикачивме и некои основни центрирања и промени на фонтот во CSS коишто можеш да ги искористиш во твојата веб апликација. Секако, можеш да го модифицираш дизајнот на веб страницата во зависност од твоите преференци.
html {
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto,
sans-serif;
text-align: center;
}
body {
margin: 0 auto;
}
Постојат речиси бесконечен број на можности за тоа како можеш да ја подобриш оваа веб апликација.
Преку додавање на икони во зависност од описот (на пример, облаци, сонце, дожд, снег, итн), како и дополнителни податоци (влажност на воздухот, неделна прогноза, време на изгревање на заоѓање на сонцето, брзината на ветерот, итн) значително можеш да го подобриш изгледот на веб страницата. Сите овие податоци веќе ти се достапни од API-то на OpenWeatherApp.
Исто така, можеш да ја направиш веб апликацијата да биде респонзивна и на мобилен телефон.
Со помош на оваа статија, можеш да ги одговориш следните две клучни прашања:
- Како можам да изградам веб апликација за временска прогноза?
- Дали програмирањето е вистинската кариерна патека за мене?
Но, најважното нешто што треба да го извлечеш од оваа статија е фактот што практичната работа на проекти за домашни и странски компании е клучот до успешна и сигурна програмерска кариера.
Моментално има отворени уписи за третата .NET група на Code Academy. Кликни на копчето подоле и започни со градење на сопствени апликации.
