View a markdown version of this page

Comment ? AWS App Studio fonctionne - 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.

Comment ? AWS App Studio fonctionne

Il y a quelques concepts clés à comprendre lors de l'utilisation d' AWS App Studio pour créer des applications. Cette rubrique aborde les notions de base des concepts ou ressources suivants :

  • Utiliser des connecteurs pour se connecter à d'autres services afin d'utiliser leurs ressources ou d'appeler des API dans votre application. Par exemple, vous pouvez utiliser des connecteurs pour stocker des données et y accéder, ou envoyer des notifications depuis votre application.

  • Utiliser des entités pour configurer le modèle de données de votre application, qui connecte votre application à votre source de données externe.

  • Utilisation de pages et de composants pour créer l'interface utilisateur (UI) de votre application.

  • Utiliser des automatisations et des actions pour implémenter la logique ou le comportement de votre application.

  • Le cycle de vie du développement des applications dans App Studio : création, test et publication.

Pour plus d'informations sur les concepts d'App Studio, consultezAWS Concepts d'App Studio.

L'image suivante est un schéma simple de l'organisation d'App Studio et de ses ressources.

Un schéma simple qui montre l'organisation des ressources dans une application App Studio.

Dans une application d'App Studio, les pages, les automatisations et les entités interagissent les unes avec les autres. Vous utilisez des connecteurs pour connecter ces ressources à des services externes tels que des fournisseurs de données, de stockage ou de notifications. Pour créer une application avec succès, il est essentiel de comprendre comment tous ces concepts et ressources interagissent les uns avec les autres.

Connecter votre application à d'autres services

L'un des principaux avantages de l'utilisation d'App Studio pour créer des applications est la possibilité d'intégrer facilement votre application à d'autres services. Dans App Studio, vous vous connectez à d'autres services à l'aide de connecteurs spécifiques au service et aux ressources ou aux appels d'API que vous souhaitez utiliser avec votre application.

Vous créez des connecteurs au niveau de l'instance d'App Studio, et non dans des applications individuelles. Une fois que vous avez créé des connecteurs, vous pouvez les utiliser dans différentes parties des applications, en fonction du service connecté et de l'application.

Voici des exemples de fonctionnalités des applications qui utilisent des connecteurs pour se connecter à d'autres services :

  • Le cas d'utilisation le plus courant, utilisé dans presque toutes les applications, consiste à stocker et à accéder aux données utilisées dans l'application en vous connectant à AWS des services de données tels qu'Amazon Redshift, Amazon DynamoDB ou Amazon Aurora.

  • Une application qui permet de télécharger et de visualiser des images, telles que des reçus, peut utiliser Amazon S3 pour stocker et accéder aux fichiers image.

  • Une application de synthèse de texte peut envoyer une saisie de texte à Amazon Bedrock et afficher le résumé renvoyé.

Note

Vous devez avoir le rôle d'administrateur dans App Studio pour créer des connecteurs. Lorsque vous créez des connecteurs, vous devez inclure des informations d'identification et des informations appropriées sur les ressources ou les appels d'API que vous souhaitez utiliser.

Configuration du modèle de données de votre application

Les données de votre application sont les informations qui alimentent l'application. Dans App Studio, vous créez et utilisez des entités qui représentent les différents types de données que vous stockez et utilisez. Par exemple, dans une application de suivi des réunions avec les clients, vous pouvez avoir trois entités qui représentent les réunions avec les clients, les ordres du jour et les participants.

Les entités contiennent des champs dont les types, tels qu'un entier ou une chaîne, décrivent les données stockées. Bien que vous utilisiez des entités pour définir votre modèle de données, vous devez connecter votre entité à un service de stockage de données externe tel qu'Amazon Redshift ou Amazon DynamoDB pour stocker les données. Vous pouvez considérer une entité comme un intermédiaire entre votre application App Studio et les données du service externe.

Vous pouvez utiliser des actions de données pour interagir avec les données de votre application à partir de composants et d'automatisations. Les deux actions de données les plus courantes à utiliser sont une getAll action et une getByID action. Par exemple, votre application peut utiliser l'action getAll data pour remplir un tableau avec vos données, et une getByID action pour renseigner un composant détaillé avec des informations supplémentaires sur une entrée de données spécifique.

Vous pouvez également ajouter des exemples de données à votre entité pour tester plus facilement votre application sans avoir à faire appel à des services externes.

Création de l'interface utilisateur de votre application

Dans App Studio, vous créez l'interface utilisateur de votre application à l'aide de pages et de composants. Les pages sont des écrans individuels de votre application et sont des conteneurs pour les composants. Les composants sont les éléments constitutifs de l'interface utilisateur de votre application. Il existe de nombreux types de composants, tels que des tableaux, des formulaires, des visionneuses d'images et des boutons.

L'image suivante montre l'onglet Pages du studio d'applications, dans lequel vous ajoutez ou configurez des pages et des composants dans votre application. Les domaines clés suivants sont surlignés et numérotés :

  1. Le panneau Pages de gauche. C'est ici que vous gérez les pages, l'en-tête de l'application et les paramètres de navigation. Vous pouvez consulter toutes les pages et tous les composants de votre application.

  2. Le canevas, qui affiche les composants de la page en cours. Vous pouvez choisir les composants dans le canevas pour configurer leurs propriétés.

  3. Le panneau Composants ou Propriétés situé à droite. Si rien n'est sélectionné, le panneau Composants s'affiche, qui affiche la liste des composants qui peuvent être ajoutés à votre page. Si vous sélectionnez une page ou un composant, le panneau Propriétés s'affiche, dans lequel vous configurez la page ou le composant.

  4. Les panneaux Erreurs et Avertissements inférieurs. Ces panneaux affichent les erreurs ou les avertissements de votre application, qui sont le plus souvent dus à des problèmes de configuration. Vous pouvez choisir le panneau pour l'agrandir et voir les messages.

Affichage de l'onglet Pages du studio d'applications qui s'affiche lorsque vous modifiez une application.

À titre d'exemple, les applications dans lesquelles les utilisateurs doivent saisir des informations peuvent comporter les pages et les composants suivants :

  • Page de saisie qui inclut un composant de formulaire que les utilisateurs utilisent pour remplir et envoyer des informations.

  • Une page d'affichage de liste qui contient un composant de tableau contenant des informations sur chaque entrée.

  • Une page de vue détaillée qui contient un composant détaillé contenant des informations supplémentaires sur chaque entrée.

Les composants peuvent inclure des informations ou des données statiques, telles qu'un formulaire avec des champs définis. Ils peuvent également inclure des informations dynamiques à l'aide d'automatisations, comme une visionneuse d'images qui extrait une image d'un compartiment Amazon S3 et l'affiche à l'utilisateur.

Il est important de comprendre le concept des paramètres de page. Les paramètres de page vous permettent d'envoyer des informations d'une page à une autre. Un exemple courant de cas d'utilisation des paramètres de page est la recherche et le filtrage, dans lesquels le terme de recherche d'une page est envoyé au tableau ou à la liste d'éléments à filtrer sur une autre page. Un autre exemple d'utilisation est l'affichage des détails de l'élément, où l'identifiant de l'élément est envoyé à une page de visualisation détaillée.

Implémentation de la logique ou du comportement de votre application

Vous pouvez considérer la logique ou le comportement de votre application comme la fonctionnalité de l'application. Vous pouvez définir ce qui se passe lorsqu'un utilisateur choisit un bouton, soumet des informations, accède à une nouvelle page ou interagit d'une autre manière. Dans App Studio, vous définissez la logique de votre application à l'aide d'automatisations et d'actions. Les automatisations sont des conteneurs d'actions, qui constituent les éléments constitutifs des fonctionnalités des automatisations.

L'image suivante montre l'onglet Automatisations du studio d'applications, dans lequel vous ajoutez ou configurez des automatisations et leurs actions dans votre application. Les domaines clés suivants sont surlignés et numérotés :

  • Le panneau Automatisations situé sur le côté gauche. C'est ici que vous gérez les automatisations. Vous pouvez consulter toutes les automatisations et les actions de votre application.

  • Le canevas, qui affiche l'automatisation en cours. Il affiche les paramètres d'automatisation configurés (qui sont expliqués plus loin dans cette section) et les actions. Vous pouvez choisir les composants dans le canevas pour configurer leurs propriétés.

  • Les panneaux Actions et Propriétés de droite. Si rien n'est sélectionné, le panneau Actions s'affiche. Il affiche la liste des actions qui peuvent être ajoutées à votre automatisation. Si vous sélectionnez un automatisme, vous pouvez visualiser et configurer ses propriétés, telles que l'entrée et la sortie de l'automatisme. Si vous sélectionnez une action, vous pouvez afficher et configurer ses propriétés.

  • Les panneaux Erreurs et Avertissements inférieurs. Ce panneau affiche les erreurs ou les avertissements de votre application (le plus souvent dus à des problèmes de configuration). Vous pouvez choisir le panneau pour l'agrandir et voir les messages.

L'onglet Automatisations du studio d'applications, dans lequel vous pouvez créer, configurer et gérer des automatisations et des actions lors de la modification d'une application.

Les automatisations peuvent être simples (comme l'ajout de chiffres et le renvoi du résultat) ou plus puissantes (comme l'envoi d'une entrée à un autre service et le renvoi du résultat). Les principaux composants d'une automatisation sont les suivants :

  • Un déclencheur qui définit le moment où l'automatisation est exécutée. Par exemple, lorsque l'utilisateur appuie sur un bouton de l'interface utilisateur.

  • Une entrée d'automatisation qui envoie des informations à l'automatisation. Vous définissez les entrées d'automatisation à l'aide de paramètres d'automatisation. Par exemple, si vous souhaitez utiliser Amazon Bedrock pour renvoyer un résumé de texte à l'utilisateur, vous configurez le texte à résumer en tant que paramètre d'automatisation.

  • Les actions, qui sont les éléments constitutifs des fonctionnalités d'une automatisation. Vous pouvez considérer chaque action comme une étape de l'automatisation. Les actions peuvent appeler des API, invoquer des fonctionnalités personnalisées JavaScript, créer des enregistrements de données et exécuter d'autres fonctions. Vous pouvez également regrouper les actions en boucles ou en conditions pour personnaliser davantage les fonctionnalités. Vous pouvez également invoquer d'autres automatisations à l'aide d'une action.

  • Une sortie d'automatisation, que vous pouvez utiliser dans des composants ou même dans d'autres automatisations. Par exemple, la sortie d'automatisation peut être du texte affiché dans un composant de texte, une image à afficher dans un composant de visualisation d'images ou l'entrée d'un autre composant d'automatisation.

Le cycle de vie de développement de votre application

Le cycle de développement de votre application comprend les étapes suivantes : création, test et publication. C'est ce qu'on appelle un cycle, car vous devrez probablement répéter ces étapes au fur et à mesure de la création et de l'itération de votre application.

L'image suivante montre une chronologie simplifiée du cycle de vie de développement des applications dans App Studio :

Schéma chronologique du cycle de développement des applications, qui comprend la création, la prévisualisation, les tests, la production et le partage.

App Studio propose différents outils pour prendre en charge le cycle de vie de votre application. Ces outils incluent les trois environnements distincts suivants, qui sont illustrés dans le schéma précédent :

  • L'environnement Preview, dans lequel vous pouvez prévisualiser votre application pour voir à quoi elle ressemble pour les utilisateurs finaux, et tester des fonctionnalités spécifiques. Utilisez l'environnement Preview pour tester et itérer rapidement votre application sans avoir à la publier. Les applications de l'environnement de prévisualisation ne communiquent ni ne transfèrent de données avec des services externes. Cela signifie que vous ne pouvez pas tester les interactions et les fonctionnalités qui s'appuient sur des services externes dans l'environnement Preview.

  • L'environnement de test, dans lequel vous pouvez tester la connexion et les interactions de votre application avec des services externes. C'est également ici que vous pouvez effectuer des tests pour les utilisateurs finaux en partageant la version publiée dans l'environnement de test avec des groupes de testeurs.

  • L'environnement de production, dans lequel vous pouvez effectuer les tests finaux des nouvelles applications avant de les partager avec les utilisateurs finaux. Une fois les applications partagées, la version de l'application publiée dans l'environnement de production est celle que les utilisateurs finaux vont consulter et utiliser.

En savoir plus

Maintenant que vous connaissez les bases du développement d'applications dans App Studio, vous pouvez soit commencer à créer votre propre application, soit approfondir vos connaissances sur les concepts et les ressources.

Pour commencer à créer, nous vous recommandons d'essayer l'un des didacticiels de démarrage suivants :

Pour en savoir plus sur les ressources ou les concepts mentionnés dans cette rubrique, consultez les rubriques suivantes :