Van PWA naar App Store: een Flutter-app uitbrengen met builder77

Een app op iemands telefoon krijgen betekende vroeger: een platform kiezen, de bijbehorende tools leren en in een reviewwachtrij staan voordat iemand de app kon proberen. builder77 splitst die reis op in twee fasen: breng vandaag een PWA uit zodat echte mensen hem kunnen gebruiken, en stap over op native Flutter als je klaar bent voor de App Store en Google Play.

Fase 1: een PWA die je gebruikers nu meteen kunnen installeren

Als je op builder77 een mobiele app bouwt, is die vanaf het begin ontworpen als telefoonapp: layout over de volle hoogte, tabnavigatie onderaan, grote aanraakvlakken en safe-area-marges voor schermen met een notch. Bij het publiceren krijgt hij een web app manifest en een service worker, waardoor hij installeerbaar wordt.

• Druk op Publiceren en scan de QR-code met je telefoon.
• Tik op een iPhone op Deel → Zet op beginscherm. Gebruik op Android de installatiemelding of het browsermenu.
• De app opent schermvullend met een eigen pictogram, net als een native app.

Dit is de snelste manier om feedback te krijgen. Je kunt vanmiddag nog een link delen met tien testers, kijken hoe ze de app gebruiken en hem in de builder blijven verbeteren — elke publicatie werkt de app direct voor iedereen bij, zonder storereview.

Fase 2: omzetten naar Flutter

Is de app in goede vorm, open dan het tabblad Flutter en zet hem om. Dat kost 3 berichtcredits. builder77 genereert een Flutter-project — een pubspec.yaml en lib/main.dart — met dezelfde schermen, functies en visuele identiteit als je webapp, geschreven met Material 3.

Het belangrijkste: de Flutter-app praat via de REST API van builder77 met dezelfde clouddatabase en gebruikt dezelfde collectie- en veldnamen. Data die in de PWA wordt aangemaakt, verschijnt in de native app en andersom, en de gebruikers van je app kunnen in allebei inloggen.

// Generated at the top of lib/main.dart
const String kApiBase = 'https://builder77.com';
const String kProjectId = 'your-project-id';

// Example call made by the generated M77Client
// GET $kApiBase/api/runtime/$kProjectId/db/habits?sort=-createdAt

Probeer het voordat je downloadt

Je kunt de Flutter-versie draaien zonder iets te installeren. Het tabblad Flutter biedt twee opties:

• DartPad — open de gegenereerde code in DartPad voor een snelle blik.
• Cloudbuild (vanaf het Plus-abonnement) — builder77 voert een echte flutter build web uit op onze servers en toont de gecompileerde app direct in de builder. Dat is de meest getrouwe preview van wat de native app zal doen.

Meldt de cloudbuild een fout of ziet iets er vreemd uit, vraag dan in de chat om een fix en zet de app opnieuw om. Omdat de webapp de bron van waarheid is, kun je meestal het best eerst de webversie goed krijgen en daarna het Flutter-project opnieuw genereren.

Download en open het project

Vanaf Starter kun je het Flutter-project downloaden. Daarna is het een standaard Flutter-workflow:

flutter create .          # adds the ios/ and android/ platform folders
flutter pub get
flutter run               # on a simulator or a connected device

Publiceren in de stores

Het indienen bij de stores gebeurt nog steeds in de tools van Apple en Google, onder je eigen ontwikkelaarsaccounts. De algemene checklist ziet er zo uit:

• Stel een unieke bundle ID / application ID en de naam van je app in.
• Voeg app-iconen en een opstartscherm toe voor beide platforms.
• Stel ondertekening in: een distributiecertificaat en provisioning profile op iOS, een upload-keystore op Android.
• Bouw releasebestanden met flutter build ipa en flutter build appbundle.
• Bereid de storevermeldingen voor: screenshots, beschrijving, privacygegevens en een support-URL.
• Dien de app in voor review in App Store Connect en Google Play Console.

Storereviewers kijken goed naar privacy. Heeft je app inloggen en slaat hij persoonlijke gegevens op, dan heb je een URL naar een privacybeleid nodig — je kunt builder77 vragen een privacypagina aan je webapp toe te voegen en daarnaar linken.

Houd de PWA

Native uitbrengen betekent niet dat de webversie met pensioen moet. De PWA blijft werken op dezelfde data, zodat mensen je app kunnen gebruiken in een browser, op een desktop of voordat ze hem uit de store hebben geïnstalleerd. Eén product, twee voordeuren, één backend.

Ons advies: valideer met de PWA, zet om als gebruikers erom vragen, en zie de storeversie als de verfijnde editie van iets waar mensen al dol op zijn.