docs: réorganisation et simplification de la documentation

- Fusion de Quick-Start.md dans Installation.md
- Suppression des doublons dans Dépannage.md
- Ajout d'une table des matières dans Dépannage.md
- Simplification de la navigation dans Home.md
- Enrichissement de la section sécurité dans Configuration-Firebase.md
- Mise à jour du Changelog avec les correctifs de sécurité
- Suppression de Quick-Start.md (fusionné)

La documentation est maintenant plus claire avec moins de redirections.
2025-10-23 18:23:11 +02:00
parent 8dcb27d81e
commit 16e4708608
6 changed files with 204 additions and 357 deletions

@@ -7,6 +7,15 @@ et ce projet adhère au [Semantic Versioning](https://semver.org/lang/fr/).
## [Non publié]
### Corrigé - 2025-10-23
- **Sécurité critique** : Identifiants Firebase déplacés vers des variables d'environnement
- Les clés API ne sont plus hardcodées dans le code
- Ajout du fichier `.env` au `.gitignore`
- Configuration via `process.env.EXPO_PUBLIC_*`
- Validation automatique des variables au démarrage
- Documentation mise à jour dans `Configuration-Firebase.md`
### À venir
- Notifications push pour les rappels d'abonnements
- Mode sombre

@@ -20,20 +20,30 @@ Ce guide vous aidera à configurer Firebase pour WalletTracker.
## Étape 3 : Configurer l'application
1. Ouvrez le fichier `src/config/firebase.ts`
2. Remplacez les valeurs par défaut par vos identifiants Firebase :
### 🔒 Configuration sécurisée avec variables d'environnement
```typescript
const firebaseConfig = {
apiKey: "AIzaSy...", // Votre clé API
authDomain: "wallettracker-xxx.firebaseapp.com",
projectId: "wallettracker-xxx",
storageBucket: "wallettracker-xxx.appspot.com",
messagingSenderId: "123456789",
appId: "1:123456789:web:abc123"
};
Pour des raisons de sécurité, les identifiants Firebase sont stockés dans des variables d'environnement.
1. **Copiez le fichier d'exemple** :
```bash
cp .env.example .env
```
2. **Remplissez vos identifiants Firebase** dans le fichier `.env` :
```env
EXPO_PUBLIC_FIREBASE_API_KEY=AIzaSy...
EXPO_PUBLIC_FIREBASE_AUTH_DOMAIN=wallettracker-xxx.firebaseapp.com
EXPO_PUBLIC_FIREBASE_PROJECT_ID=wallettracker-xxx
EXPO_PUBLIC_FIREBASE_STORAGE_BUCKET=wallettracker-xxx.appspot.com
EXPO_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=123456789
EXPO_PUBLIC_FIREBASE_APP_ID=1:123456789:web:abc123
EXPO_PUBLIC_FIREBASE_MEASUREMENT_ID=G-XXXXXXXXXX
```
3. **Vérifiez que `.env` est bien dans `.gitignore`** (déjà fait par défaut)
⚠️ **IMPORTANT** : Ne commitez JAMAIS le fichier `.env` dans Git ! Il contient vos identifiants secrets.
## Étape 4 : Activer Authentication
1. Dans la console Firebase, allez dans **Authentication**
@@ -110,10 +120,65 @@ Les index recommandés :
### Bonnes pratiques
1. **Ne jamais commiter vos identifiants Firebase** dans Git
2. Utilisez des variables d'environnement pour la production
3. Activez l'authentification à deux facteurs sur votre compte Firebase
4. Surveillez l'utilisation dans la console Firebase
5. Configurez des alertes de budget
- Le fichier `.env` est automatiquement ignoré par Git
- Vérifiez toujours avant de commit : `git status`
2. **Utilisez des variables d'environnement**
- Développement : fichier `.env` local
- Production : secrets EAS ou variables CI/CD
3. **Activez l'authentification à deux facteurs** sur votre compte Firebase
4. **Surveillez l'utilisation** dans la console Firebase
- Vérifiez régulièrement les utilisateurs authentifiés
- Surveillez les lectures/écritures Firestore
5. **Configurez des alertes de budget**
- Firebase Console > Utilisation et facturation > Détails et paramètres
- Définissez des alertes pour éviter les surprises
### 🚨 Si vos identifiants ont été exposés
Si vous avez accidentellement commité vos identifiants Firebase :
1. **Régénérez immédiatement vos clés API** :
- Firebase Console > Paramètres du projet > Clés API
- Supprimez l'ancienne clé
- Créez-en une nouvelle
- Mettez à jour votre fichier `.env`
2. **Vérifiez les accès non autorisés** :
- Firebase Console > Authentication > Utilisateurs
- Supprimez les comptes suspects
- Vérifiez les logs d'activité
3. **Nettoyez l'historique Git** (si nécessaire) :
```bash
# Attention : ceci réécrit l'historique Git
git filter-branch --force --index-filter \
"git rm --cached --ignore-unmatch src/config/firebase.ts" \
--prune-empty --tag-name-filter cat -- --all
```
4. **Renforcez la sécurité** :
- Activez App Check dans Firebase
- Restreignez les clés API par domaine/application
- Revoyez vos règles Firestore
### Variables d'environnement pour la production
Pour déployer en production avec EAS :
```bash
# Créer les secrets EAS
eas secret:create --scope project --name EXPO_PUBLIC_FIREBASE_API_KEY --value "votre_clé"
eas secret:create --scope project --name EXPO_PUBLIC_FIREBASE_AUTH_DOMAIN --value "votre_domaine"
eas secret:create --scope project --name EXPO_PUBLIC_FIREBASE_PROJECT_ID --value "votre_projet"
eas secret:create --scope project --name EXPO_PUBLIC_FIREBASE_STORAGE_BUCKET --value "votre_bucket"
eas secret:create --scope project --name EXPO_PUBLIC_FIREBASE_MESSAGING_SENDER_ID --value "votre_sender_id"
eas secret:create --scope project --name EXPO_PUBLIC_FIREBASE_APP_ID --value "votre_app_id"
eas secret:create --scope project --name EXPO_PUBLIC_FIREBASE_MEASUREMENT_ID --value "votre_measurement_id"
```
### Limites du plan gratuit (Spark)

@@ -1,8 +1,20 @@
# 🔧 Guide de dépannage - WalletTracker
# 🔧 Guide de dépannage
## Problème : L'app charge jusqu'au timeout après scan du QR code
Solutions aux problèmes courants de WalletTracker.
### ✅ Solutions appliquées
## 📝 Table des matières
1. [L'app ne charge pas / timeout](#app-ne-charge-pas)
2. [Erreurs Firebase](#erreurs-firebase)
3. [Erreurs de modules](#erreurs-modules)
4. [Problèmes réseau](#problemes-reseau)
5. [Commandes utiles](#commandes-utiles)
---
## <a name="app-ne-charge-pas"></a>🔴 L'app ne charge pas / timeout
### Solutions
1. **Mise à jour des dépendances incompatibles**
```bash
@@ -18,7 +30,7 @@
- Remplacé par un placeholder dans `AnalysisScreen`
- Sera réactivé après configuration complète
### 🚀 Relancer l'application
### Redémarrage complet
```bash
# Nettoyer le cache
@@ -30,7 +42,7 @@ npm install
npm start -- --clear
```
### 📱 Vérifications réseau
## <a name="problemes-reseau"></a>🌐 Problèmes réseau
1. **Même réseau Wi-Fi**
- Votre ordinateur et téléphone doivent être sur le même réseau
@@ -46,7 +58,7 @@ npm start -- --clear
```
⚠️ Plus lent mais fonctionne même avec des réseaux différents
### 🔍 Diagnostic
### Diagnostic réseau
Si le problème persiste, vérifiez :
@@ -61,7 +73,7 @@ ping 192.168.1.132
npm run web
```
### 📊 Réactiver les graphiques (plus tard)
### Réactiver les graphiques
Une fois l'app fonctionnelle, pour réactiver les graphiques :
@@ -76,7 +88,7 @@ Une fois l'app fonctionnelle, pour réactiver les graphiques :
3. Rebuild l'app
### 🆘 Autres problèmes courants
## <a name="erreurs-modules"></a>⚠️ Erreurs de modules
#### Erreur "Unable to resolve module"
```bash
@@ -96,13 +108,13 @@ npm start -- --clear
- Redémarrez Expo Go
- Rescannez le QR code
### 💡 Conseils
## <a name="commandes-utiles"></a>💻 Commandes utiles
1. **Première fois** : Utilisez `npm start -- --clear` pour un démarrage propre
2. **Développement** : Le rechargement à chaud peut parfois causer des bugs, rechargez manuellement (secouer le téléphone > Reload)
3. **Production** : Les graphiques fonctionneront mieux dans un build natif
### 📞 Besoin d'aide ?
## 🆘 Besoin d'aide ?
Si le problème persiste :
@@ -110,6 +122,26 @@ Si le problème persiste :
2. Regardez les erreurs dans Expo Go (secouer > Show Dev Menu > Debug)
3. Consultez la documentation Expo : https://docs.expo.dev/
## <a name="erreurs-firebase"></a>🔥 Erreurs Firebase
### Configuration manquante
Si vous voyez l'erreur "Configuration Firebase manquante" :
1. Vérifiez que le fichier `.env` existe
2. Vérifiez que toutes les variables sont remplies
3. Redémarrez le serveur : `npm start -- --clear`
### Erreurs d'authentification
- **"auth/invalid-email"** : Vérifiez le format de l'email
- **"auth/user-not-found"** : Créez un compte d'abord
- **"auth/wrong-password"** : Vérifiez le mot de passe
Consultez **[[Configuration-Firebase]]** pour plus de détails.
---
## ✅ Checklist de vérification
- [ ] Dépendances mises à jour (`npx expo install --fix`)
@@ -122,138 +154,3 @@ Si le problème persiste :
---
**L'app devrait maintenant se charger correctement ! 🎉**
# ⚡ Corrections rapides - WalletTracker
## 🔴 L'app reste bloquée sur "New update available, downloading..."
### Solution rapide (30 secondes)
1. **Sur votre téléphone** :
- Fermez complètement Expo Go (swipe up)
- Rouvrez Expo Go
- Rescannez le QR code
2. **Si ça ne marche toujours pas** :
- Secouez le téléphone
- Appuyez sur "Go Home"
- Rescannez le QR code
3. **Dernière option** :
- Dans Expo Go : Profil (en bas à droite) → Settings → Clear cache
- Rescannez le QR code
### Solution définitive (appliquée)
J'ai désactivé les mises à jour automatiques dans `app.json`.
**Redémarrez le serveur** :
```bash
# Arrêtez le serveur (Ctrl+C)
npm start -- --clear
```
Puis **rescannez le QR code**.
## 🔴 Écran blanc / App ne charge pas
### 1. Vérifier le serveur Metro
Dans le terminal, vous devez voir :
```
Metro waiting on exp://192.168.1.132:8081
```
Si ce n'est pas le cas :
```bash
npm start -- --clear
```
### 2. Vérifier la connexion réseau
- Téléphone et ordinateur sur le **même Wi-Fi**
- Pas de VPN actif
- Pare-feu autorise Expo (port 8081)
### 3. Mode tunnel (si problème réseau)
```bash
npm start -- --tunnel
```
⚠️ Plus lent mais fonctionne même avec des réseaux différents
## 🔴 Erreur "Unable to resolve module"
```bash
# Nettoyer complètement
rm -rf node_modules
npm install
npm start -- --clear
```
## 🔴 Erreur Firebase
Vérifiez `src/config/firebase.ts` :
- Les identifiants sont corrects
- Authentication est activée dans Firebase Console
- Firestore Database est créée
## 🔴 L'app crash au démarrage
1. **Regardez les logs** dans le terminal
2. **Vérifiez les erreurs** :
- Erreur Firebase → Configurez Firebase
- Erreur de module → Nettoyez le cache
- Erreur de syntaxe → Vérifiez le dernier commit
## 🔴 Bouton qui charge à l'infini
C'est corrigé ! Si ça persiste :
```bash
# Rechargez l'app
# Secouez le téléphone > Reload
```
## 🔴 Les modifications ne s'appliquent pas
1. **Rechargement à chaud désactivé** :
- Secouez le téléphone
- Appuyez sur "Enable Fast Refresh"
2. **Forcer le rechargement** :
- Secouez le téléphone
- Appuyez sur "Reload"
3. **Nettoyer le cache** :
```bash
npm start -- --clear
```
## 📱 Commandes utiles
```bash
# Démarrage normal
npm start
# Avec cache nettoyé
npm start -- --clear
# Mode tunnel (problèmes réseau)
npm start -- --tunnel
# Réinstaller les dépendances
rm -rf node_modules && npm install
```
## 🆘 Toujours bloqué ?
1. **Vérifiez les logs** dans le terminal
2. **Consultez** `TROUBLESHOOTING.md` pour plus de détails
3. **Redémarrez tout** :
- Fermez Expo Go
- Arrêtez le serveur (Ctrl+C)
- Relancez : `npm start -- --clear`
- Rescannez le QR code
---
**Dans 99% des cas, un simple rechargement suffit ! 🚀**

35
Home.md

@@ -28,31 +28,30 @@ WalletTracker est une application mobile complète développée avec React Nativ
- Statistiques mensuelles
- Vue d'ensemble du budget
## 🚀 Démarrage rapide
## 🚀 Démarrage
1. **[[Installation]]** - Installer le projet
**Nouveau sur le projet ?** Suivez ce parcours :
1. **[[Installation]]** - Installer et lancer en 5 minutes (ou installation complète)
2. **[[Configuration-Firebase]]** - Configurer Firebase
3. **[[Quick-Start]]** - Lancer en 5 minutes
3. **[[Tests]]** - Tester l'application
## 📖 Documentation
### Pour commencer
- **[[Quick-Start]]** - Démarrage rapide en 5 minutes
- **[[Installation]]** - Installation complète
- **[[Configuration-Firebase]]** - Setup Firebase
### 🎯 Essentiel
- **[[Installation]]** - Installation rapide ou complète
- **[[Configuration-Firebase]]** - Configuration Firebase détaillée
- **[[Dépannage]]** - Solutions aux problèmes courants
### Développement
- **[[Développement]]** - Architecture et structure
### 💻 Développement
- **[[Développement]]** - Architecture et contribution
- **[[API-Reference]]** - Documentation technique des services
- **[[Tests]]** - Guide de test complet
- **[[API-Reference]]** - Documentation des services
### Déploiement
### 🚀 Production
- **[[Déploiement]]** - Publication sur les stores
- **[[Changelog]]** - Historique des versions
### Support
- **[[Dépannage]]** - Solutions aux problèmes courants
## 🛠️ Stack Technique
```
@@ -82,10 +81,12 @@ Librairies:
- **Écrans** : 6 écrans principaux
- **TypeScript** : 100% typé
## 🎯 Prochaines étapes
## 🎯 Par où commencer ?
Consultez **[[Quick-Start]]** pour démarrer immédiatement !
- **Débutant** : Commencez par **[[Installation]]** (section démarrage rapide)
- **Développeur** : Consultez **[[Développement]]** et **[[API-Reference]]**
- **Problème** : Allez directement à **[[Dépannage]]**
---
**Version 1.0.0** | Dernière mise à jour : Octobre 2025
**Version 1.0.0** | Dernière mise à jour : Octobre 2024

@@ -1,8 +1,43 @@
# 📦 Installation
# 📦 Installation et démarrage rapide
Guide d'installation complet de WalletTracker.
Guide complet pour installer et lancer WalletTracker.
## Prérequis
## 🚀 Démarrage rapide (5 minutes)
Vous voulez tester rapidement ? Suivez ces étapes :
### 1. Prérequis minimum
- Node.js v16+ installé
- Expo Go sur votre téléphone ([iOS](https://apps.apple.com/app/expo-go/id982107779) | [Android](https://play.google.com/store/apps/details?id=host.exp.exponent))
### 2. Installation express
```bash
# Cloner et installer
git clone git@git.fnix.fr:alempereur/WalletTracker.git
cd WalletTracker
npm install
# Configurer Firebase (copiez vos identifiants)
cp .env.example .env
# Éditez .env avec vos identifiants Firebase
# Lancer l'app
npm start
```
### 3. Scanner et tester
1. Scannez le QR code avec Expo Go
2. Créez un compte de test
3. Ajoutez votre première transaction !
**Pour la configuration Firebase détaillée** : consultez [[Configuration-Firebase]]
---
## 📚 Installation complète
### Prérequis détaillés
- **Node.js** v16 ou supérieur ([Télécharger](https://nodejs.org/))
- **npm** ou **yarn**
@@ -10,16 +45,16 @@ Guide d'installation complet de WalletTracker.
- **Compte Firebase** (gratuit) ([Créer un compte](https://firebase.google.com/))
- **Git** ([Télécharger](https://git-scm.com/))
## Installation
### Étapes d'installation
### 1. Cloner le projet
#### 1. Cloner le projet
```bash
git clone git@git.fnix.fr:alempereur/WalletTracker.git
cd WalletTracker
```
### 2. Installer les dépendances
#### 2. Installer les dépendances
```bash
npm install
@@ -27,7 +62,7 @@ npm install
Cette commande installera toutes les dépendances nécessaires listées dans `package.json`.
### 3. Configurer Firebase
#### 3. Configurer Firebase
Consultez le guide **[[Configuration-Firebase]]** pour les détails complets.
@@ -38,7 +73,7 @@ Consultez le guide **[[Configuration-Firebase]]** pour les détails complets.
4. Créez une base Firestore
5. Configurez les règles de sécurité
### 4. Vérifier l'installation
#### 4. Vérifier l'installation
```bash
# Vérifier que tout est installé
@@ -48,7 +83,7 @@ npm run check
npx tsc --noEmit
```
### 5. Lancer l'application
#### 5. Lancer l'application
```bash
npm start
@@ -56,7 +91,7 @@ npm start
Un QR code s'affichera dans le terminal.
### 6. Tester sur votre appareil
#### 6. Tester sur votre appareil
**Sur téléphone** :
1. Ouvrez Expo Go
@@ -169,19 +204,21 @@ npm start
npm start -- --no-dev --minify
```
## Prochaines étapes
## 📚 Prochaines étapes
- **[[Quick-Start]]** - Démarrage rapide
- **[[Configuration-Firebase]]** - Configurer Firebase
- **[[Tests]]** - Tester l'application
- **[[Développement]]** - Comprendre l'architecture
Maintenant que l'installation est terminée :
1. **[[Configuration-Firebase]]** - Configurer Firebase en détail
2. **[[Tests]]** - Tester toutes les fonctionnalités
3. **[[Développement]]** - Comprendre l'architecture du code
4. **[[Déploiement]]** - Publier sur les stores
## 🆘 Besoin d'aide ?
- **[[Dépannage]]** - Solutions aux problèmes courants
- **[[Quick-Start]]** - Guide rapide
- Documentation Expo : https://docs.expo.dev/
- Documentation Firebase : https://firebase.google.com/docs
---
**Installation terminée ! Passez à [[Quick-Start]] pour lancer l'app. 🚀**
**Installation terminée ! L'app devrait maintenant fonctionner. 🎉**

@@ -1,162 +0,0 @@
# 🚀 Démarrage rapide - WalletTracker
Guide pour lancer l'application en 5 minutes.
## Étape 1 : Vérifier les prérequis
```bash
# Vérifier Node.js (v16+)
node --version
# Vérifier npm
npm --version
```
## Étape 2 : Installer les dépendances
```bash
cd WalletTracker
npm install
```
## Étape 3 : Configurer Firebase
### Option A : Configuration rapide (pour tester)
1. Allez sur https://console.firebase.google.com/
2. Créez un nouveau projet "WalletTracker"
3. Ajoutez une application Web
4. Copiez les identifiants dans `src/config/firebase.ts`
### Option B : Configuration complète
Suivez le guide détaillé dans **[[Configuration-Firebase]]**
## Étape 4 : Lancer l'application
```bash
npm start
```
Vous verrez un QR code s'afficher dans le terminal.
## Étape 5 : Tester sur votre téléphone
### Sur iOS ou Android :
1. Téléchargez **Expo Go** depuis l'App Store ou Google Play
2. Ouvrez Expo Go
3. Scannez le QR code affiché dans le terminal
4. L'application se chargera automatiquement
### Sur émulateur :
**iOS (Mac uniquement)** :
```bash
npm run ios
```
**Android** :
```bash
npm run android
```
## 🎉 C'est prêt !
Vous devriez voir l'écran de connexion de WalletTracker.
### Première utilisation :
1. Cliquez sur **"Créer un compte"**
2. Remplissez le formulaire :
- Nom : Votre nom
- Email : votre@email.com
- Mot de passe : minimum 6 caractères
3. Cliquez sur **"Créer mon compte"**
4. Vous êtes redirigé vers le Dashboard !
### Ajouter votre première transaction :
1. Cliquez sur le bouton **"Dépense"** ou **"Revenu"**
2. Entrez le montant
3. Sélectionnez une catégorie
4. Ajoutez une note (optionnel)
5. Cliquez sur **"Ajouter la transaction"**
## 📱 Commandes utiles
```bash
# Lancer l'application
npm start
# Lancer sur iOS
npm run ios
# Lancer sur Android
npm run android
# Lancer sur le web
npm run web
# Nettoyer le cache
npm start -- --clear
# Mode tunnel (problèmes réseau)
npm start -- --tunnel
```
## 🐛 Problèmes courants
### L'application ne se lance pas
```bash
# Nettoyer et réinstaller
rm -rf node_modules
npm install
npm start -- --clear
```
### Erreur Firebase
Vérifiez que vous avez bien :
- Copié les identifiants Firebase dans `src/config/firebase.ts`
- Activé Authentication (Email/Password) dans Firebase Console
- Créé la base de données Firestore
### QR code ne fonctionne pas
- Assurez-vous que votre téléphone et ordinateur sont sur le même réseau Wi-Fi
- Essayez de scanner avec l'appareil photo puis ouvrir avec Expo Go
- Utilisez le mode tunnel : `npm start -- --tunnel`
### L'app reste bloquée sur "downloading..."
1. Fermez complètement Expo Go
2. Supprimez WalletTracker de la liste des projets dans Expo Go
3. Rescannez le QR code
Consultez **[[Dépannage]]** pour plus de solutions.
## 📚 Prochaines étapes
- **[[Installation]]** - Installation complète
- **[[Configuration-Firebase]]** - Configuration Firebase détaillée
- **[[Tests]]** - Tester toutes les fonctionnalités
- **[[Développement]]** - Comprendre l'architecture
## 💡 Conseils
- **Développement** : Utilisez `npm start` et Expo Go pour un rechargement rapide
- **Production** : Utilisez EAS Build pour créer des binaires iOS/Android
- **Débogage** : Secouez votre téléphone pour ouvrir le menu de développement
## 🆘 Besoin d'aide ?
- **[[Dépannage]]** - Solutions aux problèmes courants
- Documentation Expo : https://docs.expo.dev/
- Documentation Firebase : https://firebase.google.com/docs
- React Native : https://reactnative.dev/docs/getting-started
---
**Bon développement ! 💪**