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

cd frontend
npm install --legacy-peer-deps

Lancement en mode développement

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

# Mode web
npm run web

Build web statique

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

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

Déploiement

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