Planning
| Havo 5 | VWO 6 | |
| Start / groepen maken | 6 november | 6 november |
| Deelopdracht A: Informatie | 13 november | 13 november |
| Deelopdracht B: Ontwerp de Schermen in een Wireframe | 20 november | 20 november |
| Deelopdracht C: De app | 15 december | 8 december |
Maak een weer-miniapp dat automatisch het weer ophaalt en dan weergeeft. Dus bij regen, toon je een regenbui. Bij zon, de zon. En de temperatuur in beeld, etc. etc.
(B) Bepaal zelf de exacte doelstelling van deze app. Welke informatie is daarvoor nodig?
(E) Maak een schema (architectuur) van de schermen en de functies en api’s die je gaat bouwen.
(F) Maak een ontwerp met minstens 3 schermen. Evalueer je eigen app en die van 2 andere teams aan de hand van Vuistregels voor goed ontwerp. Hiervoor gebruik je bijvoorbeeld deze lijst [uxpin.com]. Elk deelpunt zet je netjes in Excel en je geeft een evaluatie.
Open Data API
Hiervoor gebruiken wij de API van Openweathermap of KNMI of Open Meteo. Maak een free student account aan. Dit zijn REST api’s die werken zoals in deze video is uitgelegd.
- Voorbeeld met earthquakes by Eloq Arch
- Uitleg Hoe werk je met zo’n lastige JSON array?
JSON
In deze API krijg je te maken met JSON. Installeer eerst de JSONview extensie. JSON is al javascript, dus relatief simpel.
Tips
- PNG afbeeldingen die je mag gebruiken en die goed zijn: https://www.pngegg.com/
Requirements
- in je ontwerp meerdere schermen
- live weer ophalen van een vaste locatie (die je in de code hebt)
- temperatuur / bewolking of regen / wind-richting en snelheid
- gebruik een combinatie van tekst en afbeeldingen voor deze weer-kenmerken
- een interactieve sketch ergens
Deelopdracht 1: Informatie
Bepaal zelf de exacte doelstelling van de app. Je kunt nu ook kiezen voor iets anders dan Weer, maar je moet dan wel zelf een API regelen. Vertaal je doel naar
- Welke functies ga je maken? Minstens 2.
- Welke informatie is ervoor nodig?
Deelopdracht 2. Ontwerp de Schermen in een Wireframe
- Teken minstens 3 schermen. Geef aan op welke positie welke knop / image / tekst staat. Teken de “links” tussen de schermen. Dan is het teken je een Wireframe (zoek op).
- Je kunt een wireframe tekenen met Penpot of in Powerpoint of Draw.io of op papier.
- Let erop dat je een visuele schets (meer of minder gedetailleerd) maakt. Een tekst met een vierkant eromheen is geen ontwerp.
Het doel van deze deelopdrachten is
Deelopdracht 3: De app
Gewoon in de P5JS Editor bouwen. Deel een account met zijn 2. De aparte schermen zijn hier weer 1 gewoon scherm, alles in dezelfde workspace. Probeer zoveel mogelijk van de geplande functies te realiseren.
Alleen als je een erkend javascript-coder bent, mag je p5 loslaten en “gewoon” javascript gebruiken.
NNB
Start tips
- aanvragen key (in kleine groepen delen kan)
- vaste locatie coderen
- JSON call doen voor deze locatie.
- De temperatuur en nog een item opzoeken in de array
- Een eenvoudige display, niet te fancy
- We gebruiken 1 rubrics voor alle opdrachten samen uit de opdrachtenreeks.
Rubrics
| Deelopdracht | Naam Opdracht | 3 | 5 | 7 | 9 |
| A | Informatie | Je hebt een te beperkt, onduidelijk, te breed of groot doel, te vaag of onduidelijk. Te weinig functies. Informatie niet of amper aangegeven. | Doelstelling en informatie zijn vaag / algemeen (zonder bijv locatie of tijd) aangegeven. Je hebt 2 functies netjes geformuleerd | Doel en informatie zijn duidelijk en zonder kans op mis-verstanden geformuleerd | Je hebt nieuwe mogelijkheden gevonden om doel, functies en informatie te specificeren |
| B | Wireframe Functio- naliteit | De wireframe geeft geen invulling aan de gegeven functies of informatie. | Je hebt de doelstelling en functies onvoldoende omgezet in gewenste schermen. Je hebt een tekstuele beschrijving van de informatie / functies maar geen visuele schets. | Je schermen dekken de benodigde functies netjes af | Je wireframe bevat elementen die je alleen op een hoger niveau verwacht. |
| UX | |||||
| C | App Mate van Succes bij de realisatie | De app lijkt nergens op | De doelen zijn deels behaald. De meeste doelen zijn niet gehaald | De doelen zijn grotendeels behaald | Je hebt meer bereikt dan je dacht cq. je hebt gewoon heel veel gebouwd. |
| Coding Style | Herhalende code | Eigen functies. Gebruik bestaande classes | Tenminste 1 originele class |
Eindtermen
Notes to self, doorzetten nog Eloq Arch!
- Bepalen Doelstelling, C1 Informatiebehoefte (eindterm C2)
- Bepalen Architectuur E1
- F1 en F2: Evaluatie gebruikersschermen, toepassen vuistregels goed ontwerp
Bepalen Security E2
