Как я сделала своё мобильное приложение: честная техническая версия 🤖

Если коротко — я начинала как психолог, а закончила как продакт, дизайнер и разработчик в одном лице 😅

Ни курса по программированию, ни команды — только Figma, v0.dev, Cursor, GPT, Grog и огромное упрямство.

Вот процесс, как он был на самом деле

1. Первый шаг — прототип в Figma

Я начала с того, что просто нарисовала, как я вижу приложение:
• экраны трекинга,
• мини-аналитику,
• рекомендации,
• базовый UX.

Это был обычный прототип в Figma, статичные картинки — самое простое, чтобы “увидеть идею”.

2. Подключение v0.dev (V0) и улучшение интерфейса

Потом я нашла инструмент v0.dev (модный генератор UI/UX).
Я показала ему свои макеты.

Что он сделал:
• довольно точно повторил мой дизайн и даже кое-где улучшил,
• создал более чистый UI,
• сделал нормальную структуру экранов.

Но я быстро поняла:

👉 V0 хорошо делает картинки (дизайн),

но плохо делает внутрянку приложения —
логику, хранение данных, аналитику, реальные функции.

То есть UI получился красивым, но приложение “жило” только поверхностно.

3. Перенос кода в Cursor и настоящая разработка

Я взяла всё, что сгенерировал V0, и переместила код в Cursor.

И дальше началась настоящая работа:
• построение структуры данных,
• локальное хранение состояния дня,
• аналитика + статистика,
• расчёт графиков,
• система логики рекомендаций,
• улучшение UX.

Cursor + GPT+Grog сделали “скелет” приложения нормальным —
впервые появилось ощущение, что внутри действительно есть приложение, а не просто набор экранов.

4. Неожиданный поворот: я узнала, что всё это время делала… веб-версию

Когда приложение было почти готово, я спросила у Cursor:

«Окей, что дальше? Как публиковать это в App Store и Google Play?»

И он спокойно ответил:

«Ну… мы же делали не мобильное приложение, а PWA-вебку».

Я была в шоке.
Несколько месяцев работы — и у меня не мобильное приложение, а веб-версия, замаскированная под мобилку.

5. Попытка №2: переделать всё в нативную мобильную версию

Cursor предложил:

«Давай переделаем дизайн под Xcode/Android Studio».

Но:
• дизайн стал корявым;
• структура поехала;
• UX стал вообще не тем, что я задумывала.

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

6. Решение: Capacitor

Совместно с GPT и Grog я наткнулась на Capacitor.

Что это такое простыми словами:

Capacitor — это инструмент, который:
• берёт веб-версию приложения,
• “заворачивает” её в нативный контейнер,
• и превращает в полноценные приложения для iOS и Android.

Но важно:
• если веб-версия выглядит как обычный сайт → магазины не принимают;
• если веб-версия максимально похожа на мобильное приложение → ок.

Мне повезло — моя веб-версия и так была как мобильная, поэтому:

✔ App Store / Google Play не видят разницы
✔ дизайн не пришлось переделывать
✔ весь функционал сохранился

7. Почему Capacitor идеально подошёл под мою концепцию

Моё приложение по задумке:
• без сервера
• без регистрации
• без пользовательских данных, уходящих наружу
• всё хранится локально на устройстве

Это означает:
• нет расходов на backend,
• нет сложных интеграций,
• нет риска утечек данных,
• супер-простая архитектура (чисто FE + локальное хранилище).

А Capacitor идеально работает с PWA + локальным приложением, ничего не ломая.

8. Завершение разработки в Cursor

После перехода на Capacitor:
• мы с Cursor адаптировали всё под мобилки,
• поправили размеры экранов,
• допилили свайпы, навигацию, кнопки,
• собрали нативные билды для iOS и Android,
• добавили Crashlytics/логирование,
• подготовили APK и IPA.

В итоге получились два полноценные мобильные приложения, сделанные:
• без команды,
• без сервера,
• без бюджета на разработку,
• только на Cursor + GPT + Grog

9. О том, чего обычно никто не видит

За кадром осталось самое нервное — постоянные падения, стирание данных и попытки всё восстановить.
У меня несколько раз:
• падал Cursor,
• исчезали целые чаты с кодом,
• пропадали сохранения,
• ломались куски логики, которые вчера ещё работали.