Xcode: zelf een app maken voor je iPhone

Xcode is de app waarmee je… apps maakt voor iPhone, iPad, MacOS, Apple Watch en Apple TV.

Xcode kun je gratis downloaden uit de Mac App Store.

Xcode is een buitengewoon uitgebreide programmeeromgeving. Hoewel de ontwikkelaars er alles aan doen om Xcode zo gebruiksvriendelijk en intuïtief mogelijk te maken, zul je waarschijnlijk wat tijd nodig hebben om vertrouwd te raken met de diverse onderdelen van de Xcode gebruikersinterface. De leukste manier om dit te doen, is door tegelijkertijd je eerste app te bouwen. En dat is precies wat we in dit artikel gaan doen.

Het eerste wat je ziet als je Xcode start, is het welkomstvenster.

Als je eenmaal begonnen bent met het bouwen van apps, bevat het gedeelte aan de rechterkant (waar nu No Recent Projects staat) een overzicht van de apps waaraan je recent hebt gewerkt.

Links in het venster zie je drie mogelijkheden. Omdat we in deze kennismaking onze eerste app gaan bouwen, kies je de tweede optie: Create a new Xcode project. Elke app die je ooit maakt, begint zijn leven als Xcode-project. Zo’n project is niets anders dan een verzameling bestanden; elk van die bestanden speelt, zoals je later in dit artikel nog zult zien, zijn eigen rol.

 

Bovenaan in het venster dat nu verschijnt, kun je kiezen uit vijf categorieën: iOS, watchOS, tvOS, macOS en Cross-platform. Met Xcode kun je apps bouwen voor de vier platformen van Apple, vandaar de eerste vier categorieën.

In dit artikel bouwen we een iOS app; klik (net als in de afbeelding) bovenaan op de eerste optie: iOS. In het hoofdgedeelte van het venster zie je twee categorieën: Application en Framework & Library. In dit boek werken we bijna altijd met de eerste categorie, Application, waarin je een reeks templates (sjablonen) ziet staan.

Elk van de templates bestaat uit een aantal basisbestanden voor de meest voorkomende typen apps. Kies, net als in de vorige afbeelding is gedaan, voor Single View Application. Dit template bevat alle bestanden die nodig zijn voor de eenvoudige app die we gaan bouwen.

Heb je op Single View Application geklikt? Dan is het tijd voor de volgende stap: klik op Next.

In dit venster kiezen we een paar belangrijke opties voor onze eerste app:

• Product Name: De naam van onze eerste App. Typ hier DemoApp
• Team: Heb je in Xcode je Apple ID opgegeven? Zo ja dan kun je hier je eigen naam opgeven: in je eentje vorm je al een ‘team’ van App-ontwikkelaars, zoals je ziet. Je kunt dit veld echter ook leeglaten; voor de demonstratie in dit artikel is het verder niet nodig.
• Organization Name: Heb je een bedrijf? Typ hier dan de naam van je bedrijf. Je kunt dit veld ook leeglaten.
• Organization Identifier: Heb je een eigen domeinnaam? Typ die dan hier achterstevoren in. Heb je geen domeinnaam? Typ dan iets willekeurigs, bijvoorbeeld nl.je-achternaam. Je moet hier iets invullen; de inhoud van de velden Product Name en Organization Identifier worden namelijk gebruikt om een unieke identificatiecode voor je app te maken: de zogenaamde Bundle Identifier.
• Language: Hier kun je kiezen uit Swift en Objective-C. In dit voorbeeld gebruiken we, uiteraard, Swift.
• Devices: Met deze optie kun je aangeven of je een app wilt bouwen die specifiek voor de iPhone of de iPad is bestemd, of dat je voor een universele app kiest: een app die op beide devices is afgestemd. Kies in dit voorbeeld voor iPhone.

Laat de overige velden ongewijzigd. Laat ook de aankruisvakjes leeg; het resultaat zou moeten lijken op het volgende venster.

Klik nu op Next. Xcode vraagt je nu waar de bestanden voor je eerste app moeten worden opgeslagen. Je kunt elke plek kiezen die je wilt, maar mijn advies is om, in je thuismap, een aparte map (bijvoorbeeld met de naam Apps) aan te maken waarin je al je projecten kunt bewaren.

Onderaan in het venster zie je een Source Control-optie. Source Control wordt gebruikt om tussentijds ‘opnames’ te maken van een project in ontwikkeling, zodat je bijvoorbeeld kunt ‘terugspoelen’ naar eerdere versies van je project, nieuwe functionaliteit kunt toevoegen zonder dat je daarbij de ‘live’-versie van je project verstoort enzovoort.

Als je ervaring hebt met het Source Control-systeem Git, kun je het vakje aankruisen. Als je nog nooit eerder met Source Control hebt gewerkt, laat het vakje dan gerust leeg. In dit boek laten we Source Control verder buiten beschouwing.

Nadat je op Create hebt geklikt, zal Xcode alle bij onze app behorende bestanden, op basis van het template dat we zojuist hebben gekozen, bewaren. Zodra dit is gebeurd, verschijnt het werkvenster van Xcode. Laat je niet afschrikken door de enorme hoeveelheid informatie in dit venster!

Het werkvenster van Xcode

Hoe gecompliceerd het werkvenster van Xcode ook lijkt; het wordt allemaal al een stuk eenvoudiger als je bedenkt dat dit werkvenster uit vijf onderdelen bestaat.

• Bovenaan zie je de werkbalk.
• In het middelste gedeelte zie je, van links naar rechts:
  • De Navigator
  • De Editor
  • De Utilities
• Onderin zie je, mits ingeschakeld, het Debug-gedeelte.

De werkbalk

De werkbalk (toolbar) beslaat het bovenste gedeelte van het werkvenster. Deze werkbalk bevat een aantal onderdelen.

Links zie je knoppen om de app te starten en te stoppen.

Daarnaast zie je de naam van de target: datgene dat Xcode gaat bouwen; in ons geval is dat dus DemoApp. Daarnaast staat vermeld voor welk device onze app zal worden gebouwd: in dit artikel is dat dus een iPhone SE.

Xcode beschikt over een Simulator waarmee je apps kunt testen zonder dat je over een iPhone of iPad beschikt. De ‘iPhone SE’ die in de afbeelding hierboven wordt getoond, is een Simulator-versie, wat je kunt herkennen aan het Xcode-symbool. Je kunt een app echter ook op je eigen iPhone of iPad zetten, zodat je deze goed kunt testen.

Hoewel iedereen met Xcode apps kan ontwikkelen, kun je die apps niet zomaar in de App Store zetten. Daarvoor dien je je bij Apple te registreren als ontwikkelaar (Developer). Tegen betaling van €99 per jaar heb je dan de mogelijkheid om apps door anderen te laten testen en om ze, na goedkeuring van Apple, in de App Store te plaatsen.

In het midden van de werkbalk staat een paneel met informatie over de status van onze app. Aan de rechterkant van dit paneel is plaats voor statustekst, bijvoorbeeld als Xcode problemen heeft gevonden. Wanneer Xcode bijvoorbeeld een fout heeft ontdekt, wordt dat hier aangegeven.

De Navigator

De Navigator, die links in het werkvenster wordt getoond, helpt je in eerste instantie om te navigeren door de diverse bestanden die bij je programma horen. Je zult hem echter ook gebruiken om op een snelle manier fouten op te sporen en om te zoeken naar bepaalde onderdelen van je app.

De Navigator beschikt over een eigen knoppenbalk, die je bovenaan ziet. Met deze knoppenbalk kun je snel schakelen tussen de diverse navigatiemogelijkheden. Elke knop heeft z’n eigen toetscombinatie: van ⌘1 tot en met ⌘8. In dit artikel gebruiken we alleen de eerste knop: ⌘1 brengt je naar het overzicht van alle bestanden die bij onze app horen.

De editor

De editor gebruik je om onderdelen van je app aan te passen. Dat kunnen schermonderdelen (zoals knoppen, labels enzovoort) zijn, maar ook programmacode.

Xcode beschikt over drie soorten editors. De eerste gebruik je voornamelijk bij het schrijven van programmacode en bij het bouwen van de schermen van je app. Met de tweede kun je op een handige manier koppelingen maken tussen zichtbare onderdelen van je app (knoppen, labels enzovoort) en je programmacode. De derde editor gebruik je om verschillende versies van je programmacode met elkaar te kunnen vergelijken.

Om een ander soort Editor in te schakelen, gebruik je de Editor-knoppen rechts bovenaan op de Werkbalk van Xcode.

1.1.4 De Utilities

Rechts op het scherm, naast de Editor, zie je het Utilities-paneel. Wat er bovenaan in dit paneel wordt getoond, is context-afhankelijk: het hangt nauw samen met datgene wat je, bijvoorbeeld in de Navigator of in de Editor, hebt geselecteerd. In latere stappen komen we hier nog uitgebreid op terug.

1.1.5 Het Debug-gedeelte

Onderaan in het werkvenster wordt, in sommige gevallen, het Debug-gedeelte getoond. Het Debug-gedeelte komt van pas als je bezig bent om de fouten uit je App te halen. Uiteraard gaan we hiermee later nog aan de slag.

We starten onze eerste app

Nu we kennis hebben gemaakt met het werkvenster van Xcode, is het tijd geworden om onze eerste app te starten. Xcode heeft immers al, op basis van het sjabloon dat we aan het begin van deze stap hebben gekozen, een kant-en-klare app gemaakt. Veel doet deze app nog niet, maar we kunnen hem al starten en stoppen. En dat is precies wat we nu gaan doen.

Zorg dat als target de iPhone SE-Simulator is geselecteerd:

Klik, in de werkbalk van Xcode, op de Play-knop. Je kunt ook Product → Run kiezen of op ⌘R drukken.

Achter elkaar gebeuren nu de volgende dingen:

Stap 1

Xcode bouwt een uitvoerbare versie van onze app.

Stap 2

Xcode kopieert onze app naar de Simulator, een bij Xcode behorend programma, waarmee Apple-devices zoals iPhone, iPad, AppleTV en Apple Watch kunnen worden nagebootst.

Stap 3

De Simulator wordt gestart. Als je Xcode voor de eerste keer gebruikt, kan het zijn dat je toestemming moet geven om dit te doen.

Stap 4

De Simulator start onze app.

Bevat jouw Simulator-scherm scrollbalken omdat niet alles past, of wil je de grootte ervan veranderen? Kies dan, in de Simulator, één van de opties uit het menu Window → Scale, bijvoorbeeld 50%.

Inderdaad: een wit scherm is alles wat je op dit ogenblik ziet. Maar Xcode heeft wel degelijk een app gebouwd. Dat kun je zien als je, uit het Hardware-menu van de iOS Simulator, de optie Home kiest (je kunt ook op ⇧⌘H drukken).

Onze App is keurig zichtbaar op het tweede Home-scherm van de Simulator, met de naam die we in de vorige stap hebben gegeven: DemoApp.

Wil je meer weten over Xcode? Dan kun je terecht op de website van de iOS Academie: www.iosacademie.nl. Of… bekijk de video’s van de iOS Academie op youTube.