@digilogiclabs/create-saas-app 1.0.1

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

@@ -0,0 +1,787 @@
+# 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! 📱🚀