Leg in je eigen woorden uit, hoe denk je dat het algoritme werkt.
In deze workshop leer je hoe je je eigen interactieve app kan maken met SwiftUI in Swift Playgrounds.
Over deze les
Programmeer een habit tracker app
Bouw een interactieve app met SwiftUI
Lesdoelen
Gegevens opslaan met variabelen
Voeg interactieve elementen toe aan je scherm
Schrijf een algoritme om verschillende weergaven te tonen met behulp van voorwaardelijke logica
Benodigde voorkennis
Voor deze les is geen voorkennis nodig, maar je zou kunnen overwegen om de lessen "Aan de slag met programmeren" en "Over mij" in Swift Playground van te voren te behandelen.
Benodigdheden
Swift Playground app
iPad of Macbook
Voorbereiding
Voor de les heb je Swift Playground nodig op de iPad of op de Mac. Swift Playground is een gratis app en biedt leerlingen alles wat ze nodig hebben om hun eigen app te maken en deze te publiceren in de app store.
De tijdsinvestering van deze app is minstens 2 lesuren. Waarbij het eerste lesuren de docent stap voor stap alle stappen voordoet en de leerlingen volgen. Het tweede lesuur kunnen leerlingen gebruiken om of het algortime verder uit te bouwen of het design van de app aan te passen.
Over de auteur
Suzanne Lustenhouwer is docent Engels en sinds 2016 geef ik ook les in coderen en app-ontwikkeling vanuit het lesprogramma Iedereen kan programmeren van Apple. Daarnaast heb ik de aan de volgende projecten gewerkt om programmeren te integreren in het curriculum:
Tik in Playgrounds op "Nieuwe Playground" en dan op "app" op het scherm.
Haakjes tellen
Verwijder de wereldbolafbeelding en de tekstweergave, zodat je echt helemaal opnieuw kan beginnen.
SwiftUI werkt als een Russische Nesting Doll, een SwiftUI-app is opgebouwd uit meerdere lagen, waarbij elk de volgende inkapselt bij het toevoegen en verwijderen van elementen in je code. Zorg er altijd voor dat je evenveel openende haakjes { hebt als sluitende haakjes }.
Je krijgt een bug en je code stopt met draaien zodra dit niet klopt.
Verwijder het tekst en afbeelding element. Zorg ervoor dat je evenveel haakjes { heb die openen als sluiten.
Tekst toevoegen
Begin met het toevoegen van je eerste stuk tekst. In het voorbeeld van de mood tracker is dit de vraag. "Hoe gaat het vandaag?"
Een tekstweergave begint met Text(). Voeg het woord of de zin toe tussen de haakjes en tussen aanhalingstekens zodat het er als volgt uitziet:
Text(“Hoe gaat het vandaag?”)
Mogelijke fouten:
De hoofdletter T is belangrijk en onthoud dat elke haakjes ( en elk aanhalingsteken “ die je opent ook gesloten moet zijn.
Ga door met het toevoegen van meer tekstweergaven. Omdat ze in een VStack staan, worden ze verticaal gestapeld.
Voeg tekstelementen toe
De tekst interactief maken
Om de geslapen uren bij te werken, moet je van 6.5 een variabele maken.
Dit wordt gedaan tussen de ContentView en de body. Je kunt de plaats tussen contentView en body bekijken als het hoofd of de back-end van je app. Dit is waar alle logica en denkwerk plaats vindt.
@State var betekent dat dit een variabele is die een gebruiker kan wijzigen.
urenGeslapen Dit is de naam die je je variabele kunt geven. Het kan van alles zijn, maar het is het beste om het beschrijvend te maken om je code goed leesbaar te houden. Het moet één woord zijn, dus gebruik camelCase om woorden samen te voegen.
6.0 Is de waarde die wordt gezien de eerste keer dat de gebruiker dit scherm ziet, dus het kan ook beginnen met 0.0. Zorg ervoor dat je een decimaal gebruikt.
Hoe kan je nu urenGeslapen op je scherm zetten?
Voeg een variabele toe
Hoe zet je urenGeslapen op je scherm?
Dit kan worden gedaan met string-interpolatie. String interpolatie is een variabele in een tekstview plaatsen.
Text(“Ik heb \(urenGeslapen) uur geslapen”)
Met \() kun je variabelen toevoegen aan Text().
De bovenstaande code ziet er niet helemaal goed uit. Er worden te veel nullen op het scherm laten zien. Voeg .formatted() toe om ervoor te zorgen dat het alleen de benodigde decimalen toont.
Text(“Ik heb \(urenGeslapen.formatted()) uur geslapen vannacht")
Wat heeft dit voor zin? Het ziet er precies hetzelfde uit als het scherm op het vorige scherm? Dit is belangrijk omdat je nu een schuifregelaar (slider) kan toevoegen die de waarde van de variabele bijwerkt en live weergeeft in je Textview.
String interpolatie
Een schuifregelaar toevoegen
Om de waarde van de urenGeslapen-variabele te wijzigen, kunt u een schuifregelaar toevoegen.
De schuifregelaar verandert de waarde van $urenGeslapen. De $ wordt een binding genoemd. Dit zegt dat deze schuifregelaar wordt verbonden aan de waarde van @State var urenGeslapen.
in: schrijf de minimale en maximale waarden van de schuifregelaar.
step: schrijf met hoeveel de waarde wordt gewijzigd door te schuiven.
Gebruik de schuifregelaar om het getal te zien veranderen.
Schuifregelaar toevoegen
Logica toevoegen
Met behulp van if- en else-if-instructies kun je voorwaardelijke logica aan de app toevoegen. Met voorwaardelijke logica kan je beslissen wanneer je verschillende delen van de app wilt laten zien.
Gebruik logische operatoren om je algoritme complexer te maken.
== (equals)controleert of twee waarden gelijk zijn
>= (is groter dan of gelijk aan) controleert of een waarde groter of gelijk is
<= (is kleiner dan of gelijk aan) controleert of een waarde kleiner of gelijk is
!= (is niet gelijk aan)Controleert of twee waarden niet gelijk zijn
&& (and) Geeft waar als zowel de voorwaarden aan de linker- als rechterkant waar zijn
|| (or) Geeft waar als ten minste één van de voorwaarden aan de linker- of rechterkant waar is.
! (not) Als de voorwaarde waar is, ! Maakt het onwaar; als de voorwaarde onwaar is, ! Maakt het waar.
Voorwaardelijke logica
Minimum viable product
Geweldig dat je nu je eerste app hebt gemaakt met een variabele, interactieve elementen en voorwaardelijk algoritme.
Om de app verder uit te bouwen kan je de volgende stappen herhalen:
Stap 1: Voeg een variabele toe
Stap 2: Voeg een interactief element toe
Stap 3: Pas het algoritme aan
Daarna kan je wat je hebt geleerd in “Over mij” gebruiken om het ontwerp van je app te veranderen.
Verdieping data types
Wanneer we een variabele of een constante in Swift maken, moeten we het gegevenstype opgeven. Dit vertelt de app wat voor soort informatie de eigenschap zal bevatten, en het helpt de app om die informatie efficiënter te beheren en te gebruiken.
Kijk naar de eigenschappen en match ze met het bijbehorende gegevenstype van de stapel aan de rechterkant.
De volgende variabele die je aan je gewoontetracker kan toevoegen, is een boolean. Een boolean geeft een waar of onwaar waarde.
Hierdoor werkt het goed met een schakelknop/toggle.
Welke andere gewoonten wil je bijhouden? Voeg nog minstens één variabele toe en schakel om.
Boolean toevoegen
Het algoritme verfijnen
Hoe meer variabelen er worden toegevoegd, hoe complexer het voorwaardelijke algoritme kan worden.
Het tekenen van een stroomdiagram kan je helpen het algoritme in kaart te brengen.
Verder leren
Als je verder wilt gaan met het bouwen van je eigen app, bekijk dan de suggesties van Apple het leren van programmeren binnen Playgrounds.
Het arrangement Bouw een interactieve app met SwiftUI. is gemaakt met
Wikiwijs van
Kennisnet. Wikiwijs is hét onderwijsplatform waar je leermiddelen zoekt,
maakt en deelt.
Auteur
Suzanne Lustenhouwer
Laatst gewijzigd
2025-04-07 11:26:51
Licentie
Dit lesmateriaal is gepubliceerd onder de Creative Commons Naamsvermelding-GelijkDelen
4.0 Internationale licentie. Dit houdt in dat je onder de voorwaarde van naamsvermelding en
publicatie onder dezelfde licentie vrij bent om:
het werk te delen - te kopiëren, te verspreiden en door te geven via elk medium of
bestandsformaat
het werk te bewerken - te remixen, te veranderen en afgeleide werken te maken
voor alle doeleinden, inclusief commerciële doeleinden.
Van dit lesmateriaal is de volgende aanvullende informatie beschikbaar:
Toelichting
In deze les maak je een interactieve app voor op je iPad of Mac met Swift Playground en de programmeertalen Swift & SwiftUI.
Leerdoelen:
Sla gegevens op met variabelen
Voeg interactieve elementen toe aan je scherm
Schrijf een algoritme om verschillende weergaven te tonen met behulp van voorwaardelijke logica
Leerniveau
VWO 2;
HAVO 3;
VWO 3;
HAVO 2;
Leerinhoud en doelen
Kunst en cultuur;
Produceren en presenteren;
Media en communicatie;
Techniek;
In deze les maak je een interactieve app voor op je iPad of Mac met Swift Playground en de programmeertalen Swift & SwiftUI.
Leerdoelen:
Sla gegevens op met variabelen
Voeg interactieve elementen toe aan je scherm
Schrijf een algoritme om verschillende weergaven te tonen met behulp van voorwaardelijke logica
Leeromgevingen die gebruik maken van LTI kunnen Wikiwijs arrangementen en toetsen afspelen en resultaten
terugkoppelen. Hiervoor moet de leeromgeving wel bij Wikiwijs aangemeld zijn. Wil je gebruik maken van de LTI
koppeling? Meld je aan via info@wikiwijs.nl met het verzoek om een LTI
koppeling aan te gaan.
Maak je al gebruik van LTI? Gebruik dan de onderstaande Launch URL’s.
Arrangement
IMSCC package
Wil je de Launch URL’s niet los kopiëren, maar in één keer downloaden? Download dan de IMSCC package.
Wikiwijs lesmateriaal kan worden gebruikt in een externe leeromgeving. Er kunnen koppelingen worden gemaakt en
het lesmateriaal kan op verschillende manieren worden geëxporteerd. Meer informatie hierover kun je vinden op
onze Developers Wiki.
