​

Système de Notifications Push & Email

​

📋 Vue d’ensemble

• Type de position: LONG ou SHORT
• Performance: Profit/Perte en USDT et en pourcentage
• Détails: Prix d’entrée, prix de sortie, raison de fermeture
• État: Position gagnante 🎉 ou perdante ❌

​

🔧 Architecture

​

Backend

1. NotificationService (packages/functions/src/NotificationService.ts)
   • Service principal gérant l’envoi des notifications
   • Support Email (Mailjet) et Push (Web Push API)
   • Gestion des préférences utilisateur
   • Gestion des souscriptions push
2. SwingPositionService
   • Intégration des notifications lors de la fermeture des positions
   • Appelle automatiquement NotificationService quand une position devient CLOSED
3. Routes tRPC (packages/functions/src/trpc/router-notifications.ts)
   • getPreferences: Récupérer les préférences utilisateur
   • updatePreferences: Mettre à jour les préférences
   • subscribePush: S’abonner aux notifications push
   • unsubscribePush: Se désabonner
   • getPushSubscriptions: Lister les souscriptions actives
   • getVapidPublicKey: Obtenir la clé publique VAPID

​

Frontend

1. Page de paramètres (frontend/app/pages/settings/notifications.vue)
   • Interface pour configurer les préférences de notification
   • Activation/désactivation des notifications email et push
   • Gestion automatique de l’abonnement push
2. Composable (frontend/app/composables/usePushNotifications.ts)
   • API JavaScript pour gérer les notifications push
   • Enregistrement du Service Worker
   • Gestion des souscriptions
3. Service Worker (frontend/app/public/sw.js)
   • Réception et affichage des notifications push
   • Gestion des clics sur les notifications

​

Base de données

1. NotificationPreferences
   • Stocke les préférences de chaque utilisateur
   • Champs: emailOnPositionClosed, pushOnPositionClosed, etc.
2. PushSubscription
   • Stocke les souscriptions push des utilisateurs
   • Permet d’envoyer des notifications à plusieurs appareils

​

🚀 Configuration

​

1. Générer les clés VAPID

cd packages/functions
node src/scripts/generate-vapid-keys.js

​

2. Configurer les secrets SST

# Production
npx sst secrets set VAPID_PUBLIC_KEY "votre_clé_publique" --stage prod
npx sst secrets set VAPID_PRIVATE_KEY "votre_clé_privée" --stage prod
npx sst secrets set VAPID_SUBJECT "mailto:[email protected]" --stage prod

# Développement
npx sst secrets set VAPID_PUBLIC_KEY "votre_clé_publique" --stage dev
npx sst secrets set VAPID_PRIVATE_KEY "votre_clé_privée" --stage dev
npx sst secrets set VAPID_SUBJECT "mailto:[email protected]" --stage dev

​

3. Configurer Mailjet (si pas déjà fait)

npx sst secrets set MAILJET_API_KEY "votre_api_key"
npx sst secrets set MAILJET_SECRET_KEY "votre_secret_key"
npx sst secrets set MAILJET_FROM_EMAIL "[email protected]"
npx sst secrets set MAILJET_FROM_NAME "Remora Trading"

​

4. Mettre à jour le schéma Prisma

cd prisma
npx prisma generate
npx prisma db push

​

📱 Utilisation

​

Pour l’utilisateur

1. Configurer les préférences
   • Aller dans Paramètres → Notifications
   • Activer “Email - Position fermée” pour recevoir des emails
   • Activer “Push - Position fermée” pour recevoir des notifications push
2. Notifications push
   • Lors de l’activation, le navigateur demandera la permission
   • Accepter pour recevoir les notifications
   • Les notifications apparaîtront même quand l’application est fermée

​

Format des notifications

​

Email

Sujet: ✅ Position fermée: BTC/USDT (+2.45%)

Contenu:
- Position gagnante 🎉
- Paire: BTC/USDT
- Direction: LONG
- Prix d'entrée: 42,850.50
- Prix de sortie: 43,900.25
- Profit réalisé: +125.50 USDT
- Performance: +2.45%
- Raison: Objectif atteint

​

Push

Titre: ✅ Position fermée: BTC/USDT
Corps: LONG • +2.45% • +125.50 USDT

​

🔍 Test

​

Tester les notifications email

// Dans le backend
const notificationService = new NotificationService(prisma);

await notificationService.notifyPositionClosed('userId', {
  id: 'positionId',
  symbolPair: 'BTC/USDT',
  orderSide: 'LONG',
  profit: 125.50,
  pnl: 2.45,
  avgEntryPrice: 42850.50,
  avgClosePrice: 43900.25,
  closedAt: new Date(),
  closedReason: 'REACHED_TARGET'
});

​

Tester les notifications push

1. Activer les notifications push dans les paramètres
2. Utiliser l’outil de test dans le navigateur:
   Copy

   // Console du navigateur
   const registration = await navigator.serviceWorker.ready;
   await registration.showNotification('Test', {
     body: 'Test de notification push',
     icon: '/icon-192.png'
   });
   

​

🐛 Debugging

​

Vérifier les logs

// Les logs sont envoyés à Better Stack avec le tag 'NotificationService'
// Rechercher: source:NotificationService

​

Problèmes courants

1. “Clés VAPID non configurées”
   • Vérifier que les secrets VAPID sont bien définis
   • Redémarrer l’application après l’ajout des secrets
2. “Permission refusée”
   • L’utilisateur a refusé les notifications
   • Lui demander de réactiver dans les paramètres du navigateur
3. “Notifications non reçues”
   • Vérifier que la souscription est enregistrée: $client.notifications.getPushSubscriptions.query()
   • Vérifier que les préférences sont activées
   • Vérifier les logs côté serveur
4. “Email non reçu”
   • Vérifier les secrets Mailjet
   • Vérifier les logs d’envoi
   • Vérifier les spams

​

🔐 Sécurité

• Les clés VAPID privées ne doivent jamais être exposées au frontend
• Les souscriptions push sont liées à un utilisateur et validées côté serveur
• Les emails contiennent uniquement des informations de trading (pas de données sensibles)

​

📊 Performance

• Les notifications sont envoyées de manière asynchrone (non-bloquant)
• Les souscriptions invalides sont automatiquement nettoyées
• Les emails sont envoyés via Mailjet (haute délivrabilité)

​

🚧 Améliorations futures

• Support de plusieurs types de notifications (nouveau signal, alerte prix, etc.)
• Personnalisation des templates d’email
• Support de Telegram et Discord
• Statistiques de délivrabilité
• Tests automatisés

​

📚 Ressources

• Web Push API
• VAPID Specification
• Mailjet Documentation
• Service Worker Guide