Onder de motorkap: een avonturen-trackingapp bouwen
Heb je mijn vorige bericht nog niet gelezen? Neem dan eerst een kijkje in mijn vorige bericht voordat je hieraan begint. Daarin start de blogreeks en vertel ik een deel van het ontstaansverhaal van Pebbls.
De eerste versie van dat bericht was een stuk langer en ging in op technische details van het ontwikkelproces van de app. Geloof het of niet, er zijn mensen (zoals ik) die dat soort dingen interessant vinden. Een paar van mijn trouwe bètatesters adviseerden me echter dat het, ondanks een handige '*Can You Read Geek*'-schakelaar die het meeste technische gedeelte verborg, misschien toch wat te veel van het goede was als je niet zo in techniek zit 😲.
Wat je nu gaat lezen is een artikel over een deel van de technische ontwikkeling van de Pebbls-reistrackingapp. Heb je zin in techniekpraat, of kun je slecht slapen: lees vooral door. Anders mag je deze gerust overslaan. Dan zie ik je de volgende keer met tips om je voor te bereiden op je volgende avontuur.
Als je echt zeker weet dat je doorgaat, moet ik even checken of je het vorige bericht zeker gelezen hebt? Dan snap je de tijdlijn een stuk beter.
De ontwikkeling van de Pebbls-trackingapp
In dit stadium van het verhaal is het juli 2017. Nog maar een paar dagen voordat ik vertrek voor een fietsavontuur van 3 maanden door Frankrijk en Spanje, en een paar dagen minder voordat ik trouw.
Als zelfstandig webontwikkelaar (full-stack, autodidact) lag mijn achtergrond vooral in het ontwerpen en live zetten van webapplicaties met een database. Apps voor mobiel bouwen was een heel andere tak van sport. Met de tijd die wegtikte en een uitgebreide lijst met dingen die voor de reis moesten gebeuren (waaronder 'trouwen'), was er geen tijd om me bij te scholen.
In plaats daarvan knutselde ik een hybride oplossing in elkaar. Het was een soort Rube Goldberg-constructie: een app van een derde partij draaide op de achtergrond om de GPS-data van de route te verzamelen, en een eenvoudige interface in PHP en JavaScript diende om pebbls (de locatiepins) te maken en de gegevens online te synchroniseren. Die interface draaide op een webserver op mijn Android-telefoon.
De gebruikerservaring was verre van ideaal. Maar wat verwacht je van iets dat in een paar uur in elkaar is gezet? Omdat ik de enige was die met dat deel van dit geïmproviseerde systeem te maken had, vond ik de ruwe randjes niet erg. Het was wat houterig, maar het werkte.
Op dit punt zou ik je graag een paar ruwe screenshots van de route in de originele Pebbls-webinterface laten zien (houterig, niet responsive en zonder lazy loading), samen met een ingesloten kaart van die allereerste reis. Dit was tenslotte het begin van Pebbls, het moment waarop ons huwelijksreisavontuur werd vereeuwigd. Maar dat kan niet. De ironie is dat de data van die reis, de reis waarvoor Pebbls is gemaakt, na ontelbare versies en herschreven code niet meer door het systeem te lezen is. Erger nog, ze lijkt in het digitale niets verdwenen. Ik ben er vrij zeker van dat de data nog bestaat, ergens begraven tussen terabytes aan andere data op een onbekende back-up. Een project om als toekomstige ik naar uit te kijken.
In de jaren sindsdien ben ik een beetje geobsedeerd geraakt (meer dan 70 uur per week) door het laten groeien van Pebbls, van dat geïmproviseerde, nauwelijks werkende prototype tot een robuust platform om avonturenverhalen te delen, inspiratie op te doen en contact te maken. Het eerste waar ik me op richtte na mijn terugkeer uit Gibraltar (ik had je gewaarschuwd, je moet het vorige bericht gelezen hebben) was me inwerken in het ontwikkelen van mobiele apps.
Een framework voor mobiele apps kiezen
Gezien mijn achtergrond in webontwikkeling en het feit dat dit een solo-project is, zocht ik vooral een framework waarmee ik mijn bestaande kennis kon gebruiken. Het was ook belangrijk dat ik één codebase kon onderhouden voor zowel de iOS- als de Android-versie van de app. Ik bekeek een paar opties en koos eerst voor Cordova. Cordova leek een vrij overzichtelijke aanpak, en omdat het HTML, CSS en JavaScript gebruikt, spraken we grotendeels dezelfde taal. Destijds voelde dat als het meest vertrouwde beginpunt. Ik besteedde wat tijd aan het leren kennen van de ins en outs en gebruikte de 'universiteit van YouTube' om snel bij te komen. Na een paar weken had ik de eerste zelfstandige testversie van de Pebbls-trackingapp gemaakt. Als proof of concept was dat een enorme mijlpaal.
Hoewel de interface die ik met Cordova had gemaakt lelijk was, kon ik eindelijk beginnen met echte tests in de praktijk. Het duurde echter niet lang voordat ik doorhad dat dezelfde dingen die me aanvankelijk naar Cordova trokken, ook de achilleshiel waren. Cordova leek prima om een app van echte HTML/JavaScript te maken die in een container wordt verpakt en op mobiele apparaten wordt geplaatst, maar echte native functionaliteit was een ander verhaal. Het voelde onsamenhangend en beperkend, vooral voor functies die ik onmisbaar vond: locatie op de achtergrond, regelmatig taken op de achtergrond uitvoeren, werken met het bestandssysteem en meer. Ik weet de precieze problemen niet meer, maar ik besloot mijn verlies te nemen en opnieuw te beginnen. Ditzelfde proces doorliep ik met in totaal vier frameworks: Cordova, Flutter, Ionic en daarna React Native.
Het kiezen van het juiste framework werd een traag en frustrerend proces. In elk framework bouwde ik een soort prototype van een trackingapp. Dat kostte veel tijd (een paar maanden), maar het loonde uiteindelijk, want de keuze was heel makkelijk: de duidelijke winnaar was voor mij React Native (met Expo en EAS), en ik heb er geen spijt van gehad.
React Native viel me echt op, niet alleen als capabel modern framework, maar ook door de energie en de buzz eromheen. Er is een zeer actieve community van ontwikkelaars, beheerders en makers van modules, en de documentatie en tutorials zijn uitgebreid. Het stelde me gerust om te zien hoe toegewijd men is aan de verdere ontwikkeling van het platform, en hoe snel functies waar ik naar zocht werden gebouwd en uitgebracht. Ik werd niet teleurgesteld.
Hoe de Pebbls-trackingapp zich ontwikkelde
React Native en de beheerde workflow van Expo met EAS zijn als soloontwikkelaar een gamechanger geweest. Nu ik het onder de knie heb, ontwikkel en publiceer ik met veel minder gedoe. Overstappen van een systeem op basis van HTML en CSS, zoals Cordova, naar het React-framework was eigenlijk niet zo pijnlijk. Nog indrukwekkender is hoe de EAS-buildpijplijn moeiteloos lastige klussen als certificaten en het ondertekenen met sleutels afhandelt, dingen die anders uren kosten voor gewone stervelingen zoals ik, die dat niet dagelijks doen. Daarbovenop is een van de grootste voordelen voor mij hoe makkelijk ik bugs opspoor (met tools als Logrocket), fixes doorvoer en updates over the air uitrol naar gebruikers. Van bugmelding tot een fix op de apparaten van gebruikers kost me dat maar een paar minuten.
Testen, testen, testen
Het maken van software vraagt om een streng testprogramma. Hoe meer scenario's we doorlopen, hoe beter we een soepele gebruikerservaring kunnen garanderen en hoe kleiner de kans dat gebruikers in het wild op bugs stuiten. Simulators en tools om locaties na te bootsen hebben hun nut, maar er komt een moment dat je dapper moet zijn, de deur opendoet, naar buiten gaat, je lichaam eraan herinnert wat vitamine D is en gaat testen in de grote wijde wereld. Toen de eerste volledig werkende versie van de Pebbls-trackingapp bijna klaar was, had ik overal 2 of 3 apparaten bij me. Die volgden al mijn bewegingen en rapporteerden alles terug naar de Pebbls-server. Eenmaal thuis had ik een schatkist aan data om in te duiken. Dit was van onschatbare waarde om bugs op te sporen en weg te werken en om de prestaties te verbeteren.
De Pebbls-trackingapp testen onderweg
De volgende testfase was de app mee te nemen op nog een echt avontuur. Er waren al een paar bètatesters onderweg die precies dat deden, maar het was belangrijk dat ik het zelf ook deed, zodat ik de beste en de slechtste kanten van de app zelf meemaakte. Dus, na een coronavertraging (zie vorig bericht), deed ik precies dat. Lucy en ik fietsten 6 maanden door Europa en Turkije naar Georgië. We legden de hele route vast en stopten steeds weer, vaak op een berghelling of een ruige kust, om bugs te verhelpen en door te werken aan functies. Deze test in de praktijk was cruciaal: ik zag hoe de app zich gedroeg onder uiteenlopende GPS- en netwerkomstandigheden. Die ervaring werd een vast onderdeel van de ontwikkeling van de app en maakte hem robuuster en betrouwbaarder voor andere avonturiers.
Luisteren naar gebruikers en blijven verbeteren
Bij Pebbls gaat het niet alleen om het vastleggen van je reis, maar om echte verhalen vertellen en inspiratie opdoen. Het gaat om de community van avonturiers en reizigers die het platform gebruikt. Ik vraag gebruikers actief om feedback en opmerkingen over hun ervaring. Die inzichten en suggesties spelen een cruciale rol bij het vormgeven van de functies van de app. Veel verbeteringen die je nu in Pebbls vindt, kwamen voort uit suggesties van gebruikers: GPX- en Strava-ondersteuning, nieuwe pebbl-iconen, een betere gebruikersinterface of betere prestaties. Jouw feedback is de motor achter die voortdurende ontwikkeling. Ik breng regelmatig updates uit op basis van jullie suggesties, zodat Pebbls blijft meegroeien met de behoeften van avonturiers zoals jij.
Neem contact op
Klaar om de toekomst van Pebbls mee vorm te geven? Ik hoor graag van je. Deel je avonturen, ideeën en feedback via de contactpagina of hello@pebbls.com