От PWA до App Store: выпуск Flutter-приложения с builder77
Каждое мобильное приложение builder77 начинается как устанавливаемое PWA. Когда будете готовы к магазинам, превратите его в нативный Flutter-проект с той же базой данных.
Раньше, чтобы приложение попало на чей-то телефон, нужно было выбрать платформу, освоить её инструменты и дождаться очереди на проверку — и только потом кто-то мог его попробовать. builder77 делит этот путь на два этапа: выпустите PWA уже сегодня, чтобы им пользовались реальные люди, и переходите на нативный Flutter, когда будете готовы к App Store и Google Play.
Этап 1: PWA, которое пользователи могут установить прямо сейчас
Когда вы создаёте мобильное приложение в builder77, оно с самого начала проектируется как приложение для телефона: раскладка на всю высоту экрана, нижняя навигация по вкладкам, крупные зоны нажатия и отступы безопасной зоны для экранов с вырезом. При публикации оно получает манифест веб-приложения и service worker, благодаря чему его можно установить.
- Нажмите Опубликовать и отсканируйте QR-код телефоном.
- На iPhone нажмите Поделиться → На экран «Домой». На Android воспользуйтесь предложением установки или меню браузера.
- Приложение открывается на весь экран со своей иконкой — как нативное.
Это самый быстрый способ получить обратную связь. Уже сегодня можно отправить ссылку десяти тестировщикам, посмотреть, как они пользуются приложением, и продолжать улучшать его в конструкторе: каждая публикация мгновенно обновляет приложение у всех, без проверки в магазине.
Этап 2: превращение во Flutter
Когда приложение будет в хорошем состоянии, откройте вкладку Flutter и выполните конвертацию. Это стоит 3 кредита на сообщения. builder77 создаёт Flutter-проект — pubspec.yaml и lib/main.dart — с теми же экранами, функциями и фирменным стилем, что и у веб-приложения, на Material 3.
Главное: Flutter-приложение работает с той же облачной базой данных через REST API builder77, используя те же названия коллекций и полей. Данные, созданные в PWA, появляются в нативном приложении и наоборот, а пользователи вашего приложения могут входить в любой из версий.
// 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Попробуйте до скачивания
Flutter-версию можно запустить, ничего не устанавливая. На вкладке Flutter есть два варианта:
- DartPad — откройте сгенерированный код в DartPad, чтобы быстро взглянуть на него.
- Облачная сборка (тариф Plus и выше) — builder77 запускает настоящий
flutter build webна наших серверах и показывает скомпилированное приложение прямо в конструкторе. Это самый точный предпросмотр того, как будет работать нативное приложение.
Если облачная сборка сообщает об ошибке или что-то выглядит не так, попросите исправить это в чате и выполните конвертацию заново. Поскольку источником истины остаётся веб-приложение, обычно лучше сначала довести до ума веб-версию, а затем заново сгенерировать Flutter-проект.
Скачайте и откройте проект
На тарифе Starter и выше Flutter-проект можно скачать. Дальше — стандартный процесс работы с Flutter:
flutter create . # adds the ios/ and android/ platform folders
flutter pub get
flutter run # on a simulator or a connected deviceПубликация в магазинах
Отправка в магазины по-прежнему происходит в инструментах Apple и Google, под вашими собственными аккаунтами разработчика. Общий чек-лист выглядит так:
- Задайте уникальный bundle ID / application ID и название приложения.
- Добавьте иконки приложения и экран запуска для обеих платформ.
- Настройте подпись: сертификат распространения и provisioning profile на iOS, upload keystore на Android.
- Соберите релизные сборки с помощью
flutter build ipaиflutter build appbundle. - Подготовьте страницы в магазинах: скриншоты, описание, сведения о конфиденциальности и URL поддержки.
- Отправьте приложение на проверку в App Store Connect и Google Play Console.
Модераторы магазинов внимательно следят за конфиденциальностью. Если в приложении есть вход и оно хранит персональные данные, понадобится URL политики конфиденциальности — можно попросить builder77 добавить страницу конфиденциальности в веб-приложение и сослаться на неё.
Не отказывайтесь от PWA
Выпуск нативной версии не означает, что веб-версию пора списать. PWA продолжает работать с теми же данными, поэтому люди могут пользоваться вашим приложением в браузере, на компьютере или ещё до установки из магазина. Один продукт, два входа, один бэкенд.
Наш совет: проверьте идею с помощью PWA, конвертируйте, когда пользователи попросят, а версию в магазине воспринимайте как отшлифованное издание того, что люди уже полюбили.