Hoe je een iOS-app maakt op Windows

09-03-2023

Sinds deze week staat de officiële iOS-app voor Locomocheap in de App Store. Zo kun je op je iPhone heel makkelijk op zoek naar deals voor je volgende treinvakantie. De app heb ik gemaakt op Windows.

Eerst dacht ik: dat kan vast niet. Na een beetje zoeken: dat kan heel makkelijk. De conclusie: het is puzzelen, maar uiteindelijk kan dat heel goed! Het kan, maar het is wel wat gedoe. In deze blogpost leg ik uit welke tools en handigheden erbij kwamen kijken, mocht je hetzelfde overwegen.

Capacitor, Ionic en Angular
De Locomocheap-app is gemaakt met Ionic (en Capacitor van Ionic) in combinatie met Angular. Je programmeert dus een webapplicatie. Het voordeel is dat je één applicatie maakt, die kun je omzetten naar zowel een iOS-app als een Android-app. Het programmeert ook makkelijk, omdat je tijdens het ontwikkelen de app gewoon in je internetbrowser bekijkt. Wat je in de browser ziet, is wat je uiteindelijk ook op de smartphone zult zien.

Ionic maakt de smartphone-ervaring wel beter. Want dankzij Ionic kun je in de applicatie native elementen en APIs gebruiken. Die native elementen geven je app een fijnere gebruikerservaring. Denk bijvoorbeeld aan een alert, zoals op het plaatje hieronder. En met de APIs kun je bijvoorbeeld een melding tonen zodra het internet op de telefoon wegvalt.

Het bleek heel laagdrempelig om zo de applicatie op te zetten. Als het eenmaal werkt op je computer, wil je dus de Android- en iOS-versies maken. Het liefst op een manier zodat het niet heel duur wordt. Ik heb bijvoorbeeld geen Macbook… Daar begint de puzzel.

Visual Studio App Center en Github
Allereerst ga je de applicaties bouwen. Een Android-app kun je bouwen op Windows, maar een iOS-app niet. Gelukkig zijn er clouddiensten die dat wel mogelijk maken. Microsoft biedt Visual Studio App Center aan. Het gratis account biedt 240 minuten per maand om apps te bouwen. Je koppelt App Center aan Github (ook van Microsoft) om vandaaruit het Ionic-project uit te lezen. Kortom: vanaf je computer commit je code naar Github. App Center herkent je commit, en start een build. Alleen: wat moet Appcenter precies bouwen?

Een beetje hulp van ChatGPT
In zowel je iOS- als Android-project moet je een appcenter-post-clone.sh-bestand maken. Hierin leg je de bouwstappen voor MS Appcenter uit, zoals het installeren van NPM en Ionic, zodat deze ook in je cloudomgeving beschikbaar zijn. Dit zijn de stappen die Appcenter uitvoert nadat er een nieuwe commit heeft plaatsgevonden.

Hier had ik zelf even ChatGTP nodig, omdat de bestaande handleidingen online bij mij geen werkend resultaat gaven. Maar door de foutmeldingen aan ChatGPT voor te leggen kwam er een antwoord, en konden de apps worden gebouwd. Het is de ideale tool om in een tabblad open te hebben, zodat je snel inspiratie voor mogelijke oplossingen krijgt.

Kern van het probleem was dat de cachemappen van Appcenter niet goed werkten, en npm moest vertellen om een andere map voor caching te gebruiken.

Ook moet je ios-project van Capacitor een XCode Schema hebben. Die kun je vanuit XCode heel makkelijk genereren. Maar dus niet als je geen XCode hebt. Ik heb dit ook in ChatGPT gevraagd, maar dat bleek een brug te verder. Gelukkig heeft iemand op Github zo'n schema staan, die voor een basale applicatie 1:1 over te nemen is. Alleen even in de juiste map plaatsen.

Certificaten verkrijgen dankzij OpenSSL
Om uiteindelijk beide apps te kunnen bouwen heb je allerlei certificaten nodig. Die kun je gelukkig allemaal op Windows genereren, met de keytool van Java (voor Android) en de tools die bij OpenSSL ingebouwd zitten (voor iOS).

Het begint met een Certificate Signing Request (.csr). Hier moet je opletten dat je een .csr op basis van een .key-bestand maakt, omdat dat .key-bestand nodig is in Appcenter. Dit zijn twee commando’s in OpenSSL. Het .csr upload je naar Apple, en dan krijg je een .cer-certificaat terug. Appcenter vereist echter een p12-certificaat.

Via OpenSSL kun je het .cer-bestand omzetten naar een .pem-bestand en samen met je eerder gemaakte .key-bestand kun je die weer omzetten met OpenSSL naar een p12-certificaat. Het p12- en key-bestand voeg je toe in Appcenter.

De app testen dankzij Diawi
Uiteindelijk slaagt het bouwen van de apps dan in Appcenter. Voor iOS betekent het dat je een .zip-bestand met een .ipa-bestand daarin kunt downloaden. Dat is je app! Die wilde ik natuurlijk graag even bekijken op mijn iPad. Alleen.. je kunt niet zomaar dat bestand op je iPad zetten en ‘t openen. Dat werkt niet.

Apple timmert hun systeem natuurlijk goed dicht, vooral om het veilig te houden. Wat wel werkt? Op je iPad moet je de ontwikkelaarsmodus inschakelen, vervolgens upload je het .ipa-bestand op diawi.com. Je krijgt dan een link, die open je op je iPad en via daar kun je dan de app wél installeren. Geen idee wat diawi.com doet, maar het werkt.

Publiceren vanaf een Mac in de cloud
Na het testen moet de app natuurlijk in de App Store komen te staan. Vanuit Appcenter kun je een app direct publiceren in de App Store. Alleen op dit punt aangekomen schrijven de kleine lettertjes dat je dat niet kunt doen voor de eerste release van je app. De eerste versie moet je altijd uploaden via App Store Connect van Apple. En App Store Connect vereist altijd een app die alleen voor de Mac bestaat: of XCode of Transporter.

Dat brengt me bij de laatste tool die je nodig hebt om je app te kunnen publiceren: Mac In Cloud. Voor een paar tientjes kun je hiermee een Mac Mini in de cloud huren. Via Extern Bureaublad in Windows kan je inloggen op die Mac, kun je de Transporter-app openen en je .ipa-bestand uploaden naar Apple.

Je betaalt hier ongeveer 25 euro voor, en dan heb je in een maand tijd 5 dagen de beschikking over je eigen Mac in de cloud. Ideaal voor dit doeleinde, want uiteindelijk gebruik je ‘m maar 10 minuten. Alleen even de app uploaden.

Microsoft maakt het mogelijk
Al met al heb je heel wat tools nodig. Heb je alles eenmaal uitgevogeld, dan is het niet eens zo moeilijk om nog eens een app te maken. Of een nieuwe versie van je app uit te brengen. Als alles is ingericht hoef je alleen maar aan je webapplicatie te werken. Dat is niet heel ingewikkeld.

De conclusie is dat het juist dankzij Microsoft goed te doen is om een iOS-app te maken als je Windows gebruikt. Want zij maken Visual Studio Code, zij maken Github én ze maken MS Appcenter. En als je geen enorm grote gebruiker bent zoals ik, dan kun je ‘t allemaal gratis gebruiken. Helemaal top!