Все статьи
Мобильные·7 мин чтения

От PWA до App Store: выпуск Flutter-приложения с builder77

Каждое мобильное приложение builder77 начинается как устанавливаемое PWA. Когда будете готовы к магазинам, превратите его в нативный Flutter-проект с той же базой данных.

77
Команда builder77
builder77.com

Раньше, чтобы приложение попало на чей-то телефон, нужно было выбрать платформу, освоить её инструменты и дождаться очереди на проверку — и только потом кто-то мог его попробовать. 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, появляются в нативном приложении и наоборот, а пользователи вашего приложения могут входить в любой из версий.

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

Попробуйте до скачивания

Flutter-версию можно запустить, ничего не устанавливая. На вкладке Flutter есть два варианта:

  • DartPad — откройте сгенерированный код в DartPad, чтобы быстро взглянуть на него.
  • Облачная сборка (тариф Plus и выше) — builder77 запускает настоящий flutter build web на наших серверах и показывает скомпилированное приложение прямо в конструкторе. Это самый точный предпросмотр того, как будет работать нативное приложение.

Если облачная сборка сообщает об ошибке или что-то выглядит не так, попросите исправить это в чате и выполните конвертацию заново. Поскольку источником истины остаётся веб-приложение, обычно лучше сначала довести до ума веб-версию, а затем заново сгенерировать Flutter-проект.

Скачайте и откройте проект

На тарифе Starter и выше Flutter-проект можно скачать. Дальше — стандартный процесс работы с Flutter:

bash
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, конвертируйте, когда пользователи попросят, а версию в магазине воспринимайте как отшлифованное издание того, что люди уже полюбили.

Готовы создать?

Опишите идею и получите рабочую первую версию примерно за минуту. Начать можно бесплатно, банковская карта не нужна.