Meteo (apixu) service.
Net zoals bij de todo-app ga je alle functionaliteiten omtrent de meteo API groeperen in één service. De taak van de service is om de HTTP-aanvraag in te dienen en het antwoord van de weersgegevens terug te sturen naar de component(en) die de aanvraag deden.
Voor je de service kan uitwerken, heb je natuurlijk wel een API nodig die onze verzoeken kan verwerken. Voor deze toepassing gebruiken we de Apixu API. Deze dienst is tot 5000 API calls per maand volledig gratis. Het enige wat je nodig hebt, is een API key.
- Maak een account aan op https://www.apixu.com/.
- Genereer een API key.
- Bestudeer de documentatie van Request API en de JSON-data die we terugkrijgen.
Aan de hand van een aantal parameters kunnen we het resultaat beïnvloeden. De parameters die ons interesseren zijn:
- key: uw API key.
- q: de locatie waarover we informatie wensen te ontvangen. Deze string kan zowel een woord (q=Geel) als een combinatie van lat,lng coördinaten bevatten (q='51.160854,4.961262').
- days: het aantal dagen (minimaal 1 en maximaal 10) waarvoor je de weersvoorspelling terugkrijgt.
- lang: de taal waarin de omschrijving wordt weergegeven.
Ziehier de weersvoorspelling van Geel. Vervang in de URL eerst de key (SECRET) door je eigen API key!
https://api.apixu.com/v1/forecast.json?key=SECRET&q=Geel&days=7&lang=nl
TIP: voeg de Chrome-extensie JSON Formatter
toe zodat je het resultaat mooi gestructureerd kan bekijken.
De velden die je dadelijk in de site verwerkt, zijn:
- location.name en location.country: onze locatie.
- current.temp_c, current.condition.text en current.condition.icon: de weersvoorspelling op dit moment.
- forecast.forecastday: een array van objecten met onder andere de dag (date_epoch), de temperatuur (day.mintemp_c en day.maxtemp_c), de Nederlandse omschrijving (day.condition.text) en het icoon (day.condition.icon).
HttpClientModule
Om de data in de achtergrond op te halen, maken je via de HttpClient een AJAX request naar de apixu
API. Voor je de HttpClient kan gebruiken, moet je de HttpClientModule eerst importeren. Omdat we
deze module verder in de toepassing nog gebruiken, importeren we deze best in app.module.ts.
Eens de HttpClientModule geïmporteerd, kan je de HttpClient, via de constructor, in al je
componenten en
services injecteren.
- Importeer HttpClientModule in app.module.ts:
Service aanmaken.
Omdat je de service enkel binnen meteo gebruikt, is dit ook de meest voor de hand liggende plaats om de service te bewaren.
- Maak in de map meteo de apixu-service aan en importeer de service in meteo.module.ts.
$ ng g s meteo/apixu -m meteo - Wijzig de code op src/app/meteo/apixu.service.ts:
- Lijn (1):
Importeer HttpClient en HttpParams. - Lijn (2):
Injecteer de HttpClient in de constructor. Verder in de code kan je service gebruiken via this.http. - Lijn (3):
Vul hier je eigen API-key in. - Lijn (4):
De methode getForecast(location) geeft ons een observable terug. Let op: de code binnen een observable wordt pas uitgevoerd zodra je op de observable subscribed! - Lijn (5):
Uit ons voorbeeld weten we dat je aan de URL nog enkele paramaters moet toevoegen. Je kan dus perfect de volledige URL, inclusief de paramaters, in de get methode plaatsen. Om de code wat leesbaarder te maken, kan je ook opteren om alle paramaters in een variabele (params) te plaatsen en deze als tweede argument aan de get methode mee te geven. - Lijn (6):
Zodadelijk gaan we in de rootmodule meermaals op getForecast() subscriben. Voor Angular betekent dit dat we meermaals de data opnieuw gaan ophalen! Dit is natuurlijk voor niets nodig. De data is immers altijd hetzelfde.
Om deze overbodige connecties te beperken tot één connectie, eindig je de request met de ingebouwde rxjs-methode shareReplay(). Vergeet niet dat je elke rxjs-methode apart (lijn 4) moet importeren.
