Tontine

Tontine est une application Ionic 3 destinée à la gestion de tontines et d'épargnes communautaires. Elle suit les clients, leurs comptes (tontine, épargne, crédit), les mises et les recettes via Firebase Realtime Database.

🚀 Démarrage rapide

Configuration des secrets (obligatoire avant le premier lancement)

La config Firebase et les identifiants SuperAdmin ne sont plus codés en dur dans le code source. Avant de lancer le projet :

cp src/config/secrets.config.example.ts src/config/secrets.config.ts

Puis remplissez src/config/secrets.config.ts (fichier ignoré par git, jamais commité) avec :

votre config Firebase réelle (apiKey, databaseURL, etc. — console Firebase → Paramètres du projet)
un identifiant et un mot de passe SuperAdmin forts, choisis par vous

Le compte SuperAdmin possède :

Accès complet à toutes les fonctionnalités
Gestion des utilisateurs
Clôture de journée
Toutes les permissions activées (17 ressources)

Fonctionnalités principales

Authentification et gestion de session avec Firebase Realtime Database
Tableau de bord responsive (menus, statistiques, contrôle de session)
Gestion des clients (inscription, frais d'ouverture, recherche, comptes liés)
Comptes financiers : tontine, épargne, crédit, dépôt/retrait, avances et mises automatiques
Suivi des recettes, déduction automatique, clôture journalière
Génération de relevés PDF (pdfmake) pour les comptes tontine nommés "Tontine.pdf"
Modules administratifs : produits, statistiques, utilisateurs, paramètres
Système de permissions : 17 ressources granulaires avec directive *hasRessources
Paramètres configurables : frais, codes produits, taux d'intérêt

Stack technique

Ionic 3.9.10 + Angular 5.2
Firebase 5.11.1 (Realtime Database et Storage)
AngularFire 5.0.0-rc.4 (compatible RxJS 5)
Cordova Android 14 (API 35)
RxJS 5.5.12, TypeScript 2.9.2
Dart Sass 1.94 (node-sass remplacé par sass)
pdfMake pour génération PDF
Chart.js pour visualisations dashboard

Le socle Ionic 3 impose de rester sur Angular 5 / RxJS 5. Une migration vers Ionic 6+ ou Angular 17+ nécessite une refonte complète.

Structure rapide

appTontine/
├─ config.xml              # configuration Cordova (id: io.ionic.starter)
├─ package.json            # scripts et dépendances
├─ src/
│  ├─ app/                 # module principal, composant racine, bootstrap
│  ├─ components/          # composants réutilisables (accordion, stats, board, etc.)
│  ├─ pages/               # pages Ionic (accueil, login, clients, mises, ...)
│  ├─ providers/data/      # services Firebase et state utilisateur
│  ├─ directives/          # directive *hasRessources pour permissions
│  ├─ pipes/               # pipes de filtrage et formatage
│  └─ theme/               # variables SCSS
├─ resources/              # icônes, splash Cordova
└─ patches/                # patch-package (ionic.functions.scss)

Pré-requis

Node.js 18+ (validé avec Node 22 LTS)
npm 9+
Git (optionnel)
Java JDK 17 (pour build Android)
Android Studio avec Android SDK
- Build Tools 34+
- Platform Tools (adb)
- Android SDK Platform API 35
Variable d'environnement ANDROID_HOME configurée

Installation Node.js et npm

Télécharger depuis nodejs.org (version LTS recommandée).

Installation Android Studio

Télécharger Android Studio
Installer SDK Platform API 35 via SDK Manager
Installer Build Tools 34.0.0+
Configurer ANDROID_HOME :

Windows (PowerShell) :

$env:ANDROID_HOME = "C:\Users\VotreNom\AppData\Local\Android\Sdk"
$env:PATH += ";$env:ANDROID_HOME\platform-tools;$env:ANDROID_HOME\tools"

Windows (cmd) :

set ANDROID_HOME=C:\Users\VotreNom\AppData\Local\Android\Sdk
set PATH=%PATH%;%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools

Linux/Mac :

export ANDROID_HOME=$HOME/Android/Sdk
export PATH=$PATH:$ANDROID_HOME/platform-tools:$ANDROID_HOME/tools

Installation locale

cd appTontine
npm install

Le script postinstall applique automatiquement le correctif Ionic/Dart Sass.

Configuration Firebase

Créer un projet Firebase sur console.firebase.google.com
Ajouter une application Web et copier la configuration

Remplacer la configuration dans src/app/app.module.ts (ligne ~35) :

const firebaseConfig = {
  apiKey: 'VOTRE_API_KEY',
  authDomain: 'votre-projet.firebaseapp.com',
  databaseURL: 'https://votre-projet-default-rtdb.europe-west1.firebasedatabase.app',
  projectId: 'votre-projet',
  storageBucket: 'votre-projet.appspot.com',
  messagingSenderId: '123456789',
  appId: '1:123456789:web:abcdef'
};

⚠️ IMPORTANT : Utilisez l'URL complète avec région (europe-west1) pour éviter les warnings Firebase

Activer Realtime Database :
- Aller dans "Build" → "Realtime Database"
- Créer une base de données (mode test pour commencer)
- Choisir la région europe-west1 (ou autre selon besoin)

Configurer les règles de sécurité (Firebase Console → Realtime Database → Rules) :

Mode développement (⚠️ NON SÉCURISÉ - pour tests uniquement) :

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

Mode production (RECOMMANDÉ) :

{
  "rules": {
    "users": {
      ".read": "auth != null",
      ".write": "auth != null"
    },
    "clients": {
      ".read": "auth != null",
      ".write": "auth != null"
    },
    "comptes": {
      ".read": "auth != null",
      ".write": "auth != null"
    },
    "produits": {
      ".read": "auth != null",
      ".write": "auth != null"
    },
    "settings": {
      ".read": "auth != null",
      ".write": "auth != null"
    }
  }
}

Pour build Android - Ajouter une application Android :
- Package name : io.ionic.starter (ou modifier dans config.xml)
- Télécharger google-services.json
- Placer dans platforms/android/app/ (créé après ionic cordova prepare android)

Structure Firebase Realtime Database

Après première connexion et création de données, la structure ressemblera à :

votre-projet-default-rtdb/
├─ users/
│  └─ {username}/
│     ├─ name: string
│     ├─ username: string
│     ├─ password: string (⚠️ en clair - améliorer en prod)
│     ├─ permissions: array
│     └─ date: timestamp
├─ clients/
│  └─ {clientId}/
│     ├─ code: string
│     ├─ name: string
│     ├─ firstName: string
│     ├─ telephone: string
│     └─ fraisOuverture: number
├─ comptes/
│  ├─ TONTINE/
│  ├─ EPARGNE/
│  └─ CREDIT/
├─ produits/
├─ settings/
├─ mises/
├─ depots/
├─ retraits/
└─ recettes/

Lancement développement (navigateur web)

npm start
# ou
npm run ionic:serve

L'application s'ouvre sur http://localhost:8100/

Connexion avec :

Username : superadmin
Password : CHANGE_ME_TO_A_STRONG_PASSWORD

Des avertissements Sass peuvent s'afficher (fonctions dépréciées Ionic 3) sans bloquer l'exécution.

Build et test Android

1. Préparer la plateforme Android (première fois)

ionic cordova platform add android
ionic cordova prepare android

2. Générer les icônes et splash screens (optionnel)

npm run android:resources
# ou
ionic cordova resources android

Nécessite des fichiers source dans resources/ :

icon.png (1024x1024px)
splash.png (2732x2732px)

3. Build APK Debug

npm run android:build
# ou
ionic cordova build android

L'APK se trouve dans platforms/android/app/build/outputs/apk/debug/app-debug.apk

4. Installer sur appareil/émulateur

Option A - Installation directe :

npm run android:dev
# ou
ionic cordova run android

Option B - Installation manuelle :

# Connecter appareil Android en USB (mode développeur + débogage USB activé)
# ou lancer un émulateur Android depuis Android Studio

# Vérifier que l'appareil est détecté
adb devices

# Installer l'APK
adb install platforms/android/app/build/outputs/apk/debug/app-debug.apk

5. Build APK Release (pour distribution)

npm run android:release
# ou
ionic cordova build android --prod --release

Signer l'APK pour Play Store :

# Générer une keystore (première fois uniquement)
keytool -genkey -v -keystore tontine-release.keystore -alias tontine -keyalg RSA -keysize 2048 -validity 10000

# Signer l'APK
jarsigner -verbose -sigalg SHA256withRSA -digestalg SHA-256 -keystore tontine-release.keystore platforms/android/app/build/outputs/apk/release/app-release-unsigned.apk tontine

# Optimiser avec zipalign
zipalign -v 4 platforms/android/app/build/outputs/apk/release/app-release-unsigned.apk tontine-release.apk

Variables d'environnement Android (Windows)

PowerShell (temporaire) :

$env:ANDROID_HOME = "C:\Users\VotreNom\AppData\Local\Android\Sdk"
$env:JAVA_HOME = "C:\Program Files\Java\jdk-17"
$env:PATH += ";$env:ANDROID_HOME\platform-tools;$env:ANDROID_HOME\tools"

cmd (temporaire) :

set ANDROID_HOME=C:\Users\VotreNom\AppData\Local\Android\Sdk
set JAVA_HOME=C:\Program Files\Java\jdk-17
set PATH=%PATH%;%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools

Permanent (Panneau de configuration → Système → Variables d'environnement) :

Créer ANDROID_HOME → C:\Users\VotreNom\AppData\Local\Android\Sdk
Créer JAVA_HOME → C:\Program Files\Java\jdk-17
Ajouter à PATH : %ANDROID_HOME%\platform-tools et %ANDROID_HOME%\tools

Débogage sur appareil mobile

Activer le mode développeur Android

Paramètres → À propos du téléphone
Taper 7 fois sur Numéro de build
Paramètres → Options pour les développeurs
Activer Débogage USB
Connecter via USB et autoriser le débogage

Logs et débogage

# Voir les logs en temps réel
adb logcat

# Filtrer les logs Ionic/Cordova
adb logcat | grep -i "chromium\|console"

# Inspecter avec Chrome DevTools
# 1. Lancer l'app sur appareil
# 2. Ouvrir Chrome sur PC → chrome://inspect
# 3. Sélectionner l'appareil → "inspect"

Maintenance et mise à niveau

angularfire2 reste verrouillé sur 5.0.0-rc.4 (RxJS 5). Ne pas mettre à jour sans migration globale.
@ionic/app-scripts 3.2.4 cible Angular 5. Les versions postérieures ne sont pas compatibles.
Le patch patches/ionic-angular+3.9.10.patch doit rester appliqué pour éviter les erreurs Sass.
cordova-android 14.x (API 35) : maintenir le SDK Android Studio à jour.
En cas de changement de version Node, relancer npm install puis npm rebuild.

Mise à jour des dépendances

# Vérifier les versions obsolètes (sans mettre à jour)
npm outdated

# Mettre à jour package-lock.json
npm update

# ⚠️ Ne PAS mettre à jour les packages majeurs (Angular, Ionic, Firebase)
# Cela casserait la compatibilité Ionic 3

Tests et lint

npm run lint

TSLint legacy remonte quelques avertissements (ex. variables non lues). Il n'y a pas de campagne de tests unitaires.

Déploiement Firebase Hosting (optionnel)

Pour héberger la version web de l'app :

# Build production web
npm run build --prod

# Installer Firebase CLI
npm install -g firebase-tools

# Se connecter
firebase login

# Initialiser (première fois)
firebase init hosting

# Déployer
firebase deploy --only hosting

Configuration firebase.json :

{
  "hosting": {
    "public": "www",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

Sécurité et Production

⚠️ Points à modifier avant la mise en production

Changer les identifiants SuperAdmin dans src/config/secrets.config.ts (voir section "Configuration des secrets" plus haut — ce fichier n'est jamais commité)
Sécuriser Firebase Realtime Database (règles strictes au lieu de .read: true, .write: true — c'est la vraie barrière de sécurité, la clé API Firebase elle-même n'est pas conçue pour être secrète)
Hasher les mots de passe au lieu de les stocker en clair
Configurer Firebase Authentication pour remplacer l'authentification custom
Activer HTTPS uniquement dans config.xml
Générer une keystore unique pour signature APK (ne pas partager)
Définir un package name unique dans config.xml (pas io.ionic.starter)

Problèmes connus et solutions

Erreurs de compilation

"ion-label is not a known element" → Normal en développement, ignoré au build
Dart Sass warnings → Hérités d'Ionic 3, sans impact fonctionnel
Firebase region warning → Utiliser URL complète avec région (europe-west1)

Erreurs Android

"ANDROID_HOME not set" → Configurer variable d'environnement (voir ci-dessus)
"Unable to find target with hash string 'android-35'" → Installer SDK Platform API 35 dans Android Studio
Build échoue avec Gradle → Vérifier Java JDK 17 installé et configuré

Problèmes Firebase

"Permission denied" → Vérifier les règles Firebase (mode test ou authentification configurée)
Données ne se chargent pas → Vérifier databaseURL avec région correcte
"Database lives in different region" → Utiliser URL complète .europe-west1.firebasedatabase.app

Ressources et documentation

Documentation officielle

Outils de développement

Extensions VS Code recommandées

Angular Language Service
Ionic Extension Pack
Firebase Explorer
Android iOS Emulator

Scripts npm disponibles

npm start                # Démarre serveur dev (ionic serve)
npm run build            # Build dev
npm run build --prod     # Build production web
npm run lint             # Vérification TSLint
npm run clean            # Nettoie www/ et node_modules/.cache
npm run android:dev      # Lance sur appareil/émulateur Android
npm run android:build    # Build APK debug
npm run android:release  # Build APK release
npm run android:resources # Génère icônes et splash screens
npm run ionic:serve      # Serveur dev avec livereload

Support et contribution

Pour signaler un bug ou proposer une amélioration, créer une issue sur le dépôt GitHub.

Checklist avant mise en production

Version actuelle : 1.0.0
Dernière mise à jour : Novembre 2025
Compatibilité : Android 7.0+ (API 24+), optimisé pour API 35

Consigner ici toute évolution Firebase (structure, règles) ou procédures build afin de faciliter l'onboarding des nouveaux développeurs.

Name		Name	Last commit message	Last commit date
Latest commit History 11 Commits
config		config
patches		patches
public		public
resources		resources
src		src
typings		typings
.editorconfig		.editorconfig
.firebaserc		.firebaserc
.gitignore		.gitignore
.npmrc		.npmrc
.nvmrc		.nvmrc
README.md		README.md
config.xml		config.xml
firebase.json		firebase.json
ionic.config.json		ionic.config.json
package-lock.json		package-lock.json
package.json		package.json
tsconfig.json		tsconfig.json
tslint.json		tslint.json

Folders and files

Latest commit

History

Repository files navigation