Workshop Swift (2): Maak zelf een app

Sander van der Heide

In het eerste artikel hebben we je laten zien hoe je aan de slag kunt met de programmeertaal Swift, de basis waarmee je een app kan maken die werkt onder iOS, tvOS, macOS en Watch OS. Oftewel, je kunt een app maken die werkt op een Apple Watch, Apple TV, iPhone, iPad of een Mac. We zullen ons dit keer beperken tot de iPhone, want je hebt het goed gelezen, we zijn op zoek naar een mooie mobiele app van onze nieuwe website www.pcactive.nl.

Responsive

Wees gerust, je hoeft niet de hele website om te bouwen en toonbaar te maken op een klein schermpje. De huidige website die nu online staat is namelijk responsive, wat inhoudt dat de website zich aanpast aan het apparaat en de resolutie en beeldverhouding van het scherm hiervan. Zoals je op de screenshots van de homepage kan zien, is de versie die je op de computer bekijkt meer gericht op de breedte, en liggen er meerdere kolommen en menu-items naast elkaar. De mobiele versie laat slechts één kolom zien en zit het menu rechtsboven onder een icoontje met drie streepjes verborgen

Kopiëren

Je zou de mobiele versie van de website eigenlijk rechtstreeks in een app kunnen overnemen, waarbij het app-icoontje meer als een bookmark dient, dan dat je daarachter een nieuwe app vindt. We zoeken dus iets meer dan dat, maar wat? Dat ligt aan jou. Als je de info van de website helemaal door elkaar wil gooien en op een nieuwe manier wil presenteren, prima. Als je de website wil aanvullen met data van andere sites, dat wordt al beter, maar let er dan wel op of je deze data mag gebruiken. Als je hier slim mee omgaat, kun je nog veel content vinden die vrij is om te gebruiken. Hier alvast wat ideetjes:

Google Trends (trends.google.com) en is per land te bekijken. Wil je meer artikelen tot je beschikking hebben, dan kun je bijvoorbeeld bij de New York Times terecht, met meer dan 100 jaar aan krantenartikelen op http://developer.nytimes.com. Maar denk ook eens aan beeld wat vrij is te gebruiken en met een leuke programmeerregel in de app is te gebruiken. Ik ben zelf erg enthousiast over een site als unsplash.com, maar met een beetje zoeken zul je vast ook wel foto’s ergens kunnen vinden die meer betrekking hebben op de rest van de website. Leuke screenshots bijvoorbeeld die elke dag iets anders laten zien. De meest relevante content kun je ook gewoon zelf op de site vinden. Soms is deze zo verborgen en kan het interessant zijn om bijvoorbeeld dagelijks een probleem uit de HCC!vraagbaak te pakken. Je vindt de links naar de forums en de vraagbaak op www.hcc.nl/vereniging/hulp.

Eerste opzet

Ik ga ervan uit dat je ondertussen de tools hebt geïnstalleerd die je nodig hebt om te programmeren met Swift en je app ook uit te proberen, namelijk Xcode. Mocht je dat nog niet gedaan hebben, dan kun je deze het makkelijkst vinden door op een Mac de App Store te openen en in het zoekveld “Xcode” in te voeren. Hij zal als eerste verschijnen. Na het installeren maken we alvast een begin voor je: als je Xcode opstart, krijg je als eerste dit welkomstscherm te zien:

Hier kun je kiezen voor het maken van een nieuw Xcode-project. Daarna kies je meteen de eerste mogelijkheid: een iOS Single View App.

Dat is ook precies wat is het is, een app met één pagina. Mocht je straks met meerdere pagina’s gaan werken, pak je de mogelijkheid daaronder. In het volgende scherm geef je het project een naam, waarna je het project kunt opslaan. Als dit je eerste project is, maak dan een Xcode-projectmap aan in Dropbox, GoogleDrive of iCloud. De bestanden zijn niet zo groot en je kunt er op deze manier ook makkelijk mee vanaf een andere computer verder aan werken. Na het opslaan zie je gelijk je project verschijnen. Kies links in het menu Main.storyboard. Dit is het hoofdscherm wat we gaan opvullen met de website. Rechtsonderin de filterzoekfunctie zoek je op “webview” en als deze verschijnt, sleep je die gewoon naar het hoofdscherm van de app en kun je precies bepalen hoe groot deze te zien moet zijn.

Ik vul hem helemaal op. Rechtsboven kies je nu de Assistent Editor om de code aan te passen. Je kunt de code overnemen die ik hieronder heb geplaatst. Dit zorgt ervoor dat de website ook daadwerkelijk verschijnt in het gedeelte wat je hebt aangegeven.

Nu is het een kwestie van openen in de simulator en testen. Je hebt nu een heel simpele app gebouwd.