De app deel 1: Een app maken valt best wel tegen

Een jodiBooks app maken, “doen we effe” dachten we (vooral Joep). Nou, dat valt toch best wel tegen. In plaats van vertellen dat we er toch wel echt mee bezig zijn, gaan we het gewoon laten zien!

tafel met kaartjes
Ieder kaartje is een scherm in de app.

Als je een app gaat maken, hoef je tegenwoordig niet meer alles zelf te bedenken en te maken. Er zijn zogenaamde frameworks met allerlei packages die je relatief makkelijk kunt hergebruiken. Je kunt het zien als het bouwen van een huis. Je hoeft zelf niet meer te bedenken hoe je een deur en bakstenen maakt. Die koop je gewoon ergens. Maar je moet wel bedenken waar je de deur wilt hebben en hoe je die deur in de muur vastzet (en wie er door die deur naar binnen mag).

We hadden van tevoren uitgebreid onderzoek gedaan naar welk framework voor ons het beste zou zijn. Gaan we Xamarin, React Native, Ionic of Flutter gebruiken? We kwamen er niet uit, dus hebben we een Pugh-matrix gemaakt. Daarin zet je alle voors en tegens op een rij en reken je uit welke optie de meeste punten krijgt. Het scheelde 4 punten, maar Xamarin was de winnaar.

pughmatrix
In een Pugh matrix vergelijk je verschillende opties zo objectief mogelijk.

Diana is enthousiast begonnen, maar na twee weken liep ze al helemaal vast en heeft ze gekeken of dat met React Native ook gebeurde. Met React maakte ze in een week al meer voortgang dan met Xamarin in twee, dus uiteindelijk hebben we toch voor React Native gekozen. Samen met Expo kun je daarmee heel makkelijk een Android en iOS app maken. Of dit uiteindelijk echt de beste keuze is, zullen we nooit weten.

Hoe dan ook, in React Native kun je gebruik maken van een package “React Navigation”. Dit package doet precies wat de naam al zegt: het regelt voor jou hoe de gebruiker door de app kan navigeren. Jij moet dan wel zeggen hoe je het wilt hebben. Wil je een drawer menu (vanuit de zijkant), of alleen knoppen onderaan het scherm? Wil je dat een gebruiker op “terug” kan drukken? Waar moet ieder scherm in de “stack” komen?

Joep zag door de bomen het bos niet meer en besloot het old-skool aan te pakken met pen en papier. Ieder scherm kreeg een eigen kaartje (zijn de oude visitekaartjes toch nog ergens goed voor) en zo konden we lijntjes trekken tussen alle “schermen” en ze fysiek op elkaar leggen. Het filmpje hieronder laat een demo van de navigatie zien.

jodiBooks Beauty app navigatie demo

Na veel stoeien met React Navigation kunnen we door de app navigeren. Nu nog alle schermen mooi maken en nog een hoop dingen fixen

Geplaatst door jodiBooks op Maandag 9 september 2019

Leave a Reply