Я продолжаю серию статей о создании мобильного приложения CashUp – помощника по выбору лучшей банковской карты для каждой покупки. В прошлых частях я рассказывал, как у меня родилась идея и как мы (я и DeepSeek) сделали первый HTML-прототип. А сегодня — самое интересное: как эта веб-страничка превратилась в настоящее мобильное приложение. Без единой строчки кода от меня.
Доработка HTML-прототипа
Первый прототип, сгенерированный нейросетью, оказался рабочим, хотя и выглядел сыровато. Три основных экрана, навигация между ними и базовый поиск — этого уже хватило, чтобы представить будущее приложение. Но до полноценного инструмента было ещё далеко. Я постепенно доводил его до ума: добавлял новые функции, улучшал интерфейс, описывал изменения в командах, а ИИ мгновенно их воплощал.
В итоге, у меня получился наглядный инструмент:
- Иконки категорий (машинка для такси, тележка для супермаркетов)
- Удобный поиск: ввёл "Супермаркеты" — сразу лучшая карта
- Быстрый доступ к популярным категориям
- Редактирование карт через модальное окно, данные в локальном хранилище
Варианты переноса в полноценное приложение
Когда прототип был готов, я задал главный вопрос:
«нужна помощь в создании мобильного приложения для оптимизации кэшбэка по банковским картам... какой подход целесообразен для разработки нативных приложений по прототипу из вложения»
Вот что выдал DeepSeek:
ИИ объяснил, что React Native — оптимальный выбор, потому что мой прототип написан на JavaScript, и большую часть кода можно переиспользовать. А Flutter потребовал бы полного переписывания на Dart.
Стоимость и сроки полноценной разработки
Конечно, меня интересовал вопрос денег. Я спросил:
«сколько примерно будет стоить разработка такого приложения, если заказывать у профессионалов?»
ИИ привёл примерные цифры (на основе анализа рынка):
«Разработка MVP командой из 2–3 человек займёт 2–4 месяца и обойдётся в 500 000 – 1 000 000 рублей. Полноценное приложение с бэкендом и аналитикой – 6–9 месяцев и 1,5–3 млн рублей. Поддержка – около 100–150 тыс. руб/мес.»
Увидев цены на разработку, я понял: заказывать приложение для себя — нереально. Я решил попробовать сделать его самостоятельно с помощью ИИ.
Начало работы
Я написал такой промпт:
«Ты опытный разработчик, у меня нет опыта и навыков разработки. Нужна пошаговая инструкция по переносу кода HTML в React Native. Важно сохранить дизайн, функции и логику приложения как в прототипе. Выдавай каждый следующий шаг только после моего согласия»
– и приложил файл с прототипом. ИИ через минуту выдал подробный план.
Создание проекта и установка зависимостей
Всё началось с создания нового проекта React Native с помощью Expo. ИИ выдал команду:
bash
npx create-expo-app CashUp --template blank
cd CashUp
После создания проекта нужно было установить дополнительные библиотеки. Я спросил:
«какие пакеты нужны для навигации и работы с данными?»
ИИ выдал список:
npx expo install @react-navigation/native @react-navigation/bottom-tabs @react-navigation/stack
npx expo install react-native-screens react-native-safe-area-context
npx expo install expo-linear-gradient
npx expo install @react-native-async-storage/async-storage
npx expo install @expo/vector-icons
При установке возникла ошибка конфликта версий:
npm error ERESOLVE could not resolve
Я скопировал ошибку в чат. ИИ ответил:
«Попробуй использовать флаг --legacy-peer-deps. Это обходит конфликты версий.»
Я выполнил:
npx expo install @react-navigation/native --legacy-peer-deps
и аналогично для остальных пакетов. Ошибка исчезла.
Настройка навигации
Следующим шагом нужно было организовать переключение между экранами. Я попросил:
«сделай навигацию с нижними вкладками: Главная, Карты, Статистика»
ИИ создал файл src/navigation/AppNavigator.js и объяснил, что нужно создать папку src/screens и положить туда файлы экранов (пока пустые). Вот что он прислал:
Затем я создал файл src/constants/colors.js с цветами, как в прототипе:
В App.js я подключил навигатор:
Создание главного экрана (MainScreen)
Я написал:
«создай главный экран с балансом, поиском лучшей карты и сеткой категорий»
ИИ сгенерировал файл src/screens/MainScreen.js. Он был довольно большим, но я покажу ключевые фрагменты.
Структура экрана: заголовок, карточка баланса, блок поиска, результаты, рекомендация и сетка популярных категорий.
Вот как выглядел блок поиска:
Для выбора категории ИИ предложил использовать модальное окно. Я согласился, и мы добавили модалку с списком категорий.
Логика поиска лучшей карты была скопирована из HTML-прототипа и адаптирована под React Native. Вот функция, которую написал ИИ (я её потом немного доработал):
После поиска результаты отображались в карточке, как в доработанном HTML-прототипе.
Экран управления картами (CardsScreen)
Запрос:
«сделай экран со списком карт, где можно просматривать, редактировать и удалять карты»
ИИ выдал CardsScreen.js. Основные моменты:
- Использование хука useCards (о нём позже)
- Отображение карточек с названием, банком, категориями и процентом
- Удаление по долгому нажатию или через иконку корзины
Вот пример рендера одной карточки:
Форма добавления/редактирования карты (AddCardScreen)
Самый сложный экран. Я написал:
«нужна форма для добавления карты с выбором категорий и процентов»
ИИ создал AddCardScreen.js с модальным окном выбора категории. Ключевая часть – добавление категории с процентом:
Позже я попросил:
«на экране добавления карты при выборе категории из списка заменить назначение кнопки добавить на кнопку выбрать»
ИИ изменил модальное окно: теперь кнопка называлась «Выбрать» и только устанавливала выбранную категорию, а добавление происходило отдельно.
Работа с данными: хук useCards
Чтобы не дублировать код загрузки и сохранения карт, ИИ предложил создать кастомный хук. Я создал файл src/hooks/useCards.js со следующим содержимым (по совету ИИ):
Теперь любой экран мог просто вызвать const { cards, addCard } = useCards(); и работать с данными.
Стилизация и адаптация дизайна
На основе HTML-прототипа мы перенесли все стили. ИИ помогал переводить CSS в StyleSheet. Например, вот стили для карточки результата поиска:
Я постоянно спрашивал:
«какой параметр в коде регулирует расстояние между блоками»
ИИ терпеливо объяснял, что это marginBottom у карточек.
Типичные ошибки и их исправление
В процессе возникало множество ошибок. Вот самые запоминающиеся.
Ошибка 1: ReferenceError: Property 'setCards' doesn't exist
Я скопировал ошибку в чат. ИИ ответил:
«В возвращаемом объекте хука useCards нет функции setCards. Добавьте её в экспорт.»
Я добавил setCards в объект, возвращаемый хуком, и ошибка исчезла.
Ошибка 2: Objects are not valid as a React child
Эта ошибка появлялась, когда я пытался вставить объект в <Text>. Например, в переменной dailyRecommendation лежал объект, а не строка. ИИ объяснил:
«Ты пытаешься вывести объект внутри <Text>. Переменная dailyRecommendation должна быть строкой.»
Исправил:
javascript
setDailyRecommendation(`Используйте ${bestCard.card.name} (${bestCard.card.bank}) - до ${bestCard.percent}% кэшбэка`);
Ошибка 3: Лишние карты в модальном окне категорий
Я заметил, что при нажатии на категорию показываются все карты, даже те, у которых нет кэшбэка в этой категории. Написал:
«при нажатии на популярную категорию показывать только те банки, у которых добавлена соответствующая категория»
ИИ предложил добавить фильтр в функцию showCardsForCategory:
Проблема ушла.
Ошибка 4: Горизонтальные линии в модальном окне
Мне не нравились разделительные линии между элементами списка. Я попросил:
«убрать горизонтальные линии под названиями банков и процента»
ИИ посоветовал убрать borderBottomWidth из стиля modalCardItem и добавить условие для последнего элемента. Мы сделали так:
И в рендере: <View style={[styles.modalCardItem, index === modalCards.length-1 && styles.modalCardItemLast]}>.
Ошибка 5: Анимация появления окна
По умолчанию модальное окно появлялось со сдвигом (slide). Я хотел, чтобы оно появлялось плавно (fade). Спросил:
«изменить стиль появления окна при нажатии на популярную категорию на fade»
ИИ ответил: «Замените animationType="slide" на animationType="fade" в компоненте Modal.» Я так и сделал.
Запуск и тестирование
После каждого изменения я запускал приложение командой npx expo start и смотрел результат на телефоне через Expo Go. Если что-то шло не так – снова обращался к ИИ.
В конце концов, у меня получилось работающее приложение, которое делало всё, что и прототип, но уже в нативном виде.
Ключевые выводы
- ИИ может заменить программиста при условии чётких промптов и итеративной доработки.
- Важно уметь задавать вопросы и копировать ответы — никаких специальных знаний не требуется.
- React Native + Expo — отличный выбор для быстрого старта, если у вас уже есть JS/HTML-прототип.
- Ошибки неизбежны, но они легко решаются копированием сообщения об ошибке в чат с ИИ.
- Главное — терпение и готовность пробовать снова.
Этот опыт показал, что даже без знаний программирования можно создать полноценное мобильное приложение, если есть хороший прототип и помощник-ИИ. Главное – не бояться задавать вопросы и внимательно копировать ответы.
Однако важно понимать границы подхода: он оптимален лишь для прототипов, личных инструментов и MVP. Для серьёзных приложений (высокая нагрузка, безопасность, сложная архитектура, командная разработка, долгосрочная поддержка) этот метод не подходит — здесь неизбежно требуется участие профессионалов, иначе высок риск проблем с масштабированием и накопления технического долга.
В следующих статьях расскажу и том, как добавлял в свое приложение пользовательские категории, базы данных и уведомления по геолокации.