wtorek, 24 kwietnia 2018

JavaScript - Odczyt informacji o pogodzie z openweather

W tym poście chciałbym przedstawić sposób wykonania aplikacji odczytującej pogode z serwisu openWeatherApp za pomocą JavaScrip oraz jQuerry.

Znalezione obrazy dla zapytania javascript
[Źródło: www.javatpoint.com]

Strona HTML:


Kod HTML:

  1. <!Doctype html>
  2. <html>
  3.     <head>
  4.         <title>Get weather from openWeatherApp</title>
  5.         <link rel="stylesheet" type="text/css" href="css/style.css">
  6.         <script src="http://code.jquery.com/jquery-2.1.4.min.js" ></script>
  7.         <script src="js/script.js" ></script>
  8.     </head>
  9.     <body>
  10.         <div>
  11.             <h1>Get weather from openWeatherApp</h1>
  12.         </div>
  13.         <div class="header">
  14.             <a class="button" href="index.html">Main page</a>
  15.             <select id = "select">
  16.                 <option class=".dropBoxStyle" value="all">Get all data</option>
  17.                 <option class=".dropBoxStyle" value="tempPress">Temperature and pressure</option>
  18.                 <option class=".dropBoxStyle" value="cloudsWind">Clouds and wind</option>
  19.                 <option class=".dropBoxStyle" value="sunSetRise">Sunset and sunrise</option>
  20.                 <option class=".dropBoxStyle" value="coords">Coordinates</option>
  21.             </select>
  22.             <input type="text" id="input">
  23.             <button type="button" id="submit">Get Data</button>
  24.            
  25.             <script src="js/btnClick.js" ></script>
  26.            
  27.         </div>
  28.         <div id="content" class="weatherInfo-list">
  29.         </div>
  30.     </body>
  31. </html>

Przygotowana strona jest dosyć prosta. Znajduje się tam nagłówek, przycisk do przechodzenia na główną stronę, rozwijalny wybór odczytywanych informacji oraz przycisk wyszukiwania.

Wygląd strony jest następujący:


Strona z załadowanymi informacjami o pogodzie:


Kolejne miasta ładowane są na pierwszej pozycji (tzn. od lewej). Wcześniejsze odczytane pozycje są przesuwane.

Wszystkie style zostały zdefiniowane w pliku CSS, który można pobrać z dysku google. Link na dole strony.

JavaScript:


Kod JavaScript został rozłożony w dwóch plikach. Jeden odpowiada za załadowanie aplikacji pogodowej. Drugi natomiast obsługuje wciśnięcie klawisza Enter w celu załadowania danych.

Odczyt danych z serwisu pogodowego:

  1. $(document).ready(function(){
  2.     $('#submit').click(function(){
  3.  
  4.         var cityName=$('#input').val();
  5.         var weatherURL="http://api.openweathermap.org/data/2.5/weather?q="+cityName+"&units=metric&appid=<<APPID_KEY>>";
  6.         $.ajax({
  7.             url:weatherURL,
  8.             success:function(result){
  9.                 var html;
  10.                 var type = $('#select').val();
  11.                 var label = $('#select option:selected').text();
  12.  
  13.                 switch(type)
  14.                 {
  15.                     /* -------------------------------------------------------------------------------- */
  16.                     case 'all':
  17.                         html =
  18.                         openUnorderedList() +
  19.                         prepareWeatherIconAndDescription(result.weather) +
  20.                         prepareStringWithCountry(result.sys.country) +
  21.                         prepareStringWithTemp(result.main.temp, result.main.temp_min, result.main.temp_max) +
  22.                         prepareStringWithPress(result.main.pressure, result.main.sea_level) +
  23.                         prepareStringWithWindDegre(result.wind.deg) +
  24.                         prepareStringWithWindSpeed(result.wind.speed) +
  25.                         prepareStringWithSunRiseTime(result.sys.sunrise) +
  26.                         prepareStringWithSunSetTime(result.sys.sunset) +
  27.                         prepareStringWithCoordLong(result.coord.lon) +
  28.                         prepareStringWithCoordLat(result.coord.lat) +
  29.                         closeUnorderedList();
  30.                         break;
  31.                     /* -------------------------------------------------------------------------------- */
  32.                     case 'tempPress':
  33.                         html =
  34.                         openUnorderedList() +
  35.                         prepareStringWithTemp(result.main.temp, result.main.temp_min, result.main.temp_max) +
  36.                         prepareStringWithPress(result.main.pressure, result.main.sea_level) +
  37.                         closeUnorderedList();
  38.                         break;
  39.                     /* -------------------------------------------------------------------------------- */
  40.                     case 'cloudsWind':
  41.                         html =
  42.                         openUnorderedList() +
  43.                         prepareWeatherIconAndDescription(result.weather) +
  44.                         prepareStringWithWindDegre(result.wind.deg) +
  45.                         prepareStringWithWindSpeed(result.wind.speed) +
  46.                         closeUnorderedList();
  47.                       break;
  48.                     /* -------------------------------------------------------------------------------- */
  49.                     case 'sunSetRise':
  50.                         html =
  51.                         openUnorderedList() +
  52.                         prepareStringWithSunRiseTime(result.sys.sunrise) +
  53.                         prepareStringWithSunSetTime(result.sys.sunset) +
  54.                         closeUnorderedList();
  55.                         break;
  56.                     /* -------------------------------------------------------------------------------- */
  57.                     case 'coords':
  58.                         html =
  59.                         openUnorderedList();
  60.                         prepareStringWithCoordLong(result.coord.lon) +
  61.                         prepareStringWithCoordLat(result.coord.lat) +
  62.                         closeUnorderedList();
  63.                         break;
  64.                     /* -------------------------------------------------------------------------------- */
  65.                     default:
  66.                         return;}
  67.  
  68.                 $('#content').prepend(
  69.                     wrapNewDataPage(html, result.sys.country, result.name)
  70.                 );
  71.             }
  72.         })
  73.     })
  74. });
  75. // ----------------------------------------------------------------------------- //
  76. function convertFromUnixTime(unixTime) {
  77.     var date = new Date(unixTime * 1000);
  78.     var hours = date.getHours();
  79.     var minutes = "0" + date.getMinutes();
  80.     var seconds = "0" + date.getSeconds();
  81.     var formattedTime = hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);
  82.   return formattedTime;
  83. }
  84. // ----------------------------------------------------------------------------- //
  85. function openUnorderedList(){
  86.     return '    <ul>';
  87. }
  88. // ----------------------------------------------------------------------------- //
  89. function closeUnorderedList(){
  90.     return '    </ul>';
  91. }
  92. // ----------------------------------------------------------------------------- //
  93. function prepareStringWithTemp(temp, tempMin, tempMax){
  94.     return '        <li><b>Temperature:</b> ' + temp + ' <em>(min: ' + tempMin + ', max: ' + tempMax + ')</em></li>';
  95. }
  96. // ----------------------------------------------------------------------------- //
  97. function prepareStringWithPress(pressure, seaLevel){
  98.     return '        <li><b>Presure:</b> ' + pressure + ' hPa <em>(sea: ' + seaLevel+ ')</em></li>';
  99. }
  100. // ----------------------------------------------------------------------------- //
  101. function prepareStringWithWindDegre(windDeg){
  102.     return '        <li><b>Wind degrees:</b> ' + windDeg + '</li>';
  103. }
  104. // ----------------------------------------------------------------------------- //
  105. function prepareStringWithWindSpeed(windSpeed){
  106.     return '        <li><b>Speed:</b> ' + windSpeed + '</li>';
  107. }
  108. // ----------------------------------------------------------------------------- //
  109. function prepareStringWithCoordLong(coordLong){
  110.     return '        <li><b>Longitude:</b> ' + coordLong + '</li>';
  111. }
  112. // ----------------------------------------------------------------------------- //
  113. function prepareStringWithCoordLat(coordLat){
  114.     return '        <li><b>Latitude:</b> ' + coordLat + '</li>';
  115. }
  116. // ----------------------------------------------------------------------------- //
  117. function prepareStringWithSunRiseTime(unixTime){
  118.     var sunRiseTime = convertFromUnixTime(unixTime);
  119.     return '        <li><b>Sunrise:</b> ' + sunRiseTime + '</li>';
  120. }
  121. // ----------------------------------------------------------------------------- //
  122. function prepareStringWithSunSetTime(unixTime){
  123.         var sunRiseTime = convertFromUnixTime(unixTime);
  124.         return '        <li><b>Sunset:</b> ' + sunRiseTime + '</li>';
  125. }
  126. // ----------------------------------------------------------------------------- //
  127. function prepareWeatherIconAndDescription(weather){
  128.     var html;
  129.  
  130.         $.each(weather, function(key, weather) {
  131.             html =
  132.                 '<li><img class="weatherInfo-icon" src="http://openweathermap.org/img/w/' + weather.icon + '.png" /><b>' + weather.main +'</b></li>' +
  133.                 '<li><b>Description:</b> ' + weather.description + '</li>';
  134.         });
  135.  
  136.         return html;
  137. }
  138. // ----------------------------------------------------------------------------- //
  139. function prepareStringWithCountry(countryId){
  140.         switch(countryId)
  141.         {
  142.             case 'GB':
  143.                 return '        <li><b>Country:</b> Great Britain</li>';
  144.             case 'PL':
  145.                 return '        <li><b>Country:</b> Poland</li>';
  146.             case 'US':
  147.                 return '        <li><b>Country:</b> United States</li>';
  148.             default:
  149.                 return '        <li><b>Country:</b> ' + countryId + '</li>';
  150.         }
  151. }
  152. // ----------------------------------------------------------------------------- //
  153. function wrapNewDataPage(html, country, resultName){
  154.     return  '<article class="weatherInfo">' +
  155.                     '   <h2>' + country + " - " + resultName + '</h2>' +
  156.                     '   <div class="weatherInfo-main">' +
  157.                     html +
  158.                     '   </div>' +
  159.                     '</article>';
  160. }

Do odczytywania danych obsługuje z serwera wykorzystuje metodę ajax. Pozwala ona na odczytanie danych z serwera. Gdy ta operacja się powiedzie, funkcja przygotowuje dane do wyświetlenia bazując na informacjach przekazanych z głównej strony. Każda z informacji jest obrabiana w osobnej funkcji.

Obsługa klawisza enter:

  1. var input = document.getElementById("input");
  2. input.addEventListener("keyup", function(event)
  3. {
  4.     event.preventDefault();
  5.     if (event.keyCode === 13) {
  6.         document.getElementById("submit").click();
  7.     }
  8. });

Na samym początku pobierany jest kod wciśniętego klawisza. Następnie sprawdzam czy został wciśnięty klawisz enter. Jeśli tak to następuje wyzwolenie wciśnięcia klawisza pobrania danych.

Wszystkie pliki można pobrać z dysku Google pod tym linkiem.

Autor: o
Etykiety: ,