Dîner est une expérience sociale. Les sessions de table partagée utilisent la synchronisation de l'état en temps réel pour permettre à plusieurs invités à la même table de parcourir le menu, d'ajouter des articles à un seul panier partagé et de suivre ensemble la progression de leur commande.
Un guide technique approfondi sur la création de systèmes de paniers collaboratifs, la gestion des conflits de synchronisation réseau et la fourniture de commandes multi-appareils unifiées.
- Synchronisez instantanément l’état du panier sur plusieurs appareils mobiles à l’aide des canaux de base de données en temps réel.
- Évitez les entrées d'éléments en double grâce aux mises à jour optimistes côté client et à la résolution des conflits.
- Affichez les membres actifs de la table à l'aide d'indicateurs d'avatar subtils sur l'écran de menu.
- Activez des options transparentes de facturation fractionnée et de paiement partagé lors du paiement.
1. L'expérience culinaire collaborative par rapport aux chariots à utilisateur unique
Dans la commande numérique traditionnelle, chaque client scanne le code QR et crée son propre panier séparé. Lorsque vient le temps de soumettre la commande, le serveur reçoit plusieurs tickets déconnectés pour la même table, ce qui entraîne des problèmes de timing dans la cuisine et une confusion dans la livraison à table.
Les sessions de table partagée résolvent ce problème en réunissant tous les invités à une table dans un seul pool de commandes dynamique. Lorsqu'un invité ajoute un soda, tous les autres téléphones à table se mettent à jour instantanément. Cette approche collaborative rend les repas de groupe amusants, réduit les erreurs de commande et maintient la table organisée.
2. Architecture de paniers en temps réel avec les canaux Supabase
La création d'un système de panier synchronisé nécessite une couche de connexions Websocket hautes performances. TableGreet utilise les canaux Supabase Realtime pour diffuser les modifications d'état à toutes les sessions de table actives.
Lorsqu'un invité ajoute ou supprime un élément, une charge utile JSON légère est envoyée au serveur. Le canal diffuse cette modification à tous les auditeurs enregistrés sur l'ID de table, mettant à jour les variables d'état React locales en millisecondes. Cette réponse en temps réel crée un sentiment de présence partagée.
3. Résolution des conflits d'état du panier et de latence du réseau
Dans un environnement collaboratif, deux invités peuvent essayer de modifier le même élément en même temps (par exemple, tous deux augmentant la quantité de frites). Si cela n’est pas géré correctement, cela peut entraîner des écrasements de données ou des calculs de prix incorrects.
Pour éviter les conflits, le système met en œuvre un flux de travail de mise à jour d'état optimiste strict. Les modifications sont validées par rapport à l'état principal du serveur, à l'aide de clés de transaction pour gérer les modifications simultanées. Si une modification est rejetée, l'interface utilisateur revient en arrière en douceur, invitant l'invité avec l'état actuel.
4. Conception d'éléments d'interface utilisateur sociale et d'indicateurs d'avatar
Un panier partagé doit être accompagné d’indicateurs visuels clairs indiquant qui participe. Si les invités ne voient pas que leurs amis sont connectés, ils pourraient hésiter à ajouter des éléments, craignant que le système ne fonctionne pas.
Placez de petites icônes d'avatar colorées en haut de l'écran de menu affichant les initiales des invités connectés. Lorsqu'un invité ajoute un élément, affichez une notification temporaire et non intrusive (par exemple, "Sarah a ajouté des calamars"). Cette subtile rétroaction sociale rend le processus de commande engageant.