Passer au contenu principal

Fonctionnement

Les applications avec synchronisation en temps réel conservent une base de données locale sur l’appareil. Les lectures sont instantanées (locales), les écritures sont mises en file d’attente localement, et tout se synchronise avec le serveur en arrière-plan.
Écriture utilisateur -> Base de données locale -> File d'attente de téléchargement -> Serveur -> Postgres
                                                                                                    |
Lecture utilisateur  <- Base de données locale <- Réplication de synchronisation <---------+
Résultat : lectures instantanées, pas de spinner de chargement, et une application qui continue de fonctionner avec des connexions faibles ou hors ligne.

Configuration par l’IA

Demandez à l’IA de créer une application en temps réel. Elle réutilise une base de données active appropriée si elle existe ; sinon, elle crée une base de données, active le service de synchronisation et crée une application en deux parties :
  • UI - application client avec base de données locale, requêtes en direct et connecteur de synchronisation
  • Process - point de terminaison de jeton, route de téléchargement de synchronisation et exécuteur de migration
Les identifiants sont stockés dans le coffre-fort. L’IA connecte les variables d’environnement de la base de données au composant de processus avec l’outil db. Avant que l’application soit considérée comme prête, la base de données doit afficher sync: ready. Si la synchronisation n’est pas prête, l’application peut s’afficher mais les données en temps réel multi-appareils ne fonctionneront pas.

Bonnes pratiques

  • Écrivez localement en premier. Laissez la synchronisation télécharger en arrière-plan.
  • Affichez des états vides, pas des spinners de chargement, une fois que les données locales existent.
  • Conservez l’état visible par l’utilisateur dans les tables synchronisées pour qu’il survive aux actualisations et à l’utilisation hors ligne.
  • Regroupez les écritures locales connexes pour que l’interface utilisateur se mette à jour en une seule étape.
  • Vérifiez la santé de la synchronisation avant de considérer une application en temps réel comme terminée.

Shell d’application hors ligne

Les modèles d’interface utilisateur peuvent inclure un shell d’application hors ligne pour que l’application puisse se rouvrir après la première visite sans réseau. Le shell d’application est le HTML, JS, CSS et les icônes statiques.
  • Shell hors ligne permet à l’application de s’ouvrir sans réseau
  • Synchronisation maintient les données de l’application utilisables hors ligne
Ensemble : l’application s’ouvre sans réseau, affiche les dernières données synchronisées, met en file d’attente les nouvelles écritures et se synchronise quand la connexion revient.

Quand utiliser la synchronisation en temps réel

Bon choixExcessif
Gestionnaires de tâches et applications de notesPages marketing statiques
Outils collaboratifsSoumissions de formulaires ponctuelles
Applications de terrain avec connectivité faibleSites de brochures en lecture seule
Tout ce qui devrait sembler instantanéApplications sans valeur hors ligne

Variables de plateforme

Kazzle injecte automatiquement un petit ensemble de variables d’environnement dans chaque processus d’application. Elles sont distinctes de vos propres secrets du coffre-fort.
VariableDescription
PORTLe port sur lequel votre processus doit écouter
HOSTLe nom d’hôte à utiliser (généralement 0.0.0.0)
KAZZLE_API_URLURL de base utilisée par les assistants d’exécution Kazzle
KAZZLE_APP_COMPONENT_<NAME>_URLURL d’exécution d’un composant frère

URLs des composants frères

Quand une application a plusieurs composants (par exemple une interface utilisateur web et un processus server), Kazzle peut injecter des URLs pour les composants frères :
# Dans la partie "web" :
KAZZLE_APP_COMPONENT_SERVER_URL=http://localhost:3001

# Dans la partie "server" :
KAZZLE_APP_COMPONENT_WEB_URL=http://localhost:3000
Quand un composant frère est déjà déployé, la valeur injectée pointe vers ce composant déployé. Sinon, elle pointe vers l’adresse de développement actuelle pour ce composant frère.