# 🚀 Быстрый старт для разработки ## Предварительные требования - ✅ Flutter SDK установлен - ✅ Dart SDK установлен - ✅ Chrome браузер ## 📋 Пошаговая инструкция ### 1️⃣ Запустите Backend Откройте **первый терминал** и запустите backend сервер: ```bash cd /Users/dmitry/StudioProjects/mnemo_cards/mnemo_cards_backend ./run_dev.sh ``` Вы должны увидеть: ``` Starting Mnemo Cards Backend in development mode... Backend will be available at http://localhost:8000 Server listening on http://0.0.0.0:8000 ``` ✅ Backend работает на `http://localhost:8000` ### 2️⃣ Запустите Frontend Откройте **второй терминал** и запустите web приложение: ```bash cd /Users/dmitry/StudioProjects/mnemo_cards/mnemo_cards_web_v2 flutter run -d chrome ``` Flutter автоматически откроет Chrome и приложение будет доступно на случайном порту. ### 3️⃣ Проверка работы 1. Приложение должно загрузиться без CORS ошибок 2. Откройте DevTools (F12) → Network 3. Проверьте запросы к backend (должны быть успешными) 4. Пройдите авторизацию через Google ## 🔧 Если возникли проблемы ### CORS Error Если вы видите CORS ошибку в консоли: ``` Access to XMLHttpRequest at 'http://localhost:8000/...' from origin '...' has been blocked by CORS policy ``` **Решение:** 1. Убедитесь что backend запущен 2. Перезапустите backend (может потребоваться после изменений) 3. Очистите кэш браузера (Ctrl+Shift+Delete) 4. Перезагрузите страницу (Ctrl+R) Подробнее см. [CORS_FIX.md](CORS_FIX.md) ### Connection Refused Если запросы не проходят: ```bash # Проверьте что backend работает curl http://localhost:8000/games ``` Должен вернуть JSON с играми. ### Backend не запускается ```bash # Убедитесь что порт 8000 свободен lsof -ti:8000 # Если порт занят, убейте процесс kill -9 $(lsof -ti:8000) # Или используйте другой порт cd mnemo_cards_backend dart run lib/main.dart -a 0.0.0.0 -p 8001 --isar isar --workdir $(pwd) ``` И обновите `ApiConfig.baseUrl` на `http://localhost:8001` ## 📝 Конфигурация ### API URL Конфигурация находится в `lib/domain/config/api_config.dart`: ```dart static String get baseUrl => const String.fromEnvironment( 'API_BASE_URL', defaultValue: 'http://localhost:8000', // Для разработки ); ``` Для production используйте environment variable: ```bash flutter run -d chrome --dart-define=API_BASE_URL=https://your-domain.com ``` ### Telegram Bot Deep Link Для работы веб-инициированного входа через Telegram можно переопределить имя бота: ```bash flutter run -d chrome \ --dart-define=API_BASE_URL=http://localhost:8000 \ --dart-define=TELEGRAM_BOT_USERNAME=mnemo_cards_bot ``` По умолчанию используется `mnemo_cards_bot`. Deep-link генерируется через `https://t.me/?start=login_`. ### CORS настройки CORS настроен в `mnemo_cards_backend/lib/api/mnemo_shelf.dart`: ```dart final corsConfig = { 'Access-Control-Allow-Origin': '*', // Для разработки - разрешены все origins 'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, HEAD, OPTIONS', 'Access-Control-Allow-Headers': '...', }; ``` ⚠️ Для production замените `'*'` на конкретный домен! ## 🏗️ Структура проекта ``` mnemo_cards_web_v2/ ├── lib/ │ ├── di/ # Dependency Injection (yx_scope) │ ├── domain/ # Business logic, services, state │ ├── presentation/ # UI, pages, widgets │ └── main.dart # Entry point ├── test/ # Unit & integration tests ├── web/ # Web-specific files └── pubspec.yaml # Dependencies ``` ## 🧪 Тестирование Запуск всех тестов: ```bash flutter test ``` Запуск конкретного теста: ```bash flutter test test/domain/services/http_repository_test.dart ``` ## 🔍 Отладка ### Flutter DevTools ```bash flutter run -d chrome --observatory-port=9999 ``` Затем откройте: http://localhost:9999/ ### Backend логи Backend выводит все запросы в консоль: ``` [app] GET /games [app] POST /user/create ``` ### Network Inspector 1. Откройте DevTools (F12) 2. Вкладка Network 3. Фильтр: XHR 4. Смотрите Headers и Response для каждого запроса ## 📚 Дополнительные ресурсы - [CORS_FIX.md](CORS_FIX.md) - Подробное решение CORS проблем - [API_INTEGRATION_TEMP.md](API_INTEGRATION_TEMP.md) - Документация по API - [PLAN.md](PLAN.md) - План разработки и архитектура ## 🎯 Горячие клавиши - `r` - Hot reload (без перезапуска) - `R` - Hot restart (полный перезапуск) - `h` - Помощь - `q` - Выход --- **Удачной разработки! 🚀**