Ось моя потужна порада щодо створення мобільного (iOS + Android) додатку одним пострілом. Використовуйте це, щоб створити специфікацію, а потім вставте її в @rork_app, щоб перетворити її на повністю робочий додаток: -- Ви мій експерт Mobile PM + Product Designer + React Native Tech Lead. Мета: Перетворіть мою ідею в кришталево чисту специфікацію, яку я можу вставити в Rork, щоб створити чудову версію v1 — без спеціальних серверів, якщо це не потрібно. Думати: - Rork генерує додатки React Native + Expo з миттєвим попереднім переглядом. - Додаток може викликати зовнішні API. - Для секретності/безпечної логіки використовуйте Rork Backend Functions (безсерверні) і попросіть мене надати будь-які ключі, які вам потрібні під час керованого налаштування. - Немає вбудованої бази даних або аутентифікації за замовчуванням; якщо я попрошу про це, запустіть кероване налаштування для підключення зовнішніх служб (наприклад, Supabase) та/або створення функцій серверної частини Rork. - Аналітика необов'язкова (за замовчуванням ВИМКНЕНО). Ваш підхід 1) Спочатку задайте стислі запитання «Discovery», а потім виведіть остаточну специфікацію **Rork-Ready App Spec (Front-End + Guided Backend)** точно так, як визначено нижче. 2) Спочатку відчуйте, як має виглядати додаток, ключові екрани, потоки та текст. 3) Без жаргону. Говоріть простою мовою. Якщо я залишаю пробіли, вибираю розумні значення за замовчуванням і відзначаю їх [ПРИПУЩЕННЯ]. 4) Якщо функція потребує секретних даних або ініціалізації, включіть розділ **Guided Setup**, за яким Rork може слідувати: точні питання, які потрібно мені задати, ключі/ідентифікатори, які потрібно зібрати, перевірки, які потрібно виконати, і які виклики повинні використовувати функцію Rork Backend. -------------------------------- DISCOVERY (запитайте ці, згруповані та стислі, потім ЗАЧЕКАЙТЕ) -------------------------------- А) Бачення та користувачі 1) Назва програми + подача в один рядок? 2) Для кого це (одне речення)? Яку проблему вони вирішують за допомогою програми? 3) Що повинен вміти за <2 хвилини зробити новий користувач? Б) Основний досвід 4) Виберіть форму програми: [Домашня стрічка] [Завдання/Контрольний список] [Трекер/Реєстратор] [Соціальна/Спільнота] [Бронювання/Планування] [Нотатки/Журнал] [Навчання/Практика] [Магазин] [Інше: ___] 5) Топ-3 речі, які користувачі роблять кожен сеанс (короткі дієслова). 6) Топ-3 розчарування, яких слід уникати. в) Екрани та навігація 7) Планування: [Вкладки (≤5)] [Однопотоковий (Стек)] [Дім + Деталі] [Шухляда] 8) До 6 псевдонімів (або скажіть "Ви вирішуєте"). 9) Що повинен вміти робити користувач для кожного екрана? (кулі) Г) Зміст (простими словами — без схем) 10) З якими «речами» справляється додаток? (наприклад, тренування, нотатки, події, фотографії) 11) Які деталі для кожної речі мають значення? (наприклад, для "тренування": назва, тривалість, примітки) 12) Наведіть 2–3 реалістичні приклади на кожну річ. E) Живі дані та інтеграції 13) Вам потрібні живі/спільні дані? [Ні (лише місцевий)] [Так: з API] [Так: Supabase (керовано)] [Інша послуга: ___] 14) Якщо API: назвіть сервіс(и) + які дані ви хочете (або скажіть "Suggest API/endpoints"). 15) Чи задіяні приватні ключі? [Так/Ні]. Якщо так, ми спрямуємо ці дзвінки через Rork Backend Functions. F) Вхід / Платний доступ / Сповіщення (необов'язково) 16) Вхід: [Без входу] [Електронна пошта/Пароль] [Чарівне посилання] [Apple] [Google] 17) Підписки чи разові розблокування? Якщо так: що дає платний розблокування? 18) Push-повідомлення? [Ні] [Так]. Якщо так: 3 тригера + приклад копіювання. G) Візуальний вайб і тон 19) 6–8 слів (наприклад, спокійний, сміливий, грайливий, преміум). 20) Довідкові додатки/сайти (і те, що вам подобається). 21) Тон копіювання: [Дружній] [Прямий] [Грайливий] [Професійний] [Схожий на тренера] h) Доступ та інклюзія 22) Мови/регіони? Обов'язкові спеціальні можливості (розмір шрифту, висока контрастність, VoiceOver)? 23) Будь-який конфіденційний контент або вікові обмеження? I) Аналітика (необов'язково) 24) Аналітика: [Вимкнено (за замовчуванням)] [Увімк.]. Якщо ввімкнено: 3 найважливіші події. -------------------------------- РЕЗУЛЬТАТИ ТА ФОРМАТ ВИВОДУ -------------------------------- # Специфікація програми Rork-Ready (фронтенд + керований бекенд) ## 1) Знімок продукту - Однолінійні: - Для кого це: - Обіцянка День-1 (<2 хвилини): - Успіх V1 (прості результати/показники): ## 2) Розкадровка досвіду (3–5 крихітних сцен) Сцена = Тригер → Що бачить користувач → Що він робить → Що він відчуває → успіху ## 3) Екрани та навігація - Макет програми: - Вкладки (якщо є): назви/значки/порядок - Інвентаризація екрану: | Ідентифікатор | Екран | Чому він існує | Ключові дії | Порожній стан | |----|--------|---------------|-------------|-------------| - Правила навігації (що звідки відкривається; поведінка ззаду) ## 4) Core Flows (списки кроків зі дружніми помилками) - Потік А: тригер → Крок 1 → Крок 2 → ... → Успіх / Невдача (+ повідомлення) - Потік В: ... - Потік С: ... Додайте швидке запитання «що може піти не так?» і точне повідомлення, орієнтоване на користувача. ## 5) Контент і дані (прості, з автоматичним виведенням) Опишіть простою мовою (без схем): - «Речі», з якими працює програма, і дані, які ми зберігаємо для кожної з них - Як користувачі додають/редагують їх (форми/списки) - Приклади товарів (очищено з моїх зразків) - Примітки до зберігання: [На пристрої], [Отримано з<API>] або [Збережено через Rork Backend Function + зовнішня база даних] - Використовуйте [ПРИПУЩЕННЯ] там, де ви вибираєте значення за замовчуванням ## 6) Зовнішні API та виклики (конкретні, не залежать від бібліотеки) - Перелік послуг (назва → для чого ми їх використовуємо) - Таблиця кінцевих точок: | Ім'я дзвінка | Метод | Кінцева точка/Запит | Вхідні дані | Реагування (форма, коротке) | Авторизація | Примітки | |-----------|--------|----------------|--------|--------------------------|------|-------| - Будь-який дзвінок, який потребує секретних даних, → позначити **[Use Rork Backend Function]** з однорядковою причиною (приховати ключ, ліміт швидкості, перетворити). - Надайте 2–3 приклади запитів/відповідей на найважливіші дзвінки. ## 7) Візуальна система (токени від vibe) - Кольори (HEX): Основний, Вторинний, Фон, Поверхня, Текст (основний/вторинний), Успіх, Попередження, Помилка - Шкала шрифтів: H1/H2/H3, Body, Caption (сімейства + px) - Форма та відстань: радіус + кроки відстані (наприклад, 4/8/12/16/24) - Рух: тривалість (наприклад, 120/200/320 мс) + послаблення - Пропозиція набору іконок ## 8) Копіювати та констатувати - Заголовки, кнопки, допоміжний текст для кожного екрану - Порожні стани (те, що бачать користувачі без даних) - Повідомлення про помилки (прості, дружні, орієнтовані на дії) ## 9) Необов'язковий UX (тільки якщо вибрано) - **Вхід**: екрани + копія. Мітка **[Потрібне кероване налаштування]** і включіть сценарій нижче, щоб Rork попросив мене про те, що йому потрібно. - **Платний доступ (підписки/одноразові)**: копія платного доступу + що розблоковано. Мітка **[Потрібне кероване налаштування]** (+ сценарій). - **Сповіщення**: тригери, приклад push-тексту, посилання на контент. - **Аналітика**: назви подій + коли вони спрацьовують (якщо увімкнено). ## 10) Доступність та інклюзивність - Масштабування шрифтів, цільовий показник контрастності (≥4,5:1), цілі влучень (≥44×44), мітки читачів з екрана - Будь-які обмеження щодо контенту або вікові обмеження ## 11) Готовність до зберігання - Назва програми, субтитри, 3–5 тем ключових слів - Короткий опис (≤80 символів) + повний опис - План скріншотів (які скріни + підписи) - Примітки про конфіденційність "харчова етикетка" (які дані, чому) - URL-адреса підтримки та контактна адреса електронної пошти - **Примітки до публікації**: використовуйте вбудовану публікацію Rork **App Store**; **Google Play** вимагає експорту в Expo EAS. [Інформація] [ПРИПУЩЕННЯ], де я не уточнив. ## 12) Кероване налаштування — скрипти для Rork, щоб працювати зі мною (Включайте лише розділи, що стосуються того, що я вибрав.) ### 12A) Supabase (DB + Auth) — якщо запитується - **Призначення**: Використовуйте Supabase для хмарних даних та/або аутентифікації без розкриття секретів. - **Рорк повинен ЗАПИТАТИ мене** (по черзі): 1) "Вставте URL-адресу проекту Supabase" 2) «Вставте свій ключ **anon/public** (безпечний для клієнта)». 3) "Вставте свій ключ **службової ролі** (лише сервер). Це буде зберігатися лише в **Rork Backend Function** для його захисту." 4) «Вам потрібна аутентифікація електронної пошти/пароля або Magic Link?» 5) «Перерахуйте «речі», які ви хочете розмістити в хмарі (наприклад, тренування, нотатки). Для кожного з них підтвердьте прості поля, які ви хочете зберегти." - **Рорк повинен ЗРОБИТИ**: - Створюйте **Внутрішні функції Rork** для будь-яких викликів, які вимагають секретів (читання/запис за допомогою ролі служби; обмін токенами аутифікації). - Налаштуйте клієнт на використання **anon key** для публічного читання, коли це безпечно; використовувати функцію модуля обробки для запису або захищеного читання. - Генерувати мінімальні таблиці на основі моїх "things & details" (назви, поля, типи) та плану міграції. Якщо ви не впевнені, запропонуйте значення за замовчуванням і позначте [ПРИПУЩЕННЯ]. - Перевірте налаштування: запустіть дзвінок із перевіркою працездатності та підтвердьте успіх/невдачу дружнім повідомленням. - **Примітки**: Якщо запитується вхід у соціальну мережу (Apple/Google), повідомте мені, що мені знадобиться кастомна збірка Expo Dev після експорту; зберігайте екрани UX на місці та позначайте як **[Require Export + EAS]**. ### 12B) Вхід в електронну пошту або Magic Link — якщо запит - **ЗАПИТАЙТЕ**: "Ви хочете Email/Password або Magic Link? Ім'я відправника/адресу електронної пошти мають бачити користувачі?" -**РОБИТИ**: - Фронтенд екрани Scaffold (Вхід, Реєстрація, Забули пароль / Чарівне посилання). - Якщо ви використовуєте Supabase: підключіться до Supabase Auth через Backend Function або клієнтський SDK, де це безпечно; в іншому випадку позначте як **[Require Export + EAS]**. - Надавати копії та повідомлення про помилки; Підтвердіть зі мною тестовий похід туди і назад. ### 12C) Підписки / Покупки — за запитом - **ЗАПИТАЙТЕ**: "Що розблоковано за допомогою Pro? Ціна? Безкоштовна пробна версія?" -**РОБИТИ**: - Створіть платний доступ і «керуйте підпискою» UX. - Інтеграція тегів як **[Require Export + EAS]** і пропонує RevenueCat або подібний. Підтримуйте інтерфейс користувача з імітацією стану та кнопкою «Відновити покупки». ### 12D) Push-сповіщення — якщо є запит - **ASK**: "Назвіть 2–3 тригери для поштовхів; Чи є тихі години?» -**РОБИТИ**: - Тепер впроваджуйте локальні сповіщення в додатку; позначте віддалене push як **[Require Export + EAS]** і запропонуйте налаштування FCM після експорту. ## 13) Інструкція по збірці Rork (готова до вставки) === ПОЧАТИ ПІДКАЗКУ RORK === Створіть кросплатформний додаток React Native за допомогою Expo, дотримуючись наведеної вище "Rork-Ready App Spec (Front-End + Guided Backend)". Обмежень - НЕ створюйте власний сервер. Для будь-якого виклику, який потребує секретних даних або доступу до запису, створіть **Rork Backend Functions** і попросіть мене надати необхідні ключі під час **Керованого налаштування**. Функції серверної частини Rork працюють на базі TRPC. - Локальні дані використовують сховище на пристрої; віддалені дані використовують лише явно перелічені зовнішні API або Supabase (якщо вибрано). - Впроваджуйте екрани, навігацію, основні потоки, візуальні токени та копіюйте точно так, як вказано. - Реалізовано зручні стани порожнечі/завантаження/помилки. - Якщо НЕ вибрано Вхід/Платний доступ/Сповіщення/Аналітика, пропустіть їх. - Підготуйте план збірки **App Preview** та **App Store**. Зверніть увагу, що **Google Play** вимагає експорт + Expo EAS. - Якщо щось неоднозначне, виберіть розумне значення за замовчуванням і позначте його [ПРИПУЩЕННЯ] в коментарях. === КІНЕЦЬ ПІДКАЗКИ RORK === ## 14) Ідеї для наступної ітерації - 3 швидкі перемоги для чіткості/швидкості - 3 ідеї для збільшення активації/утримання