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

3 jaar geleden /
Door Roelf /
1 COMMENT

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!

STAP 1: De eerste kennismaking met Xcode

Xcode is een buitengewoon uitgebreide programmeeromgeving. Hoewel de ontwikkelaars er alles aan doen om Xcode zo gebruiksvriendelijk en intuïtief mogelijk te maken, zal 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 deze Startersgids gaan doen.

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

Het welkomstvenster van Xcode

Als je eenmaal begonnen bent met het bouwen van apps, zal het gedeelte aan de rechterkant (waar nu No Recent Projects staat) een overzicht bevatten 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.

Bovenaan in het venster dat nu verschijnt (zie Afbeelding 1‑2), 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.

De template voor je Xcode app

In deze Startersgids bouwen we een iOS app; klik (net als in de afbeelding) bovenaan op de eerste optie: iOS.

Rechts in het venster zie je een reeks templates (sjablonen). In het hoofdgedeelte van het venster zie je twee categorieën: Application en Framework & Library. Kies voor de eerste optie in de eerste categorie, Single View Application. We willen een eenvoudige app maken; dit template bevat alle bestanden die daarvoor nodig zijn.

Heb je op Single View Application geklikt? Dan is het tijd voor de volgende stap: klik nu op Next, waarna het venster uit de volgende afbeelding verschijnt.

De opties voor je nieuwe app in Xcode

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 deze Startersgids 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 twee programmeertalen: Swift en Objective-C. In dit voorbeeld gebruiken we Swift: de nieuwe programmeertaal van Apple.
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; het resultaat zou moeten lijken op dat uit de volgende afbeelding.

Xcode heeft nu alle informatie en kan onze app maken

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.

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! In de volgende stap laten we Xcode onze app maken en bekijken we het werkvenster in meer detail.

De Xcode editor