PRO wk11 / ONT / H2 Flowcharts

• Applicatie- en mediaontwikkelaar
• MBO
• Studiejaar 1

Flowcharts

Ontwerpen-I

Les 3 / Week 11

De stap "process" wordt steeds uitgebreider

Die stap "process" kun je verder uitwerken in een flowchart:

“Een schematische voorstelling van een

proces”, of “een diagram dat een proces

visualiseert”.

Flowchart

• Meestal bij NATIVE-opdrachten
• Uitwerken technische flow van het programma

Wireframe

• Meestal bij WEB-opdrachten
• Uitwerken User Interface van het programma

Ontwerpfase in het ontwikkelproces (V-model)

Flowchart

• Meestal bij NATIVE-opdrachten
• Uitwerken technische flow van het programma

Wireframe

• Meestal bij WEB-opdrachten
• Uitwerken User Interface van het programma

Ontwerpfase in het ontwikkelproces (V-model)

In latere blokken nog meer tools uit de ontwerpfase.

Terminal

Process

Decision

Input/output

Flowcharts invullen

Vraag

Antwoord

Noteer voor jezelf

de antwoorden.

5

Ik had er ...... goed:

1. 1-2
2. 3-4
3. 5
4. 6

Noteer voor jezelf

de antwoorden.

5

Bij complexiteit

• Gedachten op papier
• Proces visualiseren
• Overzicht houden

Voor communicatie

• Voor samenwerking
• Eén gedeelde waarheid
• Als praatplaatje

De twee doelen van een flowchart

Ik had er ...... goed:

1. 1-2
2. 3-4
3. 5-6
4. 7

Noteer voor jezelf

de antwoorden.

5

Ik had er ...... goed:

1. 1-3
2. 4-6
3. 7-8
4. 9

Noteer voor jezelf

de antwoorden.

5

Ik had er ...... goed:

1. 1-2
2. 3
3. 4
4. 5

Flowchart op twee niveau's

In deze flowchart staan een aantal processtappen die je niet met één regel code kunt uitwerken. Bijvoorbeeld: de stap “parkeer vliegtuig” bestaat eigenlijk uit een heleboel kleine stapjes:

In deze flowchart staan een aantal processtappen die je niet met één regel code kunt uitwerken. Bijvoorbeeld: de stap “parkeer vliegtuig” bestaat eigenlijk uit een heleboel kleine stapjes:

Sub-programma

Omdat de processtap “Parkeer vliegtuig” dus weer uit een aantal stappen bestaat, kun je deze uitwerken in een eigen flowchart. Wanneer je een processtap verder uitwerkt heet dan een subroutine of sub-programma.

Twee niveaus

We hadden dus al een flowchart op “hoog” niveau, waarin je ziet wat de grote stappen van het programma zijn. Een aantal van die stappen kun je ook weer op “laag” niveau uitwerken, in meer detail dus. Met deze werkwijze kun je makkelijk overzicht houden in je flowcharts. Want als je alle stappen tot in detail zou uitwerken in één flowchart, krijg je natuurlijk een heel groot diagram waar je geen wijs meer uit kunt.

Flowcharts tekenen

Miro

In de volgende opdracht ga je zelf een flowchart tekenen. We doen dat digitaal in het programma Miro (https://miro.com/). Je hebt al een account gemaakt in een vorige les. Is dat nog niet gelukt? Maak dan alsnog een account. Zodra je een nieuw bord hebt gestart, vind je aan de linkerkant de vier vormen die je nodig hebt:

Twee keer een opdracht.

Je ziet: processtap + code.

Doen: teken een flowchart van dit sub-programma.

Inleveren: afbeelding van de flowchart.

Van flowchart naar code

Twee keer een opdracht.

Je ziet: een flowchart.

Doen: maak de twee programma's in Python.

Inleveren: afbeelding (2x) van beide programma's.

1.

2.

Lever 2x screenshot in.

En verder...

• Gebruik deze vaardigheden voor A3!
  
• Alles terug te lezen in moduleboekje ONT-I (hoofdstuk 2)