Serie: Een iOS-app maken met Xcode in vijf stappen: Stap 2

Xcode: je werkplek om apps te maken

In deze serie van vijf artikelen leer je, met de gratis Xcode-app voor je Mac, zelf een app maken voor je iPhone. Je maakt niet alleen kennis met Xcode; ook een aantal aspecten van App-ontwerp komt aan de orde.

Een advies: werk deze artikelen in de juiste volgorde door en sla niets over. Na afloop heb je uitgebreid kennisgemaakt met Xcode en heb je je eerste app gebouwd!

Het eerste artikel uit deze serie, Stap 1, vind je hier.

Ik ben in 5 stappen een app aan het maken! Klik om te Tweeten

In deze stap: het werkvenster van Xcode

In deze stap kijken we naar het werkvenster van Xcode. Hoe gecompliceerd dat venster ook lijkt; het wordt allemaal al een stuk eenvoudiger als je bedenkt dat het 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 de bovenste gedeelte van het werkvenster. Deze werkbalk bevat een aantal onderdelen.

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

De start- en stopknoppen van Xcode

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 onze afbeelding is dat dus een iPhone SE. In jouw versie van Xcode zou er ook een iPhone 7 Plus kunnen staan; je kunt dus kiezen.

Kies hier de target: voor welk device maak je je app?

Xcode beschikt over een Simulator waarmee je apps kunt testen zonder dat je over een iPhone of iPad beschikt. De ‘iPhone SE’ die in bovenstaande afbeelding werd genoemd, 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.

Zodra je je iPhone of iPad hebt aangesloten, verschijnt deze in de lijst met targets. In de volgende afbeelding zie je daarvan een voorbeeld: de iPhone die is aangesloten, wordt in de lijst getoond. Aan het symbool (vergelijk het met dat uit de vorige afbeelding is te zien dat het hier om een echte iPhone gaat en niet om een Simulator-versie. Zodra deze iPhone door Xcode is voorbereid (dat gebeurt automatisch nadat de iPhone is ontgrendeld), kun je er je eigen apps op installeren.

Met Xcode kun je apps maken die je op je eigen iPhone zet.

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 de voorbeelden uit deze Startersgids gebruiken we de Simulator, waarmee je je apps op dus je Mac kunt testen zonder dat je een echte iPhone of iPad gebruikt. Je kunt er uiteraard ook voor kiezen om in plaats daarvan een echte iPad of iPhone te gebruiken. In dit artikel lees je hoe dit moet.

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.

Het statuspaneel van Xcode

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 deze Startersgids gebruiken we alleen de eerste knop, voor het overzicht van alle bestanden die bij onze app horen.

Als je meer schermruimte nodig hebt, kun je de Navigator verbergen door, in het groepje dat je rechts in de werkbalk ziet staan, op de meest linkse van de drie knoppen te klikken.

Met deze knoppen toon of verberg je de panelen van Xcode

Je kunt de Navigator overigens ook verbergen door op de toetscombinatie ⌘0 te drukken.

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. Hieronder zie je een voorbeeld van de editor; wat hier wordt getoond, is afhankelijk van het onderdeel waarmee je bezig bent.

De editor van Xcode. Als je je app maakt, besteed je hier de meeste tijd!

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 soort andere Editor in te schakelen, gebruik je de Editor-knoppen rechts bovenaan op de Werkbalk van Xcode:

Schakel tussen de verschillende editor-modi van Xcode

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 de vierde en vijfde stap uit deze Startersgids komen we hier nog uitgebreid op terug.

In het Utilities-paneel van Xcode pas je instellingen aan

In het onderste gedeelte van het Utilities-paneel zie je de bibliotheek (Library), met daarin objecten die je aan je App kunt toevoegen: stukken programmacode, buttons, labels enzovoort.

Als je meer schermruimte nodig hebt, kun je de Utilities verbergen met de toetscombinatie ⌘⌥0.

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. In deze Startersgids laten we het verder buiten beschouwing.

Als je apps maakt, moet je debuggen. Dat doe je in dit paneel van Xcode

Als je het Debug-gedeelte wilt verbergen (of tonen), kan dat met de toetscombinatie ⌘⇧Y. (De Y wordt in het Engels als why uitgesproken: “Why isn’t my app working?”.)

De volgende stap

Klik hier voor Stap 3 uit deze serie: De iPhone Simulator.

Download de gratis Startersgids!

Dit artikel komt uit de gratis Startersgids van de iOS Academie.

Klik hier om de gratis Startersgids te downloaden.