Ga naar hoofdinhoud

Project Webframeworks

🥅 Overzicht en Leerdoelen​

Met deze opdracht werk je aan de volgende leerdoelen:

  • De student maakt een mobiele app vertrekkend van een functionele analyse
  • De student maakt applicaties in react js
  • De student maakt componenten met properties, hooks en states
  • De student maakt gebruik van een routing library voor een applicatie met meerdere pagina’s
  • De student maakt componenten die met elkaar communiceren aan de hand van een gedeelde state
  • De student maakt web applicaties die gebruik maken van externe web services
  • De student bouwt een user interface met gebruik van een UI component library

🔍 Project Webframeworks​

In deze opdracht maak je gebruik van React Native om een mobiele applicatie te maken. Je maakt deze opdracht individueel.

Je kiest een onderwerp op basis van de beschikbare APIs, met uitzondering van de API die we gebruiken als voorbeeld in de les. Je kan de lijst met beschikbare APIs (en hun endpoints) terugvinden op https://sampleapis.assimilate.be/.

🛠️ Opdrachten​

opdracht 1: functionele analyse​

Het functioneel design beschrijft de functionaliteiten van je mobiele applicatie zonder technische details, het toont wat er gaat komen.

  • Teken een grey-boxed ontwerp/wireframe van elk scherm in je applicatie.
  • Beschrijf op elk scherm de verschillende functies van de elementen op het scherm.

opdracht 2: implementatie​

Werk je mobiele applicatie verder uit met behulp van React Native.

Je applicatie moet:

  • minstens 3 screens bevatten, die je via routing kan bereiken.
  • een flatlist of scrollview gebruiken.
  • een API aanspreken met een GET request om data op te halen. Je kan kiezen uit deze lijst van beschikbare APIs.
  • dezelfde API aanspreken met een POST/PUT request om data toe te voegen of aan te passen.
  • gebruik maken van AsyncStorage.
  • 2 of meer Expo components gebruiken. (filesystem, camera, map, notification, imagepicker, location, calendar,...)
  • styling toepassen waarbij je de nadruk legt op UX.

Tijdens het ontwikkelen let je op de volgende zaken: