diff --git a/Changelog.md b/Changelog.md index 2dc5f6d..bd03ace 100644 --- a/Changelog.md +++ b/Changelog.md @@ -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 diff --git a/Configuration-Firebase.md b/Configuration-Firebase.md index 4e100f3..70471cc 100644 --- a/Configuration-Firebase.md +++ b/Configuration-Firebase.md @@ -20,19 +20,29 @@ 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 @@ -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) diff --git a/Dépannage.md b/Dépannage.md index 8c5517e..106a656 100644 --- a/Dépannage.md +++ b/Dépannage.md @@ -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) + +--- + +## 🔴 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 +## 🌐 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 +## ⚠️ 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 +## 💻 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/ +## 🔥 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 ! 🚀** diff --git a/Home.md b/Home.md index 73b9ee0..0c8e0c7 100644 --- a/Home.md +++ b/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 \ No newline at end of file +**Version 1.0.0** | Dernière mise à jour : Octobre 2024 \ No newline at end of file diff --git a/Installation.md b/Installation.md index 012f3c2..2b61b7c 100644 --- a/Installation.md +++ b/Installation.md @@ -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. 🎉** diff --git a/Quick-Start.md b/Quick-Start.md deleted file mode 100644 index f1c598d..0000000 --- a/Quick-Start.md +++ /dev/null @@ -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 ! 💪**