chore: Clean up remaining MD files
This commit is contained in:
32
App.test.tsx
32
App.test.tsx
@@ -1,32 +0,0 @@
|
||||
import React from 'react';
|
||||
import { View, Text, StyleSheet } from 'react-native';
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Text style={styles.text}>✅ WalletTracker fonctionne !</Text>
|
||||
<Text style={styles.subtext}>Si vous voyez ce message, l'app charge correctement.</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#F8F9FA'
|
||||
},
|
||||
text: {
|
||||
fontSize: 24,
|
||||
fontWeight: 'bold',
|
||||
color: '#333',
|
||||
marginBottom: 16
|
||||
},
|
||||
subtext: {
|
||||
fontSize: 16,
|
||||
color: '#666',
|
||||
textAlign: 'center',
|
||||
paddingHorizontal: 32
|
||||
}
|
||||
});
|
||||
132
CHANGELOG.md
132
CHANGELOG.md
@@ -1,132 +0,0 @@
|
||||
# Changelog
|
||||
|
||||
Toutes les modifications notables de ce projet seront documentées dans ce fichier.
|
||||
|
||||
Le format est basé sur [Keep a Changelog](https://keepachangelog.com/fr/1.0.0/),
|
||||
et ce projet adhère au [Semantic Versioning](https://semver.org/lang/fr/).
|
||||
|
||||
## [Non publié]
|
||||
|
||||
### À venir
|
||||
- Notifications push pour les rappels d'abonnements
|
||||
- Mode sombre
|
||||
- Export des données en CSV/PDF
|
||||
- Objectifs budgétaires mensuels
|
||||
- Support multilingue (EN, ES)
|
||||
- Widgets pour l'écran d'accueil
|
||||
- Reconnaissance de tickets avec OCR
|
||||
|
||||
## [1.0.0] - 2025-10-23
|
||||
|
||||
### Ajouté
|
||||
- **Authentification**
|
||||
- Inscription avec email et mot de passe
|
||||
- Connexion sécurisée via Firebase Auth
|
||||
- Déconnexion
|
||||
- Persistance de session avec AsyncStorage
|
||||
- Gestion des erreurs d'authentification en français
|
||||
|
||||
- **Dashboard**
|
||||
- Vue d'ensemble mensuelle du budget
|
||||
- Affichage du solde actuel (revenus - dépenses)
|
||||
- Statistiques mensuelles (total revenus, total dépenses)
|
||||
- Liste des 5 dernières transactions
|
||||
- Boutons d'action rapide pour ajouter dépense/revenu
|
||||
- Pull-to-refresh pour actualiser les données
|
||||
|
||||
- **Gestion des transactions**
|
||||
- Ajout de dépenses et revenus
|
||||
- Sélection de catégorie avec icônes
|
||||
- Ajout de notes optionnelles
|
||||
- Affichage de la liste complète des transactions
|
||||
- Tri par date (plus récentes en premier)
|
||||
- Synchronisation temps réel avec Firestore
|
||||
|
||||
- **Gestion des abonnements**
|
||||
- Ajout d'abonnements récurrents
|
||||
- Fréquences supportées : quotidien, hebdomadaire, mensuel, annuel
|
||||
- Calcul automatique de la prochaine date de paiement
|
||||
- Affichage du nombre de jours avant prélèvement
|
||||
- Mise en évidence des abonnements proches (< 3 jours)
|
||||
- Calcul du total mensuel des abonnements
|
||||
|
||||
- **Analyses et statistiques**
|
||||
- Graphique en camembert par catégorie
|
||||
- Basculement entre dépenses et revenus
|
||||
- Sélection du mois à analyser
|
||||
- Statistiques détaillées par catégorie (montant, nombre, pourcentage)
|
||||
- Affichage du total mensuel
|
||||
|
||||
- **Catégories**
|
||||
- 10 catégories de dépenses par défaut
|
||||
- 5 catégories de revenus par défaut
|
||||
- Icônes et couleurs personnalisées
|
||||
- Initialisation automatique au premier usage
|
||||
|
||||
- **Navigation**
|
||||
- Bottom tabs avec 4 onglets principaux
|
||||
- Navigation fluide entre les écrans
|
||||
- Indicateurs visuels pour l'onglet actif
|
||||
|
||||
- **Composants réutilisables**
|
||||
- Button : Bouton personnalisable avec variantes
|
||||
- InputText : Champ de saisie avec validation
|
||||
- TransactionCard : Carte d'affichage de transaction
|
||||
- SubscriptionCard : Carte d'affichage d'abonnement
|
||||
|
||||
- **Services Firebase**
|
||||
- authService : Gestion de l'authentification
|
||||
- transactionService : CRUD des transactions
|
||||
- subscriptionService : CRUD des abonnements
|
||||
- categoryService : Gestion des catégories
|
||||
|
||||
- **Utilitaires**
|
||||
- Helpers : Fonctions de formatage et validation
|
||||
- Constants : Couleurs, espacements, messages
|
||||
- Sample data : Générateur de données de test
|
||||
|
||||
- **Documentation**
|
||||
- README.md complet
|
||||
- QUICKSTART.md pour démarrage rapide
|
||||
- FIREBASE_SETUP.md pour configuration Firebase
|
||||
- TESTING.md avec checklist de tests
|
||||
- DEPLOYMENT.md pour le déploiement
|
||||
- CONTRIBUTING.md pour les contributions
|
||||
|
||||
- **Sécurité**
|
||||
- Règles Firestore pour protéger les données
|
||||
- Validation côté client et serveur
|
||||
- Stockage sécurisé des tokens
|
||||
|
||||
### Technique
|
||||
- React Native 0.81.5
|
||||
- Expo SDK 54
|
||||
- TypeScript 5.9
|
||||
- Firebase 12.4
|
||||
- React Navigation 7
|
||||
- React Native Chart Kit 6.12
|
||||
|
||||
## [0.1.0] - 2025-10-23
|
||||
|
||||
### Ajouté
|
||||
- Configuration initiale du projet Expo
|
||||
- Structure de base des dossiers
|
||||
- Configuration TypeScript
|
||||
- Installation des dépendances
|
||||
|
||||
---
|
||||
|
||||
## Types de changements
|
||||
|
||||
- `Ajouté` pour les nouvelles fonctionnalités
|
||||
- `Modifié` pour les changements aux fonctionnalités existantes
|
||||
- `Déprécié` pour les fonctionnalités bientôt supprimées
|
||||
- `Supprimé` pour les fonctionnalités supprimées
|
||||
- `Corrigé` pour les corrections de bugs
|
||||
- `Sécurité` pour les vulnérabilités corrigées
|
||||
|
||||
## Liens
|
||||
|
||||
- [Non publié]: https://github.com/yourusername/wallettracker/compare/v1.0.0...HEAD
|
||||
- [1.0.0]: https://github.com/yourusername/wallettracker/releases/tag/v1.0.0
|
||||
- [0.1.0]: https://github.com/yourusername/wallettracker/releases/tag/v0.1.0
|
||||
381
CONTRIBUTING.md
381
CONTRIBUTING.md
@@ -1,381 +0,0 @@
|
||||
# 🤝 Guide de contribution - WalletTracker
|
||||
|
||||
Merci de votre intérêt pour contribuer à WalletTracker ! Ce guide vous aidera à démarrer.
|
||||
|
||||
## 📋 Table des matières
|
||||
|
||||
- [Code de conduite](#code-de-conduite)
|
||||
- [Comment contribuer](#comment-contribuer)
|
||||
- [Structure du projet](#structure-du-projet)
|
||||
- [Standards de code](#standards-de-code)
|
||||
- [Process de développement](#process-de-développement)
|
||||
- [Soumettre une Pull Request](#soumettre-une-pull-request)
|
||||
|
||||
## Code de conduite
|
||||
|
||||
En participant à ce projet, vous acceptez de respecter notre code de conduite :
|
||||
|
||||
- Soyez respectueux et inclusif
|
||||
- Acceptez les critiques constructives
|
||||
- Concentrez-vous sur ce qui est le mieux pour la communauté
|
||||
- Faites preuve d'empathie envers les autres membres
|
||||
|
||||
## Comment contribuer
|
||||
|
||||
### Signaler un bug
|
||||
|
||||
1. Vérifiez que le bug n'a pas déjà été signalé dans les [Issues](https://github.com/yourusername/wallettracker/issues)
|
||||
2. Créez une nouvelle issue avec le template "Bug Report"
|
||||
3. Incluez :
|
||||
- Description claire du problème
|
||||
- Steps to reproduce
|
||||
- Comportement attendu vs actuel
|
||||
- Screenshots si applicable
|
||||
- Version de l'app et de l'OS
|
||||
|
||||
### Proposer une fonctionnalité
|
||||
|
||||
1. Vérifiez que la fonctionnalité n'a pas déjà été proposée
|
||||
2. Créez une issue avec le template "Feature Request"
|
||||
3. Expliquez :
|
||||
- Le problème que cela résout
|
||||
- La solution proposée
|
||||
- Des alternatives considérées
|
||||
- Des mockups si applicable
|
||||
|
||||
### Contribuer au code
|
||||
|
||||
1. Fork le projet
|
||||
2. Créez une branche pour votre fonctionnalité (`git checkout -b feature/AmazingFeature`)
|
||||
3. Committez vos changements (`git commit -m 'Add some AmazingFeature'`)
|
||||
4. Push vers la branche (`git push origin feature/AmazingFeature`)
|
||||
5. Ouvrez une Pull Request
|
||||
|
||||
## Structure du projet
|
||||
|
||||
```
|
||||
WalletTracker/
|
||||
├── src/
|
||||
│ ├── components/ # Composants réutilisables
|
||||
│ ├── config/ # Configuration (Firebase, etc.)
|
||||
│ ├── hooks/ # Custom hooks
|
||||
│ ├── navigation/ # Configuration de navigation
|
||||
│ ├── screens/ # Écrans de l'application
|
||||
│ ├── services/ # Services (API, Firebase)
|
||||
│ ├── types/ # Types TypeScript
|
||||
│ └── utils/ # Fonctions utilitaires
|
||||
├── assets/ # Images, fonts, etc.
|
||||
└── App.tsx # Point d'entrée
|
||||
```
|
||||
|
||||
## Standards de code
|
||||
|
||||
### TypeScript
|
||||
|
||||
- Utilisez TypeScript strict
|
||||
- Définissez des types explicites
|
||||
- Évitez `any`, utilisez `unknown` si nécessaire
|
||||
- Utilisez des interfaces pour les objets
|
||||
|
||||
```typescript
|
||||
// ✅ Bon
|
||||
interface User {
|
||||
id: string;
|
||||
email: string;
|
||||
displayName?: string;
|
||||
}
|
||||
|
||||
// ❌ Mauvais
|
||||
const user: any = { ... };
|
||||
```
|
||||
|
||||
### Naming Conventions
|
||||
|
||||
- **Composants** : PascalCase (`LoginScreen`, `Button`)
|
||||
- **Fonctions** : camelCase (`formatCurrency`, `getUserData`)
|
||||
- **Constantes** : UPPER_SNAKE_CASE (`API_URL`, `MAX_RETRIES`)
|
||||
- **Fichiers** : Même nom que le composant principal
|
||||
|
||||
### Composants React
|
||||
|
||||
- Utilisez des functional components avec hooks
|
||||
- Déstructurez les props
|
||||
- Utilisez TypeScript pour typer les props
|
||||
|
||||
```typescript
|
||||
// ✅ Bon
|
||||
interface ButtonProps {
|
||||
title: string;
|
||||
onPress: () => void;
|
||||
variant?: 'primary' | 'secondary';
|
||||
}
|
||||
|
||||
export const Button: React.FC<ButtonProps> = ({ title, onPress, variant = 'primary' }) => {
|
||||
return (
|
||||
<TouchableOpacity onPress={onPress}>
|
||||
<Text>{title}</Text>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### Styles
|
||||
|
||||
- Utilisez StyleSheet.create()
|
||||
- Groupez les styles par composant
|
||||
- Utilisez les constantes pour les couleurs et espacements
|
||||
|
||||
```typescript
|
||||
import { COLORS, SPACING } from '../utils/constants';
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
padding: SPACING.lg,
|
||||
backgroundColor: COLORS.white
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### Imports
|
||||
|
||||
Organisez les imports dans cet ordre :
|
||||
|
||||
1. React et React Native
|
||||
2. Bibliothèques tierces
|
||||
3. Composants locaux
|
||||
4. Services et utils
|
||||
5. Types
|
||||
6. Styles
|
||||
|
||||
```typescript
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { View, Text } from 'react-native';
|
||||
import { useNavigation } from '@react-navigation/native';
|
||||
|
||||
import { Button } from '../components/Button';
|
||||
import { authService } from '../services/authService';
|
||||
import { formatDate } from '../utils/helpers';
|
||||
import { User } from '../types';
|
||||
|
||||
import styles from './styles';
|
||||
```
|
||||
|
||||
### Commentaires
|
||||
|
||||
- Commentez le "pourquoi", pas le "quoi"
|
||||
- Utilisez JSDoc pour les fonctions publiques
|
||||
- Évitez les commentaires évidents
|
||||
|
||||
```typescript
|
||||
/**
|
||||
* Calcule la prochaine date de paiement basée sur la fréquence
|
||||
* @param currentDate - Date actuelle du paiement
|
||||
* @param frequency - Fréquence de l'abonnement
|
||||
* @returns La prochaine date de paiement
|
||||
*/
|
||||
export const calculateNextPaymentDate = (
|
||||
currentDate: Date,
|
||||
frequency: SubscriptionFrequency
|
||||
): Date => {
|
||||
// ...
|
||||
};
|
||||
```
|
||||
|
||||
## Process de développement
|
||||
|
||||
### 1. Setup
|
||||
|
||||
```bash
|
||||
git clone https://github.com/yourusername/wallettracker.git
|
||||
cd wallettracker
|
||||
npm install
|
||||
```
|
||||
|
||||
### 2. Créer une branche
|
||||
|
||||
```bash
|
||||
git checkout -b feature/nom-de-la-fonctionnalite
|
||||
```
|
||||
|
||||
Types de branches :
|
||||
- `feature/` : Nouvelle fonctionnalité
|
||||
- `fix/` : Correction de bug
|
||||
- `refactor/` : Refactoring
|
||||
- `docs/` : Documentation
|
||||
- `test/` : Tests
|
||||
|
||||
### 3. Développer
|
||||
|
||||
- Écrivez du code propre et testé
|
||||
- Suivez les standards de code
|
||||
- Testez sur iOS et Android
|
||||
- Vérifiez qu'il n'y a pas d'erreurs TypeScript
|
||||
|
||||
### 4. Tester
|
||||
|
||||
```bash
|
||||
# Lancer l'app
|
||||
npm start
|
||||
|
||||
# Vérifier TypeScript
|
||||
npx tsc --noEmit
|
||||
|
||||
# Linter (si configuré)
|
||||
npm run lint
|
||||
```
|
||||
|
||||
### 5. Committer
|
||||
|
||||
Utilisez des messages de commit clairs :
|
||||
|
||||
```bash
|
||||
git commit -m "feat: add dark mode support"
|
||||
git commit -m "fix: resolve crash on transaction deletion"
|
||||
git commit -m "docs: update README with new features"
|
||||
```
|
||||
|
||||
Format des commits :
|
||||
- `feat:` Nouvelle fonctionnalité
|
||||
- `fix:` Correction de bug
|
||||
- `docs:` Documentation
|
||||
- `style:` Formatage, pas de changement de code
|
||||
- `refactor:` Refactoring
|
||||
- `test:` Ajout de tests
|
||||
- `chore:` Maintenance
|
||||
|
||||
## Soumettre une Pull Request
|
||||
|
||||
### Checklist avant soumission
|
||||
|
||||
- [ ] Le code compile sans erreurs
|
||||
- [ ] Les tests passent
|
||||
- [ ] Le code suit les standards du projet
|
||||
- [ ] La documentation est à jour
|
||||
- [ ] Les commits sont bien formatés
|
||||
- [ ] La PR a une description claire
|
||||
|
||||
### Template de PR
|
||||
|
||||
```markdown
|
||||
## Description
|
||||
Brève description des changements
|
||||
|
||||
## Type de changement
|
||||
- [ ] Bug fix
|
||||
- [ ] Nouvelle fonctionnalité
|
||||
- [ ] Breaking change
|
||||
- [ ] Documentation
|
||||
|
||||
## Comment tester
|
||||
1. Étape 1
|
||||
2. Étape 2
|
||||
3. Résultat attendu
|
||||
|
||||
## Screenshots (si applicable)
|
||||
[Ajouter des screenshots]
|
||||
|
||||
## Checklist
|
||||
- [ ] Code testé sur iOS
|
||||
- [ ] Code testé sur Android
|
||||
- [ ] Documentation mise à jour
|
||||
- [ ] Pas de console.log
|
||||
```
|
||||
|
||||
### Review process
|
||||
|
||||
1. Un mainteneur reviewera votre PR
|
||||
2. Des changements peuvent être demandés
|
||||
3. Une fois approuvée, la PR sera mergée
|
||||
4. Votre contribution sera ajoutée au CHANGELOG
|
||||
|
||||
## 🎨 Design Guidelines
|
||||
|
||||
### UI/UX
|
||||
|
||||
- Suivez les guidelines Material Design (Android) et Human Interface (iOS)
|
||||
- Utilisez des animations fluides
|
||||
- Assurez l'accessibilité (contraste, taille de texte)
|
||||
- Testez sur différentes tailles d'écran
|
||||
|
||||
### Couleurs
|
||||
|
||||
Utilisez les couleurs définies dans `src/utils/constants.ts`
|
||||
|
||||
### Espacements
|
||||
|
||||
Utilisez les espacements standardisés (8, 12, 16, 24, 32px)
|
||||
|
||||
## 🧪 Tests
|
||||
|
||||
### Tests manuels
|
||||
|
||||
Utilisez le guide dans `TESTING.md`
|
||||
|
||||
### Tests automatisés (à venir)
|
||||
|
||||
```bash
|
||||
npm test
|
||||
```
|
||||
|
||||
## 📝 Documentation
|
||||
|
||||
- Mettez à jour le README si nécessaire
|
||||
- Documentez les nouvelles fonctionnalités
|
||||
- Ajoutez des exemples d'utilisation
|
||||
- Mettez à jour le CHANGELOG
|
||||
|
||||
## 🐛 Debugging
|
||||
|
||||
### Outils utiles
|
||||
|
||||
- React Native Debugger
|
||||
- Flipper
|
||||
- Reactotron
|
||||
- Firebase Console
|
||||
|
||||
### Logs
|
||||
|
||||
```typescript
|
||||
// Développement
|
||||
console.log('Debug info');
|
||||
|
||||
// Production
|
||||
// Utilisez un service de logging (Sentry, etc.)
|
||||
```
|
||||
|
||||
## 💡 Bonnes pratiques
|
||||
|
||||
### Performance
|
||||
|
||||
- Utilisez `React.memo` pour les composants lourds
|
||||
- Évitez les re-renders inutiles
|
||||
- Optimisez les images
|
||||
- Utilisez FlatList pour les longues listes
|
||||
|
||||
### Sécurité
|
||||
|
||||
- Ne hardcodez jamais de secrets
|
||||
- Validez toutes les entrées utilisateur
|
||||
- Utilisez HTTPS uniquement
|
||||
- Suivez les règles de sécurité Firebase
|
||||
|
||||
### Accessibilité
|
||||
|
||||
- Ajoutez des labels accessibles
|
||||
- Testez avec VoiceOver/TalkBack
|
||||
- Assurez un contraste suffisant
|
||||
- Supportez les grandes tailles de texte
|
||||
|
||||
## 🆘 Besoin d'aide ?
|
||||
|
||||
- Consultez la [documentation](./README.md)
|
||||
- Posez vos questions dans les [Discussions](https://github.com/yourusername/wallettracker/discussions)
|
||||
- Rejoignez notre [Discord](https://discord.gg/wallettracker) (si applicable)
|
||||
|
||||
## 🙏 Remerciements
|
||||
|
||||
Merci à tous les contributeurs qui rendent ce projet possible !
|
||||
|
||||
---
|
||||
|
||||
**Happy coding! 🚀**
|
||||
341
DEPLOYMENT.md
341
DEPLOYMENT.md
@@ -1,341 +0,0 @@
|
||||
# 🚀 Guide de déploiement - WalletTracker
|
||||
|
||||
Ce guide explique comment déployer WalletTracker en production.
|
||||
|
||||
## Prérequis
|
||||
|
||||
- Compte Expo (gratuit) : https://expo.dev/
|
||||
- EAS CLI installé : `npm install -g eas-cli`
|
||||
- Compte développeur Apple (pour iOS) ou Google Play (pour Android)
|
||||
|
||||
## Étape 1 : Configuration EAS
|
||||
|
||||
### Installer EAS CLI
|
||||
|
||||
```bash
|
||||
npm install -g eas-cli
|
||||
```
|
||||
|
||||
### Se connecter à Expo
|
||||
|
||||
```bash
|
||||
eas login
|
||||
```
|
||||
|
||||
### Initialiser EAS Build
|
||||
|
||||
```bash
|
||||
eas build:configure
|
||||
```
|
||||
|
||||
Cela créera un fichier `eas.json` avec la configuration de build.
|
||||
|
||||
## Étape 2 : Configurer les variables d'environnement
|
||||
|
||||
### Pour la production
|
||||
|
||||
Créez un fichier `.env.production` :
|
||||
|
||||
```env
|
||||
FIREBASE_API_KEY=votre_clé_production
|
||||
FIREBASE_AUTH_DOMAIN=votre_domaine_production
|
||||
FIREBASE_PROJECT_ID=votre_projet_production
|
||||
FIREBASE_STORAGE_BUCKET=votre_bucket_production
|
||||
FIREBASE_MESSAGING_SENDER_ID=votre_sender_id
|
||||
FIREBASE_APP_ID=votre_app_id
|
||||
```
|
||||
|
||||
### Configurer les secrets EAS
|
||||
|
||||
```bash
|
||||
eas secret:create --scope project --name FIREBASE_API_KEY --value "votre_clé"
|
||||
eas secret:create --scope project --name FIREBASE_AUTH_DOMAIN --value "votre_domaine"
|
||||
# ... répétez pour toutes les variables
|
||||
```
|
||||
|
||||
## Étape 3 : Build pour iOS
|
||||
|
||||
### Configuration
|
||||
|
||||
1. Assurez-vous d'avoir un compte Apple Developer
|
||||
2. Configurez votre Bundle Identifier dans `app.json`
|
||||
|
||||
### Lancer le build
|
||||
|
||||
```bash
|
||||
# Build de développement
|
||||
eas build --platform ios --profile development
|
||||
|
||||
# Build de preview (TestFlight)
|
||||
eas build --platform ios --profile preview
|
||||
|
||||
# Build de production
|
||||
eas build --platform ios --profile production
|
||||
```
|
||||
|
||||
### Soumettre à l'App Store
|
||||
|
||||
```bash
|
||||
eas submit --platform ios
|
||||
```
|
||||
|
||||
## Étape 4 : Build pour Android
|
||||
|
||||
### Configuration
|
||||
|
||||
1. Configurez votre package name dans `app.json`
|
||||
2. Générez un keystore (EAS le fait automatiquement)
|
||||
|
||||
### Lancer le build
|
||||
|
||||
```bash
|
||||
# Build de développement
|
||||
eas build --platform android --profile development
|
||||
|
||||
# Build de preview (Internal Testing)
|
||||
eas build --platform android --profile preview
|
||||
|
||||
# Build de production
|
||||
eas build --platform android --profile production
|
||||
```
|
||||
|
||||
### Soumettre à Google Play
|
||||
|
||||
```bash
|
||||
eas submit --platform android
|
||||
```
|
||||
|
||||
## Étape 5 : Configuration eas.json
|
||||
|
||||
Exemple de configuration complète :
|
||||
|
||||
```json
|
||||
{
|
||||
"cli": {
|
||||
"version": ">= 5.0.0"
|
||||
},
|
||||
"build": {
|
||||
"development": {
|
||||
"developmentClient": true,
|
||||
"distribution": "internal",
|
||||
"ios": {
|
||||
"simulator": true
|
||||
}
|
||||
},
|
||||
"preview": {
|
||||
"distribution": "internal",
|
||||
"ios": {
|
||||
"simulator": false
|
||||
}
|
||||
},
|
||||
"production": {
|
||||
"env": {
|
||||
"FIREBASE_API_KEY": "$FIREBASE_API_KEY",
|
||||
"FIREBASE_AUTH_DOMAIN": "$FIREBASE_AUTH_DOMAIN",
|
||||
"FIREBASE_PROJECT_ID": "$FIREBASE_PROJECT_ID",
|
||||
"FIREBASE_STORAGE_BUCKET": "$FIREBASE_STORAGE_BUCKET",
|
||||
"FIREBASE_MESSAGING_SENDER_ID": "$FIREBASE_MESSAGING_SENDER_ID",
|
||||
"FIREBASE_APP_ID": "$FIREBASE_APP_ID"
|
||||
}
|
||||
}
|
||||
},
|
||||
"submit": {
|
||||
"production": {
|
||||
"ios": {
|
||||
"appleId": "votre@email.com",
|
||||
"ascAppId": "1234567890",
|
||||
"appleTeamId": "ABCD123456"
|
||||
},
|
||||
"android": {
|
||||
"serviceAccountKeyPath": "./google-service-account.json",
|
||||
"track": "production"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Étape 6 : Over-The-Air (OTA) Updates
|
||||
|
||||
EAS Update permet de déployer des mises à jour sans passer par les stores.
|
||||
|
||||
### Configurer EAS Update
|
||||
|
||||
```bash
|
||||
eas update:configure
|
||||
```
|
||||
|
||||
### Publier une mise à jour
|
||||
|
||||
```bash
|
||||
# Pour la branche de production
|
||||
eas update --branch production --message "Fix bug XYZ"
|
||||
|
||||
# Pour la branche de preview
|
||||
eas update --branch preview --message "New feature ABC"
|
||||
```
|
||||
|
||||
## Étape 7 : Monitoring et Analytics
|
||||
|
||||
### Sentry (erreurs)
|
||||
|
||||
1. Créez un compte sur https://sentry.io/
|
||||
2. Installez le SDK :
|
||||
|
||||
```bash
|
||||
npm install @sentry/react-native
|
||||
```
|
||||
|
||||
3. Configurez dans `App.tsx` :
|
||||
|
||||
```typescript
|
||||
import * as Sentry from '@sentry/react-native';
|
||||
|
||||
Sentry.init({
|
||||
dsn: 'votre_dsn_sentry',
|
||||
enableInExpoDevelopment: false,
|
||||
debug: false
|
||||
});
|
||||
```
|
||||
|
||||
### Firebase Analytics
|
||||
|
||||
Déjà inclus avec Firebase. Activez-le dans la console Firebase.
|
||||
|
||||
## Étape 8 : Checklist avant déploiement
|
||||
|
||||
### Code
|
||||
|
||||
- [ ] Tous les tests passent
|
||||
- [ ] Pas de console.log en production
|
||||
- [ ] Variables d'environnement configurées
|
||||
- [ ] Version incrémentée dans `app.json`
|
||||
- [ ] Changelog mis à jour
|
||||
|
||||
### Firebase
|
||||
|
||||
- [ ] Règles Firestore en mode production
|
||||
- [ ] Règles Storage configurées
|
||||
- [ ] Quotas vérifiés
|
||||
- [ ] Backup configuré
|
||||
- [ ] Monitoring activé
|
||||
|
||||
### App Stores
|
||||
|
||||
- [ ] Screenshots préparés
|
||||
- [ ] Description de l'app rédigée
|
||||
- [ ] Politique de confidentialité publiée
|
||||
- [ ] Conditions d'utilisation publiées
|
||||
- [ ] Icône et splash screen finalisés
|
||||
|
||||
### Sécurité
|
||||
|
||||
- [ ] HTTPS uniquement
|
||||
- [ ] Pas de secrets hardcodés
|
||||
- [ ] Validation côté serveur (règles Firestore)
|
||||
- [ ] Rate limiting configuré
|
||||
- [ ] Authentification sécurisée
|
||||
|
||||
## Étape 9 : Déploiement progressif
|
||||
|
||||
### Phase 1 : Beta Testing (1-2 semaines)
|
||||
|
||||
```bash
|
||||
# Build preview
|
||||
eas build --platform all --profile preview
|
||||
|
||||
# Inviter des beta testeurs
|
||||
eas build:list
|
||||
```
|
||||
|
||||
### Phase 2 : Soft Launch (1 mois)
|
||||
|
||||
- Déployer dans un pays test
|
||||
- Monitorer les métriques
|
||||
- Corriger les bugs critiques
|
||||
|
||||
### Phase 3 : Production
|
||||
|
||||
```bash
|
||||
# Build production
|
||||
eas build --platform all --profile production
|
||||
|
||||
# Soumettre aux stores
|
||||
eas submit --platform all
|
||||
```
|
||||
|
||||
## Étape 10 : Post-déploiement
|
||||
|
||||
### Monitoring
|
||||
|
||||
- Surveiller les crashs (Sentry)
|
||||
- Analyser les métriques (Firebase Analytics)
|
||||
- Vérifier les performances (Firebase Performance)
|
||||
- Lire les reviews utilisateurs
|
||||
|
||||
### Mises à jour
|
||||
|
||||
```bash
|
||||
# Mise à jour mineure (bug fixes)
|
||||
eas update --branch production --message "Bug fixes"
|
||||
|
||||
# Mise à jour majeure (nouvelles fonctionnalités)
|
||||
# Nécessite un nouveau build
|
||||
eas build --platform all --profile production
|
||||
```
|
||||
|
||||
## 📊 Métriques à surveiller
|
||||
|
||||
- **DAU/MAU** : Utilisateurs actifs quotidiens/mensuels
|
||||
- **Retention** : Taux de rétention à J1, J7, J30
|
||||
- **Crash rate** : Taux de crash < 1%
|
||||
- **Performance** : Temps de chargement < 3s
|
||||
- **Engagement** : Nombre de transactions par utilisateur
|
||||
|
||||
## 🔧 Dépannage
|
||||
|
||||
### Build échoue
|
||||
|
||||
```bash
|
||||
# Nettoyer le cache
|
||||
eas build:cancel
|
||||
eas build --clear-cache --platform all
|
||||
```
|
||||
|
||||
### Update ne fonctionne pas
|
||||
|
||||
```bash
|
||||
# Vérifier la configuration
|
||||
eas update:list --branch production
|
||||
```
|
||||
|
||||
### Problèmes de certificats iOS
|
||||
|
||||
```bash
|
||||
# Régénérer les certificats
|
||||
eas credentials
|
||||
```
|
||||
|
||||
## 💰 Coûts estimés
|
||||
|
||||
### Gratuit
|
||||
- Expo (plan gratuit) : Builds limités
|
||||
- Firebase (plan Spark) : Limité mais suffisant pour débuter
|
||||
|
||||
### Payant
|
||||
- Apple Developer : 99€/an
|
||||
- Google Play : 25€ (une fois)
|
||||
- Expo (plan Production) : ~29$/mois (builds illimités)
|
||||
- Firebase (plan Blaze) : Pay-as-you-go
|
||||
|
||||
## 📚 Ressources
|
||||
|
||||
- [EAS Build Documentation](https://docs.expo.dev/build/introduction/)
|
||||
- [EAS Submit Documentation](https://docs.expo.dev/submit/introduction/)
|
||||
- [EAS Update Documentation](https://docs.expo.dev/eas-update/introduction/)
|
||||
- [App Store Guidelines](https://developer.apple.com/app-store/review/guidelines/)
|
||||
- [Google Play Guidelines](https://play.google.com/about/developer-content-policy/)
|
||||
|
||||
---
|
||||
|
||||
**Bon déploiement ! 🎉**
|
||||
@@ -1,158 +0,0 @@
|
||||
# 🔥 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 ! 🎉
|
||||
278
NEXT_STEPS.md
278
NEXT_STEPS.md
@@ -1,278 +0,0 @@
|
||||
# 🎯 Prochaines étapes - WalletTracker
|
||||
|
||||
Félicitations ! Votre application WalletTracker est prête. Voici les étapes pour la lancer.
|
||||
|
||||
## ✅ Ce qui a été fait
|
||||
|
||||
### Architecture complète
|
||||
- ✅ Projet Expo avec TypeScript configuré
|
||||
- ✅ Structure de dossiers organisée (screens, components, services, types, utils)
|
||||
- ✅ Navigation avec React Navigation (Stack + Bottom Tabs)
|
||||
- ✅ Intégration Firebase (Auth, Firestore, Storage)
|
||||
|
||||
### Fonctionnalités implémentées
|
||||
- ✅ Authentification (Signup, Login, Logout)
|
||||
- ✅ Dashboard avec statistiques mensuelles
|
||||
- ✅ Gestion des transactions (dépenses et revenus)
|
||||
- ✅ Gestion des abonnements récurrents
|
||||
- ✅ Analyses avec graphiques par catégorie
|
||||
- ✅ Synchronisation temps réel
|
||||
- ✅ Catégories personnalisables avec icônes
|
||||
|
||||
### Composants réutilisables
|
||||
- ✅ Button (3 variantes)
|
||||
- ✅ InputText (avec validation)
|
||||
- ✅ TransactionCard
|
||||
- ✅ SubscriptionCard
|
||||
|
||||
### Documentation
|
||||
- ✅ README.md complet
|
||||
- ✅ QUICKSTART.md
|
||||
- ✅ FIREBASE_SETUP.md
|
||||
- ✅ TESTING.md
|
||||
- ✅ DEPLOYMENT.md
|
||||
- ✅ CONTRIBUTING.md
|
||||
- ✅ CHANGELOG.md
|
||||
|
||||
## 🚀 Pour démarrer MAINTENANT
|
||||
|
||||
### 1. Configurer Firebase (15 minutes)
|
||||
|
||||
**C'est l'étape la plus importante !**
|
||||
|
||||
```bash
|
||||
# Ouvrez le guide
|
||||
open FIREBASE_SETUP.md
|
||||
```
|
||||
|
||||
**Résumé rapide :**
|
||||
1. Allez sur https://console.firebase.google.com/
|
||||
2. Créez un projet "WalletTracker"
|
||||
3. Ajoutez une application Web
|
||||
4. Copiez les identifiants dans `src/config/firebase.ts`
|
||||
5. Activez Authentication (Email/Password)
|
||||
6. Créez Firestore Database
|
||||
7. Copiez les règles depuis `firestore.rules`
|
||||
|
||||
### 2. Lancer l'application (2 minutes)
|
||||
|
||||
```bash
|
||||
# Dans le terminal
|
||||
npm start
|
||||
```
|
||||
|
||||
Scannez le QR code avec **Expo Go** sur votre téléphone.
|
||||
|
||||
### 3. Tester l'application (10 minutes)
|
||||
|
||||
1. Créez un compte
|
||||
2. Ajoutez quelques transactions
|
||||
3. Créez un abonnement
|
||||
4. Consultez les analyses
|
||||
|
||||
**Astuce :** Utilisez le guide `TESTING.md` pour une checklist complète.
|
||||
|
||||
## 📱 Commandes utiles
|
||||
|
||||
```bash
|
||||
# Lancer l'app
|
||||
npm start
|
||||
|
||||
# Lancer sur iOS (Mac uniquement)
|
||||
npm run ios
|
||||
|
||||
# Lancer sur Android
|
||||
npm run android
|
||||
|
||||
# Nettoyer le cache
|
||||
npm start -- --clear
|
||||
```
|
||||
|
||||
## 🎨 Personnalisation
|
||||
|
||||
### Changer les couleurs
|
||||
|
||||
Éditez `src/utils/constants.ts` :
|
||||
|
||||
```typescript
|
||||
export const COLORS = {
|
||||
primary: '#4A90E2', // Changez cette couleur
|
||||
// ...
|
||||
};
|
||||
```
|
||||
|
||||
### Ajouter des catégories
|
||||
|
||||
Éditez `src/services/categoryService.ts` :
|
||||
|
||||
```typescript
|
||||
export const DEFAULT_CATEGORIES = [
|
||||
{ name: 'Ma catégorie', icon: '🎯', color: '#FF6B6B', type: 'expense' },
|
||||
// ...
|
||||
];
|
||||
```
|
||||
|
||||
### Modifier le logo
|
||||
|
||||
Remplacez les fichiers dans le dossier `assets/` :
|
||||
- `icon.png` (1024x1024)
|
||||
- `splash-icon.png` (1284x2778)
|
||||
- `adaptive-icon.png` (1024x1024)
|
||||
|
||||
## 🐛 Problèmes courants
|
||||
|
||||
### "Firebase: Error (auth/invalid-api-key)"
|
||||
➡️ Vérifiez que vous avez bien copié les identifiants Firebase dans `src/config/firebase.ts`
|
||||
|
||||
### L'app ne se lance pas
|
||||
```bash
|
||||
rm -rf node_modules
|
||||
npm install
|
||||
npm start -- --clear
|
||||
```
|
||||
|
||||
### Les transactions ne s'affichent pas
|
||||
➡️ Vérifiez que les règles Firestore sont bien configurées
|
||||
|
||||
### Erreur TypeScript
|
||||
➡️ Redémarrez le serveur de développement
|
||||
|
||||
## 📚 Apprendre le code
|
||||
|
||||
### Structure du projet
|
||||
|
||||
```
|
||||
src/
|
||||
├── screens/ # Les écrans de l'app
|
||||
│ ├── LoginScreen.tsx
|
||||
│ ├── DashboardScreen.tsx
|
||||
│ └── ...
|
||||
├── components/ # Composants réutilisables
|
||||
├── services/ # Logique Firebase
|
||||
├── navigation/ # Configuration navigation
|
||||
└── utils/ # Fonctions utilitaires
|
||||
```
|
||||
|
||||
### Ajouter un nouvel écran
|
||||
|
||||
1. Créez `src/screens/MonNouvelEcran.tsx`
|
||||
2. Ajoutez-le dans `src/navigation/AppNavigator.tsx`
|
||||
3. Créez un bouton pour naviguer vers cet écran
|
||||
|
||||
### Ajouter une nouvelle fonctionnalité
|
||||
|
||||
1. Créez le service dans `src/services/`
|
||||
2. Créez les types dans `src/types/`
|
||||
3. Créez l'écran dans `src/screens/`
|
||||
4. Testez !
|
||||
|
||||
## 🚀 Déployer en production
|
||||
|
||||
Quand vous serez prêt :
|
||||
|
||||
```bash
|
||||
# Lire le guide complet
|
||||
open DEPLOYMENT.md
|
||||
|
||||
# Installer EAS CLI
|
||||
npm install -g eas-cli
|
||||
|
||||
# Se connecter
|
||||
eas login
|
||||
|
||||
# Configurer
|
||||
eas build:configure
|
||||
|
||||
# Build iOS
|
||||
eas build --platform ios
|
||||
|
||||
# Build Android
|
||||
eas build --platform android
|
||||
```
|
||||
|
||||
## 🎯 Fonctionnalités à ajouter (idées)
|
||||
|
||||
### Court terme
|
||||
- [ ] Modifier/Supprimer une transaction
|
||||
- [ ] Filtrer les transactions par catégorie
|
||||
- [ ] Rechercher dans les transactions
|
||||
- [ ] Ajouter une photo de ticket
|
||||
|
||||
### Moyen terme
|
||||
- [ ] Partage multi-utilisateurs (avec votre copine)
|
||||
- [ ] Notifications pour les abonnements
|
||||
- [ ] Export PDF/CSV
|
||||
- [ ] Objectifs budgétaires
|
||||
|
||||
### Long terme
|
||||
- [ ] Mode sombre
|
||||
- [ ] Support multilingue
|
||||
- [ ] Widgets
|
||||
- [ ] OCR pour les tickets
|
||||
- [ ] Statistiques avancées
|
||||
|
||||
## 💡 Conseils de développement
|
||||
|
||||
### Tester rapidement
|
||||
```bash
|
||||
# Générer des données de test
|
||||
# Ajoutez dans DashboardScreen.tsx :
|
||||
import { generateAllSampleData } from '../utils/sampleData';
|
||||
|
||||
// Dans un useEffect :
|
||||
// generateAllSampleData(user.uid);
|
||||
```
|
||||
|
||||
### Déboguer
|
||||
- Secouez votre téléphone pour ouvrir le menu dev
|
||||
- Activez "Debug Remote JS"
|
||||
- Utilisez `console.log()` pour déboguer
|
||||
|
||||
### Performance
|
||||
- Utilisez React DevTools
|
||||
- Activez "Show Perf Monitor" dans le menu dev
|
||||
|
||||
## 📞 Ressources
|
||||
|
||||
### Documentation
|
||||
- [Expo Docs](https://docs.expo.dev/)
|
||||
- [React Native Docs](https://reactnative.dev/)
|
||||
- [Firebase Docs](https://firebase.google.com/docs)
|
||||
- [React Navigation](https://reactnavigation.org/)
|
||||
|
||||
### Communauté
|
||||
- [Expo Discord](https://chat.expo.dev/)
|
||||
- [React Native Community](https://www.reactnative.dev/community/overview)
|
||||
- [Stack Overflow](https://stackoverflow.com/questions/tagged/react-native)
|
||||
|
||||
## ✨ Améliorations suggérées
|
||||
|
||||
### UX/UI
|
||||
- Ajouter des animations (react-native-reanimated)
|
||||
- Améliorer les transitions entre écrans
|
||||
- Ajouter des haptic feedbacks
|
||||
- Créer un onboarding pour les nouveaux utilisateurs
|
||||
|
||||
### Fonctionnalités
|
||||
- Ajouter des graphiques de tendance
|
||||
- Créer des budgets par catégorie
|
||||
- Ajouter des rappels personnalisés
|
||||
- Implémenter la recherche vocale
|
||||
|
||||
### Technique
|
||||
- Ajouter des tests unitaires (Jest)
|
||||
- Ajouter des tests E2E (Detox)
|
||||
- Implémenter le caching offline
|
||||
- Ajouter Sentry pour le monitoring
|
||||
|
||||
## 🎉 Félicitations !
|
||||
|
||||
Vous avez maintenant une application complète de gestion de budget !
|
||||
|
||||
**Prochaine étape :** Configurez Firebase et lancez l'app ! 🚀
|
||||
|
||||
---
|
||||
|
||||
**Des questions ?** Consultez les fichiers de documentation ou créez une issue sur GitHub.
|
||||
|
||||
**Bon développement ! 💪**
|
||||
@@ -1,314 +0,0 @@
|
||||
# 📊 Résumé du projet WalletTracker
|
||||
|
||||
## 🎯 Vue d'ensemble
|
||||
|
||||
**WalletTracker** est une application mobile complète de gestion de budget développée avec React Native et Firebase, permettant de suivre ses revenus, dépenses et abonnements avec synchronisation en temps réel.
|
||||
|
||||
## 📱 Fonctionnalités principales
|
||||
|
||||
### ✅ Implémentées (v1.0.0)
|
||||
|
||||
1. **Authentification sécurisée**
|
||||
- Inscription/Connexion avec email et mot de passe
|
||||
- Persistance de session
|
||||
- Messages d'erreur en français
|
||||
|
||||
2. **Dashboard interactif**
|
||||
- Vue mensuelle du budget
|
||||
- Solde en temps réel
|
||||
- Statistiques (revenus, dépenses, balance)
|
||||
- 5 dernières transactions
|
||||
- Boutons d'action rapide
|
||||
|
||||
3. **Gestion des transactions**
|
||||
- Ajout de dépenses et revenus
|
||||
- 15 catégories par défaut (personnalisables)
|
||||
- Notes et dates
|
||||
- Liste complète avec tri
|
||||
- Synchronisation temps réel
|
||||
|
||||
4. **Gestion des abonnements**
|
||||
- Abonnements récurrents (quotidien, hebdo, mensuel, annuel)
|
||||
- Calcul automatique des prochains paiements
|
||||
- Alertes visuelles (< 3 jours)
|
||||
- Total mensuel calculé
|
||||
|
||||
5. **Analyses visuelles**
|
||||
- Graphiques en camembert
|
||||
- Statistiques par catégorie
|
||||
- Sélection du mois
|
||||
- Basculement dépenses/revenus
|
||||
- Pourcentages et totaux
|
||||
|
||||
## 🏗️ Architecture technique
|
||||
|
||||
### Stack technologique
|
||||
|
||||
```
|
||||
Frontend:
|
||||
├── React Native 0.81.5
|
||||
├── Expo SDK 54
|
||||
├── TypeScript 5.9
|
||||
└── React Navigation 7
|
||||
|
||||
Backend:
|
||||
├── Firebase Authentication
|
||||
├── Cloud Firestore
|
||||
└── Firebase Storage
|
||||
|
||||
Librairies:
|
||||
├── react-native-chart-kit (graphiques)
|
||||
├── AsyncStorage (stockage local)
|
||||
└── expo-image-picker (photos)
|
||||
```
|
||||
|
||||
### Structure du projet
|
||||
|
||||
```
|
||||
WalletTracker/
|
||||
├── 📱 src/
|
||||
│ ├── components/ # 4 composants réutilisables
|
||||
│ │ ├── Button.tsx
|
||||
│ │ ├── InputText.tsx
|
||||
│ │ ├── TransactionCard.tsx
|
||||
│ │ └── SubscriptionCard.tsx
|
||||
│ │
|
||||
│ ├── config/ # Configuration
|
||||
│ │ └── firebase.ts
|
||||
│ │
|
||||
│ ├── hooks/ # Custom hooks
|
||||
│ │ └── useAuth.ts
|
||||
│ │
|
||||
│ ├── navigation/ # Navigation
|
||||
│ │ └── AppNavigator.tsx
|
||||
│ │
|
||||
│ ├── screens/ # 6 écrans
|
||||
│ │ ├── LoginScreen.tsx
|
||||
│ │ ├── SignupScreen.tsx
|
||||
│ │ ├── DashboardScreen.tsx
|
||||
│ │ ├── TransactionScreen.tsx
|
||||
│ │ ├── SubscriptionScreen.tsx
|
||||
│ │ └── AnalysisScreen.tsx
|
||||
│ │
|
||||
│ ├── services/ # 4 services Firebase
|
||||
│ │ ├── authService.ts
|
||||
│ │ ├── transactionService.ts
|
||||
│ │ ├── subscriptionService.ts
|
||||
│ │ └── categoryService.ts
|
||||
│ │
|
||||
│ ├── types/ # Types TypeScript
|
||||
│ │ └── index.ts
|
||||
│ │
|
||||
│ └── utils/ # Utilitaires
|
||||
│ ├── constants.ts
|
||||
│ ├── helpers.ts
|
||||
│ └── sampleData.ts
|
||||
│
|
||||
├── 📚 Documentation/
|
||||
│ ├── README.md # Documentation principale
|
||||
│ ├── QUICKSTART.md # Démarrage rapide (5 min)
|
||||
│ ├── FIREBASE_SETUP.md # Configuration Firebase
|
||||
│ ├── TESTING.md # Guide de test complet
|
||||
│ ├── DEPLOYMENT.md # Guide de déploiement
|
||||
│ ├── CONTRIBUTING.md # Guide de contribution
|
||||
│ ├── CHANGELOG.md # Historique des versions
|
||||
│ └── NEXT_STEPS.md # Prochaines étapes
|
||||
│
|
||||
├── 🔧 Configuration/
|
||||
│ ├── app.json # Config Expo
|
||||
│ ├── package.json # Dépendances
|
||||
│ ├── tsconfig.json # Config TypeScript
|
||||
│ ├── firestore.rules # Règles de sécurité
|
||||
│ └── .env.example # Variables d'environnement
|
||||
│
|
||||
└── App.tsx # Point d'entrée
|
||||
```
|
||||
|
||||
## 📊 Statistiques du projet
|
||||
|
||||
### Code
|
||||
|
||||
- **Total de fichiers** : 35+ fichiers
|
||||
- **Lignes de code** : ~6000+ lignes
|
||||
- **Composants React** : 10 composants
|
||||
- **Services** : 4 services Firebase
|
||||
- **Écrans** : 6 écrans principaux
|
||||
- **Types TypeScript** : 100% typé
|
||||
|
||||
### Documentation
|
||||
|
||||
- **Fichiers markdown** : 8 guides
|
||||
- **Pages de documentation** : ~50 pages
|
||||
- **Exemples de code** : 30+ exemples
|
||||
|
||||
## 🎨 Design System
|
||||
|
||||
### Couleurs principales
|
||||
|
||||
```typescript
|
||||
Primary: #4A90E2 // Bleu
|
||||
Success: #52C41A // Vert (revenus)
|
||||
Danger: #FF6B6B // Rouge (dépenses)
|
||||
Warning: #FFA07A // Orange (alertes)
|
||||
Light: #F8F9FA // Fond
|
||||
Dark: #333 // Texte
|
||||
```
|
||||
|
||||
### Composants UI
|
||||
|
||||
- **Button** : 3 variantes (primary, secondary, outline)
|
||||
- **InputText** : Validation intégrée
|
||||
- **Cards** : TransactionCard, SubscriptionCard
|
||||
- **Navigation** : Bottom tabs avec icônes
|
||||
|
||||
## 🔐 Sécurité
|
||||
|
||||
### Implémentée
|
||||
|
||||
✅ Authentification Firebase
|
||||
✅ Règles Firestore (protection des données)
|
||||
✅ Validation côté client
|
||||
✅ Stockage sécurisé des tokens
|
||||
✅ HTTPS uniquement
|
||||
✅ Pas de secrets hardcodés
|
||||
|
||||
### Base de données
|
||||
|
||||
```
|
||||
Collections Firestore:
|
||||
├── users/ # Profils utilisateurs
|
||||
├── transactions/ # Toutes les transactions
|
||||
├── categories/ # Catégories personnalisées
|
||||
└── subscriptions/ # Abonnements récurrents
|
||||
```
|
||||
|
||||
## 📈 Fonctionnalités futures
|
||||
|
||||
### Priorité haute (v1.1.0)
|
||||
|
||||
- [ ] Modifier/Supprimer une transaction
|
||||
- [ ] Filtrer les transactions
|
||||
- [ ] Recherche dans les transactions
|
||||
- [ ] Upload de photos de tickets
|
||||
|
||||
### Priorité moyenne (v1.2.0)
|
||||
|
||||
- [ ] Notifications push (abonnements)
|
||||
- [ ] Partage multi-utilisateurs
|
||||
- [ ] Export PDF/CSV
|
||||
- [ ] Objectifs budgétaires
|
||||
|
||||
### Priorité basse (v2.0.0)
|
||||
|
||||
- [ ] Mode sombre
|
||||
- [ ] Support multilingue
|
||||
- [ ] Widgets
|
||||
- [ ] OCR pour tickets
|
||||
- [ ] Statistiques avancées
|
||||
|
||||
## 🚀 Déploiement
|
||||
|
||||
### Environnements
|
||||
|
||||
```
|
||||
Development → Expo Go (test local)
|
||||
Preview → TestFlight / Internal Testing
|
||||
Production → App Store / Google Play
|
||||
```
|
||||
|
||||
### Plateformes supportées
|
||||
|
||||
✅ iOS 13+
|
||||
✅ Android 8.0+
|
||||
✅ Web (via Expo)
|
||||
|
||||
## 📦 Dépendances principales
|
||||
|
||||
```json
|
||||
{
|
||||
"firebase": "^12.4.0",
|
||||
"react-navigation": "^7.x",
|
||||
"react-native-chart-kit": "^6.12.0",
|
||||
"expo-image-picker": "^17.0.8",
|
||||
"@react-native-async-storage/async-storage": "^1.24.0"
|
||||
}
|
||||
```
|
||||
|
||||
## 🎯 Métriques de qualité
|
||||
|
||||
### Code Quality
|
||||
|
||||
- ✅ 100% TypeScript
|
||||
- ✅ Composants modulaires
|
||||
- ✅ Services séparés
|
||||
- ✅ Types explicites
|
||||
- ✅ Code commenté
|
||||
|
||||
### Documentation
|
||||
|
||||
- ✅ README complet
|
||||
- ✅ Guides de démarrage
|
||||
- ✅ Guide de contribution
|
||||
- ✅ Changelog
|
||||
- ✅ Exemples de code
|
||||
|
||||
### Tests
|
||||
|
||||
- ⏳ Tests unitaires (à venir)
|
||||
- ⏳ Tests E2E (à venir)
|
||||
- ✅ Guide de test manuel
|
||||
|
||||
## 💡 Points forts
|
||||
|
||||
1. **Architecture solide** : Structure claire et modulaire
|
||||
2. **TypeScript** : Code type-safe et maintenable
|
||||
3. **Firebase** : Backend scalable et temps réel
|
||||
4. **Documentation** : Guides complets pour tous les cas
|
||||
5. **UI/UX** : Interface moderne et intuitive
|
||||
6. **Sécurité** : Règles Firestore et validation
|
||||
7. **Extensible** : Facile d'ajouter de nouvelles fonctionnalités
|
||||
|
||||
## 🎓 Ce que vous avez appris
|
||||
|
||||
En développant ce projet, vous maîtrisez maintenant :
|
||||
|
||||
- ✅ React Native avec Expo
|
||||
- ✅ TypeScript avancé
|
||||
- ✅ Firebase (Auth, Firestore, Storage)
|
||||
- ✅ React Navigation
|
||||
- ✅ Gestion d'état avec Hooks
|
||||
- ✅ Synchronisation temps réel
|
||||
- ✅ Architecture d'application mobile
|
||||
- ✅ Sécurité et règles Firestore
|
||||
|
||||
## 📞 Support
|
||||
|
||||
### Documentation
|
||||
|
||||
- Tous les guides sont dans le dossier racine
|
||||
- Commencez par `NEXT_STEPS.md`
|
||||
- Consultez `QUICKSTART.md` pour démarrer rapidement
|
||||
|
||||
### Ressources
|
||||
|
||||
- [Expo Docs](https://docs.expo.dev/)
|
||||
- [Firebase Docs](https://firebase.google.com/docs)
|
||||
- [React Navigation](https://reactnavigation.org/)
|
||||
|
||||
## 🎉 Conclusion
|
||||
|
||||
**WalletTracker v1.0.0** est une application complète, professionnelle et prête à l'emploi pour la gestion de budget personnel.
|
||||
|
||||
### Prochaines étapes recommandées
|
||||
|
||||
1. **Configurer Firebase** (15 min) → `FIREBASE_SETUP.md`
|
||||
2. **Lancer l'app** (2 min) → `npm start`
|
||||
3. **Tester** (10 min) → `TESTING.md`
|
||||
4. **Personnaliser** → Modifier les couleurs, catégories, etc.
|
||||
5. **Déployer** → `DEPLOYMENT.md`
|
||||
|
||||
---
|
||||
|
||||
**Développé avec ❤️ pour une meilleure gestion de budget**
|
||||
|
||||
Version: 1.0.0 | Date: 23 octobre 2025 | Statut: ✅ Production Ready
|
||||
149
QUICKSTART.md
149
QUICKSTART.md
@@ -1,149 +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 `FIREBASE_SETUP.md`
|
||||
|
||||
## É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
|
||||
```
|
||||
|
||||
## 🐛 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`
|
||||
|
||||
## 📚 Prochaines étapes
|
||||
|
||||
- Lisez le `README.md` pour comprendre l'architecture
|
||||
- Consultez `FIREBASE_SETUP.md` pour la configuration complète
|
||||
- Utilisez `TESTING.md` pour tester toutes les fonctionnalités
|
||||
|
||||
## 💡 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 ?
|
||||
|
||||
- Documentation Expo : https://docs.expo.dev/
|
||||
- Documentation Firebase : https://firebase.google.com/docs
|
||||
- React Native : https://reactnative.dev/docs/getting-started
|
||||
|
||||
---
|
||||
|
||||
**Bon développement ! 💪**
|
||||
135
QUICK_FIX.md
135
QUICK_FIX.md
@@ -1,135 +0,0 @@
|
||||
# ⚡ 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 ! 🚀**
|
||||
243
TESTING.md
243
TESTING.md
@@ -1,243 +0,0 @@
|
||||
# 🧪 Guide de test - WalletTracker
|
||||
|
||||
Ce guide vous aidera à tester toutes les fonctionnalités de l'application.
|
||||
|
||||
## Prérequis
|
||||
|
||||
- Firebase configuré (voir `FIREBASE_SETUP.md`)
|
||||
- Application lancée avec `npm start`
|
||||
- Téléphone avec Expo Go ou émulateur
|
||||
|
||||
## 📋 Checklist de tests
|
||||
|
||||
### 1. Authentification
|
||||
|
||||
#### Test d'inscription
|
||||
- [ ] Ouvrir l'application
|
||||
- [ ] Cliquer sur "Créer un compte"
|
||||
- [ ] Tester les validations :
|
||||
- [ ] Champ nom vide → Erreur affichée
|
||||
- [ ] Email invalide → Erreur affichée
|
||||
- [ ] Mot de passe < 6 caractères → Erreur affichée
|
||||
- [ ] Mots de passe différents → Erreur affichée
|
||||
- [ ] Remplir tous les champs correctement
|
||||
- [ ] Créer le compte
|
||||
- [ ] Vérifier la redirection vers le Dashboard
|
||||
|
||||
#### Test de connexion
|
||||
- [ ] Se déconnecter
|
||||
- [ ] Cliquer sur "J'ai déjà un compte"
|
||||
- [ ] Tester les validations :
|
||||
- [ ] Email vide → Erreur affichée
|
||||
- [ ] Mot de passe vide → Erreur affichée
|
||||
- [ ] Mauvais identifiants → Message d'erreur
|
||||
- [ ] Se connecter avec les bons identifiants
|
||||
- [ ] Vérifier la redirection vers le Dashboard
|
||||
|
||||
#### Test de persistance
|
||||
- [ ] Se connecter
|
||||
- [ ] Fermer complètement l'application
|
||||
- [ ] Rouvrir l'application
|
||||
- [ ] Vérifier que l'utilisateur est toujours connecté
|
||||
|
||||
### 2. Dashboard
|
||||
|
||||
#### Affichage initial
|
||||
- [ ] Vérifier l'affichage du message de bienvenue
|
||||
- [ ] Vérifier l'affichage du mois actuel
|
||||
- [ ] Vérifier que le solde est à 0€
|
||||
- [ ] Vérifier que les revenus sont à 0€
|
||||
- [ ] Vérifier que les dépenses sont à 0€
|
||||
- [ ] Vérifier l'affichage de l'état vide
|
||||
|
||||
#### Après ajout de transactions
|
||||
- [ ] Ajouter quelques transactions
|
||||
- [ ] Revenir au Dashboard
|
||||
- [ ] Vérifier que les statistiques sont mises à jour
|
||||
- [ ] Vérifier que les 5 dernières transactions s'affichent
|
||||
- [ ] Vérifier le calcul du solde (revenus - dépenses)
|
||||
|
||||
#### Pull to refresh
|
||||
- [ ] Tirer vers le bas pour rafraîchir
|
||||
- [ ] Vérifier que les données se rechargent
|
||||
|
||||
### 3. Transactions
|
||||
|
||||
#### Ajout d'une dépense
|
||||
- [ ] Aller dans l'onglet "Transactions"
|
||||
- [ ] Cliquer sur "+ Ajouter"
|
||||
- [ ] Sélectionner "Dépense"
|
||||
- [ ] Tester les validations :
|
||||
- [ ] Montant vide → Erreur
|
||||
- [ ] Montant = 0 → Erreur
|
||||
- [ ] Catégorie non sélectionnée → Erreur
|
||||
- [ ] Entrer un montant valide (ex: 50.00)
|
||||
- [ ] Sélectionner une catégorie (ex: Courses)
|
||||
- [ ] Ajouter une note (optionnel)
|
||||
- [ ] Cliquer sur "Ajouter la transaction"
|
||||
- [ ] Vérifier que la transaction apparaît dans la liste
|
||||
- [ ] Vérifier l'affichage en rouge avec le signe "-"
|
||||
|
||||
#### Ajout d'un revenu
|
||||
- [ ] Cliquer sur "+ Ajouter"
|
||||
- [ ] Sélectionner "Revenu"
|
||||
- [ ] Entrer un montant (ex: 2000.00)
|
||||
- [ ] Sélectionner une catégorie (ex: Salaire)
|
||||
- [ ] Ajouter une note
|
||||
- [ ] Cliquer sur "Ajouter la transaction"
|
||||
- [ ] Vérifier que la transaction apparaît dans la liste
|
||||
- [ ] Vérifier l'affichage en vert avec le signe "+"
|
||||
|
||||
#### Liste des transactions
|
||||
- [ ] Vérifier que les transactions sont triées par date (plus récentes en premier)
|
||||
- [ ] Vérifier l'affichage des icônes de catégorie
|
||||
- [ ] Vérifier l'affichage des couleurs par catégorie
|
||||
- [ ] Vérifier l'affichage de la date formatée
|
||||
- [ ] Vérifier l'affichage de la note si présente
|
||||
|
||||
### 4. Abonnements
|
||||
|
||||
#### Ajout d'un abonnement
|
||||
- [ ] Aller dans l'onglet "Abonnements"
|
||||
- [ ] Cliquer sur "+ Ajouter"
|
||||
- [ ] Tester les validations :
|
||||
- [ ] Nom vide → Erreur
|
||||
- [ ] Montant vide → Erreur
|
||||
- [ ] Jour invalide → Erreur
|
||||
- [ ] Entrer un nom (ex: Netflix)
|
||||
- [ ] Entrer un montant (ex: 15.99)
|
||||
- [ ] Sélectionner "Mensuel"
|
||||
- [ ] Entrer un jour du mois (ex: 15)
|
||||
- [ ] Sélectionner une catégorie (ex: Abonnements)
|
||||
- [ ] Cliquer sur "Ajouter l'abonnement"
|
||||
- [ ] Vérifier que l'abonnement apparaît dans la liste
|
||||
|
||||
#### Affichage des abonnements
|
||||
- [ ] Vérifier l'affichage du nom
|
||||
- [ ] Vérifier l'affichage du montant
|
||||
- [ ] Vérifier l'affichage de la fréquence
|
||||
- [ ] Vérifier l'affichage de la prochaine date de paiement
|
||||
- [ ] Vérifier l'affichage du nombre de jours restants
|
||||
|
||||
#### Abonnement proche
|
||||
- [ ] Créer un abonnement avec une date dans 2 jours
|
||||
- [ ] Vérifier que la carte a une bordure orange
|
||||
- [ ] Vérifier que le texte est en rouge
|
||||
|
||||
#### Total mensuel
|
||||
- [ ] Ajouter plusieurs abonnements
|
||||
- [ ] Vérifier que le total mensuel est correct
|
||||
- [ ] Tester avec différentes fréquences (hebdo, mensuel, annuel)
|
||||
|
||||
### 5. Analyses
|
||||
|
||||
#### Sélection du mois
|
||||
- [ ] Aller dans l'onglet "Analyses"
|
||||
- [ ] Cliquer sur la flèche gauche
|
||||
- [ ] Vérifier le changement de mois
|
||||
- [ ] Cliquer sur la flèche droite
|
||||
- [ ] Vérifier le changement de mois
|
||||
|
||||
#### Basculer entre dépenses et revenus
|
||||
- [ ] Cliquer sur "Dépenses"
|
||||
- [ ] Vérifier l'affichage du graphique des dépenses
|
||||
- [ ] Cliquer sur "Revenus"
|
||||
- [ ] Vérifier l'affichage du graphique des revenus
|
||||
|
||||
#### Graphique en camembert
|
||||
- [ ] Ajouter plusieurs transactions dans différentes catégories
|
||||
- [ ] Vérifier l'affichage du graphique
|
||||
- [ ] Vérifier les couleurs par catégorie
|
||||
- [ ] Vérifier les montants affichés
|
||||
|
||||
#### Statistiques par catégorie
|
||||
- [ ] Vérifier l'affichage de chaque catégorie
|
||||
- [ ] Vérifier le montant total par catégorie
|
||||
- [ ] Vérifier le nombre de transactions
|
||||
- [ ] Vérifier le pourcentage
|
||||
- [ ] Vérifier le tri par montant décroissant
|
||||
|
||||
#### État vide
|
||||
- [ ] Sélectionner un mois sans transactions
|
||||
- [ ] Vérifier l'affichage de l'état vide
|
||||
|
||||
### 6. Navigation
|
||||
|
||||
#### Onglets
|
||||
- [ ] Tester la navigation entre tous les onglets
|
||||
- [ ] Vérifier que l'onglet actif est bien mis en évidence
|
||||
- [ ] Vérifier que les icônes changent de couleur
|
||||
|
||||
#### Boutons d'action rapide (Dashboard)
|
||||
- [ ] Cliquer sur "Dépense"
|
||||
- [ ] Vérifier la navigation vers Transactions avec le type pré-sélectionné
|
||||
- [ ] Cliquer sur "Revenu"
|
||||
- [ ] Vérifier la navigation vers Transactions avec le type pré-sélectionné
|
||||
|
||||
### 7. Synchronisation temps réel
|
||||
|
||||
#### Test avec deux appareils (si possible)
|
||||
- [ ] Se connecter avec le même compte sur deux appareils
|
||||
- [ ] Ajouter une transaction sur l'appareil 1
|
||||
- [ ] Vérifier que la transaction apparaît sur l'appareil 2
|
||||
- [ ] Ajouter un abonnement sur l'appareil 2
|
||||
- [ ] Vérifier que l'abonnement apparaît sur l'appareil 1
|
||||
|
||||
#### Test de mise à jour en temps réel
|
||||
- [ ] Ouvrir le Dashboard
|
||||
- [ ] Dans un autre onglet, ajouter une transaction
|
||||
- [ ] Revenir au Dashboard
|
||||
- [ ] Vérifier que les statistiques sont mises à jour
|
||||
|
||||
### 8. Déconnexion
|
||||
|
||||
- [ ] Cliquer sur "Déconnexion" dans le Dashboard
|
||||
- [ ] Vérifier la redirection vers l'écran de connexion
|
||||
- [ ] Vérifier que les données ne sont plus accessibles
|
||||
|
||||
### 9. Tests de performance
|
||||
|
||||
#### Chargement initial
|
||||
- [ ] Mesurer le temps de chargement de l'application
|
||||
- [ ] Vérifier qu'il n'y a pas de lag
|
||||
|
||||
#### Avec beaucoup de données
|
||||
- [ ] Ajouter 50+ transactions
|
||||
- [ ] Vérifier que la liste défile correctement
|
||||
- [ ] Vérifier que les graphiques se chargent rapidement
|
||||
|
||||
### 10. Tests d'erreur
|
||||
|
||||
#### Pas de connexion Internet
|
||||
- [ ] Désactiver le Wi-Fi et les données mobiles
|
||||
- [ ] Essayer de se connecter
|
||||
- [ ] Vérifier le message d'erreur
|
||||
- [ ] Essayer d'ajouter une transaction
|
||||
- [ ] Vérifier le message d'erreur
|
||||
|
||||
#### Firebase non configuré
|
||||
- [ ] Vérifier le message d'erreur si Firebase n'est pas configuré
|
||||
|
||||
## 🐛 Bugs connus
|
||||
|
||||
Notez ici les bugs découverts pendant les tests :
|
||||
|
||||
1.
|
||||
2.
|
||||
3.
|
||||
|
||||
## ✅ Résultat des tests
|
||||
|
||||
- Date du test : ___________
|
||||
- Version testée : 1.0.0
|
||||
- Testeur : ___________
|
||||
- Appareil : ___________
|
||||
- Résultat global : ⬜ Réussi / ⬜ Échec
|
||||
|
||||
## 📝 Notes
|
||||
|
||||
Ajoutez vos observations ici :
|
||||
|
||||
---
|
||||
|
||||
**Bon test ! 🚀**
|
||||
@@ -1,124 +0,0 @@
|
||||
# 🔧 Guide de dépannage - WalletTracker
|
||||
|
||||
## Problème : L'app charge jusqu'au timeout après scan du QR code
|
||||
|
||||
### ✅ Solutions appliquées
|
||||
|
||||
1. **Mise à jour des dépendances incompatibles**
|
||||
```bash
|
||||
npx expo install --fix
|
||||
```
|
||||
|
||||
2. **Configuration Metro améliorée**
|
||||
- Ajout de `metro.config.js` avec timeout augmenté
|
||||
- Optimisation du bundler
|
||||
|
||||
3. **Graphiques temporairement désactivés**
|
||||
- `react-native-chart-kit` peut causer des problèmes de chargement
|
||||
- Remplacé par un placeholder dans `AnalysisScreen`
|
||||
- Sera réactivé après configuration complète
|
||||
|
||||
### 🚀 Relancer l'application
|
||||
|
||||
```bash
|
||||
# Nettoyer le cache
|
||||
npm start -- --clear
|
||||
|
||||
# Ou redémarrer complètement
|
||||
rm -rf node_modules
|
||||
npm install
|
||||
npm start -- --clear
|
||||
```
|
||||
|
||||
### 📱 Vérifications réseau
|
||||
|
||||
1. **Même réseau Wi-Fi**
|
||||
- Votre ordinateur et téléphone doivent être sur le même réseau
|
||||
- Désactivez les VPN si actifs
|
||||
|
||||
2. **Pare-feu**
|
||||
- Autorisez Expo dans votre pare-feu
|
||||
- Port 8081 doit être ouvert
|
||||
|
||||
3. **Mode tunnel (si problème réseau)**
|
||||
```bash
|
||||
npm start -- --tunnel
|
||||
```
|
||||
⚠️ Plus lent mais fonctionne même avec des réseaux différents
|
||||
|
||||
### 🔍 Diagnostic
|
||||
|
||||
Si le problème persiste, vérifiez :
|
||||
|
||||
```bash
|
||||
# 1. Vérifier la connexion
|
||||
ping 192.168.1.132
|
||||
|
||||
# 2. Vérifier que Metro tourne
|
||||
# Vous devriez voir "Metro waiting on exp://..."
|
||||
|
||||
# 3. Tester sur le web d'abord
|
||||
npm run web
|
||||
```
|
||||
|
||||
### 📊 Réactiver les graphiques (plus tard)
|
||||
|
||||
Une fois l'app fonctionnelle, pour réactiver les graphiques :
|
||||
|
||||
1. Installer les dépendances natives :
|
||||
```bash
|
||||
npx expo install react-native-svg
|
||||
```
|
||||
|
||||
2. Dans `src/screens/AnalysisScreen.tsx` :
|
||||
- Décommenter `import { PieChart } from 'react-native-chart-kit'`
|
||||
- Remplacer le placeholder par `<PieChart ... />`
|
||||
|
||||
3. Rebuild l'app
|
||||
|
||||
### 🆘 Autres problèmes courants
|
||||
|
||||
#### Erreur "Unable to resolve module"
|
||||
```bash
|
||||
npm start -- --clear
|
||||
```
|
||||
|
||||
#### Erreur "Network request failed"
|
||||
- Vérifiez votre connexion Internet
|
||||
- Essayez le mode tunnel : `npm start -- --tunnel`
|
||||
|
||||
#### L'app crash au démarrage
|
||||
- Vérifiez que Firebase est configuré dans `src/config/firebase.ts`
|
||||
- Regardez les logs dans le terminal
|
||||
|
||||
#### "Expo Go" ne trouve pas l'app
|
||||
- Assurez-vous que les deux appareils sont sur le même réseau
|
||||
- Redémarrez Expo Go
|
||||
- Rescannez le QR code
|
||||
|
||||
### 💡 Conseils
|
||||
|
||||
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 ?
|
||||
|
||||
Si le problème persiste :
|
||||
|
||||
1. Vérifiez les logs dans le terminal
|
||||
2. Regardez les erreurs dans Expo Go (secouer > Show Dev Menu > Debug)
|
||||
3. Consultez la documentation Expo : https://docs.expo.dev/
|
||||
|
||||
## ✅ Checklist de vérification
|
||||
|
||||
- [ ] Dépendances mises à jour (`npx expo install --fix`)
|
||||
- [ ] Cache nettoyé (`npm start -- --clear`)
|
||||
- [ ] Même réseau Wi-Fi
|
||||
- [ ] Pare-feu autorise Expo
|
||||
- [ ] Firebase configuré (si vous testez l'auth)
|
||||
- [ ] QR code scanné avec Expo Go (pas l'appareil photo)
|
||||
|
||||
---
|
||||
|
||||
**L'app devrait maintenant se charger correctement ! 🎉**
|
||||
Reference in New Issue
Block a user