Da PWA à App Store: publicar uma app Flutter com o builder77

Pôr uma app no telemóvel de alguém significava escolher uma plataforma, aprender as respetivas ferramentas e esperar numa fila de revisão antes de alguém a poder experimentar. O builder77 divide esse percurso em duas etapas: publique hoje uma PWA para que pessoas reais a possam usar e passe para Flutter nativo quando estiver pronto para a App Store e a Google Play.

Etapa 1: uma PWA que os seus utilizadores podem instalar já

Quando cria uma app móvel no builder77, ela é pensada desde o início como uma app de telemóvel: layout em altura total, navegação por separadores em baixo, áreas de toque grandes e margens de área segura para ecrãs com notch. Ao publicar, recebe um manifesto de aplicação web e um service worker, o que a torna instalável.

• Carregue em Publicar e digitalize o código QR com o telemóvel.
• No iPhone, toque em Partilhar → Adicionar ao ecrã principal. No Android, use o aviso de instalação ou o menu do browser.
• A app abre em ecrã inteiro com o seu próprio ícone, tal como uma app nativa.

É a forma mais rápida de obter feedback. Pode partilhar um link com dez testadores esta tarde, ver como a usam e continuar a melhorá-la no editor — cada publicação atualiza a app para todos de imediato, sem revisão das lojas.

Etapa 2: converter para Flutter

Quando a app estiver em boa forma, abra o separador Flutter e converta-a. Custa 3 créditos de mensagem. O builder77 gera um projeto Flutter — um pubspec.yaml e um lib/main.dart — com os mesmos ecrãs, funcionalidades e identidade visual da sua aplicação web, escrito com Material 3.

O mais importante: a app Flutter comunica com a mesma base de dados na cloud através da API REST do builder77, usando os mesmos nomes de coleções e de campos. Os dados criados na PWA aparecem na app nativa e vice-versa, e os utilizadores da sua app podem iniciar sessão em qualquer uma das duas.

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

Experimente antes de descarregar

Pode executar a versão Flutter sem instalar nada. O separador Flutter tem duas opções:

• DartPad — abra o código gerado no DartPad para uma vista rápida.
• Compilação na cloud (plano Plus ou superior) — o builder77 executa um flutter build web real nos nossos servidores e mostra a app compilada diretamente no editor. É a pré-visualização mais fiel do que a app nativa vai fazer.

Se a compilação na cloud indicar um erro ou algo parecer estranho, peça uma correção no chat e volte a converter. Como a aplicação web é a fonte de referência, normalmente o melhor é acertar primeiro a versão web e depois gerar de novo o projeto Flutter.

Descarregue e abra o projeto

A partir do plano Starter pode descarregar o projeto Flutter. Daí em diante, é um fluxo de trabalho Flutter normal:

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

Publicar nas lojas

A submissão às lojas continua a fazer-se nas ferramentas da Apple e da Google, com as suas próprias contas de programador. A lista de verificação geral é esta:

• Defina um bundle ID / application ID único e o nome da sua app.
• Adicione ícones da app e um ecrã de arranque para as duas plataformas.
• Configure a assinatura: um certificado de distribuição e um perfil de aprovisionamento no iOS, uma keystore de upload no Android.
• Gere os binários de produção com flutter build ipa e flutter build appbundle.
• Prepare as fichas das lojas: capturas de ecrã, descrição, detalhes de privacidade e um URL de suporte.
• Submeta a app para revisão no App Store Connect e na Google Play Console.

Os revisores das lojas olham com atenção para a privacidade. Se a sua app tem login e guarda dados pessoais, vai precisar do URL de uma política de privacidade — pode pedir ao builder77 que adicione uma página de privacidade à sua aplicação web e colocar o link para ela.

Mantenha a PWA

Publicar em nativo não significa reformar a versão web. A PWA continua a funcionar com os mesmos dados, por isso as pessoas podem usar a sua app num browser, num computador ou antes de a instalarem a partir da loja. Um produto, duas portas de entrada, um backend.

O nosso conselho: valide com a PWA, converta quando os utilizadores o pedirem e encare a versão das lojas como a edição polida de algo de que as pessoas já gostam.