Von der PWA in den App Store: eine Flutter-App mit builder77 veröffentlichen

Eine App auf das Smartphone anderer Leute zu bringen, hieß früher: eine Plattform wählen, ihre Toolchain lernen und auf eine Review-Warteschlange warten, bevor überhaupt jemand die App ausprobieren konnte. builder77 teilt diesen Weg in zwei Etappen: Veröffentliche heute eine PWA, damit echte Menschen sie nutzen können, und wechsle zu nativem Flutter, wenn du bereit für App Store und Google Play bist.

Etappe 1: eine PWA, die deine Nutzer sofort installieren können

Wenn du auf builder77 eine Mobile App baust, ist sie von Anfang an als Smartphone-App gestaltet: Layout in voller Höhe, Tab-Navigation unten, große Touch-Flächen und Safe-Area-Abstände für Displays mit Notch. Beim Veröffentlichen bekommt sie ein Web-App-Manifest und einen Service Worker – dadurch wird sie installierbar.

• Drück auf Veröffentlichen und scanne den QR-Code mit deinem Smartphone.
• Tippe auf dem iPhone auf Teilen → Zum Home-Bildschirm. Auf Android nutzt du die Installationsaufforderung oder das Browsermenü.
• Die App öffnet sich im Vollbild mit eigenem Icon, genau wie eine native App.

Das ist der schnellste Weg zu Feedback. Du kannst noch heute Nachmittag einen Link mit zehn Testern teilen, beobachten, wie sie die App nutzen, und sie im Builder weiter verbessern – jedes Veröffentlichen aktualisiert die App sofort für alle, ganz ohne Store-Review.

Etappe 2: Umwandlung in Flutter

Wenn die App gut in Form ist, öffne den Tab Flutter und wandle sie um. Das kostet 3 Nachrichten-Credits. builder77 erzeugt ein Flutter-Projekt – eine pubspec.yaml und lib/main.dart – mit denselben Screens, Funktionen und demselben visuellen Auftritt wie deine Web-App, geschrieben mit Material 3.

Das Entscheidende: Die Flutter-App spricht über die REST-API von builder77 mit derselben Cloud-Datenbank und nutzt dieselben Collection- und Feldnamen. Daten, die in der PWA angelegt werden, erscheinen in der nativen App und umgekehrt, und die Nutzer deiner App können sich in beiden Versionen anmelden.

// 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

Ausprobieren, bevor du herunterlädst

Du kannst die Flutter-Version ausführen, ohne etwas zu installieren. Im Tab „Flutter“ gibt es dafür zwei Möglichkeiten:

• DartPad – öffne den generierten Code für einen schnellen Blick in DartPad.
• Cloud-Build (ab dem Plus-Tarif) – builder77 führt auf unseren Servern ein echtes flutter build web aus und zeigt die kompilierte App direkt im Builder. Das ist die originalgetreueste Vorschau dessen, was die native App tun wird.

Wenn der Cloud-Build einen Fehler meldet oder etwas seltsam aussieht, bitte im Chat um eine Korrektur und wandle erneut um. Da die Web-App die maßgebliche Quelle ist, bringst du am besten zuerst die Web-Version in Ordnung und erzeugst danach das Flutter-Projekt neu.

Projekt herunterladen und öffnen

Ab dem Starter-Tarif kannst du das Flutter-Projekt herunterladen. Ab da ist es ein ganz normaler Flutter-Workflow:

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

In den Stores veröffentlichen

Die Einreichung in den Stores läuft weiterhin über die Tools von Apple und Google, unter deinen eigenen Entwicklerkonten. Die allgemeine Checkliste sieht so aus:

• Lege eine eindeutige Bundle-ID / Application-ID und den Namen deiner App fest.
• Füge für beide Plattformen App-Icons und einen Startbildschirm hinzu.
• Richte die Signierung ein: ein Distributionszertifikat und ein Provisioning-Profil unter iOS, einen Upload-Keystore unter Android.
• Erstelle Release-Builds mit flutter build ipa und flutter build appbundle.
• Bereite die Store-Einträge vor: Screenshots, Beschreibung, Datenschutzangaben und eine Support-URL.
• Reiche die App in App Store Connect und in der Google Play Console zur Prüfung ein.

Store-Prüfer schauen beim Datenschutz genau hin. Wenn deine App einen Login hat und persönliche Daten speichert, brauchst du eine URL zu einer Datenschutzerklärung – du kannst builder77 bitten, deiner Web-App eine Datenschutzseite hinzuzufügen, und darauf verlinken.

Behalte die PWA

Native Apps zu veröffentlichen heißt nicht, die Web-Version in Rente zu schicken. Die PWA arbeitet weiter mit denselben Daten, sodass Menschen deine App im Browser, am Desktop oder schon vor der Installation aus dem Store nutzen können. Ein Produkt, zwei Eingangstüren, ein Backend.

Unser Rat: Validiere mit der PWA, wandle um, wenn Nutzer danach fragen, und betrachte die Store-Version als die ausgefeilte Ausgabe von etwas, das die Leute schon lieben.