Wszystkie wpisy
Aplikacje mobilne·7 min czytania

Od PWA do App Store: publikacja aplikacji Flutter z builder77

Każda aplikacja mobilna w builder77 zaczyna jako instalowalna PWA. Gdy będziesz gotowy na sklepy, przekonwertuj ją do natywnego projektu Flutter, który korzysta z tej samej bazy danych.

77
Zespół builder77
builder77.com

Dostarczenie aplikacji na czyjś telefon oznaczało kiedyś wybór platformy, naukę jej narzędzi i czekanie w kolejce do weryfikacji, zanim ktokolwiek mógł ją wypróbować. builder77 dzieli tę drogę na dwa etapy: opublikuj PWA już dziś, żeby prawdziwi ludzie mogli z niej korzystać, i przejdź na natywnego Fluttera, gdy będziesz gotowy na App Store i Google Play.

Etap 1: PWA, którą Twoi użytkownicy mogą zainstalować od razu

Gdy budujesz aplikację mobilną w builder77, od początku jest projektowana jako aplikacja na telefon: układ na pełną wysokość, nawigacja dolnymi zakładkami, duże pola dotyku i marginesy bezpiecznego obszaru dla ekranów z wycięciem. Po opublikowaniu dostaje manifest aplikacji webowej i service workera, dzięki czemu da się ją zainstalować.

  • Kliknij Opublikuj i zeskanuj kod QR telefonem.
  • Na iPhonie stuknij Udostępnij → Do ekranu początkowego. Na Androidzie użyj komunikatu instalacji lub menu przeglądarki.
  • Aplikacja otwiera się na pełnym ekranie z własną ikoną, zupełnie jak natywna.

To najszybszy sposób, by zebrać opinie. Jeszcze dziś po południu możesz wysłać link dziesięciu testerom, obserwować, jak z niej korzystają, i dalej ją ulepszać w kreatorze — każda publikacja natychmiast aktualizuje aplikację dla wszystkich, bez weryfikacji w sklepie.

Etap 2: konwersja do Fluttera

Gdy aplikacja jest w dobrej formie, otwórz zakładkę Flutter i przekonwertuj ją. Kosztuje to 3 kredyty na wiadomości. builder77 wygeneruje projekt Flutter — pubspec.yaml i lib/main.dart — z tymi samymi ekranami, funkcjami i identyfikacją wizualną co Twoja aplikacja webowa, napisany w Material 3.

Najważniejsze: aplikacja Flutter łączy się z tą samą bazą danych w chmurze przez REST API builder77, używając tych samych nazw kolekcji i pól. Dane utworzone w PWA pojawiają się w aplikacji natywnej i na odwrót, a użytkownicy Twojej aplikacji mogą logować się w każdej 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

Wypróbuj, zanim pobierzesz

Wersję Flutter możesz uruchomić bez instalowania czegokolwiek. W zakładce Flutter masz dwie opcje:

  • DartPad — otwórz wygenerowany kod w DartPad, by szybko go obejrzeć.
  • Build w chmurze (plan Plus i wyższe) — builder77 uruchamia prawdziwy flutter build web na naszych serwerach i pokazuje skompilowaną aplikację bezpośrednio w kreatorze. To najwierniejszy podgląd tego, jak zachowa się aplikacja natywna.

Jeśli build w chmurze zgłosi błąd albo coś wygląda nie tak, poproś na czacie o poprawkę i przekonwertuj ponownie. Ponieważ źródłem prawdy jest aplikacja webowa, zwykle najlepiej najpierw dopracować wersję webową, a potem wygenerować projekt Flutter od nowa.

Pobierz i otwórz projekt

Od planu Starter możesz pobrać projekt Flutter. Dalej to już standardowy workflow Fluttera:

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

Publikacja w sklepach

Zgłoszenie do sklepów nadal odbywa się w narzędziach Apple i Google, na Twoich własnych kontach deweloperskich. Ogólna lista kontrolna wygląda tak:

  • Ustaw unikalny bundle ID / application ID i nazwę aplikacji.
  • Dodaj ikony aplikacji i ekran startowy dla obu platform.
  • Skonfiguruj podpisywanie: certyfikat dystrybucyjny i profil provisioningowy na iOS, keystore do przesyłania na Androidzie.
  • Zbuduj wersje produkcyjne poleceniami flutter build ipa i flutter build appbundle.
  • Przygotuj wpisy w sklepach: zrzuty ekranu, opis, informacje o prywatności i adres URL wsparcia.
  • Wyślij aplikację do weryfikacji w App Store Connect i Google Play Console.

Podczas weryfikacji sklepy uważnie przyglądają się prywatności. Jeśli Twoja aplikacja ma logowanie i przechowuje dane osobowe, potrzebujesz adresu URL polityki prywatności — możesz poprosić builder77, by dodał stronę o prywatności do Twojej aplikacji webowej, i podlinkować do niej.

Zachowaj PWA

Publikacja wersji natywnej nie oznacza wycofania wersji webowej. PWA dalej działa na tych samych danych, więc ludzie mogą używać Twojej aplikacji w przeglądarce, na komputerze albo zanim zainstalują ją ze sklepu. Jeden produkt, dwa wejścia, jeden backend.

Nasza rada: zweryfikuj pomysł z PWA, konwertuj, gdy użytkownicy o to poproszą, i traktuj wersję ze sklepu jako dopracowane wydanie czegoś, co ludzie już kochają.

Gotowy, by to zbudować?

Opisz swój pomysł i mniej więcej w minutę otrzymaj pierwszą działającą wersję. Start za darmo, karta kredytowa niepotrzebna.