Mashupit ja avoin data - Viikkotehtävä 7

• Taso 1
• Taso 3
• Taso 5

Tehdään mashup-sovellus, joka hyödyntää kerralla useita ulkopuolisia verkkopalveluja ja yhdistelee niitä. Kts. Pääteohjaus 8, Introduction to the Google Maps API, Python minidom -luento, Pääteohjaus 7 ja React.js

• Sovellus on toteutettava käyttäen Pythonia ja Javascriptiä
• Sovelluksen täytyy toimia Firefoxilla ja sovellus on sijoitettava users.jyu.fi-palvelimelle tai Googlen App Engine -palveluun. Muita palvelimia/palveluja, kuin tarkemmissa ohjeissa mainitut, ei saa hyödyntää sovelluksessa.
• Apuna saa käyttää vapaasti Javascript-kirjastoja ja avoimia Javascript-rajapintoja.
• Tuotetun WWW-sivun täytyy olla validia HTML5:sta tai XHTML:ää poikkeuksena sivun sisältöön dynaamisesti tehdyt muutokset.
• Sovelluksen täytyy toimia koko ajan yhdellä ja samalla WWW-sivulla lataamatta sivua uudelleen.

Taso 1

Toteuta vapaamuotoisen näköinen WWW-sivu, joka sisältää seuraavat sisällöt ja toiminnallisuuden:

• Sivulla on alasvetovalikko tai jokin muu mahdollisuus valita Jyväskylä, Kuopio tai Tampere. Oletuksena valittuna on Jyväskylä.
• Sovellus muistaa edellisellä käyttökerralla valitun kaupungin ja esittää automaattisesti tämän kaupungin tiedot sivulle saavuttaessa ja valitsee alasvetovalikosta oletuksena tämän paikkakunnan. Tallenna tieto sessioon tai LocalStorageen.
• Sivulla on kartta (toteutettu Google Maps- tai Openlayers 3- rajapinnalla) jossa näkyy valittuna olevan kaupungin kartta
• Sivulla on valittuna olevaan kaupunkiin liittyvä säätieto siististi taulukossa esitettynä. Sivulla on näyttävä seuraavat tiedot:

  Säätieto	Mittaus
  Ilman lämpötila	xx °C
  Tien lämpötila	xx °C
  Maan lämpötila	xx °C
  Tuulennopeus	xx m/s
  Tuulen suunta	xxx xx °
  Ilmankosteus	xx %
  Näkyvyys	km

  Säätietotaulukko on toteutettava omana React-komponenttina.
• Valittaessa uusi kaupunki siirtyy kartta automaattisesti näyttämään uuden kaupungin karttaa ja säätiedoiksi tulevat uuden valitun kaupungin tiedot

Säätiedot on haettava seuraavan listauksen antamista osoitteista :

Lisätietoja säädatan rakenteesta kerrotaan dokumenteissa: Digitraffic palvelukuvaus, Digitraffic Metadatan rajapinnat (REST/JSON), Digitraffic datarajapinnat

Taso 3

Tee ensin tasoa 1 vastaava toteutus ja lisää sen jälkeen sovellukseen seuraavat asiat:

• Tarjoa paikkakuntavalintalistauksessa aakkosjärjestyksessä kaikki suomalaiset paikkakunnat jotka löytyvät tiedostosta: http://appro.mit.jyu.fi/web-sovellukset/vt/vt8/verda.txt. Paikkakuntavalintalista täytyy päivittää dynaamisesti suoraan edellämainitun osoitteen pohjalta. ts. et voi vain kopioida paikkakuntia suoraan omaan ohjelmakoodisi vaan ohjelmasi on käynnistyessään haettava tiedot.
• Etsi sivulla näytettävä säätilatieto valitun paikkakunnan koordinaattien perusteella eli etsi paikkakuntaa lähinnä olevan tiesääaseman tiedot. On syytä huomata, että Google Maps Api V3 ei tue suoraan pisteiden välisen etäisyyden laskemista vaan se löytyy vain versiosta V2. Sopivan kaavan löytää sivulta Calculate distance, bearing and more between Latitude/Longitude points. Sääasemien sijainnit löytyvät osoitteesta: https://tie.digitraffic.fi/api/v1/metadata/weather-stations. Älä lataa edellämainittua dokumenttia muulloin kuin sovelluksesi sivulle saavuttaessa. Pidä sääasemien tiedot muistissa tallessa.
• Sovelluksen oikeassa laidassa näytetään listaus katsotuista sääennustepaikoista siten, että viimeksi katsottu on listan ensimmäisenä. Listaus tallentuu myös sessioon tai LocalStorageen ja sovellus muistaa listauksen myös seuraavalla käyttökerralla. Sivulle saavuttaessa esitetään aina automaattisesti viimeksi katsotun paikan tiedot. Toteuta listaus React-komponenttina.
• Näytä sivulla tekstimuotoisen säätilatiedon lisäksi myös sääennuste kaaviokuvana jossa näkyy ajanjakso ja sille ennustettava lämpötila hieman samaan tapaan kuin Täsmäsäässä. Piirrä siis ennustetusta lämpötilan muutoksesta viivakaavio (linechart). Kunkin paikkakunnan sääennuste löytyy paikkakuntalistaustiedostossa esitetystä paikkukuntakohtaisesta osoitteesta.
• Näytä sivulla sääennustedatan edellyttämä teksti ja linkki. Esim. sääennustetiedostossa annetaan teksti ja linkki:

  <link text="Weather forecast from Yr, delivered by the Norwegian Meteorological Institute and the NRK" url="http://www.yr.no/place/Denmark/Zealand/Køge/"/>

  niin sijoita sivulla: Weather forecast from Yr, delivered by the Norwegian Meteorological Institute and the NRK

Taso 5

Tee ensin tasoa 3 vastaava toteutus ja lisää sen jälkeen sovellukseen seuraavat asiat:

• Muuta sääennusteesta tehty kaavio interaktiiviseksi. Lisää kaavion viereen mahdollisuus valita näytetäänkö kaaviossa lämpötila, ilmanpaine vai tuulennopeus. Valinnan vaihtumisen jälkeen kaavio vaihtuu automaattisesti esittämään valittua suuretta. Oletusvalintana on lämpötila.
• Lisää karttaan reverse geokoodaus -ominaisuus, joka tuplaklikattaessa etsii sääennusteen klikattuun koordinaattiin (tai klikkausta lähimpään paikkaan) liittyen. Samalla pitää päivittyä myös ennusteeseen liittyvä kaavio ja jos mahdollista niin valita paikkakuntalistauksesta oikea paikkakunta ja etsiä lähimmät tiesäätiedot. Reverse geokoodattu paikka lisätään myös sivun oikean laidan listaan.
• Mahdollista katsottujen sääennustepaikkojen listauksen muokkaaminen eli paikkoja voi siirrellä haluamaansa järjestykseen tai listattuja paikkoja voi poistaa
• Lisää sovellukseen mahdollisuus tallentaa pysyvästi katsotut sääennustepaikat. Tallennetut paikat on osattava ladata näkyville riippumatta käytetystä selaimesta tai tietokoneesta eli käyttäjän on kirjauduttava jotta tiedot osataan hakea. Pelkkä sessioon tai LocalStorageen tallentaminen ei riitä.
• Toteuta sovellus kokonaan React-komponenteilla