View a markdown version of this page

Dépendances des données et considérations relatives au calendrier - AWS App Studio

Les traductions sont fournies par des outils de traduction automatique. En cas de conflit entre le contenu d'une traduction et celui de la version originale en anglais, la version anglaise prévaudra.

Dépendances des données et considérations relatives au calendrier

Lorsque vous créez des applications complexes dans App Studio, il est essentiel de comprendre et de gérer les dépendances entre les différents composants de données, tels que les formulaires, les vues détaillées et les composants automatisés. Les composants de données et les automatisations peuvent ne pas terminer leur extraction ou leur exécution des données en même temps, ce qui peut entraîner des problèmes de synchronisation, des erreurs et des comportements inattendus. En étant conscient des problèmes de synchronisation potentiels et en suivant les meilleures pratiques, vous pouvez créer des expériences utilisateur plus fiables et cohérentes dans vos applications App Studio.

Certains problèmes potentiels sont les suivants :

  1. Conflits temporels de rendu : les composants de données peuvent s'afficher dans un ordre qui ne correspond pas à leurs dépendances en matière de données, ce qui peut entraîner des incohérences ou des erreurs visuelles.

  2. Calendrier d'exécution de l'automatisation : les tâches d'automatisation peuvent se terminer avant que les composants ne soient complètement chargés, ce qui entraîne des erreurs d'exécution.

  3. Pannes de composants : les composants alimentés par des automatisations peuvent se bloquer en cas de réponses non valides ou lorsque l'automatisation n'est pas terminée.

Exemple : détails de la commande et informations sur le client

Cet exemple montre comment les dépendances entre les composants de données peuvent entraîner des problèmes de synchronisation et des erreurs potentielles dans l'affichage des données.

Prenons l'exemple d'une application comportant les deux composants de données suivants sur la même page :

  • Un composant Detail (orderDetails) qui extrait les données de commande.

  • Composant détaillé (customerDetails) qui affiche les informations du client relatives à la commande.

Dans cette application, le composant de orderDetails détail comporte deux champs, configurés avec les valeurs suivantes :

// 2 text fields within the orderDetails detail component // Info from orderDetails Component {{ui.orderDetails.data[0].name}} // Info from customerDetails component {{ui.customerDetails.data[0].name}} // Problematic reference

Dans cet exemple, le orderDetails composant tente d'afficher le nom du client en faisant référence à des données provenant du customerDetails composant. Cela pose problème, car le orderDetails composant peut effectuer un rendu avant qu'il n'ait récupéré ses données. customerDetails Si la récupération des données du customerDetails composant est retardée ou échoue, le orderDetails composant affichera des informations incomplètes ou incorrectes.

Meilleures pratiques en matière de dépendance et de synchronisation des données

Appliquez les bonnes pratiques suivantes pour atténuer les problèmes de dépendance aux données et de synchronisation dans votre application App Studio :

  1. Utilisez le rendu conditionnel : effectuez le rendu des composants ou affichez les données uniquement lorsque vous avez confirmé leur disponibilité. Utilisez des instructions conditionnelles pour vérifier la présence de données avant de les afficher. L'extrait suivant montre un exemple de déclaration conditionnelle :

    {{ui.someComponent.data ? ui.someComponent.data.fieldName : "Loading..."}}
  2. Gérer la visibilité des composants enfants : pour les composants tels que Stepflow, Form ou Detail qui affichent les enfants avant le chargement de leurs données, définissez manuellement la visibilité des composants enfants. L'extrait suivant montre un exemple de définition de la visibilité en fonction de la disponibilité des données du composant parent :

    {{ui.parentComponent.data ? true : false}}
  3. Utilisez des requêtes de jointure : dans la mesure du possible, utilisez des requêtes de jointure pour récupérer les données associées en une seule requête. Cela réduit le nombre de récupérations de données distinctes et minimise les problèmes de synchronisation entre les composants de données.

  4. Implémentez la gestion des erreurs dans les automatisations : implémentez une gestion robuste des erreurs dans vos automatisations afin de gérer facilement les scénarios dans lesquels les données attendues ne sont pas disponibles ou dans lesquels des réponses non valides sont reçues.

  5. Utiliser le chaînage facultatif : lorsque vous accédez à des propriétés imbriquées, utilisez le chaînage facultatif pour éviter les erreurs si une propriété parent n'est pas définie. L'extrait suivant montre un exemple de chaînage facultatif :

    {{ui.component.data?.[0]?.fieldSystemName}}