Fra PWA til App Store: lancér en Flutter-app med builder77

At få en app over på nogens telefon betød tidligere, at man skulle vælge en platform, lære dens værktøjer og vente i en godkendelseskø, før nogen kunne prøve den. builder77 deler rejsen op i to trin: Udgiv en PWA i dag, så rigtige mennesker kan bruge den, og gå over til native Flutter, når du er klar til App Store og Google Play.

Trin 1: en PWA, dine brugere kan installere med det samme

Når du bygger en mobilapp på builder77, er den designet som en telefonapp fra starten: layout i fuld højde, fanenavigation i bunden, store berøringsflader og safe area-margener til skærme med notch. Når du udgiver den, får den et webapp-manifest og en service worker, som gør den installérbar.

• Tryk på Udgiv, og scan QR-koden med din telefon.
• På iPhone skal du trykke på Del → Føj til hjemmeskærm. På Android bruger du installationsprompten eller browserens menu.
• Appen åbner i fuld skærm med sit eget ikon, præcis som en native app.

Det er den hurtigste måde at få feedback på. Du kan dele et link med ti testere i eftermiddag, se hvordan de bruger den, og fortsætte med at forbedre den i builderen — hver udgivelse opdaterer appen for alle med det samme, uden godkendelse i en butik.

Trin 2: konvertér til Flutter

Når appen er i god form, åbner du fanen Flutter og konverterer den. Det koster 3 beskedkreditter. builder77 genererer et Flutter-projekt — en pubspec.yaml og lib/main.dart — med de samme skærme, funktioner og visuelle identitet som din webapp, skrevet med Material 3.

Det vigtige: Flutter-appen taler med den samme clouddatabase via builder77's REST API og bruger de samme samlings- og feltnavne. Data oprettet i PWA'en dukker op i den native app og omvendt, og dine appbrugere kan logge ind i begge.

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

Prøv den, før du downloader den

Du kan køre Flutter-versionen uden at installere noget. Der er to muligheder på fanen Flutter:

• DartPad — åbn den genererede kode i DartPad for et hurtigt kig.
• Cloud-build (Plus-planen og op) — builder77 kører en rigtig flutter build web på vores servere og viser den kompilerede app direkte i builderen. Det er den mest tro forhåndsvisning af, hvad den native app vil gøre.

Hvis cloud-buildet melder en fejl, eller noget ser forkert ud, så bed om en rettelse i chatten, og konvertér igen. Da webappen er sandhedskilden, er det som regel bedst at få webversionen på plads først og derefter generere Flutter-projektet igen.

Download og åbn projektet

Fra Starter og op kan du downloade Flutter-projektet. Derfra er det et almindeligt Flutter-workflow:

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

Udgivelse i butikkerne

Indsendelse til butikkerne foregår stadig i Apples og Googles værktøjer under dine egne udviklerkonti. Den generelle tjekliste ser sådan ud:

• Angiv et unikt bundle ID / application ID og navnet på din app.
• Tilføj appikoner og en startskærm til begge platforme.
• Konfigurér signering: et distributionscertifikat og en provisioning profile på iOS, et upload-keystore på Android.
• Byg release-binærfiler med flutter build ipa og flutter build appbundle.
• Forbered butikssiderne: skærmbilleder, beskrivelse, privatlivsoplysninger og en support-URL.
• Indsend til gennemgang i App Store Connect og Google Play Console.

Når butikkerne gennemgår din app, ser de nøje på privatliv. Hvis din app har login og gemmer personlige data, skal du bruge en URL til en privatlivspolitik — du kan bede builder77 om at tilføje en privatlivsside til din webapp og linke til den.

Behold PWA'en

At lancere native betyder ikke, at webversionen skal pensioneres. PWA'en fortsætter med at virke på de samme data, så folk kan bruge din app i en browser, på en computer eller før de har installeret den fra butikken. Ét produkt, to hoveddøre, én backend.

Vores råd: Validér med PWA'en, konvertér når brugerne beder om det, og betragt butiksversionen som den polerede udgave af noget, folk allerede elsker.