smart-city-digital-twin-martinique/smart-app-city/README.md

# Smart App City — Application Mobile

> Application mobile multi-platforme pour le Smart City Digital Twin Martinique

## 📱 Présentation

Smart App City est une application mobile (React Native + Expo) qui permet aux citoyens de :
- **Visualiser les données IoT** en temps réel (capteurs de température, humidité, qualité de l'air, bruit, trafic, énergie)
- **Accéder à une marketplace** de services et produits locaux
- **Interagir avec un assistant IA** (météo, transports, énergie, alertes)
- **Gérer ses notifications** et **profil utilisateur**

## 🏗️ Architecture

```
smart-app-city/
├── frontend/          # Application React Native + Expo (TypeScript)
│   ├── src/
│   │   ├── screens/       # 15 écrans (Auth, Dashboard, Map, Marketplace, Chat, Profile, IoT, Notifications)
│   │   ├── components/    # Composants réutilisables (Card, Button, Charts, Maps)
│   │   ├── stores/        # State management (Zustand) — authStore, iotStore, notificationStore, uiStore
│   │   ├── hooks/         # Hooks personnalisés (useSensors, useAlerts, useNotifications, useLocation)
│   │   ├── services/      # Services API (auth, iot, notification, via Axios)
│   │   ├── i18n/          # Internationalisation (FR/EN/ES/DE)
│   │   ├── theme/         # Design system (Blue Ocean palette)
│   │   └── utils/         # Utilitaires (formatters, validators, constants)
│   ├── dist/              # Build web statique (nginx)
│   ├── Dockerfile         # Multi-stage build (node + nginx)
│   ├── package.json       # Dépendances (Expo 51, React Native 0.74)
│   └── app.json           # Configuration Expo
├── backend/           # Backend microservices (Node.js)
├── ai/                # Services IA (RAG, Agent)
├── design/            # Maquettes HTML/CSS (28 screenshots, PDF, Figma JSON, Penpot SVG)
├── docs/              # Documentation
└── docker-compose.yml # Orchestration Docker
```

## 🚀 Développement

### Prérequis
- Node.js 20+
- Expo CLI : `npm install -g expo-cli`
- Docker & Docker Compose (pour le déploiement)

### Installation

```bash
cd frontend
npm install --legacy-peer-deps
```

### Lancement en mode développement

```bash
# Mode natif (iOS/Android)
npm start
# Scanner le QR code avec l'app Expo Go

# Mode web
npm run web
```

### Build web statique

```bash
# Sans Docker
cd frontend
npx expo export --platform web --output-dir dist

# Avec Docker
docker build -t smartapp-web:latest .
```

### Déploiement

```bash
cd smart-app-city
docker compose -f docker-compose.web.yml up -d
```

L'application est accessible sur : **https://smartapp.digitribe.fr**

## 🎨 Design System

### Palette principale
- **Blue Ocean** : `#1565C0` (primaire)
- **Indigo** : `#3949AB` (accent)
- **Cyan** : `#00ACC1` (secondaire)
- **Deep Ocean** : `#0D1B2A` (dark mode)

### Composants
Tous les composants UI sont dans `src/components/` :
- `common/Card.tsx` — Carte réutilisable (3 variants : default, elevated, outlined)
- `common/Button.tsx` — Bouton (5 variants, 3 tailles)
- `common/Header.tsx` — En-tête de section
- `common/LoadingSpinner.tsx` — Indicateur de chargement
- `common/ErrorBoundary.tsx` — Gestion d'erreurs React
- `cards/SensorCard.tsx` — Carte capteur IoT
- `cards/StatsCard.tsx` — Carte statistiques
- `cards/AlertCard.tsx` — Carte alerte
- `cards/ZoneCard.tsx` — Carte zone
- `charts/LineChart.tsx` — Graphique linéaire
- `charts/BarChart.tsx` — Graphique barres
- `charts/GaugeChart.tsx` — Jauge semi-circulaire
- `maps/MapView.tsx` — Vue carte (placeholder pour react-native-maps)
- `maps/MarkerPopup.tsx` — Popup marqueur

## 📊 State Management (Zustand)

### Stores
- **authStore** : Authentification utilisateur (login, register, logout, refresh token)
- **iotStore** : Données IoT (6 capteurs, 3 zones, 2 alertes mock)
- **notificationStore** : Notifications (5 mock notifications)
- **uiStore** : Thème + i18n (FR/EN/ES/DE)

### Hooks
- **useSensors()** : Liste des capteurs, filtrage par type/zone
- **useAlerts()** : Alertes actives/critiques, acknowledge
- **useNotifications()** : CRUD notifications
- **useLocation()** : GPS avec expo-location (défaut : Fort-de-France)

## 🌐 Internationalisation

4 langues supportées : Français (défaut), English, Español, Deutsch.

Fichier de traductions : `src/stores/uiStore.ts` (fonction `t(key, lang)`)

## 🔌 API Backend

L'application communique avec l'API Gateway :
- **Base URL** : `https://api-smartapp.digitribe.fr/api/v1`
- **Authentification** : JWT (Basic Auth pour les routes /admin)
- **Endpoints principaux** :
  - `POST /api/auth/login` — Connexion
  - `POST /api/auth/register` — Inscription
  - `POST /api/auth/refresh` — Refresh token
  - `GET /sensors` — Liste des capteurs
  - `GET /zones` — Liste des zones
  - `GET /alerts` — Liste des alertes

## 📦 Déploiement CI/CD

### Gitea Actions
Fichier : `.gitea/workflows/build-and-deploy.yml`

Pipeline :
1. **Lint** : `tsc --noEmit` (TypeScript check)
2. **Build** : `npx expo export --platform web`
3. **Deploy** : SSH vers le serveur → copie les fichiers ou rebuild Docker

### Secrets Gitea
- `SERVER_HOST` : `localhost`
- `SERVER_USER` : `eric`
- `SSH_PRIVATE_KEY` : Clé SSH pour le déploiement

### Dockerfiles
- `frontend/Dockerfile` : Multi-stage build (node 20 alpine → nginx alpine)
- `docker-compose.web.yml` : Service nginx statique avec Traefik

## 🌍 Services liés

| Service | URL | Description |
|---------|-----|-------------|
| Gitea | https://gitea.digitribe.fr | Git + CI/CD |
| Honcho | https://honcho.digitribe.fr | Mémoire agent IA |
| Grafana | http://127.0.0.1:3088 | Métriques Prometheus |

## 📝 Notes techniques importantes

### WatermelonDB supprimé
Le package `@nozbe/watermelonDB` a été supprimé car la version `^0.27.0` n'existe plus. Pas de remplacement nécessaire — la mémoire locale utilise Zustand + AsyncStorage.

### Build web Expo
- Le build `npx expo export:web` nécessite `@expo/webpack-config@~19.0.1`
- Si le build échoue avec "Lock compromised" : supprimer `package-lock.json` et `node_modules/`, puis `npm install --legacy-peer-deps`
- Le build Docker est plus fiable que le build local (environnement isolé)

### Patch tool
Les fichiers contenant `//`, `=`, `+`, `{}` dans les strings peuvent corriger le tool `patch`. Utiliser `replace_all=true` ou échapper les caractères spéciaux.

## 📄 Licence

Smart City Digital Twin Martinique — Projet public