От прототипа до публикации: сделал приложение без единой строчки кода

Я продолжаю серию статей о создании помощника по выбору лучшей банковской карты для каждой покупки. В прошлых частях я рассказывал, как у меня родилась идея и как мы (я и DeepSeek) сделали первый 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 я подключил навигатор:

Я написал:

«создай главный экран с балансом, поиском лучшей карты и сеткой категорий»

ИИ сгенерировал файл src/screens/MainScreen.js. Он был довольно большим, но я покажу ключевые фрагменты.

Структура экрана: заголовок, карточка баланса, блок поиска, результаты, рекомендация и сетка популярных категорий.

Вот как выглядел блок поиска:

Для выбора категории ИИ предложил использовать модальное окно. Я согласился, и мы добавили модалку с списком категорий.

Логика поиска лучшей карты была скопирована из HTML-прототипа и адаптирована под React Native. Вот функция, которую написал ИИ (я её потом немного доработал):

После поиска результаты отображались в карточке, как в доработанном HTML-прототипе.

Запрос:

«сделай экран со списком карт, где можно просматривать, редактировать и удалять карты»

ИИ выдал CardsScreen.js. Основные моменты:

Вот пример рендера одной карточки:

Самый сложный экран. Я написал:

«нужна форма для добавления карты с выбором категорий и процентов»

ИИ создал AddCardScreen.js с модальным окном выбора категории. Ключевая часть – добавление категории с процентом:

Позже я попросил:

«на экране добавления карты при выборе категории из списка заменить назначение кнопки добавить на кнопку выбрать»

ИИ изменил модальное окно: теперь кнопка называлась «Выбрать» и только устанавливала выбранную категорию, а добавление происходило отдельно.

Чтобы не дублировать код загрузки и сохранения карт, ИИ предложил создать кастомный хук. Я создал файл 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

Эта ошибка появлялась, когда я пытался вставить объект в . Например, в переменной dailyRecommendation лежал объект, а не строка. ИИ объяснил:

«Ты пытаешься вывести объект внутри . Переменная 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. Если что-то шло не так – снова обращался к ИИ.

В конце концов, у меня получилось работающее приложение, которое делало всё, что и прототип, но уже в нативном виде.

Конечно, я прекрасно понимаю, что использовал не самые оптимальные промпты и не всегда выбирал лучшую модель ИИ для конкретной задачи. Если бы я владел языком программирования, процесс шёл бы значительно быстрее, а код получился бы качественнее и надёжнее. Профессиональный разработчик не совершал бы множества ошибок, на исправление которых я тратил время через ИИ. Некоторые особо сложные моменты я даже перепроверял в ChatGPT и Gemini Pro — там, где DeepSeek давал сбои, другие модели помогали найти решение. Всё это лишь подтверждает простую истину: ИИ — мощный инструмент, но фундаментальные знания и опыт по-прежнему незаменимы.

Приложение уже опубликовано в RuStore, и я продолжаю его дорабатывать — добавляю новые возможности, исправляю ошибки, которые сам же и нахожу в процессе использования. Конечно, оно не образец разработки, но оно закрывает мою личную потребность.

Главный вывод из всей этой истории: современные инструменты действительно позволяют не-программисту создать работающее мобильное приложение от идеи до публикации в сторе. Достаточно иметь внятный прототип, ИИ-помощника и готовность методично пробираться через ошибки.

Насколько далеко можно зайти таким путём в действительно сложных проектах — вопрос открытый. Я вижу, что программисты вокруг активно используют ИИ-помощников, но для них это лишь инструмент ускорения, а не замена опыта и архитектурного мышления. Думаю, что для масштабных задач с высокими нагрузками или жёсткими требованиями к безопасности без профессиональной команды всё же не обойтись. Но то, что ИИ позволяет быстро и дёшево воплотить идею в жизнь и поддерживать её — уже доказанный факт.

А вы используете ИИ в работе? Если да — то как именно?

Больше статей про ИИ и финансы — в моём блоге на Дзене.