Project: meteo app

In deze toepassing ontwerp je een app die aan de hand van de GPS-coördinaten (latitude en longitude) de weersvoorspelling voor de volgende dagen toont. De weersvoorspelling ga je opvragen via de OpenWeatherMap API. De exacte plaatsnaam haal je op via http://nominatim.openstreetmap.org/

  1. Maak in de map LesCordova een nieuw project aan:
    $ cordova create meteo be.uwnaam.meteo Meteo
$ cd meteo
$ cordova platform add browser android
  2. Installeer de plug-in waarmee je de GPS-coördinaten kan opvragen.
    $ cordova plugin add cordova-plugin-geolocation
  3. Maak een gratis account aan op https://home.openweathermap.org/users/sign_up
    Hiermee kan je tot 1.000.000 aanvragen per maand maken. Zie info.

Inhoud van de website

  1. Wis de volledige inhoud van de www-folder en vervang deze door de bestanden uit dit zip-bestand.
  2. Bestudeer de bestanden.
index.html

            
    
                
  1. Bovenaan de pagina staat een fixed navbar.
    2. 
                
  2. De fixed action button a#renew
                    dient om de pagina te vernieuwen.
                
    3. 
                
  3. In h4#city komt straks de plaatsnaam te staan.
    4. 
                
  4. Onder deze titel verschijnt nog een preloader div.progress.
                    Deze is enkel zichtbaar tijdens het laden of vernieuwen van de data.
                
    5. 
                
  5. Zodra de data volledig is ingelezen, wordt div.progress onzichtbaar en div#weather
                    zichtbaar.
                
    6. 
            

            
js/app.js

            
Deze pagina is volledig klaar. Hier hoef je niets meer aan te wijzigen.

            

            
js/weather.js

            
In de initialisatieface wordt de preloader h4#city getoond. De (oude) inhoud van
                div#weather  wordt gewist en onzichtbaar gezet. Waarom de inhoud wissen? De link
                a#renew roept eveneens deze functie op. De oude inhoud moet je dus eerst verwijderen
                voor je nieuwe data kan toevoegen.


            

            
    
                
  1.  Vervang op lijn 2 MySecretKey door de API-key die bij je account hoort.
    2. 
                
  2. Start de applicatie in de browser.
    
                    
    $ phonegap serve
    
                
    3. 
                
  3. Open de app in Chrome (http://localhost:3000). Enkel de titel en
                    de preloader zijn voorlopig zichtbaar.
    
                    Preloader
    
                
    4. 
            

            
GPS-coördinaten uitlezen of simuleren.

            

            
    
                
  1. Pas de code op js/weather.js aan:
    
                    
    
                
    2. 
            

            
In de console verschijnt het volledig position-object (lijn 11 in de code) en daarna de
                latitude en longitude (lijn 14).

            
Je kan ook andere locaties simuleren vanuit de DevTools. Klik op de drie puntjes bovenaan rechts. Kies
                uit het menu More tools -> Sensors. In onderstaande
                schermafbeelding zie je de locatie voor Londen.
Coördinaten Londen

            
Nu de juiste locatie gekend is, kunnen we de variabelen lat en lon
                doorgeven aan de functies _getWeather(lat, lon) en aan _getCity(lat, lon). De
                eerste functie haalt de weersvoorspelling op, de tweede functie de stad of gemeente.

            
Weersvoorspelling ophalen.

            

            
De weersvoorspelling voor Londen kunnen we via onderstaande URL opvragen:

                
                    https://api.openweathermap.org/data/2.5/onecall?lat=51.507351&lon=-0.127758&lang=nl&units=metric&exclude=minutely%2Chourly&appid=[key]
                
                (Vervang in de URL [key] door je persoonlijke sleutel.)

                TIP: voeg de Chrome-extensie JSON
                    Formatter toe zodat je het resultaat mooi, gestructureerd kan bekijken. 

            
De velden die ons interesseren zijn:

            
    
                
  1. timezone: de tijdzone (Europe/London)
    2. 
                
  2. daily: een array van acht objecten met onderandere het icoon (weather[0].icon),
                     het icoon-id (weather[0].id), de Nederlandse omschrijving (weather[0].description),
                    de dag (dt) en de minimum/maximum temperatuur (temp.min) en temp.max).
                
    3. 
                
  3. Vertaald naar onze toepassing geeft dit volgende code:
    
                    
    
                
    4. 
            

            
De dag en het icoon tonen, vragen misschien wat extra uitleg.

            
    
                
  1. Lijn 28
    
                    Van de API krijgen we enkel een Unix-timestamp terug. Dit is het
                    aantal seconden verstreken sinds 1 januari 1970.
    
                    JavaScript werkt niet met seconden, maar met milliseconden. Vandaar dat we dit getal eerst met 1000
                    vermenigvuldigen om zo de juste datum op te vragen (new Date(this.time * 1000))
    
                    We zijn niet echt geïnteresserd in de volledige datum, maar enkel in de weekdag (new
                        Date(...).getDay()). Dit geeft een cijfer tussen 0 (zondag) en 6 (zaterdag).
                
    2. 
                
  2. Lijnen 29 en 40
    
                    De array op lijn 29 gebruik je op lijn 40 om het dagnummer te vertalen in een dagnaam.
                
    3. 
                
  3. Lijn 35
    
                    Volgens de documentatie zijn er 18 icoontjes beschikbaar. 9 voor dagweergave (xxd) en 9 voor de nachtweergaven (xxn).
    
                    Er zijn echter nog enkel “verborgen” varianten beschikbaar. Neem bijvoorbeeld het icoon voor “regen”:
                    
      
                        
    1. http://openweathermap.org/img/wn/10d@2x.png (default)
      2. 
                        
    2. http://openweathermap.org/img/wn/10d.png (klein)
      3. 
                        
    3. http://openweathermap.org/img/wn/10d@4x.png (extra groot)
      4. 
                        
    4. http://openweathermap.org/img/w/10d.png (3D)
      5. 
                    
    
                    Wij kiezen in dit voorbeeld voor de 3D variant.
                
    4. 
            

            
Ziehier de weersvoorspelling voor mijn huidige locatie.

                Lokaal



            
Alternatieve icoontjes

            

            
Ben je niet echt tevreden met de icoontjes van OpenWeatherMap, dan kan je eventueel opteren om één van de talloze  freeware weather-icons te gebruiken.
                Vaak moet je dan wel zelf een translatietabel maken om de code van OpenWeatherMap om te vormen naar de juiste afbeelding.

                Bijvoorbeeld 10d vervangen door rain.png.

            
Gebruik je de Weather Icons van Erik Flowers dan hoef je zelf geen translatietabel te schrijven. Deze is reeds ingebouwd
                (https://erikflowers.github.io/weather-icons/api-list.html).

            
In plaats van weather[0].icon gebruik je nu weather[0].ico.

                Je hoeft het CSS-bestand ook niet te downloaden. Deze is reeds via een CDN gelinkt op lijn 8 van de indexpagina.
            

            
Vervan de image op lijn 35 door het bijbehorend Weather icon:

            
    
                
  1. Vervang: <img src="http://openweathermap.org/img/w/${icon}.png" alt="">
    2. 
                
  2. Door: <h4 class="wi wi-owm-${iconId}"></h4>
    3. 
            

            
Lokaal


            
Stad of gemeente ophalen.

            

            
Open Street Maps heeft een APi waarmee je vanuit de latitude en longitude het juiste
                adres kan opvragen. Dit noemt men reverse geocode. Deze API mag je vrij gebruiken
                zonder key.

            
De informatie die je terugkrijgt, is niet echt uniform. Kijk eens naar volgende locaties:

            
    
                
  1.  Thomas More Geel: ligt in een kleine stad address.town
    
                    http://nominatim.openstreetmap.org/reverse?format=json&lat=51.160854&lon=4.961262
                
    2. 
                
  2. Londen (uit de simulator): is een grote stad address.city
    
                    http://nominatim.openstreetmap.org/reverse?format=json&lat=51.507351&lon=-0.127758
                
    3. 
                
  3. Bobbejaanland: ligt in een gemeenteaddress.city_districtof
                    address.town
    
                    http://nominatim.openstreetmap.org/reverse?format=json&lat=51.20164&lon=4.9025
                
    4. 
                
  4. ...
    5. 
            

            
Afhankelijk van de locatie moet je verschillende velden controleren. Vandaar dat we in de code alle
                mogelijkheden opvragen via een OR-vergelijking (lijn 4).

            
    
                
  1. Voeg onderstaande code aan js/weater.js toe:
    
                    
    
                
    2. 
            

            
Ziehier de weersvoorspelling voor mijn locatie.

            
Weersvoorspelling lokaal


            
Installeer de meteo app.

            

            
    
                
  1. Geef de app een geschikt icoon.
    2. 
                
  2. Installeer de meteo app op je smartphone en controleer de werking.
    
                    
    $ cordova run android
    
                
    3.