De PWA a la App Store: publica una app Flutter con builder77

Llevar una app al móvil de alguien significaba elegir una plataforma, aprender sus herramientas y esperar en una cola de revisión antes de que nadie pudiera probarla. builder77 divide ese camino en dos etapas: publica hoy una PWA para que personas reales puedan usarla y pasa a Flutter nativo cuando estés listo para la App Store y Google Play.

Etapa 1: una PWA que tus usuarios pueden instalar ya

Cuando creas una app móvil en builder77, está diseñada como app de teléfono desde el principio: diseño a pantalla completa, navegación con pestañas inferiores, zonas táctiles grandes y márgenes de área segura para pantallas con notch. Al publicarla, recibe un manifiesto de aplicación web y un service worker, lo que la hace instalable.

• Pulsa Publicar y escanea el código QR con tu móvil.
• En iPhone, toca Compartir → Añadir a pantalla de inicio. En Android, usa el aviso de instalación o el menú del navegador.
• La app se abre a pantalla completa con su propio icono, igual que una app nativa.

Es la forma más rápida de conseguir opiniones. Puedes compartir un enlace con diez testers esta misma tarde, ver cómo la usan y seguir mejorándola en el editor: cada publicación actualiza la app para todos al instante, sin revisión de las tiendas.

Etapa 2: convierte a Flutter

Cuando la app esté en buena forma, abre la pestaña Flutter y conviértela. Cuesta 3 créditos de mensaje. builder77 genera un proyecto Flutter (un pubspec.yaml y un lib/main.dart) con las mismas pantallas, funciones e identidad visual que tu aplicación web, escrito con Material 3.

Lo importante: la app Flutter se comunica con la misma base de datos en la nube a través de la API REST de builder77, usando los mismos nombres de colecciones y campos. Los datos creados en la PWA aparecen en la app nativa y al revés, y los usuarios de tu app pueden iniciar sesión en cualquiera de las dos.

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

Pruébala antes de descargarla

Puedes ejecutar la versión Flutter sin instalar nada. La pestaña Flutter ofrece dos opciones:

• DartPad: abre el código generado en DartPad para echar un vistazo rápido.
• Compilación en la nube (plan Plus o superior): builder77 ejecuta un flutter build web real en nuestros servidores y muestra la app compilada directamente en el editor. Es la vista previa más fiel de lo que hará la app nativa.

Si la compilación en la nube da un error o algo no se ve bien, pide una corrección en el chat y vuelve a convertir. Como la aplicación web es la fuente de referencia, lo mejor suele ser dejar bien la versión web primero y después regenerar el proyecto Flutter.

Descarga y abre el proyecto

Desde el plan Starter puedes descargar el proyecto Flutter. A partir de ahí, es un flujo de trabajo Flutter estándar:

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

Publicar en las tiendas

El envío a las tiendas se sigue haciendo con las herramientas de Apple y Google, con tus propias cuentas de desarrollador. La lista general de pasos es esta:

• Define un bundle ID / application ID único y el nombre de tu app.
• Añade iconos de la app y una pantalla de inicio para ambas plataformas.
• Configura la firma: un certificado de distribución y un perfil de aprovisionamiento en iOS, y un keystore de subida en Android.
• Genera los binarios de producción con flutter build ipa y flutter build appbundle.
• Prepara las fichas de las tiendas: capturas, descripción, datos de privacidad y una URL de soporte.
• Envía la app a revisión en App Store Connect y en Google Play Console.

Los revisores de las tiendas se fijan mucho en la privacidad. Si tu app tiene inicio de sesión y guarda datos personales, necesitarás la URL de una política de privacidad: puedes pedirle a builder77 que añada una página de privacidad a tu aplicación web y enlazarla.

No te deshagas de la PWA

Publicar en nativo no significa jubilar la versión web. La PWA sigue funcionando con los mismos datos, así que la gente puede usar tu app en un navegador, en el ordenador o antes de instalarla desde la tienda. Un producto, dos puertas de entrada, un backend.

Nuestro consejo: valida con la PWA, convierte cuando los usuarios lo pidan y trata la versión de la tienda como la edición pulida de algo que la gente ya adora.