Een afval app recyclen, hoe doe je dat?

Een app voor de inwoners van negen gemeenten recyclen. Het is mogelijk! In deze blog duiken we de diepte in. Wij nemen jou mee in de technische aspecten die kwamen kijken bij de ontwikkeling van een unieke app in het framework Flutter. Enige kennis en ervaring voor het lezen van deze blog is dan ook vereist! Is het verhaal iets te technisch, klik dan door naar de uitwerking van de case.

Wil je eerst meer weten over het framework Flutter, voordat je technisch de diepte induikt? Lees dan de eerste twee blogs van deze vierluik:

1. Welkom in de wereld van Flutter
2. Flutter: de voordelen, de uitdagingen en de toekomst

Een korte introductie

Circulus is een duurzaam dienstenbedrijf. Zij verzorgen het afvalbeheer en taken in de openbare ruimte voor negen gemeenten: Apeldoorn, Bronckhorst, Brummen, Deventer, Doesburg, Epe, Lochem, Voorst en Zutphen. Een goede en duidelijke communicatie met de inwoners van deze negen gemeenten is hierbij van essentieel belang. Online communiceert Circulus via haar website en een mobiele app. Hier vinden de inwoners van de negen gemeenten zaken zoals de afvalkalender, informatie over milieupleinen, regelgeving en de mogelijkheid tot het direct online regelen van zaken zoals het ophalen van afval op afroep of het aanvragen of omruilen van afvalcontainers.

Recent hebben wij, naast de uitgebreide website en procesmatige hulpmiddelen, de app voor Circulus volledig opnieuw ontwikkelt. Dit hebben wij gedaan met behulp van het Flutter framework. Hieronder gaan we in op vijf aandachtsgebieden die kwamen kijken tijdens het ontwikkelen van de app.

1. Resources
2. Pushberichten
3. Locaties
4. Kalender
5. Multi backend

Tijdens het ontwikkelen van de app lag de focus met name op het verbeteren van de werking van pushberichten (herinneringen op je telefoon wanneer een container aangeboden dient te worden) en het snel en gemakkelijk kunnen aanvragen van diensten zoals ledigingen op afroep en het wisselen van containers. De app staat sinds eind februari 2022 online en is met ruim 75.000 gebruikers en een review score van 4,6 een succes!

Resources met duidelijke documentatie

Flutter biedt een solide basis als framework om mobiele apps in te ontwikkelen. Een zeer waardevolle toevoeging hierop is de voor ons belangrijke resource pub.dev. Hier vind je een groot aantal packages die gemakkelijk te importeren en te gebruiken zijn bij ieder Flutter project. Een package is een onderdeel dat je kunt importeren in je app en een bepaalde functionaliteit toevoegt aan je app. Dat kan de integratie zijn met een database formaat (Sembast), het gebruik van device specifieke mogelijkheden (geolocatie/ geolocator), pushberichten (Firebase) of iets dat je helpt met bijvoorbeeld state management (Riverpod). Sommige packages worden aangeboden door Google zelf en een groot deel van de packages wordt beschikbaar gesteld door derde partijen. De meeste packages gaan gepaard met duidelijke documentatie en zijn open-source. Een groot voordeel, aangezien dit het heel eenvoudig maakt om bij te dragen aan de ontwikkeling van apps of om lokale aanpassingen uit te voeren. Het spreekt voor zich dat wij tijdens het ontwikkelen van de nieuwe app voor Circulus zeker gebruik hebben gemaakt van packages!

Optimaliseren pushberichten

De pushberichten van de Circulus app wilden wij betrouwbaar en op een gelijke wijze naar zowel Android als iOS devices kunnen versturen, zodat er geen onderscheid is in de code. Hiervoor is door ons Google Firebase gebruikt, aangezien dit goed is te integreren in Flutter en ook goed gedocumenteerd is (zie bijvoorbeeld de client setup documentatie). Er lag wel een mooie en belangrijke uitdaging voor ons: we wilden zeker weten dat de berichten altijd door een device ontvangen en verwerkt zouden worden. De app voor Circulus ontwikkelden wij met Flutter tegelijk voor zowel Android als iOS. Hierdoor dienden we met in totaal zes statussen (3 per device) waarin een app kan verkeren rekening te houden in plaats van drie:

1. actief en op de voorgrond
2. actief maar op de achtergrond
3. niet actief

Er zijn ook verschillen waar we rekening mee dienden te houden, tussen hoe Android en iOS omgaan met verschillende pushberichten (afhankelijk van of ze data bevatten of niet) en in welke context de app de berichten binnen krijgt. Voor iOS is uiteindelijk een achtergrondproces in Swift geschreven, die de bericht data wegschrijft in een bestand. Op deze manier missen wij geen enkel bericht in de app zelf. Wanneer de app niet actief of actief op de achtergrond is, zorgt het OS voor de weergave van de melding. Wanneer de app echter actief op de voorgrond is, zorgt de app zelf voor deze weergave met behulp van de package Flutter_local_notifications.

2.500 locaties op een kaart

Nog een belangrijk onderdeel van de app is de weergave van publieke afvalcontainers op een kaart. Met zo’n 2.500 locaties over het werkgebied van Circulus is het tonen / tekenen van iconen voor al deze containers op een kaartweergave een onderdeel waarin we goed moesten letten op de performance. Goed testen was dus van essentieel belang. Dit zowel op jonge als oudere / minder capabele devices om ervoor te zorgen dat de gebruikerservaring optimaal zou blijven. Een belangrijke strategie hierin is het clusteren van iconen wanneer de kaart uitgezoomd is en het niet tonen / renderen van iconen die niet binnen de viewport van de kaart vallen. Met een aantal van dit soort verbeteringen bleek performance op oudere devices met Flutter geen enkel probleem te zijn.

Kalender in eigen look & feel

Wat wil je als gebruiker van een afval-app als eerste zien? Dat zijn uiteraard de ophaalmomenten van je containers en ander afval. De weergave van de afvalkalender is geheel in de stijl van Circulus, met haar eigen iconen en content. De data wordt per maand uit onze backend geladen en lokaal gecached, zodat de weergave snel genoeg is om prettig in gebruik te zijn. Flutter voorziet ons hierbij in de mogelijkheid om met een goede api eigen vormen en lijnen te tekenen waar we maar willen. Hierdoor is de gewenste look & feel te realiseren. De gebruikte afbeeldingen / iconen zijn zo veel mogelijk in SVG formaat. Zo zorgen we ervoor dat de kwaliteit op ieder schermformaat zo optimaal mogelijk is.

Overzicht door multi backend

Circulus maakt gebruik van het Afval-RIS systeem voor het vastleggen en aanbieden van haar diensten, routes, aanvragen, et cetera. Daarnaast beheert JDI voor Circulus zowel haar website als de omgeving waarin alle inwoners van de negen gemeenten online gebruik kan maken voor de diensten van Circulus. Hierdoor zijn er meerdere achterliggende bronnen van informatie die in de mobiele app samenkomen en waar wij rekening mee dienen te houden. Om de verantwoordingen van de backend en app beter gescheiden te houden, hebben we een backend ontwikkeld die de informatie uit deze bronnen centraal samenbrengt en serveert aan de app. Voor sommige onderdelen, zoals het aanvragen van diensten, was het echter niet mogelijk binnen de beoogde tijd om het hele proces in een nieuw systeem vast te leggen. Resultaat is dus dat de app tegelijkertijd communiceert met meerdere backends voor verschillende onderdelen, middels een tussenlaag die later makkelijk aangepast of vervangen kan worden.

Verdere ontwikkeling

Natuurlijk staat de ontwikkeling van een app nooit stil, technologieën worden uitgebreid en verbeterd (zoals Android en iOS en staat Flutter ook nooit stil). Na gebruik ontstaan er ook nieuwe additionele wensen en inzichten. Zo hebben we in de start van ontwikkeling van de app veel gebruik gemaakt van Provider voor het state management van de app, maar sindsdien zijn we Riverpod meer gaan gebruiken. Dit geeft namelijk een meer consistente toegang tot je data en problemen, zelfs al tijdens het ontwikkelen / builden (met Provider kom je er soms in ‘runtime’ pas achter dat je context niet klopt). Met Flutter als framework zijn we zeker dat wat we ook aan wensen in de toekomst hebben, we altijd een passend antwoord te bieden hebben.

Deze showcase geeft slechts één voorbeeld van de uitdagingen en mogelijkheden van het bouwen van een mobiele app met het Flutter framework. Benieuwd naar wat er nog meer mogelijk is, of welke ervaringen wij hierin hebben? Houd onze nieuwsfeed in de gaten voor toekomstige artikelen over de vele andere apps die wij met Flutter hebben gerealiseerd!