Как я сделала своё мобильное приложение: честная техническая версия 🤖
Если коротко — я начинала как психолог, а закончила как продакт, дизайнер и разработчик в одном лице 😅
Ни курса по программированию, ни команды — только 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,
• исчезали целые чаты с кодом,
• пропадали сохранения,
• ломались куски логики, которые вчера ещё работали.
