‹Revenir à la recherche

Week 5: Project plan maken met UML

1 / 24
suivant
Slide 1: Diapositive
Application DevelopmentMBOStudiejaar 2

Cette leçon contient 24 diapositives, avec quiz interactifs et diapositives de texte.

time-iconLa durée de la leçon est: 60 min

Éléments de cette leçon

Slide 1 - Diapositive

Cet élément n'a pas d'instructions

Ga er goed voor zitten

Slide 2 - Diapositive

Cet élément n'a pas d'instructions

Lesdoelen
  1. Jij kan uitleggen waarom de huidige state management niet goed is voor een grote app.

Slide 3 - Diapositive

Cet élément n'a pas d'instructions

Wat heb je nodig?
Laptop en de nieuwste versie van Dart. 


Slide 4 - Diapositive

Cet élément n'a pas d'instructions

Oude kennis
Oude kennis ophalen

Slide 5 - Diapositive

Cet élément n'a pas d'instructions

Wat is het probleem?
In grote apps met veel meer widgets, moeten wij de data managen.

Normaal gesproken doe je dit in de hoogste widget zodat meer Child widgets de data kunnen gebruiken. 

Slide 6 - Diapositive

Cet élément n'a pas d'instructions

Wat is het probleem?
Stel de ProductDetailPage widget heeft data nodig. 

Nu gaat vanuit MyApp data naar Products naar SingleProduct en uiteindelijk naar ProductDetail via de constructors. Dat terwijl die eerdere widgets niets te maken hebben met die data. 

Slide 7 - Diapositive

Cet élément n'a pas d'instructions

Wat is het probleem?
Hier aan de rechterkant zie jij een widget tree. Als iets van data wijzigt, dan zal deze de hele widget tree triggeren om te rebuilden zodat ProductDetailPage de juiste informatie heeft. Maar ook de widgets ertussen worden opnieuw gebouwd. Dit zorgt voor een performance impact!

Slide 8 - Diapositive

Cet élément n'a pas d'instructions

Wat is 'State' en 'State Management'?

Slide 9 - Diapositive

Cet élément n'a pas d'instructions

Wat is 'State' en 'State Management'?
State = Data which affects the UI (and which might change over time). 

Een voorbeeld hiervan is favorite. Dit is nou typisch een geval van State. 
State
Als je er goed over nadenkt dan is de UI een functie van je data (state). Als jouw data (state) wijzigt, dan veranderd dus ook jouw UI. 

Slide 10 - Diapositive

Cet élément n'a pas d'instructions

Wat is 'State' en 'State Management'?
Er bestaat app-wide state en widget (local) state. 

App-wide State
Widget (Local) State
Beïnvloed de gehele app
Heeft alleen invloed op een widget en geen ander. 
Authenticatie (is de gebruiker ingelogd?)
Moet een loading animatie worden geladen?
Loaded Products moeten geladen zijn
Form input check

Slide 11 - Diapositive

Is de gebruiker ingelogd?

Waarom is het een slecht idee om alle informatie (lees data) in de hoogste widget te beheren?

Slide 12 - Question ouverte

Cet élément n'a pas d'instructions

De titel van de app wijzigt
MyApp
Product
ProductOverviewPage
ProductItem
ProductDetailPage

Slide 13 - Question de remorquage

Cet élément n'a pas d'instructions

De prijs wijzigt van een product
MyApp
Product
ProductOverviewPage
ProductItem
ProductDetailPage

Slide 14 - Question de remorquage

Cet élément n'a pas d'instructions

Alle producten krijgen een attribuut erbij dat alleen in een tegen wordt weergegeven
MyApp
Product
ProductOverviewPage
ProductItem
ProductDetailPage

Slide 15 - Question de remorquage

Cet élément n'a pas d'instructions

The Provider Package & Pattern

Slide 16 - Diapositive

Cet élément n'a pas d'instructions

Provider- package & pattern
Deze package wordt door de Flutter team aangeraden en is zeer populair. 

Deze package zorgt lost veel frontend problemen op die wij nu tegen zijn gekomen.

Docent laat nu een tekening zien hoe dit werkt. 

Slide 17 - Diapositive

Cet élément n'a pas d'instructions

Provider- package & pattern schets
Bestudeer de tekening hoe de provider package de constructors 'omzeilt' zodat niet alle widgets in de widget tree geüpdatet hoeven te worden. 

Slide 18 - Diapositive

Cet élément n'a pas d'instructions

Pas kennis toe in eigen project
Pas kennis toe in eigen project

Slide 19 - Diapositive

Cet élément n'a pas d'instructions

Widget uitzoeken en toepassen
  1. Ga naar de YouTube pagina van Flutter
  2. Kies een widget waar je meer over wilt weten
  3. Pas deze toe in jouw project 

Slide 20 - Diapositive

Cet élément n'a pas d'instructions

Samenvatting
Nieuwe kennis samenvatten

Slide 21 - Diapositive

Cet élément n'a pas d'instructions

Lesdoelen
  1. Aan het einde van de les kunnen jullie een blauwdruk maken en overerven in JavaScript.
  2. Aan het einde van de les kunnen jullie een diagram in een blauwdruk omzetten.

Slide 22 - Diapositive

Cet élément n'a pas d'instructions

Wie vond deze les moeilijk te volgen of snel gaan?
Ik heb de les goed kunnen volgen
Het ging nog net. Ik moet het laten bezinken.
Het ging te snel/moeilijk.

Slide 23 - Sondage

Cet élément n'a pas d'instructions

Vooruitblik
Wat gaan wij de volgende les doen?

Slide 24 - Diapositive

Cet élément n'a pas d'instructions

Plus de leçons comme celle-ci

Week 1: Herhaling met ListView.builder

- Leçon avec 10 diapositives
Application DevelopmentMBOStudiejaar 2

Week 2: Provider Pattern

- Leçon avec 14 diapositives
Application DevelopmentMBOStudiejaar 2

Week 3: Instantiating objects 🔧📦

- Leçon avec 15 diapositives
Application DevelopmentMBOStudiejaar 2

Week 2: Classes en modellen [zonder lessonup gegeven]

- Leçon avec 13 diapositives
JavaScriptMBOStudiejaar 2

Week 4, 5 en 6: Containers, Columns & Rows

- Leçon avec 31 diapositives
Application DevelopmentMBOStudiejaar 2

Week 4: Named routes & provider

- Leçon avec 24 diapositives
Application DevelopmentMBOStudiejaar 2

Week 0: Template les

- Leçon avec 14 diapositives
Application DevelopmentMBOStudiejaar 2

Lesweek 5 - Bufferweek

- Leçon avec 15 diapositives
Applicatie- en mediaontwikkelaarMBOStudiejaar 1