Fagfredag

Webstep Fagfredag om Single Page Applications med JS

Oppgave

Oppgaven vi har planlagt er at du skal lage en versjon av Yr.no som egner seg for å vise på et dashboard, stor skjerm, panel ett eller annet sted.

Vi har laget et par sider med eksempel-html som du vil finne som del av løsningen du sjekker ut fra Git. Til referanse ser de slik og slik ut.

Hva skal lages

En grei vei for å starte med det enklere, for så å bygge på mer avansert funksjonalitet kan være følgende steg:

  1. En side som viser nåværende vær for ett sted
  2. Utvide siden til å vise langtidsvarsel eller varsel for dagen.
  3. En annen side som viser været for flere steder
  4. En side hvor man kan konfigurere hvilke steder man vil vise været for

Hvor henter jeg data fra?

Yr har et API for å hente værdata, men det har to svakheter. Det gir bare ut XML og ikke JSON, noe som gjør det litt mer knot å jobbe med i JavaScript, i tillegg til at det ikke gir ut riktige HTTP-headere (Access-Control-Allow-Origin) som gjør at JavaScript tillater at en side som ligger på en annen server laster data derfra.

For å komme rundt disse begrensningene slik at det blir lettere å løse denne oppgaven har vi laget en proxy mot Yr-API'et, som ligger på http://yr-proxy.tosh.no. Den lar deg hente data som om du henter fra Yr, konvertert til JSON og med riktige headere lagt til.

Dokumentasjonen til Yr-API'et gjelder fortsatt mer eller mindre, men om du ønsker å få varselet for Gvarv ikke bruk URL'en http://www.yr.no/sted/Norge/Telemark/Sauherad/Gvarv/varsel.xml
men bruk
http://yr-proxy.tosh.no/sted/Norge/Telemark/Sauherad/Gvarv/varsel.xml eller
http://yr-proxy.tosh.no/sted/Norge/Telemark/Sauherad/Gvarv/varsel.json
(begge returnerer JSON).

Hvor får jeg tak i symboler?

Symboler som passer til symbolkodene som nevnes i API-responsene har url http://symbol.yr.no/grafikk/sym/b100/<symbolnavn>.png

Hva med liste over steder?

Vi har laget et enkelt api for å søke etter steder dere kan spørre etter vær for.
http://yr-proxy.tosh.no/search?q=query

Søket utfører et case-insensitivt søk på alle ord i stedsnavn (altså 'LIKE ord%'), sortert etter prioritet hos yr (lavere prioritet=mer viktig). Om ønskelig kan pri-parameter legges på søket for å filtrere ut småsteder. Eksempelqueries:

http://yr-proxy.tosh.no/search?q=vær (steder med ord som starter på vær, f.eks "Trondheim Lufthavn Værnes")
http://yr-proxy.tosh.no/search?q=berg&pri=15 (byer med ord lik berg*, f.eks. "Bergen" eller "Ytre Berge")

Vi skal klare å ta unna ganske bra trykk på disse tjenestene. Byene ligger hos oss og vi cacher vær-requests mot yr i 10 minutter, så ikke vær redd for å forsøke å implementere autocomplete på søk, eller periodisk refresh av vær-info. Men dere trenger ikke DDOS'e proxyen bare for å teste ()

Jeg er ferdig, hva nå?

Om du var litt kjappere enn vi hadde forventet kan du bygge videre. Hva med..

  • Introdusere responsivt design, så siden funker med mindre nettleser
  • Persistens av valgte steder i localstorage
  • Periodisk oppdatering av valgte steder
  • Søk på by med autocomplete
  • Svarene fra serveren inneholder noen mapkoordinater, kan du gjøre noe kult med dem?
  • Hosting av appen (Github Pages, Heroku, Azure)
  • API'et tilbyr også søk på steder ut ifra koordinater. http://yr-proxy.tosh.no/nearby?lat=59.16&lon=11.42&dist=5000 gir alle steder 5000 meter unna oppgitte koordinater.

Tips

Tilbake til forsiden