Mobiele apps met Ionic – Zo gebouwd!
De wereld van mobiele apps is al jaren aan het veranderen. Bij de keuze voor een ontwikkelplatform worden telkens weer de volgende vragen gesteld. Wat is de doelgroep voor de app en voor welk OS dient de app te worden ontwikkeld? Web, hybride of native? Wat zijn de voor- en nadelen van de keuze voor het platform? Kan ik mee met de nieuwste ontwikkelingen en hoe zorg ik dat mijn app up-to-date blijft? In dit artikel ga ik jullie meenemen in de antwoorden, die Ionic hierbij kan bieden.
Auteur: Kevin Donkers. Kevin is Principal Consultant bij Ordina JTech en JSRoots.
Op elke vraag zoals hierboven gesteld is per app weer een voor- of tegenargument te bedenken. Dit maakt de keuze om een platform te kiezen erg lastig, want een migratie in een latere fase betekent in veel gevallen dat de app volledig herschreven dient te worden.
Daarnaast zijn er nog meer aspecten belangrijk bij deze keuze: wat is je huidige ontwikkelomgeving? Wat voor kennis is er al aanwezig in de huidige teams? Hoe ziet de community van het platform eruit? Wat is het budget? Deze laatste vraag is in veel gevallen erg belangrijk als er een keuze gemaakt dient te worden tussen native en hybride. De kosten van een hybride app zijn meestal aanzienlijk lager, omdat de core functionaliteit intact blijft en er enkel wijzigingen aan de visuele zijde hoeven te gebeuren, om de app voor elk OS er goed uit te laten zien. Dit verschil is echter verwaarloosbaar indien de app alleen voor iOS of Android hoeft te werken.
Ionic is een HTML5 deployment framework dat is gericht op het bouwen van hybride apps. In tegenstelling tot een responsive framework (Bootstrap, Foundation, etc), wordt Ionic geleverd met mobiele elementen in de stijl van de native components en lay-outs, die je zou krijgen met een native SDK op iOS of Android.
Omdat Ionic een HTML5 framework is, heeft het een native wrapper, zoals Cordova of PhoneGap, nodig om als native app te kunnen functioneren. Deze wrapper zorgt ervoor dat de HTML5 app kan draaien in de iOS’s UIWebView of de Android’s WebView.
Degenen die bekend zijn met web development zullen de structuur van een Ionic app eenvoudig oppakken. In de kern is het gewoon een webpagina, die wordt uitgevoerd in een native app-shell. Dit betekent dat HTML, CSS en Javascript gebruikt kan worden. Het enige verschil is dat we in plaats van een website een applicatie-ervaring bouwen.
Native apps zijn ontworpen voor een specifiek besturingssysteem en dit kan zowel iOS als Android zijn. Deze native apps zijn daarnaast ook gebouwd met de taal die hiervoor ontwikkeld is, zoals Swift, Kotlin, Objective-C of Java. Het gebruik van deze native code zal ervoor zorgen dat deze automatisch beter zal performen en geeft ook de native UI, zoals de guidelines van het desbetreffende OS voorschrijven. Door het gebruik van deze native UI voelen gebruikers zich vaak meer vertrouwd met de applicatie, omdat de rest van de mobiele interface op dezelfde manier zal aanvoelen.
Hybride apps zijn apps, die ontwikkeld zijn met behulp van een enkele codetaal voor meerdere platformen. Je kunt de apparaat-specifieke interacties bereiken met behulp van plug-ins, die zijn gemaakt voor het specifieke besturingssysteem. Het grootste voordeel van Hybride apps is dat hun ontwikkelingsproces veel minder tijd in beslag neemt. De keerzijde is wel dat performance optimalisaties lastiger zijn te verwezenlijken.
Progressive Web Apps (PWA) zijn geschreven in JavaScript / HTML5 en zijn niets anders dan websites, die ontwikkeld zijn om te reageren op mobiele gebruikers. Omdat veel apps ook als web-app beschikbaar zijn, is deze optie in de meeste gevallen het minste werk om te ontwikkelen. Dit komt doordat deze optie ook meteen klaar is om gereleased te worden als web-app.
Allereerst moeten we beginnen met de minimumvereisten voor het bouwen van een app met de huidige versie van Ionic. Ionic richt zich op iPhone- en Android-devices. Deze dienen minimaal iOS 7+ en Android 4.1+ te ondersteunen om de app op het platform te releasen. Je kunt Ionic apps ontwikkelen op elk besturingssysteem. De deployment voor iOS kan echter alleen gedaan worden op een OS X systeem.
Eerst gaan we de meest recente versie van Apache Cordova installeren. Hiermee kunnen we vervolgens de wrapping gaan doen naar een native app. Als je Cordova wilt installeren, moet Node.js zijn geïnstalleerd en kan onderstaand commando worden uitgevoerd:
npm install -g cordova ionic
Vervolgens gaan we een nieuwe app aanmaken door gebruik te maken van het Ionic package, die we zojuist hebben geïnstalleerd:
ionic start myfirstapp blank --type ionic1
Na het aanmaken van de app zal de volgende mappenstructuur worden aangemaakt:
├── bower.json // bower dependencies ├── config.xml // Cordova configuratie ├── gulpfile.js // gulp tasks ├── hooks // aangepaste Cordova hooks om uit te voeren ├── ionic.project // Ionic configuratie ├── package.json // node dependencies ├── platforms // iOS/Android specifieke builds zullen hier verblijven ├── plugins // waar de Cordova/Ionic plug-ins worden geïnstalleerd ├── scss // scss code, die zal worden gecompiled naar www/css/ └── www // applicatie - JS code and libs, CSS, images, etc.
Het is nu nog belangrijk om aan te geven aan Ionic voor welke platformen de build uiteindelijk gemaakt dienen te worden.
ionic cordova platform add ios // Toevoegen van iOS aan de build ionic cordova platform add android // Toevoegen van Android aan de build ionic serve // Het lanceren van de applicatie ionic cordova build ios // Builden van een iOS .iPA ionic cordova emulate ios // Emuleren op een iOS toestel
Nu de app is opgebouwd en lokaal draait, kunnen we de app gaan voorzien van de nodige lay-out. Aangezien elke Ionic-app in feite een webpagina is, moeten we een index.html-bestand in onze app hebben, dat de eerste pagina definieert, die in de app wordt geladen. Deze is bij het aanmaken van de app reeds aangemaakt, dus laten we deze dan verder gaan uitbreiden. We gaan aan deze pagina een menu toevoegen. Dit kan door onderstaande code toe te voegen tussen de <body>-tag in de bestaande index.html:
<ion-side-menus> <ion-side-menu-content> </ion-side-menu-content> <ion-side-menu side="left"> </ion-side-menu> </ion-side-menus>
In de bovenstaande code hebben we onze <ion-side-menus>-controller toegevoegd, die het slepen van het menu zal afhandelen. Binnenin de controller hebben we een <ion-side-menu-content>, waar de content van de app zal komen, en een <ion-side-menu side = “left”> waar de content van het menu zal komen.
Je zult nu zien dat de content van de pagina nu verder leeg is. Deze kunnen we vullen door hier wat componenten aan toe voegen:
<!-- Center content --> <ion-side-menu-content> <ion-header-bar class="bar-dark"> <h1 class="title">Todo</h1> </ion-header-bar> <ion-content> </ion-content> </ion-side-menu-content> <!-- Left menu --> <ion-side-menu side="left"> <ion-header-bar class="bar-dark"> <h1 class="title">Projects</h1> </ion-header-bar> </ion-side-menu>
Gefeliciteerd, je zult nu zien dat je eerste Ionic app een feit is. Deze draait nu in de browser, je kunt hem builden voor Android en/of iOS, en deployed hem meteen door naar de App Store of Play Store, zodra hij klaar is. Een goede oefening is nu om verder te gaan met het ontwikkelen van de app met verschillende routes en navigatiestructuren. Hiervoor kun je de componenten-documentatie van Ionic bekijken met daarbij goede visuele voorbeelden.
De afgelopen jaren zit de mobiele wereld in een sneltrein en worden telkens nieuwe frameworks uitgebracht met daarbij elk zijn voor- en nadelen. Ionic heeft daarbij een ontwikkeling doorgemaakt en heeft zich met de komst van nieuwe platformen staande weten te houden. Het blijft echter altijd een lastige afweging wat de beste keuze is voor jouw app. Het is belangrijk om altijd jouw belangen af te wegen, voordat je begint met de ontwikkeling. Kies je platform of voorzie wat je mogelijke platformen gaan worden.
