Batalha dos Barris — Lecteur de classement pour TV

Application Angular (PWA) affichant en temps réel, sur TV/moniteur, les classements de consommation d'une brasserie, alimentée par des données synchronisées directement depuis la caisse (PDV) de l'établissement.

Visuel du lecteur TV montrant le podium du classement 'Batalha dos Barris' et un panneau latéral avec du contenu promotionnel.

Problème

Une brasserie devait afficher des classements de consommation sur TV/moniteur, alimentés par le PDV du lieu. Le matériel était une TV Box Android allumée 24/7 ; le réseau tombait ; le PDV redémarrait chaque jour. Sans intervention manuelle, les données devaient rester quasi temps réel.

Solution et impact

Monorepo avec player Angular 17 PWA, API Flask/PostgreSQL (cache + OpenAPI) et un agent Python qui synchronise les ventes MySQL du PDV via tunnel SSH, avec reprise d'état et sync incrémental périodique. Le résultat d'ingénierie est une chaîne bout-en-bout assez stable pour tourner sans nounou sur le terrain.

Architecture et compromis

Séparer player, API et agent a isolé les pannes : le front optimisé pour du matériel contraint ne dépend pas du MySQL legacy ; l'agent absorbe la complexité du tunnel SSH et du cycle de vie du PDV. Le cache API réduit la pression PostgreSQL sous le polling du player. Compromis : un sync periódico n'est pas du vrai streaming — c'est du near-real-time pragmatique, plus simple à opérer que des websockets sur TV Box.

Diagrama de sync legado: PDV MySQL, agente Python, PostgreSQL, Flask API e Angular PWA em TV Box

Exploitation et observabilité

Deploy via GitHub Actions; Cypress no player. Healthchecks do agente e alertas de lag de sync são o próximo nível — hoje a resiliência vem da retomada de estado e do intervalo periódico configurável tolerante a quedas de rede.

Défis techniques

Résilience aux coupures réseau et redémarrages du PDV, reprise correcte du curseur de sync, et UX de classement fluide sur TV Box avec Service Worker — plus déploiement automatisé (GitHub Actions) et couverture Cypress sur le player.

Ce que je ferais autrement

Je formaliserais plus tôt les healthchecks de l'agent et des alertes quand le lag de sync dépasse un seuil. L'intervalle périodique et le modèle de reprise restent adaptés ; ce que je renforcerais, c'est l'observabilité opérationnelle pour un environnement 24/7.

Contexte technique

  • IncrémentalSyncAgent avec reprise d’état
  • 3 couchesArchitecturePlayer, API et agent isolés

Stack

  • Angular 17
  • TypeScript
  • RxJS
  • Angular Service Worker
  • Flask
  • PostgreSQL
  • psycopg
  • Python
  • Docker
  • GitHub Actions
  • Cypress