Кальтер / Блог

Мобильное приложение с ИИ: как сделать прототип и выбрать путь сборки

На примере тренировки выбираем web, cross-platform или native, проектируем состояния и отличаем прототип от установленной сборки.

Материал подготовлен с помощью ИИ; источники и расчёты проверены редакцией ZASLON.

Прототип интерфейса и сборка мобильного приложения — разные этапы; на схеме: Экран прототипа, Нативная оболочка, Сборка приложения.
Редакционная схема ZASLON. Условная иллюстрация механизма; не рыночные данные и не интерфейс сервиса.

Начни с одного мобильного сценария, а не с вопроса «какую технологию сгенерирует ИИ». В примере — приложение для фиксации домашних тренировок: открыть тренировку, добавить упражнение, записать подходы и увидеть последние записи. Для проверки идеи можно сначала сделать кликабельный прототип экранов; он показывает переходы, но не является установленным приложением и не сохраняет данные на сервере.

Спроектируй один экран и состояния

Первый экран показывает текущую тренировку и список упражнений. Для каждого упражнения пользователь выбирает вес и количество повторений, затем добавляет подход. Внизу видны «Сохранить тренировку» и «Завершить». Состояния:

  • пустая тренировка и подсказка, как добавить упражнение;
  • обычная тренировка с черновыми подходами;
  • поле веса в фокусе с открытой клавиатурой;
  • ошибка: число повторений пустое или отрицательное;
  • сохранение в процессе;
  • сохранено локально или подтверждено сервером, в зависимости от архитектуры;
  • недоступна сеть и действие можно повторить.

Попроси ИИ собрать storyboard переходов и data model до генерации кода. Отдели упражнение, подход и тренировочную сессию; иначе одна большая строка может усложнить редактирование и историю. Сделай бумажный/кликабельный прототип сначала, если вопрос только о понимании порядка действий и текста экранов. В таком тесте нет настоящей клавиатуры, памяти устройства, разрешения на датчики или магазина приложений.

Выбор платформенного пути через требования

Требование первой версии Подход для проверки Что ещё нужно подтвердить
Сценарий работает онлайн в браузере; установка, офлайн и специфичные датчики не нужны адаптивный web если обязательны системные функции или работа без сети
Хочется запуск с иконки и отдельные офлайн-экраны, но обновления могут идти через веб PWA сначала проверь поддержку установки, уведомлений и нужных API на целевых браузерах; эти возможности различаются
Нужны Android и iOS с общей логикой и интерфейсом, а нужные библиотеки/API есть на обеих платформах cross-platform если важная функция требует платформенного кода, который проект не поддерживает
Ключевой сценарий зависит от глубокой интеграции одной ОС или её системного UI native для этой платформы если нужно быстро охватить обе платформы без отдельной реализации
Нужно проверить последовательность экранов без данных и устройства clickable prototype он не проверяет сохранение, разрешения и системное поведение

React Native позволяет строить нативные приложения через React; его официальные docs предлагают начинать новый проект с framework, например Expo, и отдельно описывают настройку окружения и интеграцию (React Native getting started). Это не означает, что кроссплатформенный путь автоматически подходит: библиотека аппаратного API или поведение интерфейса могут различаться. React Native документирует platform-specific code и отдельные .ios./.android. файлы для различий, которые сложнее выразить общим UI (platform-specific code). Для Android нативный вариант можно исследовать через Jetpack Compose, который Android Developers называют современным toolkit для native UI (Android Compose).

Для PWA manifest описывает устанавливаемое веб-приложение, но браузеры различаются по способу установки и поддерживаемым возможностям; проверь именно целевые устройства (MDN: making PWAs installable). Offline требует спроектированного service worker и политики cache/update, а не появляется от одной иконки. Выбирай PWA, если веб-сценарий уже достаточен, но нужен ярлык/часть интерфейса без сети; оставляй обычный web, если установка и offline не нужны.

Приёмка на целевом устройстве

Укажи, какой артефакт проверяется: кликабельные экраны, открываемая web/PWA-версия или установленный Android/iOS пакет. Затем пройди сценарий на указанном устройстве: создать сессию → добавить подход → закрыть экран → открыть историю. Запиши, где данные хранятся и какие функции требуют сети. Установка разработчиком не подтверждает распространение через магазин; это отдельный результат, который проверяется своим каналом.

Проведи тест короткого сценария

Для тренировки пройди полный маршрут на физическом устройстве или эмуляторе целевой платформы: создать пустую сессию → добавить подход → ввести десятичный вес → сохранить → закрыть экран → открыть историю. Проверь, какая точность веса поддерживается и как показываются единицы; не сравнивай килограммы и фунты без явного выбора. Проверь клавиатуру: не скрывает ли она кнопку добавления, не теряет ли введённое значение при повороте экрана, возвращает ли приложение фокус после ошибки.

Если данные должны переживать переустановку или синхронизироваться между устройствами, уточни где именно они сохраняются и какую ошибку видит пользователь при недоступной сети. Пока серверная часть не подключена, пометь функцию как локальную. Не отправляй пользовательскую тренировку в API без понятной причины и согласованной обработки.

До запроса генератору зафиксируй целевую платформу, устройство, где хранятся данные и какой именно артефакт должен появиться. Полученный экран или preview сам по себе не подтверждает установленную сборку.