- Setup Expo project with TypeScript - Implement authentication (Login/Signup/Logout) - Create Dashboard, Transactions, Subscriptions, and Analysis screens - Add Firebase services (Auth, Firestore, Storage) - Implement real-time synchronization - Add charts and analytics - Create reusable components (Button, InputText, TransactionCard, SubscriptionCard) - Configure React Navigation with bottom tabs - Add Firestore security rules - Create comprehensive documentation (README, FIREBASE_SETUP, TESTING)
5.3 KiB
5.3 KiB
🔥 Guide de configuration Firebase
Ce guide vous aidera à configurer Firebase pour WalletTracker.
Étape 1 : Créer un projet Firebase
- Allez sur Firebase Console
- Cliquez sur "Ajouter un projet"
- Entrez le nom du projet : WalletTracker
- Désactivez Google Analytics (optionnel)
- Cliquez sur "Créer le projet"
Étape 2 : Ajouter une application Web
- Dans la console Firebase, cliquez sur l'icône Web (</>)
- Enregistrez l'application avec le nom : WalletTracker
- Cochez "Configurer Firebase Hosting" (optionnel)
- Cliquez sur "Enregistrer l'application"
- Copiez les identifiants de configuration qui s'affichent
Étape 3 : Configurer l'application
- Ouvrez le fichier
src/config/firebase.ts - Remplacez les valeurs par défaut par vos identifiants Firebase :
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"
};
Étape 4 : Activer Authentication
- Dans la console Firebase, allez dans Authentication
- Cliquez sur "Commencer"
- Dans l'onglet Sign-in method, activez :
- Email/Password : Activez cette méthode
- Cliquez sur "Enregistrer"
Étape 5 : Créer la base de données Firestore
- Dans la console Firebase, allez dans Firestore Database
- Cliquez sur "Créer une base de données"
- Sélectionnez Mode production
- Choisissez un emplacement (par exemple :
europe-west1pour l'Europe) - Cliquez sur "Activer"
Étape 6 : Configurer les règles Firestore
- Dans Firestore Database, allez dans l'onglet Règles
- Copiez le contenu du fichier
firestore.rulesde ce projet - Collez-le dans l'éditeur de règles Firebase
- Cliquez sur "Publier"
Les règles configurées permettent :
- ✅ Chaque utilisateur peut lire/écrire uniquement ses propres données
- ✅ Protection contre les accès non autorisés
- ✅ Validation des champs requis lors de la création
Étape 7 : Activer Storage (optionnel)
Pour stocker les photos de tickets :
- Dans la console Firebase, allez dans Storage
- Cliquez sur "Commencer"
- Sélectionnez Mode production
- Cliquez sur "Suivant" puis "Terminé"
- Dans l'onglet Règles, utilisez ces règles :
rules_version = '2';
service firebase.storage {
match /b/{bucket}/o {
match /users/{userId}/{allPaths=**} {
allow read, write: if request.auth != null && request.auth.uid == userId;
}
}
}
Étape 8 : Créer les index Firestore (si nécessaire)
Si vous rencontrez des erreurs de requête, Firebase vous fournira un lien pour créer automatiquement les index nécessaires.
Les index recommandés :
Collection transactions
- Champs :
userId(Ascending),date(Descending) - Champs :
userId(Ascending),type(Ascending),date(Descending) - Champs :
userId(Ascending),category(Ascending),date(Descending)
Collection subscriptions
- Champs :
userId(Ascending),nextPaymentDate(Ascending)
Étape 9 : Tester la configuration
- Lancez l'application :
npm start - Créez un compte de test
- Vérifiez dans la console Firebase :
- Authentication : Votre utilisateur doit apparaître
- Firestore : Les collections doivent se créer automatiquement
🔐 Sécurité
Bonnes pratiques
- Ne jamais commiter vos identifiants Firebase dans Git
- Utilisez des variables d'environnement pour la production
- Activez l'authentification à deux facteurs sur votre compte Firebase
- Surveillez l'utilisation dans la console Firebase
- Configurez des alertes de budget
Limites du plan gratuit (Spark)
- Firestore : 1 Go de stockage, 50k lectures/jour, 20k écritures/jour
- Authentication : 10k vérifications/mois
- Storage : 5 Go de stockage, 1 Go de téléchargement/jour
Pour une utilisation en production avec plusieurs utilisateurs, envisagez le plan Blaze (paiement à l'usage).
🆘 Dépannage
Erreur : "Firebase: Error (auth/invalid-api-key)"
- Vérifiez que vous avez bien copié l'
apiKeycorrectement - Assurez-vous qu'il n'y a pas d'espaces avant/après
Erreur : "Missing or insufficient permissions"
- Vérifiez que les règles Firestore sont bien publiées
- Assurez-vous que l'utilisateur est bien authentifié
Les catégories ne s'affichent pas
- Vérifiez que l'utilisateur est connecté
- Les catégories par défaut se créent automatiquement au premier ajout de transaction
📚 Ressources
✅ Checklist de configuration
- Projet Firebase créé
- Application Web ajoutée
- Identifiants copiés dans
firebase.ts - Authentication activée (Email/Password)
- Firestore Database créée
- Règles Firestore configurées
- Storage activé (optionnel)
- Application testée avec succès
Une fois toutes ces étapes complétées, votre application WalletTracker est prête à être utilisée ! 🎉