De la PWA a l'App Store: publica una app Flutter amb builder77

Portar una app al mòbil d'algú volia dir triar una plataforma, aprendre'n les eines i esperar en una cua de revisió abans que ningú la pogués provar. builder77 divideix aquest camí en dues etapes: publica avui una PWA perquè persones reals la puguin fer servir i passa a Flutter natiu quan estiguis a punt per a l'App Store i Google Play.

Etapa 1: una PWA que els teus usuaris poden instal·lar ara mateix

Quan crees una app mòbil a builder77, està dissenyada com a app de telèfon des del principi: disseny a tota l'alçada, navegació amb pestanyes a baix, zones tàctils grans i marges d'àrea segura per a pantalles amb osca. Quan la publiques, rep un manifest d'aplicació web i un service worker, i això la fa instal·lable.

• Prem Publica i escaneja el codi QR amb el mòbil.
• A l'iPhone, toca Comparteix → Afegeix a la pantalla d'inici. A Android, fes servir l'avís d'instal·lació o el menú del navegador.
• L'app s'obre a pantalla completa amb la seva pròpia icona, igual que una app nativa.

És la manera més ràpida d'aconseguir opinions. Pots compartir un enllaç amb deu provadors aquesta mateixa tarda, veure com la fan servir i continuar millorant-la a l'editor: cada publicació actualitza l'app per a tothom a l'instant, sense revisió de les botigues.

Etapa 2: converteix-la a Flutter

Quan l'app estigui en bona forma, obre la pestanya Flutter i converteix-la. Costa 3 crèdits de missatge. builder77 genera un projecte Flutter (un pubspec.yaml i un lib/main.dart) amb les mateixes pantalles, funcions i identitat visual que la teva aplicació web, escrit amb Material 3.

El més important: l'app Flutter es comunica amb la mateixa base de dades al núvol a través de l'API REST de builder77, amb els mateixos noms de col·leccions i camps. Les dades creades a la PWA apareixen a l'app nativa i a l'inrevés, i els usuaris de la teva app poden iniciar la sessió a qualsevol de les dues.

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

Prova-la abans de descarregar-la

Pots executar la versió Flutter sense instal·lar res. La pestanya Flutter ofereix dues opcions:

• DartPad: obre el codi generat a DartPad per fer-hi una ullada ràpida.
• Compilació al núvol (pla Plus o superior): builder77 executa un flutter build web real als nostres servidors i mostra l'app compilada directament a l'editor. És la previsualització més fidel del que farà l'app nativa.

Si la compilació al núvol dona un error o alguna cosa no es veu bé, demana una correcció al xat i torna-la a convertir. Com que l'aplicació web és la font de referència, normalment el millor és deixar bé primer la versió web i després tornar a generar el projecte Flutter.

Descarrega i obre el projecte

A partir del pla Starter pots descarregar el projecte Flutter. D'aquí en endavant, és un flux de treball Flutter estàndard:

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

Publicar a les botigues

L'enviament a les botigues encara es fa amb les eines d'Apple i de Google, amb els teus propis comptes de desenvolupador. La llista general de passos és aquesta:

• Defineix un bundle ID / application ID únic i el nom de la teva app.
• Afegeix icones de l'app i una pantalla d'inici per a totes dues plataformes.
• Configura la signatura: un certificat de distribució i un perfil d'aprovisionament a iOS, i un keystore de pujada a Android.
• Genera els binaris de producció amb flutter build ipa i flutter build appbundle.
• Prepara les fitxes de les botigues: captures, descripció, informació de privadesa i un URL d'assistència.
• Envia l'app a revisió a App Store Connect i a Google Play Console.

Els revisors de les botigues es fixen molt en la privadesa. Si la teva app té inici de sessió i desa dades personals, necessitaràs l'URL d'una política de privadesa: pots demanar a builder77 que afegeixi una pàgina de privadesa a la teva aplicació web i enllaçar-la.

Conserva la PWA

Publicar en natiu no vol dir jubilar la versió web. La PWA continua funcionant amb les mateixes dades, així que la gent pot fer servir la teva app en un navegador, a l'ordinador o abans d'instal·lar-la des de la botiga. Un producte, dues portes d'entrada, un backend.

El nostre consell: valida amb la PWA, converteix-la quan els usuaris ho demanin i tracta la versió de la botiga com l'edició polida d'una cosa que la gent ja estima.