A PWA-tól az App Store-ig: Flutter-alkalmazás kiadása a builder77-tel

Régen ahhoz, hogy egy alkalmazás eljusson valakinek a telefonjára, platformot kellett választani, megtanulni az eszközkészletét, és kivárni az ellenőrzési sort, mielőtt bárki kipróbálhatta volna. A builder77 ezt az utat két szakaszra bontja: adj ki ma egy PWA-t, hogy valódi emberek használhassák, és válts natív Flutterre, amikor készen állsz az App Store-ra és a Google Playre.

1. szakasz: egy PWA, amit a felhasználóid azonnal telepíthetnek

Amikor mobilalkalmazást építesz a builder77-ben, az kezdettől fogva telefonos alkalmazásként készül: teljes magasságú elrendezés, alsó fülekkel történő navigáció, nagy érintési felületek és biztonságos területi margók a bevágásos kijelzőkhöz. Közzétételkor webalkalmazás-manifestet és service workert kap, így telepíthetővé válik.

• Nyomd meg a Közzététel gombot, és olvasd be a QR-kódot a telefonoddal.
• iPhone-on koppints a Megosztás → Főképernyőhöz adás lehetőségre. Androidon használd a telepítési ajánlatot vagy a böngésző menüjét.
• Teljes képernyőn, saját ikonnal nyílik meg, akárcsak egy natív alkalmazás.

Ez a leggyorsabb módja a visszajelzésgyűjtésnek. Még ma délután megoszthatsz egy linket tíz tesztelővel, megfigyelheted, hogyan használják, és tovább fejlesztheted a szerkesztőben – minden közzététel azonnal frissíti az alkalmazást mindenkinél, áruházi ellenőrzés nélkül.

2. szakasz: átalakítás Flutterre

Ha az alkalmazás jó állapotban van, nyisd meg a Flutter fület, és alakítsd át. Ez 3 üzenetkreditbe kerül. A builder77 egy Flutter-projektet generál – egy pubspec.yaml és egy lib/main.dart fájlt – ugyanazokkal a képernyőkkel, funkciókkal és vizuális arculattal, mint a webalkalmazásod, Material 3-ban megírva.

A lényeg: a Flutter-alkalmazás a builder77 REST API-ján keresztül ugyanazzal a felhőadatbázissal kommunikál, ugyanazokkal a gyűjtemény- és mezőnevekkel. A PWA-ban létrehozott adatok megjelennek a natív alkalmazásban és fordítva, az alkalmazásod felhasználói pedig bármelyikben bejelentkezhetnek.

// 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óbáld ki, mielőtt letöltöd

A Flutter-verziót bármi telepítése nélkül futtathatod. A Flutter fülön két lehetőséged van:

• DartPad – nyisd meg a generált kódot a DartPadben egy gyors pillantásra.
• Felhős build (Plus csomagtól felfelé) – a builder77 valódi flutter build web parancsot futtat a szervereinken, és a lefordított alkalmazást közvetlenül a szerkesztőben mutatja. Ez a leghűbb előnézete annak, amit a natív alkalmazás csinálni fog.

Ha a felhős build hibát jelez, vagy valami furcsán néz ki, kérj javítást a chatben, és alakítsd át újra. Mivel a webalkalmazás az igazság forrása, általában az a legjobb, ha előbb a webes verziót teszed rendbe, majd újragenerálod a Flutter-projektet.

A projekt letöltése és megnyitása

A Starter csomagtól letöltheted a Flutter-projektet. Innen már a megszokott Flutter-munkafolyamat jön:

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

Közzététel az áruházakban

Az áruházi beküldés továbbra is az Apple és a Google eszközeiben történik, a saját fejlesztői fiókjaid alatt. Az általános ellenőrzőlista így néz ki:

• Állíts be egyedi bundle ID-t / application ID-t és az alkalmazás nevét.
• Adj hozzá alkalmazásikonokat és indítóképernyőt mindkét platformhoz.
• Állítsd be az aláírást: terjesztési tanúsítvány és provisioning profil iOS-en, feltöltési keystore Androidon.
• Készíts kiadási binárisokat a flutter build ipa és a flutter build appbundle parancsokkal.
• Készítsd elő az áruházi adatlapokat: képernyőképek, leírás, adatvédelmi adatok és támogatási URL.
• Küldd be ellenőrzésre az App Store Connectben és a Google Play Console-ban.

Az áruházi ellenőrök alaposan megnézik az adatvédelmet. Ha az alkalmazásodban van bejelentkezés, és személyes adatokat tárol, szükséged lesz egy adatvédelmi szabályzat URL-re – megkérheted a builder77-et, hogy adjon hozzá egy adatvédelmi oldalt a webalkalmazásodhoz, és arra hivatkozhatsz.

Tartsd meg a PWA-t

A natív kiadás nem jelenti a webes verzió nyugdíjazását. A PWA ugyanazokon az adatokon működik tovább, így az emberek böngészőben, asztali gépen, vagy még az áruházi telepítés előtt is használhatják az alkalmazásodat. Egy termék, két bejárat, egy backend.

A tanácsunk: validáld az ötletet a PWA-val, alakítsd át, amikor a felhasználók kérik, és tekints az áruházi verzióra úgy, mint egy olyan dolog csiszolt kiadására, amit az emberek már most szeretnek.