Menu

5 september 2015

Swift: Hoe gebruik je de Playground?

swift-logo

Swift is een nieuwe, revolutionaire programmeertaal, waarmee je apps kunt maken voor je iPhone, iPad en Apple Watch. En omdat Swift binnenkort open source wordt, zul je de taal steeds vaker gaan tegenkomen, ook op andere platformen dan alleen Apple.

Op appletips gaan we uitgebreid aandacht aandacht geven aan Swift en laten we in samenwerking met iOS academie zien hoe je er zelf mee kunt werken. Wekelijks gaan we je hier op appletips wegwijs maken in de wereld van Swift, zodat je uiteindelijk zelf applicaties kunt maken.

Swift is laagdrempelig: het is een taal die gemakkelijk te leren is, ook als je nog nooit in je leven hebt geprogrammeerd. Tegelijkertijd biedt Swift alle mogelijkheden die nodig zijn om heel geavanceerde programma’s te kunnen maken.

Bij het ontwerpen van Swift heeft Apple voor drie uitgangspunten gekozen:

Modern: Swift is van de grond af aan opgebouwd en is gebaseerd op de nieuwste inzichten en technieken. Dat geldt niet alleen voor de programmeertaal zelf, maar ook voor de manier waarop je Swift-programma’s kunt bouwen en testen.

Veilig: Swift-programma’s bevatten niet of nauwelijks bugs die het gevolg zijn van ‘slordige’ programmacode.

Kracht: met heel weinig programmacode kun je heel veel bereiken.

Swift leren met Playgrounds

Om met Swift te kunnen werken, heb je een Mac nodig met daarop een recente versie van Xcode. Xcode is gratis te downloaden uit de Mac App Store.

Xcode
XcodeCategorie: Developer Tools
Ontwikkelaar: Apple Distribution International
Mac OS X  4+  4263 MB DOWNLOAD GRATIS

Xcode bevat alles wat je nodig hebt om met Swift te kunnen werken. Bovendien heeft Xcode een speciale mogelijkheid om snel Swift-programmacode te testen (en om Swift te leren): Playgrounds.

Een Playground (‘speeltuin’) is ideaal om met Swift te ‘spelen’ zonder dat je een app hoeft te bouwen. Swift-programmacode die je in een Playground schrijft, wordt meteen uitgevoerd. Een snellere manier om een programmeertaal te leren, bestaat niet!

Ook als je nog nooit eerder hebt geprogrammeerd, kun je met Swift en Playgrounds aan de slag. Sterker nog: je bent dan op sommige punten in het voordeel, omdat je geen dingen hoeft ‘af te leren’ die je wellicht bij andere programmeertalen bent tegengekomen.

Je eerste Playground

Voor een groot aantal voorbeelden uit deze reeks gebruiken we als basis een Playground. Vandaar dat het tijd wordt om je eigen Playground op te zetten, ga als volgt te werk:

Stap 1
Start Xcode, na enkele ogenblikken verschijnt het scherm uit de volgende afbeelding. Heb je Xcode al eens gebruikt? Wellicht zie je dan, net als in de afbeelding hieronder, rechts op het scherm één of meer projecten staan waar je al aan hebt gewerkt.

swift demo stap1

Stap 2
Klik op de eerste optie, Get started with a Playground.

Stap 3
Het scherm uit de volgende afbeelding verschijnt. Geef je Playground een naam, bijvoorbeeld Swift demo. Klik daarna op Next.

swift demo stap2

Stap 4
Xcode vraagt je waar je je nieuwe Playground wilt opslaan. Kies een map op je Mac en klik op Create.

Dat is alles! Na enkele ogenblikken verschijnt het scherm dat je hieronder ziet. Je hebt zojuist een Playground gemaakt waarop je met Swift kunt spelen en je eigen Swift-code kunt testen.

swift demo stap3

Je kunt ook een nieuwe Playground maken door, in Xcode, FileNewPlayground te kiezen. Je kunt zoveel Playgrounds maken als je wilt; elke Playground wordt als afzonderlijk bestand op je Mac bewaard. Je kunt een Playground op elk gewenst moment in Xcode openen door op de naam ervan te dubbelklikken.

Indeling Playground

Je Playground is in eerste instantie opgedeeld in drie kolommen.

In de eerste kolom zie je de cijfers één tot en met zes staan: dit zijn de regelnummers. (Tip: Zie je geen regelnummers? Kies dan XcodePreferences, klik op het Text Editing-icoon en kruis het vakje Line Numbers aan.)

In de middelste kolom (de grootste), met de witte achtergrondkleur, zie je de programmacode. In eerste instantie zijn dit de drie regels uit de afbeelding hieronder. Straks schrijf je hier je eigen programmacode.

//: Playground - noun: a place where people can play

import UIKit

var str = "Hello, playground"

In de derde, meest rechtste kolom (met de lichtgrijze achtergrondkleur, ook wel de resultaatbalk genoemd) zie je het resultaat van je programmacode. Je ziet dat op regel 5 de tekst “Hello, playground” wordt getoond; dit is het resultaat van de programmaregel ervóór, in de middelste kolom:

var str = "Hello, playground"

Maak je geen zorgen als je niet begrijpt wat deze drie regels precies doen; in deze serie leer je niet alleen wat deze regels betekenen, maar ook hoe je ze zelf kunt schrijven.

Er is nog een kolom: de timeline. Hierin wordt eventuele uitvoer van je Playground weergegeven. Om de timeline te tonen, kies je ViewAssistant EditorShow Assistant Editor of druk je op ++Enter

Een demonstratie: Swift demo

De volgende demo laat je zien wat je zoal met Playgrounds kunt doen: er zijn maar een paar regels programmacode nodig om leuke effecten te maken.

Maak je geen zorgen als je deze programmacode niet begrijpt: in een latere aflevering van deze serie wordt alles vanzelf duidelijk.

Allereerst: zorg dat je de timeline ziet; druk dus op ++Enter of kies ViewAssistant EditorShow Assistant Editor.

Vervang nu de programmacode in de middelste kolom door de volgende regels (of download deze kant-en-klare Playground):

import UIKit
import XCPlayground

var grootte: CGFloat = 200

let hoofdview = UIView(frame: CGRectMake(0.0, 0.0, grootte, grootte))

for kleur in [UIColor.redColor(), UIColor.orangeColor(), UIColor.blueColor(),
UIColor.greenColor(), UIColor.yellowColor(), UIColor.brownColor(),
UIColor.whiteColor(), UIColor.purpleColor()] {
  
  grootte = grootte - 20.0
  let eenView = UIView(frame: CGRectZero)
  eenView.backgroundColor = kleur
  eenView.center = hoofdview.center
  eenView.bounds.size = CGSizeMake(grootte, grootte)
  hoofdview.addSubview(eenView)
}

XCPlaygroundPage.currentPage.liveView = hoofdview

Swift demo

Krijg je dit resultaat niet te zien? Vergelijk je scherm dan even met de volgende afbeelding en kijk of je ergens iets verkeerd hebt getypt?

swift demo stap4

Nogmaals: maak je geen zorgen als je niet begrijpt hoe deze programmacode werkt. Hij is alleen bedoeld om je te laten zien wat je zoal met Playgrounds kunt doen. In de volgende aflevering uit deze serie waarin we met variabelen aan de slag gaan, leer je om zelf programmacode te schrijven.

De Playground downloaden

Lukt het nog niet helemaal? Dan kun je de Playground hier downloaden, hierin vind je alles terug wat we zojuist besproken hebben.

Aanbieding voor appletips-lezers

Wil je nog sneller apps leren maken voor de iPhone, iPad en Apple Watch? Als appletips-lezer krijg je tien euro korting op het populaire eBook van de iOS Academie: Apps bouwen met Swift. Klik hier voor meer informatie.

Wil je zelf apps ontwikkelen met Swift? Dat kan, op appletips maken we je wegwijs in de wereld van Swift, Klik hier voor alle posts, plus lesmateriaal.




Gerelateerde tips:




Reacties


  • Pieter 6 september 2015 om 12:12

    Leuk initiatief, Richard en Roelf! Ik ben benieuwd naar de vervolg-artikelen.

  • Joni 29 september 2015 om 10:02

    Dag Roelf, Dank voor de kleurdemo! Echter, zowel in mijn overgeschreven als in van jullie gedowloade playgroung komt dezelfde foutmelding voor, namelijk:

    “missing argument label ‘view’ in call bij achter deze regel:

    XCPShowView(“Demo”, hoofdview)

    “Demo” is roodgekleurd

    Dus ik zie geen leuke kleurenblokje nu…

    Oplossing? Alvast dank!

  • Roelf Sluman 29 september 2015 om 10:44

    Joni, goed dat je dit even laat weten! Deze playground is geschreven met Swift 1 en inmiddels is Swift 2 uitgebracht. Daarin zijn een paar dingen veranderd, waaronder… XCPShowView. Verander de regel als volgt en alles werkt weer:

    XCPShowView("Demo", view:hoofdview)

    We passen de tekst (en de te downloaden Playground) nog even aan!

Een reactie toevoegen: