Mobiele apps omzetten in webapps met Flutter - ACA Group

MetFlutter is het mogelijk om applicaties te maken die soepel draaien op meerdere platformen met behulp van een enkele codebase. Dit betekent dat in theorie alle mobiele applicaties die met Flutter gebouwd zijn ook als web- of desktopapplicaties kunnen functioneren.

Dit klinkt te mooi om waar te zijn. Dus besloten we zelf de proef op de som te nemen met onze eigen applicatie die al in productie is, deImmovlan app. Met deze vastgoedapplicatie kunnen gebruikers hun eigendommen te koop of te huur aanbieden.

Uitdagingen overwinnen met Flutter

Onze reis begon met het integreren van de nodige webmap in onze mobiele app. Deze stap verliep vlekkeloos en we gingen verder met het testen van de app op het web om gebieden te identificeren die moesten worden aangepast voor webspecifieke vereisten.

Als eerste was er onze integratie met Firebase Crashlytics, die momenteel geen webplatforms ondersteunt. Om dit aan te pakken hebben we voorwaardelijke controles toegevoegd om te voorkomen dat Crashlytics wordt geïnitialiseerd en events worden verzonden bij het bouwen voor het web. Een andere oplossing zou kunnen zijn om op zoek te gaan naar een goed alternatief voor Firebase Crashlytics dat wel webplatformen ondersteunt.

Vervolgens werden we geconfronteerd met uitdagingen bij het instellen van onze gebruikerstracering voor advertenties. We gebruiken Didomi als onze toestemmingsbeheerder, maar helaas is deze niet compatibel met Flutter Web.* Volgens een vergelijkbare aanpak als Firebase Crashlytics, hebben we controles geïmplementeerd om het uit te schakelen als het op het web draait.
Met deze wijzigingen konden we de applicatie op het web draaien. Er waren echter nog een paar dingen die we moesten aanpassen.

* Opmerking: De bestaande Flutter SDK biedt op dit moment geen webondersteuning. Didomi biedt echter een aparte web SDK(https://developers.didomi.io/cmp/web-sdk). De integratie van deze web SDK maakte geen deel uit van ons initiële testplan.

De laatste obstakels om de Flutter mobiele app op het web te laten draaien

We kregen te maken met Cross-Origin Resource Sharing (CORS) problemen omdat de API in eerste instantie was ontworpen voor mobiel gebruik. Omdat CORS op het web anders wordt beheerd, schakelden we over van de HTML renderer naar CanvasKit. De CORS-problemen kunnen eenvoudig worden opgelost door de juiste headers in de antwoorden op te nemen, maar voor dit project hadden we de backend niet in handen.

Nadat we de API-uitdagingen hadden aangepakt, stuitten we op een ander obstakel met de locatiegebaseerde kaartzoekopdrachten van onze app. Ons bestaande kaartenpakket, dat afhankelijk was van standaardkaarten (Apple Maps voor iOS en Google Maps voor Android), werd niet ondersteund. Dit kleine probleem konden we eenvoudig oplossen door het zelf toe te voegen.

Na deze aanpassingen was onze mobiele app succesvol operationeel op het web.

Van mobiele app naar webplatform: geleerde lessen en toekomstige overwegingen

We hebben binnen een kort tijdsbestek met succes een nieuw webplatform gelanceerd door een paar aanpassingen te maken aan de codebasis van een mobiele app. Dit proces zou normaal gesproken veel meer tijd kosten als het afzonderlijk zou worden uitgevoerd.

Als je een webapp kunt maken door dezelfde bedrijfslogica te hergebruiken die in de mobiele app is gebruikt, kun je de implementatiekosten aanzienlijk verlagen. Bovendien maakt het een uniform klanttraject op alle platforms mogelijk. Ook het oplossen van bugs kan op alle platforms tegelijk worden gedaan, wat tijd en moeite bespaart.

Deze aanpak brengt echter ook een aantal nieuwe uitdagingen met zich mee:

• Terwijl de functionaliteit van de app consistent bleef op zowel mobiele als webplatforms, was de gebruikersinterface (UI) niet geoptimaliseerd voor het web, wat leidde tot een enigszins onsamenhangende gebruikerservaring. Het is noodzakelijk om prioriteit te geven aan verdere UI-optimalisaties voor het web om naadloze gebruikersinteracties op elk platform te garanderen. Door platformbewuste componenten te implementeren, kunnen we eenvoudig de verschillen tussen mobiele en webinterfaces opvangen zonder de onderliggende bedrijfslogica aan te tasten. Deze componenten passen zich op intelligente wijze aan op basis van het platform waarop ze draaien, waardoor de technische schuld wordt geminimaliseerd en tegelijkertijd een gepolijste gebruikerservaring op alle apparaten wordt gegarandeerd.
  
  
• Het is noodzakelijk om functies achter de schermen zoals Firebase Crashlytics of Didomi aan te passen zodat ze compatibel zijn met het web. Deze uitdagingen kunnen eenvoudig worden aangepakt door naar alternatieven te zoeken en bindingen te leveren voor de native bibliotheken.
  
  
• SEO (Search Engine Optimization) wordt nog niet ondersteund door Flutter. Terwijl Flutter de nadruk legt op dynamische applicatie-ervaringen, ook op het web, kan de focus op prestaties en consistentie niet volledig overeenkomen met de behoeften van zoekmachine-indexering. Dit kan beperkingen opleveren voor de zichtbaarheid en vindbaarheid op het web. Het is echter mogelijk om webtechnologie en Flutter te combineren. Je landingspagina, die SEO vereist, kan gebaseerd zijn op webtechnologie, terwijl de rest, die geen SEO vereist, Flutter-gebaseerd kan zijn.

Moet je Flutter overwegen voor het web?

Het antwoord hangt af van het specifieke doel van je webapplicatie. Als u een landingspagina, marketing website of content site ontwikkelt die geoptimaliseerd moet worden voor zoekmachine indexering, raden we aan om alternatieve benaderingen te verkennen in plaats van Flutter Web te gebruiken.

Als het echter je doel is om een webapplicatie te maken die ontworpen is voor geauthenticeerde gebruikersinteracties, zoals een bank-app of dashboard voor energieverbruik, en die niet geïndexeerd hoeft te worden door zoekmachines, dan kan Flutter een uitstekende keuze zijn. Met Flutter kun je een naadloze gebruikerservaring leveren op verschillende platformen, waardoor het een aanrader is voor dit soort applicaties.