Login
Inlognaam:
Wachtwoord
inhoud Ft
Opdrachten bij Client Side Programming 3
Opdrachten


Opdracht 1: Toepassing CSP2 kennis in: Weather-app
Maak op basis van de API van http://openweathermap.org/forecast5 een weer-applicatie.
Doe dat m.b.v. van jQuery (of plain Javascript).
A)
Van het weer in Zwolle
1)
Haal het weer voor Zwolle in JSON op m.b.v. de bovengenoemde site
2)
Laad een plugin in je browser zodat deze JSON in een treeview weergeeft
3)
Kopieer vanuit een basis-app van vorig jaar een pagina met (laatste) jQuery of AngularJS met een AJAX-request
4)
Gebruik de API om het weer van Zwolle op één tijdstip in jouw app weer te geven.
5)
Geef een lijst met weergegevens (windrichting, temperatuur e.a.) van de komende uren weer van Zwolle.
Bekijk voorbeeld onder link hiervoor
  • temperatuur: -273 (staat in Kelvin)
  • afb. weer komt van de weathermap-site
  • pijltje windrichting: draai een img zover dat de pijl en windrichting kloppen
Inleveren: AO3A: di 10 sept       AO3B: wo 11 sept
B)
Maak een keuze van een land en stad mogelijk
1)
Maak 2 input-elementen voor stad en staat waarin je bijv. 'Zwolle' en 'nl' in kunt typen en maak zo de keuze van een stad mogelijk
Inleveren: AO3A: di 19 sept       AO3B: wo 18 sept


Opdracht 2: Kennis ophalen van Angular 8
Bouw bovenstaande vraag op met Angular 8
A)
Bouw eerst basis op zonder routes, pipes e.d.. Gebruik de HTML van de vorige vraag
B)
Gebruik filters en of pipes voor het formateren van temperatuur, windsnelheid (en richting..?)
C)
Gebruik routes met een menu om de verschillende opdrachten op verschillende pagina's te tonen
D)
Gebruik Material Design i.c.m. Angular voor een mooiere en meer functionele vormgeving
Inleveren: AO3A: ma 14 okt (tijdens PEV)       AO3B: wo 16 okt
Opdracht mag ook uitgevoerd worden met andere inhoud dan Weatherapp, zolang het maar een eigen voorbeeld is (niet die van de video's) en de onderstaande onderdelen daarin voorkomen.


Opdracht 3: Groepsopdracht: verwerken van de weergegevens a.d.h.v. 3 API's
In groepjes van 2 moeten de onderstaande opdrachten worden uitgewerkt:
  • Bespreek het probleem, niet duidelijk? Vraag eerst na wat er precies bedoeld wordt
  • Bepaal de beste methode om de gegevens op de gevraagde manier weer te geven
  • Bespreek welke techniek jullie gaan gebruiken voor dat onderdeel
  • werk de opdracht uit (samen in de les, of beide een onderdeel thuis)

Te gebruiken API's:
  • API van openweathermap
  • Google Charts
  • (Google) Maps
A)
Haal de cities van openweathermap op (bulk download in tar-file) en maak een selectie mogelijk van landen en steden.
Lastigste aan deze opdracht is: wat doe je met de grote city-file:
  • het is nog geen juiste JSON.., wil je dat? Hoe doe je dat?
  • Als je al JSON hebt is die zo groot waardoor je app misschien erg traag wordt.., probeer dat uit
  • Zet evt. de JSON om naar een eigen database, schrijf een kleine API (vorig jaar gedaan) en zorg dat deze kan zoeken op land en stad (query op DB gaat veel sneller dan in grote JSON zoeken !)

Werk de onderstaande opdrachten uit:
1)
Maak een <select> element waarbij je een land kan kiezen.
Maak daarnaast een <select> element waarbij je een stad uit dat land kan kiezen.
2)
Maak een element waarbij je na enkele letters ingetypt te hebben, deze suggesties geeft welke stad of land je kan kiezen (als je bijv. 'terda' in typt, dat hij in ieder geval met Amsterdam en Rotterdam komt)
B)
Geef minimaal 2 weergegevens weer in een dag-grafiek met horizontaal de tijd.
Voer één van de onderstaande opdrachten uit
1)
Display de 2 (of liever meer :-) gegevens in 2 (of meer) aparte grafiek(typ)en
2)
Display 1 grafiek waarbij je meerdere
C)
Geef een kaart weer op je site.
Door te klikken op een bepaalde plek wordt een coordinaat doorgegeven waardoor via geo-location van openweathermap het weer opgezocht wordt.
1)
Maak de kaart scrollbaar en zorg dat standaard Nederland in zijngeheel in beeld is
2)
Zorg dat met een klik de coordinaten van die plek opgevraagd worden in Javascript
3)
Vul met coordinaten van de locatie in, in openweathermap (aparte api)
4)
Geef van die plek de weergegevens
  • Geef de tabel uit vraag 1)
  • Geef de grafiek(en) uit vraag 2B)
Deltion college