🎯 О чём этот конспект: Пошаговое руководство по созданию мобильного приложения для изучения языков (аналог Duolingo) с использованием AI-платформы Ror, Expo и API OpenAI. Разбирается процесс генерации кода, интеграции текстовых и аудио-функций, а также деплой в магазины приложений.

👤 Кому будет полезно: Вайбкодерам, разработчикам на React Native и предпринимателям, которые хотят быстро собирать и запускать нативные мобильные приложения без глубокого написания кода вручную.

✨ Что получите: Готовую методику создания MVP мобильного приложения с AI-репетитором, озвучкой (TTS) и системой уроков, а также четкий алгоритм публикации в App Store и Google Play.

1. Промпт-инжиниринг и скаффолдинг структуры приложения

Контекст: Автор использует платформу Ror.com (специализированный AI-инструмент для генерации React Native/Expo приложений) в связке с Abacus Chat для доступа к топовым моделям (Claude 3.5 Sonnet, GPT-4). Первый шаг — создание базового каркаса: навигации, экранов регистрации и заглушек для курсов. Важно сразу задать контекст использования Expo, так как это стандарт для быстрой разработки и тестирования на реальных устройствах через QR-код.

Выгода: Экономия 20-30 часов рутинной настройки навигации (React Navigation), стилей и базовых компонентов.

Как применить:

• Шаг 1: Формирование базового промпта — Введите в Ror или аналогичный агент запрос на создание структуры.
• Шаг 2: Выбор названия — Используйте LLM для генерации нейминга (например, "Babel Bloom").

Промпт для старта:

Set up a React Native project using Ror targeting iOS. 
Scaffold the basic structure for a language learning app named "Babel Bloom". 
Include: 
1. A splash welcome screen with app branding and "Get Started" button.
2. Navigation flow: Welcome -> Signup/Login -> Course/Lesson selection.
3. Placeholder screens for Lessons, User Profile, and Achievements.
Use Lucide AI icons for a clean modern look.

Результат: Рабочее приложение с кликабельной навигацией и базовыми экранами профиля и уроков.

2. Редизайн по референсу (Visual-to-Code)

Контекст: Чтобы приложение не выглядело как стандартный шаблон, используется метод визуальной стилизации. Автор берет скриншот качественного дизайна с Dribbble и скармливает его AI. Это позволяет передать "вайб" приложения: скругления кнопок, цветовую палитру, отступы и шрифты без ручного подбора CSS-свойств.

Выгода: Получение уникального, дорого выглядящего UI за 5 минут без навыков дизайнера.

Как применить:

• Шаг 1: Поиск референса — Зайдите на Dribbble, введите "Language App" и сделайте скриншот понравившегося интерфейса.
• Шаг 2: Промпт на стилизацию — Загрузите скриншот в Ror и добавьте инструкции по анимации.

Промпт для редизайна:

I want you now to redesign the whole app using this image as a reference. 
Match the colors, fonts, sizing, and rounded buttons. 
Add smooth transitions, swipes, and animations to make it feel like a native iOS application. 
Ensure all screens (Home, Lessons, Profile) follow this exact look. 
Make sure all Expo libraries for animations are included.

Результат: Приложение с кастомным дизайном и плавными нативными анимациями.

3. Интеграция OpenAI для динамического контента и тестов

Контекст: Вместо жестко закодированных (hardcoded) уроков приложение использует OpenAI API для генерации контента "на лету". Это позволяет создавать бесконечное количество упражнений для любого уровня (A1-C2). Ключевой момент — использование переменных окружения (Environment Variables) для безопасности API-ключа.

Выгода: Приложение становится функциональным продуктом с реальным образовательным контентом.

Как применить:

• Шаг 1: Настройка ключей — Получите API Key в панели OpenAI и добавьте его в Ror (Integrations -> Environment Variables).
• Шаг 2: Создание логики уроков — Запросите создание функций генерации квизов и диалогов.

Промпт для логики:

Integrate OpenAI API using the OPENAI_API_KEY from environment variables. 
Create a logic where:
1. When a user selects a lesson (e.g., Spanish Basics), the AI generates 5 vocabulary words and a short practice conversation.
2. Add a "Practice Quiz" feature that generates 3 questions based on the lesson.
3. Show translations toggle for conversation practice.

Результат: Динамическая система обучения, которая генерирует новые задания при каждом входе.

4. AI-учитель с функцией Text-to-Speech (TTS)

Контекст: Для клонирования функционала Duolingo необходима озвучка. Автор внедряет персонажа — AI-агента Марию, с которой можно общаться в чате. Используется встроенная функция OpenAI для преобразования текста в речь, чтобы пользователь мог слышать правильное произношение.

Выгода: Повышение ценности продукта (Retention) за счет интерактивного обучения.

Как применить:

• Шаг 1: Создание интерфейса чата — Промпт на создание экрана "AI Teacher".
• Шаг 2: Подключение аудио — Использование библиотеки expo-av или API OpenAI Audio.

Промпт для AI-учителя:

Create an AI Teacher agent named "Maria". 
Add a chatbot interface where I can ask questions like "How to order coffee in Spanish?". 
Use OpenAI to generate responses and integrate Text-to-Speech. 
Add an audio icon next to every Maria's message so I can click and hear the pronunciation.

Результат: Полноценный голосовой ассистент внутри приложения.

5. Публикация: От Ror до App Store

Контекст: Финальный этап — превращение проекта в реальное приложение в магазине. Автор использует интеграцию Ror с Expo Application Services (EAS). Для этого требуются аккаунты Apple Developer ($99/год) и Expo.dev (бесплатно).

Выгода: Понимание полного цикла выпуска продукта, а не просто создание "демки".

Алгоритм деплоя:

1. GitHub: Включите авто-коммиты в Ror (Integrations -> GitHub), чтобы иметь историю версий и возможность отката (Restore).
2. App Store Connect: Создайте новую запись приложения, заполните Bundle ID и SKU.
3. Expo Token: Создайте Access Token в настройках профиля Expo.dev.
4. Submission: В Ror выберите "Publish to App Store", введите Apple ID и Expo Token.

Результат: Сборка (build) отправляется в TestFlight, где её можно тестировать на реальных iPhone и отправлять на проверку цензорам Apple.

FAQ

В: Можно ли создать такое приложение полностью бесплатно? О: Инструменты разработки (Ror, Expo) имеют бесплатные уровни, но для публикации в App Store обязательна подписка Apple Developer за $99 в год. Также использование OpenAI API тарифицируется по факту использования (Pay-as-you-go).

В: Как обновлять приложение после публикации? О: Благодаря Expo, многие изменения (текст, стили, логика JS) можно обновлять "по воздуху" (Over-the-Air updates) без повторной модерации в App Store. Серьезные изменения нативных модулей потребуют новой сборки.

В: Где хранится прогресс пользователя? О: В данном примере прогресс хранится локально на устройстве (Local Storage). Для полноценного продукта рекомендуется подключить внешнюю базу данных (например, Supabase или Firebase) через тот же Ror.

В: Поддерживает ли Ror Android? О: Да, Ror базируется на React Native, поэтому приложение автоматически адаптируется под Android. Процесс публикации в Google Play аналогичен, но требует аккаунта разработчика Google ($25 единоразово).

В: Что делать, если AI выдает ошибку в коде? О: В Ror есть режим "Agent Mode" для авто-исправления и ручной редактор кода. Если функция сломалась, используйте кнопку "Restore" для отката к последней рабочей версии из GitHub.

Конспект создан на основе видео «I Built a Duolingo Clone in 15 Minutes (No Code)» канала Marson. Все права на оригинальный материал принадлежат авторам. Источник: https://www.youtube.com/watch?v=w9LL5vKJL-A