Všetky články
Mobil·7 min čítania

Od PWA po App Store: vydanie aplikácie vo Flutteri s builder77

Každá mobilná aplikácia v builder77 začína ako inštalovateľná PWA. Keď prídu na rad obchody s aplikáciami, premeň ju na natívny projekt vo Flutteri, ktorý zdieľa tú istú databázu.

77
Tím builder77
builder77.com

Dostať aplikáciu do niečieho telefónu kedysi znamenalo vybrať si platformu, naučiť sa jej nástroje a čakať v rade na schválenie, kým ju vôbec niekto mohol vyskúšať. builder77 delí túto cestu na dve fázy: vydaj PWA ešte dnes, aby ju mohli používať skutoční ľudia, a prejdi na natívny Flutter, keď prídu na rad App Store a Google Play.

Fáza 1: PWA, ktorú si používatelia môžu nainštalovať hneď

Keď v builder77 tvoríš mobilnú aplikáciu, je od začiatku navrhnutá ako aplikácia do telefónu: rozloženie na celú výšku, navigácia spodnými kartami, veľké dotykové plochy a okraje bezpečnej oblasti pre displeje s výrezom. Pri zverejnení dostane manifest webovej aplikácie a service worker, vďaka čomu sa dá nainštalovať.

  • Stlač Zverejniť a naskenuj QR kód telefónom.
  • Na iPhone klepni na Zdieľať → Pridať na plochu. Na Androide použi výzvu na inštaláciu alebo menu prehliadača.
  • Aplikácia sa otvorí na celú obrazovku s vlastnou ikonou, presne ako natívna.

Je to najrýchlejšia cesta k spätnej väzbe. Ešte dnes poobede môžeš poslať odkaz desiatim testerom, sledovať, ako aplikáciu používajú, a ďalej ju vylepšovať v editore — každé zverejnenie okamžite aktualizuje aplikáciu pre všetkých, bez schvaľovania v obchode.

Fáza 2: prevod do Flutteru

Keď je aplikácia v dobrej forme, otvor kartu Flutter a preveď ju. Stojí to 3 kredity za správy. builder77 vygeneruje projekt vo Flutteri — pubspec.yaml a lib/main.dart — s rovnakými obrazovkami, funkciami a vizuálnou identitou ako tvoja webová aplikácia, napísaný v Material 3.

Dôležité je, že aplikácia vo Flutteri komunikuje s tou istou cloudovou databázou cez REST API builder77 a používa rovnaké názvy kolekcií a polí. Dáta vytvorené v PWA sa zobrazia v natívnej aplikácii a naopak a používatelia tvojej aplikácie sa môžu prihlásiť v ktorejkoľvek z nich.

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

Vyskúšaj ju skôr, než si ju stiahneš

Verziu vo Flutteri môžeš spustiť bez inštalácie čohokoľvek. Na karte Flutter máš dve možnosti:

  • DartPad — otvor vygenerovaný kód v DartPade a rýchlo sa naň pozri.
  • Cloudový build (plán Plus a vyššie) — builder77 spustí skutočný flutter build web na našich serveroch a zobrazí skompilovanú aplikáciu priamo v editore. Je to najvernejší náhľad toho, čo bude robiť natívna aplikácia.

Ak cloudový build nahlási chybu alebo niečo nevyzerá dobre, požiadaj v chate o opravu a preveď aplikáciu znova. Keďže zdrojom pravdy je webová aplikácia, zvyčajne je najlepšie najprv vyladiť webovú verziu a potom projekt vo Flutteri vygenerovať nanovo.

Stiahni a otvor projekt

Od plánu Starter si projekt vo Flutteri môžeš stiahnuť. Odtiaľ je to už štandardný postup vo Flutteri:

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

Zverejnenie v obchodoch

Odoslanie do obchodov stále prebieha v nástrojoch Apple a Google, pod tvojimi vlastnými vývojárskymi účtami. Všeobecný kontrolný zoznam vyzerá takto:

  • Nastav jedinečné bundle ID / application ID a názov aplikácie.
  • Pridaj ikony aplikácie a úvodnú obrazovku pre obe platformy.
  • Nastav podpisovanie: distribučný certifikát a provisioning profil na iOS, upload keystore na Androide.
  • Zostav release binárky pomocou flutter build ipa a flutter build appbundle.
  • Priprav záznamy v obchodoch: snímky obrazovky, popis, údaje o ochrane súkromia a URL podpory.
  • Odošli aplikáciu na schválenie v App Store Connect a Google Play Console.

Schvaľovatelia v obchodoch dôkladne kontrolujú ochranu súkromia. Ak má tvoja aplikácia prihlasovanie a ukladá osobné údaje, budeš potrebovať URL zásad ochrany osobných údajov — môžeš builder77 požiadať, aby do tvojej webovej aplikácie pridal stránku o ochrane súkromia, a odkázať na ňu.

PWA si ponechaj

Vydanie natívnej verzie neznamená, že webovú verziu zrušíš. PWA ďalej funguje nad tými istými dátami, takže ľudia môžu tvoju aplikáciu používať v prehliadači, na počítači alebo ešte predtým, než si ju nainštalujú z obchodu. Jeden produkt, dva vchody, jeden backend.

Naša rada: over si nápad s PWA, preveď ju, keď o to používatelia požiadajú, a verziu z obchodu ber ako vyladené vydanie niečoho, čo ľudia už milujú.

Chceš to vytvoriť?

Opíš svoj nápad a zhruba za minútu dostaneš prvú funkčnú verziu. Začni zadarmo, bez platobnej karty.