@digilogiclabs/create-saas-app 2.11.0 → 2.12.1

package/src/templates/mobile/ui-auth-payments-ai-rag/template/docs/MOBILE-SETUP.md

@@ -1,787 +0,0 @@
-# Mobile AI Setup Guide
-
-Complete setup guide for your React Native AI Knowledge App with RAG v4.0.0.
-
-## 📱 Quick Mobile Setup
-
-```bash
-# Create mobile AI app
-npm create saas-app my-mobile-ai --template=mobile-ai-rag
-cd my-mobile-ai
-
-# Setup for React Native/Expo
-npm run setup:rag
-
-# Seed mobile knowledge
-npm run seed:knowledge
-
-# Start development
-npx expo start
-```
-
-**Scan QR code with Expo Go app** or press `i` for iOS simulator, `a` for Android emulator.
-
-## 🔧 Prerequisites
-
-### Development Environment
-
-**macOS (iOS + Android):**
-```bash
-# Install Xcode (for iOS)
-# Download from Mac App Store
-
-# Install Android Studio (for Android)
-# Download from developer.android.com
-
-# Install Expo CLI
-npm install -g @expo/cli
-
-# Install iOS Simulator (optional)
-xcrun simctl list devices
-```
-
-**Windows/Linux (Android only):**
-```bash
-# Install Android Studio
-# Download from developer.android.com
-
-# Install Expo CLI
-npm install -g @expo/cli
-
-# Setup Android emulator
-# Follow Android Studio setup guide
-```
-
-### Required Accounts
-
-1. **Expo Account**: [Sign up at expo.dev](https://expo.dev/)
-2. **Supabase Account**: [Database backend](https://supabase.com/)
-3. **OpenAI Account**: [AI/ML services](https://platform.openai.com/)
-4. **EAS Account**: For app building (optional for development)
-
-## 📁 Mobile Project Structure
-
-```
-my-mobile-ai/
-├── app/                    # Expo Router pages
-│   ├── (tabs)/            # Tab navigation
-│   │   ├── ai.tsx         # Main AI interface
-│   │   ├── knowledge.tsx  # Knowledge management
-│   │   └── analytics.tsx  # Usage analytics
-│   ├── auth/              # Authentication screens
-│   │   ├── login.tsx
-│   │   └── signup.tsx
-│   └── onboarding/        # First-time user flow
-├── components/
-│   └── rag/               # RAG-specific components
-├── hooks/
-│   ├── useRAGSystem.ts    # Core RAG functionality
-│   ├── useOfflineSync.ts  # Offline capabilities
-│   └── useVoiceInput.ts   # Speech recognition
-├── lib/
-│   ├── rag/               # RAG configuration
-│   ├── supabase.ts        # Mobile Supabase client
-│   └── storage.ts         # AsyncStorage utilities
-├── types/                 # TypeScript definitions
-└── scripts/               # Setup and utility scripts
-```
-
-## ⚙️ Environment Configuration
-
-### Mobile Environment Variables
-
-Create `.env.local`:
-
-```env
-# Supabase Configuration
-EXPO_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
-EXPO_PUBLIC_SUPABASE_ANON_KEY=eyJ0eXAi...your-anon-key
-
-# OpenAI Configuration (client-side)
-EXPO_PUBLIC_OPENAI_API_KEY=sk-...your-openai-key
-
-# App Configuration
-APP_VARIANT=development
-EAS_PROJECT_ID=your-eas-project-id
-```
-
-⚠️ **Security Note**: React Native embeds environment variables in the build. For production apps, use server-side API routes for sensitive operations.
-
-### App Configuration
-
-Update `app.config.js`:
-
-```javascript
-const IS_DEV = process.env.APP_VARIANT === 'development'
-
-export default {
-  expo: {
-    name: IS_DEV ? 'AI Assistant (Dev)' : 'AI Assistant',
-    slug: 'ai-knowledge-assistant',
-    version: '1.0.0',
-
-    // App icons and splash screen
-    icon: './assets/icon.png',
-    splash: {
-      image: './assets/splash.png',
-      resizeMode: 'contain',
-      backgroundColor: '#ffffff'
-    },
-
-    // Platform-specific config
-    ios: {
-      bundleIdentifier: 'com.yourcompany.ai-assistant',
-      supportsTablet: true,
-      infoPlist: {
-        NSMicrophoneUsageDescription: 'This app uses microphone for voice queries',
-        NSCameraUsageDescription: 'This app uses camera to scan documents'
-      }
-    },
-
-    android: {
-      package: 'com.yourcompany.aiassistant',
-      permissions: [
-        'RECORD_AUDIO',
-        'CAMERA',
-        'READ_EXTERNAL_STORAGE'
-      ]
-    },
-
-    // Configuration passed to app
-    extra: {
-      supabaseUrl: process.env.EXPO_PUBLIC_SUPABASE_URL,
-      supabaseAnonKey: process.env.EXPO_PUBLIC_SUPABASE_ANON_KEY,
-      openaiApiKey: process.env.EXPO_PUBLIC_OPENAI_API_KEY
-    }
-  }
-}
-```
-
-## 🎯 Domain-Specific Mobile Configs
-
-### Plant Care App
-```typescript
-// lib/rag/config.ts
-export const plantCareConfig = {
-  domain: 'plants',
-  voice: {
-    plantNamesRecognition: true,
-    scientificNamesSupport: true,
-    gardeningTerms: true
-  },
-  camera: {
-    plantIdentification: true,
-    diseaseDetection: true,
-    leafAnalysis: true
-  },
-  notifications: {
-    wateringReminders: true,
-    seasonalTips: true,
-    pestAlerts: true
-  },
-  offline: {
-    essentialPlantInfo: true,
-    emergencyGuides: true
-  }
-}
-```
-
-### E-commerce App
-```typescript
-export const ecommerceConfig = {
-  domain: 'ecommerce',
-  voice: {
-    productSearch: true,
-    priceQueries: true,
-    brandRecognition: true
-  },
-  camera: {
-    barcodeScanning: true,
-    visualProductSearch: true,
-    receiptScanning: true
-  },
-  notifications: {
-    priceDropAlerts: true,
-    stockAlerts: true,
-    dealNotifications: true
-  },
-  offline: {
-    productCatalog: true,
-    wishlistAccess: true
-  }
-}
-```
-
-### Education App
-```typescript
-export const educationConfig = {
-  domain: 'education',
-  voice: {
-    questionAnswering: true,
-    pronunciationHelp: true,
-    languageSupport: ['en', 'es', 'fr']
-  },
-  camera: {
-    documentScanning: true,
-    handwritingRecognition: true,
-    diagramAnalysis: true
-  },
-  notifications: {
-    studyReminders: true,
-    assignmentDeadlines: true,
-    progressUpdates: true
-  },
-  offline: {
-    courseContent: true,
-    practiceExercises: true,
-    offlineQuizzes: true
-  }
-}
-```
-
-## 📱 Mobile-Specific Features Setup
-
-### Voice Input Configuration
-
-```typescript
-// hooks/useVoiceInput.ts
-import { useState, useEffect } from 'react'
-import Voice from '@react-native-voice/voice'
-
-export function useVoiceInput() {
-  const [isListening, setIsListening] = useState(false)
-  const [transcript, setTranscript] = useState('')
-
-  useEffect(() => {
-    Voice.onSpeechStart = () => setIsListening(true)
-    Voice.onSpeechEnd = () => setIsListening(false)
-    Voice.onSpeechResults = (e) => setTranscript(e.value[0])
-
-    return () => Voice.destroy().then(Voice.removeAllListeners)
-  }, [])
-
-  const startListening = async () => {
-    try {
-      await Voice.start('en-US')
-    } catch (error) {
-      console.error('Voice start error:', error)
-    }
-  }
-
-  const stopListening = async () => {
-    try {
-      await Voice.stop()
-    } catch (error) {
-      console.error('Voice stop error:', error)
-    }
-  }
-
-  return { isListening, transcript, startListening, stopListening }
-}
-```
-
-### Offline Sync Setup
-
-```typescript
-// hooks/useOfflineSync.ts
-import { useState, useEffect } from 'react'
-import AsyncStorage from '@react-native-async-storage/async-storage'
-import NetInfo from '@react-native-community/netinfo'
-
-export function useOfflineSync() {
-  const [isOnline, setIsOnline] = useState(true)
-  const [pendingQueries, setPendingQueries] = useState<string[]>([])
-
-  useEffect(() => {
-    const unsubscribe = NetInfo.addEventListener(state => {
-      setIsOnline(state.isConnected ?? false)
-
-      if (state.isConnected) {
-        processPendingQueries()
-      }
-    })
-
-    loadPendingQueries()
-    return unsubscribe
-  }, [])
-
-  const queueQuery = async (query: string) => {
-    const updated = [...pendingQueries, query]
-    setPendingQueries(updated)
-    await AsyncStorage.setItem('pending_queries', JSON.stringify(updated))
-  }
-
-  const loadPendingQueries = async () => {
-    const stored = await AsyncStorage.getItem('pending_queries')
-    if (stored) {
-      setPendingQueries(JSON.parse(stored))
-    }
-  }
-
-  const processPendingQueries = async () => {
-    // Process queued queries when back online
-    for (const query of pendingQueries) {
-      try {
-        // Process with RAG system
-        await processQuery(query)
-      } catch (error) {
-        console.error('Failed to process queued query:', error)
-      }
-    }
-
-    setPendingQueries([])
-    await AsyncStorage.removeItem('pending_queries')
-  }
-
-  return { isOnline, queueQuery, pendingCount: pendingQueries.length }
-}
-```
-
-### Camera Integration
-
-```typescript
-// components/DocumentScanner.tsx
-import { Camera, CameraType } from 'expo-camera'
-import { useState } from 'react'
-import { Text, View, TouchableOpacity } from 'react-native'
-
-export function DocumentScanner({ onDocumentScanned }) {
-  const [type, setType] = useState(CameraType.back)
-  const [permission, requestPermission] = Camera.useCameraPermissions()
-
-  if (!permission) {
-    return <View />
-  }
-
-  if (!permission.granted) {
-    return (
-      <View>
-        <Text>We need camera permission to scan documents</Text>
-        <TouchableOpacity onPress={requestPermission}>
-          <Text>Grant Permission</Text>
-        </TouchableOpacity>
-      </View>
-    )
-  }
-
-  const takePicture = async () => {
-    if (camera) {
-      const photo = await camera.takePictureAsync()
-      // Process photo with OCR or send to RAG system
-      onDocumentScanned(photo.uri)
-    }
-  }
-
-  return (
-    <View style={{ flex: 1 }}>
-      <Camera style={{ flex: 1 }} type={type} ref={ref => setCamera(ref)}>
-        <View style={{ flex: 1, justifyContent: 'flex-end', alignItems: 'center' }}>
-          <TouchableOpacity onPress={takePicture}>
-            <Text>Scan Document</Text>
-          </TouchableOpacity>
-        </View>
-      </Camera>
-    </View>
-  )
-}
-```
-
-## 📊 Mobile Analytics Setup
-
-### Usage Tracking
-
-```typescript
-// lib/analytics.ts
-import { Analytics } from 'expo-analytics'
-
-export class MobileRAGAnalytics {
-  private analytics: Analytics
-
-  constructor() {
-    this.analytics = new Analytics('UA-XXXXXXXXX-X') // Your Google Analytics ID
-  }
-
-  trackQuery(query: string, responseTime: number, confidence: number) {
-    this.analytics.event('rag_query', {
-      query_length: query.length,
-      response_time: responseTime,
-      confidence_score: confidence,
-      platform: 'mobile'
-    })
-  }
-
-  trackOfflineUsage(queriesQueued: number) {
-    this.analytics.event('offline_usage', {
-      queries_queued: queriesQueued,
-      platform: 'mobile'
-    })
-  }
-
-  trackVoiceUsage(duration: number, success: boolean) {
-    this.analytics.event('voice_input', {
-      duration,
-      success,
-      platform: 'mobile'
-    })
-  }
-}
-```
-
-### Performance Monitoring
-
-```typescript
-// hooks/usePerformanceMonitoring.ts
-import { useState, useEffect } from 'react'
-import { AppState, Dimensions } from 'react-native'
-
-export function usePerformanceMonitoring() {
-  const [metrics, setMetrics] = useState({
-    memoryUsage: 0,
-    responseTime: 0,
-    cacheHitRate: 0,
-    batteryLevel: 0
-  })
-
-  useEffect(() => {
-    const subscription = AppState.addEventListener('change', (nextAppState) => {
-      if (nextAppState === 'active') {
-        collectMetrics()
-      }
-    })
-
-    return () => subscription?.remove()
-  }, [])
-
-  const collectMetrics = () => {
-    // Collect performance metrics
-    setMetrics({
-      memoryUsage: getMemoryUsage(),
-      responseTime: getAverageResponseTime(),
-      cacheHitRate: getCacheHitRate(),
-      batteryLevel: getBatteryLevel()
-    })
-  }
-
-  return metrics
-}
-```
-
-## 🚀 Building and Distribution
-
-### Development Build
-
-```bash
-# Install EAS CLI
-npm install -g @expo/cli
-
-# Login to Expo
-npx expo login
-
-# Create development build
-npx expo run:ios
-npx expo run:android
-```
-
-### Production Build with EAS
-
-Create `eas.json`:
-
-```json
-{
-  "cli": {
-    "version": ">= 3.0.0"
-  },
-  "build": {
-    "development": {
-      "developmentClient": true,
-      "distribution": "internal",
-      "ios": {
-        "resourceClass": "m1-medium"
-      }
-    },
-    "preview": {
-      "distribution": "internal",
-      "ios": {
-        "resourceClass": "m1-medium"
-      }
-    },
-    "production": {
-      "ios": {
-        "resourceClass": "m1-medium"
-      }
-    }
-  },
-  "submit": {
-    "production": {}
-  }
-}
-```
-
-Build commands:
-
-```bash
-# Build for iOS
-eas build --platform ios --profile production
-
-# Build for Android
-eas build --platform android --profile production
-
-# Submit to app stores
-eas submit --platform ios
-eas submit --platform android
-```
-
-### App Store Configuration
-
-**iOS (App Store Connect):**
-1. Create app in App Store Connect
-2. Configure app metadata and screenshots
-3. Upload build with EAS Submit
-4. Submit for review
-
-**Android (Google Play Console):**
-1. Create app in Google Play Console
-2. Configure store listing and content rating
-3. Upload AAB file with EAS Submit
-4. Submit for review
-
-## 🔒 Mobile Security
-
-### Secure Storage
-
-```typescript
-import * as SecureStore from 'expo-secure-store'
-
-export class SecureStorage {
-  static async setItem(key: string, value: string) {
-    await SecureStore.setItemAsync(key, value)
-  }
-
-  static async getItem(key: string): Promise<string | null> {
-    return await SecureStore.getItemAsync(key)
-  }
-
-  static async removeItem(key: string) {
-    await SecureStore.deleteItemAsync(key)
-  }
-}
-
-// Usage
-await SecureStorage.setItem('user_token', authToken)
-const token = await SecureStorage.getItem('user_token')
-```
-
-### Biometric Authentication
-
-```typescript
-import * as LocalAuthentication from 'expo-local-authentication'
-
-export async function authenticateWithBiometrics() {
-  const hasHardware = await LocalAuthentication.hasHardwareAsync()
-  const supportedTypes = await LocalAuthentication.supportedAuthenticationTypesAsync()
-
-  if (hasHardware && supportedTypes.length > 0) {
-    const result = await LocalAuthentication.authenticateAsync({
-      promptMessage: 'Authenticate to access your AI assistant',
-      fallbackLabel: 'Use passcode',
-      disableDeviceFallback: false
-    })
-
-    return result.success
-  }
-
-  return false
-}
-```
-
-### Certificate Pinning
-
-```typescript
-// app.config.js
-export default {
-  expo: {
-    plugins: [
-      [
-        'expo-ssl-public-key-pinning',
-        {
-          'your-api-domain.com': {
-            'includeSubdomains': true,
-            'pinset': [
-              {
-                'type': 'sha256',
-                'value': 'YOUR_SSL_CERTIFICATE_SHA256_HASH'
-              }
-            ]
-          }
-        }
-      ]
-    ]
-  }
-}
-```
-
-## 🧪 Testing Mobile Apps
-
-### Unit Testing with Jest
-
-```bash
-npm install --save-dev jest @testing-library/react-native @testing-library/jest-native
-```
-
-```typescript
-// __tests__/RAGSystem.test.ts
-import { useRAGSystem } from '../hooks/useRAGSystem'
-import { renderHook, act } from '@testing-library/react-native'
-
-describe('RAG System', () => {
-  test('should initialize RAG system', async () => {
-    const { result } = renderHook(() => useRAGSystem())
-
-    await act(async () => {
-      await result.current.initialize()
-    })
-
-    expect(result.current.isReady).toBe(true)
-  })
-
-  test('should handle offline queries', async () => {
-    const { result } = renderHook(() => useRAGSystem({ enableOffline: true }))
-
-    await act(async () => {
-      await result.current.query('test question')
-    })
-
-    expect(result.current.offlineQueueSize).toBeGreaterThan(0)
-  })
-})
-```
-
-### E2E Testing with Detox
-
-```bash
-npm install --save-dev detox jest-circus
-```
-
-```javascript
-// e2e/ai-chat.e2e.js
-describe('AI Chat Flow', () => {
-  beforeEach(async () => {
-    await device.reloadReactNative()
-  })
-
-  it('should send message and receive response', async () => {
-    // Navigate to AI tab
-    await element(by.id('ai-tab')).tap()
-
-    // Type a message
-    await element(by.id('chat-input')).typeText('Hello AI')
-    await element(by.id('send-button')).tap()
-
-    // Wait for response
-    await waitFor(element(by.id('ai-response')))
-      .toBeVisible()
-      .withTimeout(5000)
-
-    // Verify response received
-    await expect(element(by.id('ai-response'))).toHaveText(
-      expect.stringContaining('Hello')
-    )
-  })
-
-  it('should work in offline mode', async () => {
-    // Simulate offline mode
-    await device.setNetworkConnection(false, 'airplane')
-
-    // Navigate to AI tab
-    await element(by.id('ai-tab')).tap()
-
-    // Send message while offline
-    await element(by.id('chat-input')).typeText('Offline question')
-    await element(by.id('send-button')).tap()
-
-    // Verify offline message appears
-    await expect(element(by.id('offline-indicator'))).toBeVisible()
-
-    // Restore connection
-    await device.setNetworkConnection(true, 'wifi')
-
-    // Verify message was processed
-    await waitFor(element(by.id('ai-response')))
-      .toBeVisible()
-      .withTimeout(10000)
-  })
-})
-```
-
-## 📱 Platform-Specific Features
-
-### iOS-Specific Features
-
-```typescript
-// iOS Shortcuts integration
-import { Shortcuts } from 'expo-shortcuts'
-
-Shortcuts.addShortcut({
-  id: 'ask-ai',
-  title: 'Ask AI Assistant',
-  shortTitle: 'Ask AI',
-  systemImageName: 'brain.head.profile',
-  params: {
-    action: 'open_chat'
-  }
-})
-
-// iOS Widgets
-import { WidgetKit } from 'expo-widget-kit'
-
-WidgetKit.reloadAllTimelines()
-```
-
-### Android-Specific Features
-
-```typescript
-// Android App Shortcuts
-import { ShortcutManager } from 'expo-shortcuts'
-
-ShortcutManager.addDynamicShortcuts([
-  {
-    id: 'ask-question',
-    shortLabel: 'Ask Question',
-    longLabel: 'Ask AI Assistant a Question',
-    icon: 'ic_chat',
-    intent: {
-      action: 'android.intent.action.VIEW',
-      data: 'myapp://chat'
-    }
-  }
-])
-
-// Android Widgets with React Native
-import { AppWidgetProvider } from 'expo-widget'
-
-export class AIWidgetProvider extends AppWidgetProvider {
-  onUpdate(context, appWidgetManager, appWidgetIds) {
-    // Update widget with recent AI responses
-  }
-}
-```
-
-## 🎯 Next Steps
-
-Your mobile AI app is now ready! Here's what to do next:
-
-1. **Customize for Your Domain**: Configure the RAG system for your specific use case
-2. **Add Content**: Import your knowledge base via the mobile interface
-3. **Test on Devices**: Use Expo Go for quick testing, development builds for advanced features
-4. **Optimize Performance**: Monitor analytics and adjust caching/offline strategies
-5. **Deploy**: Build production versions and submit to app stores
-
-### Advanced Mobile Features to Explore
-
-- **AR Integration**: Visual knowledge search with camera
-- **Wearable Support**: Apple Watch/WearOS integration
-- **Background Processing**: Smart notifications and proactive assistance
-- **Multi-language**: Localization for global audiences
-- **Accessibility**: Screen reader and voice navigation support
-
-Happy mobile development! 📱🚀