Från PWA till App Store: lansera en Flutter-app med builder77

Att få in en app i någons telefon brukade innebära att välja plattform, lära sig dess verktyg och vänta i en granskningskö innan någon kunde testa den. builder77 delar upp resan i två steg: lansera en PWA i dag så att riktiga människor kan använda den, och gå över till inbyggd Flutter när du är redo för App Store och Google Play.

Steg 1: en PWA som dina användare kan installera direkt

När du bygger en mobilapp i builder77 är den designad som en telefonapp från början: layout i full höjd, fliknavigering längst ner, stora tryckytor och marginaler för säkert område på skärmar med notch. När du publicerar den får den ett webbappsmanifest och en service worker, vilket gör den installerbar.

• Tryck på Publicera och skanna QR-koden med telefonen.
• På iPhone trycker du på Dela → Lägg till på hemskärmen. På Android använder du installationsprompten eller webbläsarens meny.
• Appen öppnas i helskärm med en egen ikon, precis som en inbyggd app.

Det här är det snabbaste sättet att få feedback. Du kan dela en länk med tio testare i eftermiddag, se hur de använder den och fortsätta förbättra den i byggverktyget – varje publicering uppdaterar appen för alla direkt, utan butiksgranskning.

Steg 2: konvertera till Flutter

När appen är i bra form öppnar du fliken Flutter och konverterar den. Det kostar 3 meddelandekrediter. builder77 genererar ett Flutter-projekt – en pubspec.yaml och lib/main.dart – med samma skärmar, funktioner och visuella identitet som din webbapp, skrivet med Material 3.

Det viktiga: Flutter-appen pratar med samma molndatabas via builder77:s REST API och använder samma namn på samlingar och fält. Data som skapas i PWA:n syns i den inbyggda appen och tvärtom, och dina appanvändare kan logga in i båda.

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

Testa innan du laddar ner

Du kan köra Flutter-versionen utan att installera något. Det finns två alternativ i fliken Flutter:

• DartPad – öppna den genererade koden i DartPad för en snabb titt.
• Molnbygge (Plus-planen och uppåt) – builder77 kör en riktig flutter build web på våra servrar och visar den kompilerade appen direkt i byggverktyget. Det är den mest trogna förhandsvisningen av vad den inbyggda appen kommer att göra.

Om molnbygget rapporterar ett fel eller något ser konstigt ut, be om en fix i chatten och konvertera igen. Eftersom webbappen är sanningskällan är det oftast bäst att få webbversionen rätt först och sedan generera Flutter-projektet på nytt.

Ladda ner och öppna projektet

Från Starter och uppåt kan du ladda ner Flutter-projektet. Därifrån är det ett vanligt Flutter-arbetsflöde:

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

Publicera i butikerna

Inskickning till butikerna sker fortfarande i Apples och Googles verktyg, under dina egna utvecklarkonton. Den allmänna checklistan ser ut så här:

• Ange ett unikt bundle ID / application ID och appens namn.
• Lägg till appikoner och en startskärm för båda plattformarna.
• Konfigurera signering: ett distributionscertifikat och en provisioneringsprofil på iOS, en upload keystore på Android.
• Bygg release-binärer med flutter build ipa och flutter build appbundle.
• Förbered butikssidorna: skärmdumpar, beskrivning, integritetsuppgifter och en support-URL.
• Skicka in för granskning i App Store Connect och Google Play Console.

Butikernas granskare tittar noga på integritet. Om din app har inloggning och sparar personuppgifter behöver du en URL till en integritetspolicy – du kan be builder77 att lägga till en integritetssida i din webbapp och länka till den.

Behåll PWA:n

Att lansera inbyggt betyder inte att webbversionen ska pensioneras. PWA:n fortsätter att fungera med samma data, så folk kan använda din app i en webbläsare, på datorn eller innan de har installerat den från butiken. En produkt, två ytterdörrar, en backend.

Vårt råd: validera med PWA:n, konvertera när användarna ber om det, och se butiksversionen som den polerade utgåvan av något som folk redan älskar.