Fra PWA til App Store: lanser en Flutter-app med builder77

Å få en app inn på noens telefon betydde før at man måtte velge plattform, lære verktøyene og vente i en vurderingskø før noen kunne prøve den. builder77 deler reisen i to trinn: lanser en PWA i dag så ekte mennesker kan bruke den, og gå over til nativ Flutter når du er klar for App Store og Google Play.

Trinn 1: en PWA brukerne dine kan installere med en gang

Når du bygger en mobilapp i builder77, er den designet som en telefonapp fra start: layout i full høyde, fanenavigasjon nederst, store berøringsflater og marg for trygt område på skjermer med hakk. Når du publiserer den, får den et nettappmanifest og en service worker, som gjør den installerbar.

• Trykk på Publiser og skann QR-koden med telefonen.
• På iPhone trykker du på Del → Legg til på Hjem-skjermen. På Android bruker du installeringsforespørselen eller nettlesermenyen.
• Appen åpnes i fullskjerm med sitt eget ikon, akkurat som en nativ app.

Dette er den raskeste måten å få tilbakemeldinger på. Du kan dele en lenke med ti testere i ettermiddag, se hvordan de bruker den og fortsette å forbedre den i byggeren — hver publisering oppdaterer appen for alle umiddelbart, uten butikkvurdering.

Trinn 2: konverter til Flutter

Når appen er i god form, åpner du Flutter-fanen og konverterer den. Dette koster 3 meldingskreditter. builder77 genererer et Flutter-prosjekt — en pubspec.yaml og lib/main.dart — med de samme skjermene, funksjonene og den visuelle identiteten som nettappen din, skrevet med Material 3.

Det viktige: Flutter-appen snakker med den samme skydatabasen via builder77s REST API og bruker de samme samlings- og feltnavnene. Data som opprettes i PWA-en, dukker opp i den native appen og omvendt, og appbrukerne dine kan logge inn 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 før du laster ned

Du kan kjøre Flutter-versjonen uten å installere noe. Det finnes to alternativer i Flutter-fanen:

• DartPad — åpne den genererte koden i DartPad for en rask titt.
• Skybygg (Plus-planen og oppover) — builder77 kjører en ekte flutter build web på våre servere og viser den kompilerte appen rett i byggeren. Det er den mest trofaste forhåndsvisningen av hva den native appen vil gjøre.

Hvis skybygget melder en feil eller noe ser rart ut, be om en fiks i chatten og konverter på nytt. Siden nettappen er sannhetskilden, er det som regel best å få nettversjonen riktig først og deretter generere Flutter-prosjektet på nytt.

Last ned og åpne prosjektet

Fra Starter og oppover kan du laste ned Flutter-prosjektet. Derfra er det en vanlig Flutter-arbeidsflyt:

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

Publisering i butikkene

Innsending til butikkene skjer fortsatt i verktøyene til Apple og Google, under dine egne utviklerkontoer. Den generelle sjekklisten ser slik ut:

• Angi en unik bundle ID / application ID og navnet på appen.
• Legg til appikoner og en oppstartsskjerm for begge plattformene.
• Konfigurer signering: et distribusjonssertifikat og en provisjoneringsprofil på iOS, et upload keystore på Android.
• Bygg release-binærfiler med flutter build ipa og flutter build appbundle.
• Klargjør butikksidene: skjermbilder, beskrivelse, personverninformasjon og en support-URL.
• Send inn til vurdering i App Store Connect og Google Play Console.

Butikkenes vurderere ser nøye på personvern. Hvis appen din har innlogging og lagrer personopplysninger, trenger du en URL til en personvernerklæring — du kan be builder77 legge til en personvernside i nettappen din og lenke til den.

Behold PWA-en

Å lansere nativt betyr ikke at nettversjonen må pensjoneres. PWA-en fortsetter å fungere på de samme dataene, så folk kan bruke appen din i en nettleser, på en datamaskin eller før de har installert den fra butikken. Ett produkt, to inngangsdører, én backend.

Vårt råd: valider med PWA-en, konverter når brukerne ber om det, og se på butikkversjonen som den polerte utgaven av noe folk allerede elsker.