Initial commit: WalletTracker app with Firebase integration
- 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)
This commit is contained in:
158
FIREBASE_SETUP.md
Normal file
158
FIREBASE_SETUP.md
Normal file
@@ -0,0 +1,158 @@
|
||||
# 🔥 Guide de configuration Firebase
|
||||
|
||||
Ce guide vous aidera à configurer Firebase pour WalletTracker.
|
||||
|
||||
## Étape 1 : Créer un projet Firebase
|
||||
|
||||
1. Allez sur [Firebase Console](https://console.firebase.google.com/)
|
||||
2. Cliquez sur "Ajouter un projet"
|
||||
3. Entrez le nom du projet : **WalletTracker**
|
||||
4. Désactivez Google Analytics (optionnel)
|
||||
5. Cliquez sur "Créer le projet"
|
||||
|
||||
## Étape 2 : Ajouter une application Web
|
||||
|
||||
1. Dans la console Firebase, cliquez sur l'icône **Web** (</>)
|
||||
2. Enregistrez l'application avec le nom : **WalletTracker**
|
||||
3. Cochez "Configurer Firebase Hosting" (optionnel)
|
||||
4. Cliquez sur "Enregistrer l'application"
|
||||
5. **Copiez les identifiants de configuration** qui s'affichent
|
||||
|
||||
## Étape 3 : Configurer l'application
|
||||
|
||||
1. Ouvrez le fichier `src/config/firebase.ts`
|
||||
2. Remplacez les valeurs par défaut par vos identifiants Firebase :
|
||||
|
||||
```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"
|
||||
};
|
||||
```
|
||||
|
||||
## Étape 4 : Activer Authentication
|
||||
|
||||
1. Dans la console Firebase, allez dans **Authentication**
|
||||
2. Cliquez sur "Commencer"
|
||||
3. 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
|
||||
|
||||
1. Dans la console Firebase, allez dans **Firestore Database**
|
||||
2. Cliquez sur "Créer une base de données"
|
||||
3. Sélectionnez **Mode production**
|
||||
4. Choisissez un emplacement (par exemple : `europe-west1` pour l'Europe)
|
||||
5. Cliquez sur "Activer"
|
||||
|
||||
## Étape 6 : Configurer les règles Firestore
|
||||
|
||||
1. Dans Firestore Database, allez dans l'onglet **Règles**
|
||||
2. Copiez le contenu du fichier `firestore.rules` de ce projet
|
||||
3. Collez-le dans l'éditeur de règles Firebase
|
||||
4. 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 :
|
||||
|
||||
1. Dans la console Firebase, allez dans **Storage**
|
||||
2. Cliquez sur "Commencer"
|
||||
3. Sélectionnez **Mode production**
|
||||
4. Cliquez sur "Suivant" puis "Terminé"
|
||||
5. 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
|
||||
|
||||
1. Lancez l'application : `npm start`
|
||||
2. Créez un compte de test
|
||||
3. Vérifiez dans la console Firebase :
|
||||
- **Authentication** : Votre utilisateur doit apparaître
|
||||
- **Firestore** : Les collections doivent se créer automatiquement
|
||||
|
||||
## 🔐 Sécurité
|
||||
|
||||
### 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
|
||||
|
||||
### 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'`apiKey` correctement
|
||||
- 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
|
||||
|
||||
- [Documentation Firebase](https://firebase.google.com/docs)
|
||||
- [Firestore Security Rules](https://firebase.google.com/docs/firestore/security/get-started)
|
||||
- [Firebase Authentication](https://firebase.google.com/docs/auth)
|
||||
- [React Native Firebase](https://rnfirebase.io/)
|
||||
|
||||
## ✅ 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 ! 🎉
|
||||
Reference in New Issue
Block a user