Core Data Tutorial: bouw een Notities-app

Core Data Tutorial

In deze Core Data tutorial bouwen we een app waarin de belangrijkste onderdelen van Core Data aan bod komen.

Core Data is één van de uitgebreidste frameworks van Apple. Je gebruikt het om met persistente data te kunnen werken, gegevens die automatisch bewaard blijven als je app wordt afgesloten.

In de vijf artikelen uit deze Core Data tutorial behandelen we de volgende onderwerpen:

  • Conventies:
    • Model View Controller
    • Protocollen en delegation
  • UIKit:
    • Interactieve Table Views
    • Search Bar-view
    • Alerts
    • Toolbar-view
  • Core Data:
    • Data Model, entiteiten en attributen
    • Persistent Store en Persistent Store Coordinator
    • De Core Data Context
    • Managed Objects
    • Gegevens sorteren
    • Gegevens filteren: predicates

In één dag Core Data leren?

In deze nieuwe LIVE Clinic over Core Data leer je in één dag hoe je zelf Core Data in je apps kunt gebruiken. Gewoon thuis, vanachter je Mac!

Meer informatie

De definitieve versie van onze app kan straks, dankzij Core Data, de volgende dingen:

  1. De app kan notities tonen, bestaande uit een titel en de datum waarop de notitie is gemaakt.

De app die we in deze core data tutorial bouwen

  1. Je kunt notities wijzigen en/of verwijderen.

Een notatie uit onze core data tutorial-app

  1. Door notities te filteren, kun je precies bepalen welke notitities je wel of niet wilt zien.

In deze core data tutorial leer je hoe je in de core data database kunt zoeken

Je basiskennis

Om de artikelen in deze Core Data tutorial goed te kunnen volgen, is het noodzakelijk dat je met Swift hebt gewerkt en dat je al wat ervaring hebt met het maken van apps. Ben je lid van de iOS Academie? Deze artikelenserie is dan goed te volgen als je één van de volgende producten van de iOS Academie hebt doorgewerkt:

Deze Core Data Tutorial

Deze Core Data Tutorial bestaat uit vijf artikelen.

In aflevering 1 (dit artikel) maken we het prototype van onze app: we ontwerpen hem in het Storyboard, we maken een model en we vullen de tabel met (dummy) informatie.

Aflevering 2 gebruiken we om het Data Model van onze app te maken. Ook kijken we wat er daarbij op de achtergrond allemaal gebeurt.

In aflevering 3 komen Core Data, het model en de viewcontroller bij elkaar: we bouwen de functionaliteit (in zowel het model als de viewcontroller) om notities te kunnen toevoegen en tonen.

In aflevering 4 leer je hoe je gegevens kunt wijzigen en verwijderen. Niet alleen zie hoe je dit in Core Data doet, ook leer je hoe je tabellen kunt maken waarin je, door te ‘swipen’, snel rijen kunt wijzigen of verwijderen.

Aflevering 5 demonstreert hoe je met Core Data naar informatie kunt zoeken. We breiden de app uit met de mogelijkheid om informatie te ‘filteren’, zodat alleen notities worden getoond waarin bijvoorbeeld een bepaald woord voorkomt.

Aan de slag!

De app die we in deze Core Data tutorial bouwen, bestaat uit één viewcontroller. Kies, in Xcode, FileNew Project en kies het iOS Single View Application-template:

Kies een template voor je project

Druk op Next. Geef je app een naam, bijvoorbeeld Notities. Belangrijk: kruis het vakje Use Core Data aan.

Vergeet het vakje Core Data niet aan te kruisen

Het prototype

Om te zorgen dat we snel de gebruikersinterface van de app kunnen testen, zetten we een prototype op: een werkende app met ‘dummy’-data:

  1. We ontwerpen het uiterlijk in het Storyboard.
  2. Natuurlijk gebruiken we het MVC-principe: we scheiden het model van onze app van de gebruikersinterface. Dit model omvat een verzameling notities: objecten met de class Notitie. Straks worden deze door Core Data beheerd, maar in eerste instantie maken we zelf een eenvoudige Notitie-class om het prototype te kunnen testen.
  3. We schrijven de programmacode om een tabel te kunnen vullen met (dummy) informatie uit het model.

Meer over het Model View Controller-principe lees je in dit artikel.

Stap 1: Het Storyboard

Onze app werkt met één viewcontroller. Maak het ontwerp uit de volgende afbeelding na, in het Storyboard:

Het Storyboard van de app die we in deze core data tutorial gaan maken

Dit ontwerp bevat drie views: een zoekbalk (bovenin), een toolbar (onderin) en een tableView (tussen de zoekbalk en de toolbar).

De Zoekbalk

Zet bovenaan in de viewcontroller een Search Bar-object en ‘pin’ de zoekbalk hem vast aan de Top Layout Guide, de linker- en de rechterrand. Geef aan dat de Zoekbalk een Cancel-button moet krijgen:

Attributen van de zoekbalk (een UISearchBar)

Geef de zoekbalk een delegate, de ViewController, door vanaf de zoekbalk te Control-slepen naar het viewcontroller-icoon:

Een UISearchBar heeft een delegate nodig

Laat de muisknop los. Er verschijnt een popup; klik op de delegate-optie. Vanaf nu is de ViewController de delegate van de zoekbalk – hoewel we het protocol nog moeten implementeren natuurlijk.

De toolbar

Sleep een toolbar vanuit de Object Library naar de view, zet hem onderin en pin hem vast, aan de Bottom Layout Guide, de linker- en de rechterrand. De toolbar bevat al een button: verander die in een System Item: ‘Add’:

Een Bar Button item wijzigen

Je kunt de button eventueel rechts neerzetten door een Flexible Space uit de Object Library te slepen en er vóór te zetten, net als in de volgende afbeelding is gedaan:

Met een flexible space kun je een bar button item positioneren

De tableView

Sleep een tableView uit de Object Library naar de viewcontroller en geef hem alle ruimte die nog beschikbaar is tussen de zoekbalk en de toolbar. Pin de tableView vast aan de onderkant van de zoekbalk, de bovenkant van de toolbar en de linker- en rechterrand.

Sleep een tableViewCell vanuit de Object Library naar de tableView. Kies bij style voor Subtitle. Geef hem ook een reuse identifier, cell.

Attributen van een table view cell

Geef de tableView een dataSource en delegate door, op soortgelijke manier als je bij de zoekbalk hebt gedaan, van de tableView naar het viewcontroller-icoon te Control-slepen en de opties dataSource en delegate te kiezen.

Outlets en actions

Maak, met behulp van de assistent editor, twee @IBOutlet-properties voor de zoekbalk (.searchBar) en de tableView (.tableView):

De IBOutlets voor de app in deze core data tutorial

Maak, eveneens met de assistent editor, een @IBAction voor het ‘Add’-button bar item: .maakItem().

De IBAction voor de toolbar-button

Stap 2: Het model

We zijn klaar met het Storyboard. Vanaf nu werken we alleen nog maar met code. De eerste versie van het model bestaat uit twee classes: Notitie, waarin we een notitie kunnen bewaren, en Model: het ‘brein’ van onze app waarin alle notities worden beheerd.

Straks laten we de Notitie-class over aan Core Data. Om echter zo snel mogelijk ons prototype te kunnen testen, maken we een tijdelijke Notitie-class.

De Notitie-class

Deze class wordt straks door Core Data beheerd (en automatisch gemaakt), maar in dit prototype maken we hem zelf. Elke Notitie die we maken, bevat ‘dummy’-data: de tekst Notitie en de datum waarop de Notitie is gemaakt.

Maak een Swift-bestand met de naam Notitie.swift en geef het de volgende inhoud:

De Model-class

Nu we een Notitie kunnen maken, ontwerpen we het model waarin we de Notitie-objecten kunnen beheren. Het Model levert in eerste instantie dummy-data: vijf notities.

Maak een Swift-bestand met de naam Model.swift en geef het de volgende inhoud:

Om telkens met hetzelfde model te werken, gebruiken we een singleton: een statische variabele, Model.shared die altijd naar dezelfde instantie van een Model wijst.

Ons model bevat nu de twee properties die we nodig hebben om dummy-data te kunnen tonen: .count (het aantal notities) en .notitie(op:), een methode die een complete (dummy) notitie teruggeeft.

Stap 3: de tableView vullen

Om informatie door de tabel te laten tonen, implementeren we het UITableViewDataSource-protocol. Wijzig de definitie in ViewController.swift:

Schrijf nu de twee noodzakelijke protocol-methodes: tableView(_:numberOfRowsInSection:) en tableView(_:cellForRowAt:).

Test je app

Zodra je de app start, zie je dat het Model zijn werk doet en (dummy) informatie levert, die door de ViewController in de tabel wordt gezet:

Het prototype: core data wordt nog niet gebruikt, maar we kunnen de app op gebruiksvriendelijkheid testen

Dankzij de Auto Layout-constraints ziet de app er ook in landschapsmodus goed uit:

De app in landschapsmodus

Tot slot

We hebben de basis gelegd voor onze Core Data Tutorial! Het prototype van onze app is nu klaar. We hebben een Storyboard, met daarop een viewcontroller en een model. Nu kunnen we echt met Core Data aan de slag en dat is precies wat we in de volgende aflevering gaan doen. Je bouwt het Data Model van de app en maakt kennis met typische Core Data-begrippen als entiteit en attribuut. Ook zie je wat Xcode op de achtergrond allemaal voor je doet, zodat je gemakkelijker met Core Data kunt werken.

Klik hier om de Xcode-bestanden van dit artikel te downloaden.

In één dag Core Data leren?

In deze nieuwe LIVE Clinic over Core Data leer je in één dag hoe je zelf Core Data in je apps kunt gebruiken. Gewoon thuis, vanachter je Mac!

Meer informatie