cleanarch

2.0.3

modules/ai-guide/Write-AiGuide-Mobile.ps1

param(
    [string]   $ProjectName,
    [string]   $OutputPath
)

. (Join-Path (Split-Path $MyInvocation.MyCommand.Path) "..\core\Utils.ps1")

$guideDir = Join-Path $OutputPath "ai-guide"
function Write-Guide($fileName, $content) {
    Write-CoreFile (Join-Path $guideDir $fileName) $content
}

$mobileGuideContent = @'
# Mobile Application AI Developer Guide (React Native / Expo)
 
You are an AI assistant helping developers build the React Native Mobile Application of the {P} solution.
The application is built using Expo (Managed Workflow), Expo Router for navigation, SecureStore for JWT storage, and fetch-based API calls via a local `ApiClient`.
 
---
 
## Strict Mobile Application Rules
 
1. **Independent Standalone Layout:** The mobile project resides inside `{P}-mobile/` and is completely decoupled. It does not reference or depend on any monorepo workspaces, shared web styles, or parent packages.
2. **Local ApiClient Integration:** Communication with the backend API is handled by `services/api.ts` which contains the `ApiClient` class and a pre-configured `api` instance. Do not import from parent directories.
3. **Token Injection:** Call `api.setToken(token)` after login so all subsequent requests include the `Authorization: Bearer <token>` header automatically.
4. **Expo Router Navigation:** Use Expo Router file-system routing. Auth screens live in `app/(auth)/`, main screens in `app/(tabs)/`.
 
---
 
## Folder Structure
 
```
{P}-mobile/
+-- app/
| +-- (auth)/login.tsx <- Login screen
| +-- (tabs)/
| +-- _layout.tsx <- Tab navigator configuration
| +-- index.tsx <- Dashboard screen
| +-- categories/ <- Category listing and details screens
| +-- _layout.tsx <- Root layout (Auth providers)
+-- context/
| +-- AuthContext.tsx <- Device JWT state provider + api.setToken()
+-- hooks/
| +-- useCategories.ts <- Fetch hooks for Categories (using api instance)
+-- services/
| +-- api.ts <- ApiClient class + pre-configured `api` instance
+-- types/
| +-- index.ts <- Standalone TypeScript interfaces (User, Product...)
```
 
---
 
## ApiClient (services/api.ts)
 
The `ApiClient` class is already scaffolded. It handles Bearer token injection automatically:
```typescript
// {P}-mobile/services/api.ts
export class ApiClient {
  private baseUrl: string;
  private token: string | null = null;
 
  constructor(baseUrl: string) {
    this.baseUrl = baseUrl;
  }
 
  setToken(token: string | null) {
    this.token = token;
  }
 
  async request(endpoint: string, options: RequestInit = {}) {
    const headers = new Headers(options.headers || {});
    if (this.token) headers.set('Authorization', `Bearer ${this.token}`);
    if (!headers.has('Content-Type') && options.body) headers.set('Content-Type', 'application/json');
 
    const response = await fetch(`${this.baseUrl}${endpoint}`, { ...options, headers });
 
    if (!response.ok) {
      const errText = await response.text();
      throw new Error(errText || response.statusText);
    }
    if (response.status === 204) return null;
    return response.json();
  }
}
 
// Pre-configured singleton instance:
export const api = new ApiClient(process.env.EXPO_PUBLIC_API_URL || 'http://localhost:8080/api');
```
 
After login, set the token:
```typescript
import { api } from '../services/api';
api.setToken(jwtToken); // all subsequent api.request() calls will be authenticated
```
 
---
 
## How to Add a Feature
 
When adding a new entity screen (e.g. Category):
 
### 1. Define TypeScript Interface
Add definitions to `types/index.ts`:
```typescript
export interface Category {
  id: number;
  name: string;
  createdAt: string;
}
```
 
### 2. Screen Scaffolding
Create a screen layout using React Native elements under `app/(tabs)/categories/index.tsx`:
```tsx
import React from 'react';
import { View, Text, FlatList } from 'react-native';
import { useCategories } from '../../../hooks/useCategories';
 
export default function CategoryScreen() {
  const { categories, loading } = useCategories();
   
  if (loading) return <Text>Loading...</Text>;
 
  return (
    <View style={{ flex: 1, padding: 16 }}>
      <FlatList
        data={categories}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({ item }) => <Text>{item.name}</Text>}
      />
    </View>
  );
}
```
 
---
 
## Running the Application
 
To run the application locally in the simulator or on a physical device via **Expo Go**:
 
```bash
# Navigate to mobile project folder
cd {P}-mobile
 
# Install packages
npm install
 
# Start Metro bundler
npm start
```
Scan the generated QR code with your Expo Go app (Android) or default Camera app (iOS) to test on your phone.
'@.Replace("{P}", $ProjectName)

Write-Guide "mobile-guide.md" $mobileGuideContent