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.
# Commencer à utiliser AWS App Studio
Les didacticiels de démarrage suivants vous expliquent comment créer votre première application dans App Studio.
+ **Recommandé** : Pour utiliser l'IA générative afin de décrire l'application que vous souhaitez créer et de la créer automatiquement ainsi que ses ressources, voir[Tutoriel : Générer une application à l'aide de l'IA](getting-started-tutorial-ai.md).
+ Pour commencer à créer à partir d'une application vide, consultez[Tutoriel : Commencez à créer à partir d'une application vide](getting-started-tutorial-empty.md).
# Tutoriel : Générer une application à l'aide de l'IA
AWS App Studio intègre des fonctionnalités d'intelligence artificielle génératives dans l'ensemble du service pour accélérer la création d'applications. Dans ce didacticiel, vous allez apprendre à générer une application à l'aide de l'IA en décrivant votre application en langage naturel.
L'utilisation de l'IA pour générer une application est un excellent moyen de commencer à créer, car de nombreuses ressources de l'application sont créées pour vous. Il est généralement beaucoup plus facile de commencer à créer à partir d'une application générée avec des ressources existantes que de démarrer à partir d'une application vide.
**Note**
Vous pouvez consulter le billet de blog [Créez des applications professionnelles en langage naturel à l'aide d' AWS App Studio (version préliminaire)](https://aws.amazon.com/blogs/aws/build-custom-business-applications-without-cloud-expertise-using-aws-app-studio-preview) pour consulter une présentation similaire incluant des images. Le billet de blog contient également des informations sur la mise en place et la configuration des ressources relatives aux administrateurs, mais vous pouvez passer à la partie consacrée à la création d'applications si vous le souhaitez.
Lorsqu'App Studio génère une application à l'aide de l'IA, il crée l'application avec les ressources suivantes, adaptées à l'application que vous avez décrite :
+ **Pages et composants** : *les composants* sont les éléments de base de l'interface utilisateur de votre application. Ils représentent des éléments visuels tels que des tableaux, des formulaires et des boutons. Chaque composant possède son propre ensemble de propriétés, et vous pouvez personnaliser un composant en fonction de vos besoins spécifiques. Les *pages* sont les conteneurs des composants.
+ **Automatisations** : vous utilisez *les automatisations* pour définir la logique et les flux de travail qui régissent le comportement de votre application. Par exemple, vous pouvez utiliser des automatisations pour créer, mettre à jour, lire ou supprimer des lignes dans une table de données ou pour interagir avec des objets dans un compartiment Amazon S3. Vous pouvez également les utiliser pour gérer des tâches telles que la validation des données, les notifications ou les intégrations avec d'autres systèmes.
+ **Entités** : Les données sont les informations qui alimentent votre application. L'application générée crée *des entités* similaires à des tables. Les entités représentent les différents types de données que vous devez stocker et utiliser, tels que les clients, les produits ou les commandes. Vous pouvez connecter ces modèles de données à diverses sources de données, notamment des AWS services et des sources externes APIs, à l'aide des connecteurs App Studio.
**Contents**
+ [Conditions préalables](#getting-started-tutorial-ai-prerequisites)
+ [Étape 1 : Création d'une application](#getting-started-tutorial-ai-steps-create-application)
+ [Étape 2 : Explorez votre nouvelle application](#getting-started-tutorial-ai-steps-explore)
+ [Explorez les pages et les composants](#getting-started-tutorial-ai-steps-explore-pages)
+ [Explorez les automatisations et les actions](#getting-started-tutorial-ai-steps-explore-automations)
+ [Explorez les données avec des entités](#getting-started-tutorial-ai-steps-explore-data-entities)
+ [Étape 3 : prévisualisez votre application](#getting-started-tutorial-ai-steps-preview)
+ [Étapes suivantes](#getting-started-tutorial-ai-next-steps)
## Conditions préalables
Avant de commencer, passez en revue et remplissez les conditions préalables suivantes :
+ Accès à AWS App Studio. Pour de plus amples informations, veuillez consulter [Configuration et connexion à AWS App Studio](setting-up.md).
+ Facultatif : passez [AWS Concepts d'App Studio](concepts.md) en revue pour vous familiariser avec les concepts importants d'App Studio.
## Étape 1 : Création d'une application
La première étape de la génération d'une application consiste à décrire l'application que vous souhaitez créer à l'assistant AI d'App Studio. Vous pouvez passer en revue l'application qui sera générée et itérer comme vous le souhaitez avant de la générer.
**Pour générer votre application à l'aide de l'IA**
1. Connectez-vous à App Studio.
1. Dans le menu de navigation de gauche, choisissez **Builder Hub**, puis **\$1 Create app**.
1. Choisissez **Générer une application avec l'IA**.
1. Dans le champ **Nom de l'application**, saisissez le nom de votre application.
1. Dans la boîte de dialogue **Sélectionner les sources de données**, choisissez **Ignorer**.
1. Vous pouvez commencer à définir l'application que vous souhaitez générer en la décrivant dans la zone de texte ou en choisissant **Personnaliser** dans un exemple d'invite. Après avoir décrit votre application, App Studio génère les exigences et les détails de l'application que vous pouvez consulter. Cela inclut les cas d'utilisation, les flux d'utilisateurs et les modèles de données.
1. Utilisez la zone de texte pour itérer avec votre application selon vos besoins jusqu'à ce que vous soyez satisfait des exigences et des détails.
1. Lorsque vous êtes prêt à générer votre application et à commencer à la créer, choisissez **Generate app**.
1. Vous pouvez éventuellement visionner une courte vidéo expliquant comment naviguer dans votre nouvelle application.
1. Choisissez **Modifier l'application** pour accéder à l'environnement de développement de votre application.
## Étape 2 : Explorez votre nouvelle application
Dans l'environnement de développement, vous trouverez les ressources suivantes :
+ Un canevas que vous utilisez pour afficher ou modifier votre application. Le canevas change en fonction de la ressource sélectionnée.
+ Onglets de navigation en haut du canevas. Les onglets sont décrits dans la liste suivante :
+ **Pages** : où vous utilisez des pages et des composants pour concevoir l'interface utilisateur de votre application.
+ **Automatisations** : lorsque vous utilisez des actions dans les automatisations pour définir la logique métier de votre application.
+ **Données** : où vous définissez les entités, leurs champs, les exemples de données et les actions relatives aux données pour définir les modèles de données de votre application.
+ **Paramètres de l'application** : où vous définissez les paramètres de votre application, y compris les rôles d'application, que vous utilisez pour définir la visibilité des pages basée sur les rôles pour vos utilisateurs finaux.
+ Un menu de navigation sur le côté gauche, qui contient des ressources en fonction de l'onglet que vous consultez.
+ Un menu de droite qui répertorie les ressources et les propriétés des ressources sélectionnées dans les onglets **Pages** et **Automatisations.**
+ Une console de débogage qui affiche les avertissements et les erreurs au bas du générateur. Des erreurs sont peut-être présentes dans l'application que vous avez générée. Cela est probablement dû aux automatisations qui nécessitent un connecteur configuré pour effectuer des actions, telles que l'envoi d'un e-mail avec Amazon Simple Email Service.
+ Une fenêtre de discussion **Ask AI** pour obtenir une aide contextuelle de la part de l'assistant AI Builder.
Examinons de plus près les onglets **Pages**, **Automatisations** et **Données**.
### Explorez les pages et les composants
L'onglet **Pages** affiche les pages et leurs composants qui ont été générés pour vous.
Chaque page représente un écran de l'interface utilisateur (UI) de votre application avec laquelle vos utilisateurs interagiront. Sur ces pages, vous pouvez trouver différents composants (tels que des tableaux, des formulaires et des boutons) pour créer la mise en page et les fonctionnalités souhaitées.
Prenez le temps de visualiser les pages et leurs composants en utilisant le menu de navigation de gauche. Lorsque vous sélectionnez une page ou un composant, vous pouvez sélectionner **Propriétés** dans le menu de droite.
### Explorez les automatisations et les actions
L'onglet **Automatisations** affiche les automatismes et leurs actions qui ont été générés pour vous.
Les automatisations définissent la logique métier de votre application, comme la création, l'affichage, la mise à jour ou la suppression d'entrées de données, l'envoi d'e-mails ou même l'invocation de fonctions APIs Lambda.
Prenez le temps de visualiser les automatisations en utilisant le menu de navigation de gauche. Lorsque vous choisissez une automatisation, vous pouvez consulter ses propriétés dans le menu **Propriétés** situé à droite. Une automatisation contient les ressources suivantes :
+ Les automatisations sont constituées d'actions individuelles, qui constituent les éléments de base de la logique métier de votre application. Vous pouvez afficher les actions d'une automatisation dans le menu de navigation de gauche ou dans le canevas d'une automatisation sélectionnée. Lorsque vous sélectionnez une action, vous pouvez consulter ses propriétés dans le menu **Propriétés** situé à droite.
+ Les paramètres d'automatisation sont la façon dont les données sont transmises à une automatisation. Les paramètres agissent comme des espaces réservés qui sont remplacés par des valeurs réelles lors de l'exécution de l'automatisation. Cela vous permet d'utiliser la même automatisation avec des entrées différentes à chaque fois.
+ La sortie d'automatisation est l'endroit où vous configurez le résultat d'une automatisation. Par défaut, une automatisation n'a aucune sortie. Pour utiliser le résultat d'une automatisation dans des composants ou d'autres automatisations, vous devez les définir ici.
Pour de plus amples informations, veuillez consulter [Concepts d'automatisation](automations-concepts.md).
### Explorez les données avec des entités
L'onglet **Données** affiche les entités qui ont été générées pour vous.
Les entités représentent les tables qui contiennent les données de votre application, comme les tables d'une base de données. Au lieu de connecter l'interface utilisateur (UI) et les automatisations de votre application directement aux sources de données, elles se connectent d'abord aux entités. Les entités servent d'intermédiaire entre votre source de données réelle et votre application App Studio. Cela fournit un endroit unique pour gérer et accéder à vos données.
Prenez le temps de visualiser les entités générées en les sélectionnant dans le menu de navigation de gauche. Vous pouvez consulter les informations suivantes :
+ L'onglet **Configuration** affiche le nom de l'entité et ses champs, qui représentent les colonnes de votre entité.
+ L'onglet **Actions de données** affiche les actions de données qui ont été générées avec votre entité. Les composants et les automatisations peuvent utiliser des actions de données pour récupérer les données de votre entité.
+ L'onglet **Exemples de données** affiche des exemples de données que vous pouvez utiliser pour tester votre application dans l'environnement de développement (qui ne communique pas avec les services externes). Pour plus d'informations sur les environnements, consultez[Environnements d'applications](applications-publish.md#application-environments).
+ L'onglet **Connexion** affiche des informations sur les sources de données externes auxquelles l'entité est connectée. App Studio fournit une solution de stockage de données géré qui utilise une table DynamoDB. Pour de plus amples informations, veuillez consulter [Entités de données gérées dans AWS App Studio](managed-data-entities.md).
## Étape 3 : prévisualisez votre application
Vous pouvez prévisualiser une application dans App Studio pour voir comment elle apparaît aux utilisateurs. Vous pouvez également tester ses fonctionnalités en l'utilisant et en vérifiant les journaux dans un panneau de débogage.
L'environnement de prévisualisation de l'application ne prend pas en charge l'affichage de données en direct ni la connexion avec des ressources externes via des connecteurs, tels que des sources de données. Vous pouvez plutôt utiliser des exemples de données et des résultats simulés pour tester les fonctionnalités.
**Pour prévisualiser votre application à des fins de test**
1. Dans le coin supérieur droit du générateur d'applications, choisissez **Aperçu**.
1. Interagissez avec les pages de votre application.
## Étapes suivantes
Maintenant que vous avez créé votre première application, voici les prochaines étapes :
+ Pour une autre procédure de mise en route incluant des images, consultez le billet de blog [Créez des applications professionnelles en langage naturel à l'aide d' AWS App Studio (](https://aws.amazon.com/blogs/aws/build-custom-business-applications-without-cloud-expertise-using-aws-app-studio-preview)version préliminaire).
+ Les applications utilisent des connecteurs pour envoyer et recevoir des données ou pour communiquer avec des services externes (à la fois AWS des services et des services tiers). Il est nécessaire d'en savoir plus sur les connecteurs et sur la façon de les configurer pour créer des applications. Notez que vous devez avoir le rôle **d'administrateur** pour gérer les connecteurs. Pour en savoir plus, veuillez consulter la section [Connectez App Studio à d'autres services à l'aide de connecteurs](connectors.md).
+ Pour en savoir plus sur la prévisualisation, la publication et éventuellement le partage de votre application avec les utilisateurs finaux, consultez[Prévisualisation, publication et partage d'applications](applications-preview-publish-share.md).
+ Continuez à explorer et à mettre à jour l'application que vous avez générée pour acquérir une expérience pratique.
+ Pour en savoir plus sur la création d'applications, consultez le[Documentation du constructeur](builder-documentation.md). Plus précisément, il pourrait être utile d'explorer les sujets suivants :
+ [Référence sur les actions Automation](automations-actions-reference.md)
+ [Référence des composants](components-reference.md)
+ [Interaction avec Amazon Simple Storage Service à l'aide de composants et d'automatisations](automations-s3.md)
+ [Considérations relatives à la sécurité et mesures d'atténuation](security-considerations-and-mitigations.md)
# Tutoriel : Commencez à créer à partir d'une application vide
Dans ce didacticiel, vous allez créer une application interne de demande de réunion client à l'aide d' AWS App Studio. Vous découvrirez comment créer des applications dans App Studio, tout en vous concentrant sur des cas d'utilisation concrets et des exemples pratiques. Vous apprendrez également à définir des structures de données, à concevoir une interface utilisateur et à déployer des applications.
**Note**
Ce didacticiel explique comment créer une application à partir de zéro, en commençant par une application vide. En général, il est beaucoup plus rapide et plus facile d'utiliser l'IA pour générer une application et ses ressources en fournissant une description de l'application que vous souhaitez créer. Pour de plus amples informations, veuillez consulter [Tutoriel : Générer une application à l'aide de l'IA](getting-started-tutorial-ai.md).
Pour comprendre comment créer des applications avec App Studio, il est essentiel de comprendre les quatre concepts fondamentaux suivants et la façon dont ils fonctionnent ensemble : **composants**, **automatisations**, **données** et **connecteurs**.
+ **Composants** : les composants sont les éléments de base de l'interface utilisateur de votre application. Ils représentent des éléments visuels tels que des tableaux, des formulaires et des boutons. Chaque composant possède son propre ensemble de propriétés, que vous pouvez personnaliser en fonction de vos besoins spécifiques.
+ **Automatisations** : grâce aux automatisations, vous pouvez définir la logique et les flux de travail qui régissent le comportement de votre application. Vous pouvez utiliser les automatisations pour créer, mettre à jour, lire ou supprimer des lignes dans une table de données ou pour interagir avec des objets dans un compartiment Amazon S3. Vous pouvez également les utiliser pour gérer des tâches telles que la validation des données, les notifications ou les intégrations avec d'autres systèmes.
+ **Données** : Les données sont les informations qui alimentent votre application. Dans App Studio, vous pouvez définir des modèles de données appelés *entités*. Les entités représentent les différents types de données que vous devez stocker et utiliser, telles que les demandes de réunion des clients, les agendas ou les participants. Vous pouvez connecter ces modèles de données à diverses sources de données, notamment des AWS services et des sources externes APIs, à l'aide des connecteurs App Studio.
+ **Connecteurs** : App Studio fournit des connexions avec un large éventail de sources de données, notamment AWS des services tels qu'Aurora, DynamoDB et Amazon Redshift. Les sources de données incluent également des services tiers tels que Salesforce ou de nombreux autres utilisant OpenAPI ou des connecteurs d'API génériques. Vous pouvez utiliser les connecteurs App Studio pour intégrer facilement les données et les fonctionnalités de ces services professionnels et applications externes dans vos applications.
Au fur et à mesure que vous progresserez dans le didacticiel, vous découvrirez comment les concepts clés des composants, des données et de l'automatisation se combinent pour créer votre application interne de demande de réunion client.
Les étapes de haut niveau suivantes décrivent ce que vous allez faire dans ce didacticiel :
1. **Commencez par les données** : de nombreuses applications commencent par un modèle de données. Ce didacticiel commence donc également par les données. Pour créer l'application Customer Meeting Request, vous allez commencer par créer une `MeetingRequests` entité. Cette entité représente la structure de données permettant de stocker toutes les informations pertinentes relatives aux demandes de réunion, telles que le nom du client, la date de la réunion, l'ordre du jour et les participants. Ce modèle de données constitue la base de votre application et alimente les différents composants et automatisations que vous allez créer.
1. **Créez votre interface utilisateur (UI)** : une fois le modèle de données en place, le didacticiel vous guide ensuite tout au long de la création de l'interface utilisateur (UI). Dans App Studio, vous créez l'interface utilisateur en ajoutant des *pages* et en y ajoutant des *composants*. Vous allez ajouter des composants tels que *des tableaux, des* *vues détaillées* et *des calendriers* à une page de tableau de bord de demande de réunion. Ces composants seront conçus pour afficher et interagir avec les données stockées dans l'`MeetingRequests`entité. Cela permet à vos utilisateurs de consulter, de gérer et de planifier des réunions avec les clients. Vous allez également créer une page de création de demande de réunion. Cette page inclut un composant de *formulaire* pour collecter des données et un composant de *bouton* pour les envoyer.
1. **Ajoutez une logique métier grâce aux automatisations** : pour améliorer les fonctionnalités de votre application, vous allez configurer certains composants afin de permettre les interactions avec les utilisateurs. Il s'agit par exemple de naviguer vers une page ou de créer un nouvel enregistrement de demande de réunion dans l'`MeetingRequests`entité.
1. **Améliorez grâce à la validation et aux expressions** : pour garantir l'intégrité et l'exactitude de vos données, vous allez ajouter des règles de validation au composant *Formulaire*. Cela permettra de garantir que les utilisateurs fournissent des informations complètes et valides lors de la création de nouveaux enregistrements de demandes de réunion. Vous utiliserez également des expressions pour référencer et manipuler les données de votre application afin d'afficher des informations dynamiques et contextuelles dans l'ensemble de votre interface utilisateur.
1. **Prévisualisation et test** : avant de déployer votre application, vous aurez la possibilité de la prévisualiser et de la tester de manière approfondie. Cela vous permettra de vérifier que les composants, les données et les automatisations fonctionnent parfaitement ensemble. Cela permet à vos utilisateurs de bénéficier d'une expérience fluide et intuitive.
1. **Publiez l'application** : Enfin, vous allez déployer votre application interne de demande de réunion client complète et la rendre accessible à vos utilisateurs. Grâce à la puissance de l'approche low-code d'App Studio, vous aurez créé une application personnalisée qui répond aux besoins spécifiques de votre entreprise, sans avoir besoin d'une expertise approfondie en programmation.
**Contents**
+ [Conditions préalables](#getting-started-tutorial-prerequisites)
+ [Étape 1 : Création d'une application](#getting-started-tutorial-steps-create-application)
+ [Étape 2 : créer une entité pour définir les données de votre application](#getting-started-tutorial-steps-create-entity)
+ [Création d'une entité gérée](#getting-started-tutorial-steps-create-managed-entity)
+ [Ajoutez des champs à votre entité](#getting-started-tutorial-steps-add-fields)
+ [Étape 3 : Conception de l'interface utilisateur (UI) et de la logique](#getting-started-tutorial-steps-user-interface)
+ [Ajouter une page de tableau de bord pour les demandes de réunion](#getting-started-tutorial-steps-user-interface-create-page)
+ [Ajouter une page de création de demande de réunion](#getting-started-tutorial-steps-user-interface-add-create-customer-page)
+ [Étape 4 : prévisualiser l'application](#getting-started-tutorial-steps-preview)
+ [Étape 5 : Publier l'application dans l'environnement **de test**](#getting-started-tutorial-steps-publish)
+ [Étapes suivantes](#getting-started-tutorial-next-steps)
## Conditions préalables
Avant de commencer, passez en revue et remplissez les conditions préalables suivantes :
+ Accès à AWS App Studio. Pour de plus amples informations, veuillez consulter [Configuration et connexion à AWS App Studio](setting-up.md).
+ Facultatif : passez [AWS Concepts d'App Studio](concepts.md) en revue pour vous familiariser avec les concepts importants d'App Studio.
+ Facultatif : compréhension des concepts de base du développement Web, tels que JavaScript la syntaxe.
+ Facultatif : Connaissance des AWS services.
## Étape 1 : Création d'une application
1. Connectez-vous à App Studio.
1. Dans le menu de navigation de gauche, choisissez **Builder Hub**, puis **\$1 Create app**.
1. Choisissez **Commencer à zéro**.
1. Dans le champ **Nom de l'application**, saisissez un nom pour votre application, tel que**Customer Meeting Requests**.
1. Si vous êtes invité à sélectionner des sources de données ou un connecteur, choisissez **Ignorer** dans le cadre de ce didacticiel.
1. Choisissez **Suivant** pour continuer.
1. (Facultatif) : Regardez le didacticiel vidéo pour un aperçu rapide de la création d'applications dans App Studio.
1. Choisissez **Modifier l'application** pour accéder au générateur d'applications App Studio.
## Étape 2 : créer une entité pour définir les données de votre application
Les entités représentent les tables qui contiennent les données de votre application, comme les tables d'une base de données. Au lieu que l'interface utilisateur (UI) et les automatisations de votre application se connectent directement aux sources de données, elles se connectent d'abord aux entités. Les entités servent d'intermédiaire entre votre source de données actuelle et votre application App Studio, et fournissent un emplacement unique pour gérer vos données et y accéder.
Il existe quatre manières de créer une entité. Pour ce didacticiel, vous allez utiliser l'entité gérée par App Studio.
### Création d'une entité gérée
La création d'une entité gérée crée également une table DynamoDB correspondante gérée par App Studio. Lorsque des modifications sont apportées à l'entité dans l'application App Studio, la table DynamoDB est automatiquement mise à jour. Avec cette option, vous n'avez pas besoin de créer, de gérer ou de vous connecter manuellement à une source de données tierce, ni de désigner un mappage entre les champs d'entité et les colonnes de table.
Lorsque vous créez une entité, vous devez définir un champ de **clé primaire**. Une clé primaire sert d'identifiant unique pour chaque enregistrement ou ligne de l'entité. Cela garantit que chaque enregistrement peut être facilement identifié et récupéré sans ambiguïté. La clé primaire comprend les propriétés suivantes :
+ Nom de clé primaire : nom du champ de clé primaire de l'entité.
+ Type de données de clé primaire : type du champ de clé primaire. Dans App Studio, les types de clés primaires pris en charge sont **String** pour le texte et **Float** pour un nombre. Une clé primaire de texte (comme*meetingName*) aurait un type de **chaîne**, et une clé primaire numérique (comme*meetingId*) aurait un type de **flottant**.
La clé primaire est un élément crucial d'une entité car elle garantit l'intégrité des données, empêche la duplication des données et permet une extraction et une interrogation efficaces des données.
**Pour créer une entité gérée**
1. Choisissez **Données** dans le menu de la barre supérieure.
1. Choisissez **\$1 Créer une entité**.
1. Choisissez **Créer une entité gérée par App Studio**.
1. Dans le champ **Nom de l'entité**, saisissez le nom de votre entité. Dans le cadre de ce didacticiel, entrez **MeetingRequests**.
1. Dans le champ **Clé primaire**, entrez le nom de la clé primaire à attribuer à la colonne de clé primaire de votre entité. Dans le cadre de ce didacticiel, entrez **requestID**.
1. Pour le **type de données de clé primaire**, choisissez **Float**.
1. Choisissez **Create entity** (Créer une entité).
### Ajoutez des champs à votre entité
Pour chaque champ, vous devez spécifier le **nom d'affichage**, qui est l'étiquette visible par les utilisateurs de l'application. Le nom d'affichage peut contenir des espaces et des caractères spéciaux, mais il doit être unique au sein de l'entité. Le nom d'affichage sert d'étiquette conviviale pour le champ et aide les utilisateurs à identifier et à comprendre facilement son objectif.
Ensuite, vous allez fournir le **nom du système**, un identifiant unique utilisé en interne par l'application pour référencer le champ. Le nom du système doit être concis, sans espaces ni caractères spéciaux. Le nom du système permet à l'application de modifier les données du champ. Il constitue un point de référence unique pour le champ au sein de l'application.
Enfin, vous allez sélectionner le **type de données** qui représente le mieux le type de données que vous souhaitez stocker dans le champ, tel que String (texte), Boolean (vrai/false), Date, Decimal, Float, Integer ou. DateTime La définition du type de données approprié garantit l'intégrité des données et permet de gérer et de traiter correctement les valeurs du champ. Par exemple, si vous stockez les noms de clients dans votre demande de réunion, vous devez sélectionner le type de `String` données en fonction des valeurs textuelles.
**Pour ajouter des champs à votre `MeetingRequests` entité**
+ Choisissez **\$1 Ajouter un champ** pour ajouter les quatre champs suivants :
1. Ajoutez un champ qui représente le nom d'un client avec les informations suivantes :
+ **Nom d'affichage** : **Customer name**
+ **Nom du système** : **customerName**
+ **Type de données** : **String**
1. Ajoutez un champ représentant la date de la réunion avec les informations suivantes :
+ **Nom d'affichage** : **Meeting date**
+ **Nom du système** : **meetingDate**
+ **Type de données** : **DateTime**
1. Ajoutez un champ qui représente l'ordre du jour de la réunion avec les informations suivantes :
+ **Nom d'affichage** : **Agenda**
+ **Nom du système** : **agenda**
+ **Type de données** : **String**
1. Ajoutez un champ pour représenter les participants à la réunion avec les informations suivantes :
+ **Nom d'affichage** : **Attendees**
+ **Nom du système** : **attendees**
+ **Type de données** : **String**
Vous pouvez ajouter à votre entité des exemples de données que vous pouvez utiliser pour tester et prévisualiser votre application avant de la publier. En ajoutant jusqu'à 500 lignes de données fictives, vous pouvez simuler des scénarios réels et examiner la façon dont votre application gère et affiche différents types de données, sans vous fier à des données réelles ni vous connecter à des services externes. Cela vous permet d'identifier et de résoudre les problèmes ou les incohérences dès le début du processus de développement. Cela garantit que votre application fonctionne comme prévu lorsqu'elle traite des données réelles.
**Pour ajouter des exemples de données à votre entité**
1. Cliquez sur l'onglet **Exemples de données** dans la bannière.
1. Choisissez **Générer d'autres échantillons de données**.
1. Choisissez **Enregistrer**.
Vous pouvez également sélectionner **Connection** dans la bannière pour consulter les informations relatives au connecteur et à la table DynamoDB créées pour vous.
## Étape 3 : Conception de l'interface utilisateur (UI) et de la logique
### Ajouter une page de tableau de bord pour les demandes de réunion
Dans App Studio, chaque page représente un écran de l'interface utilisateur (UI) de votre application avec lequel vos utilisateurs interagiront. Dans ces pages, vous pouvez ajouter divers composants tels que des tableaux, des formulaires et des boutons pour créer la mise en page et les fonctionnalités souhaitées.
Les applications nouvellement créées sont dotées d'une page par défaut. Vous allez donc la renommer au lieu d'en ajouter une nouvelle à utiliser comme simple page de tableau de bord pour les demandes de réunion.
**Pour renommer la page par défaut**
1. Dans le menu de navigation de la barre supérieure, sélectionnez **Pages**.
1. **Dans le panneau de gauche, double-cliquez sur **Page1**, renommez-la en et appuyez sur **MeetingRequestsDashboard** Entrée.**
Ajoutez maintenant un composant de tableau à la page qui sera utilisé pour afficher les demandes de réunion.
**Pour ajouter un composant de tableau à la page du tableau de bord des demandes de réunion**
1. Dans le panneau **Composants** de droite, localisez le composant **Table** et faites-le glisser sur le canevas.
1. Choisissez le tableau dans le canevas pour le sélectionner.
1. Dans le panneau **Propriétés** de droite, mettez à jour les paramètres suivants :
1. Cliquez sur l'icône en forme de crayon pour renommer le tableau. **meetingRequestsTable**
1. Dans le menu déroulant **Source**, sélectionnez **Entité**.
1. Dans le menu déroulant **Actions sur les données**, choisissez l'entité que vous avez créée (**MeetingRequests**) et choisissez **\$1 Ajouter des actions sur les données**.
1. Si vous y êtes invité, choisissez **GetAll**.
**Note**
L'action de données **GetAll** est un type spécifique d'action de données qui extrait tous les enregistrements (lignes) d'une entité spécifiée. Lorsque vous associez l'action de données GetAll à un composant de table, par exemple, la table est automatiquement renseignée avec toutes les données de l'entité connectée et affiche chaque enregistrement sous forme de ligne dans la table.
### Ajouter une page de création de demande de réunion
Créez ensuite une page contenant un formulaire que les utilisateurs finaux utiliseront pour créer des demandes de réunion. Vous allez également ajouter un bouton d'envoi qui crée l'enregistrement dans l'`MeetingRequests`entité, puis renvoie l'utilisateur final à la `MeetingRequestsDashboard` page.
**Pour ajouter une page de création de demande de réunion**
1. Dans le bandeau supérieur, sélectionnez **Pages**.
1. Dans le panneau de gauche, choisissez **\$1 Ajouter**.
1. Dans le panneau des propriétés de droite, sélectionnez l'icône en forme de crayon et renommez la page en. **CreateMeetingRequest**
Maintenant que la page est ajoutée, vous allez y ajouter un formulaire que les utilisateurs finaux utiliseront pour saisir des informations afin de créer une demande de réunion dans l'`MeetingRequests`entité. App Studio propose une méthode pour générer un formulaire à partir d'une entité existante, qui remplit automatiquement les champs du formulaire en fonction des champs de l'entité et génère également un bouton d'envoi pour créer un enregistrement dans l'entité avec les entrées du formulaire.
**Pour générer automatiquement un formulaire à partir d'une entité sur la page de création de demande de réunion**
1. Dans le menu **Composants** de droite, recherchez le composant **Formulaire** et faites-le glisser sur le canevas.
1. Sélectionnez **Générer le formulaire**.
1. Dans le menu déroulant, sélectionnez l'`MeetingRequests`entité.
1. Choisissez **Générer**.
1. Cliquez sur le bouton **Soumettre** sur le canevas pour le sélectionner.
1. Dans le panneau des propriétés de droite, dans la section **Déclencheurs**, choisissez **\$1 Ajouter**.
1. Choisissez **Naviguer**.
1. Dans le panneau des propriétés de droite, remplacez le nom de l'**action par un nom** descriptif, tel que**Navigate to MeetingRequestsDashboard**.
1. Changez le **type de navigation** en page. Dans le menu déroulant **Naviguer vers**, sélectionnez**MeetingRequestsDashboard**.
Maintenant que nous disposons d'une page et d'un formulaire de création de demande de réunion, nous voulons faciliter la navigation vers cette page depuis la `MeetingRequestsDashboard` page, afin que les utilisateurs finaux qui consultent le tableau de bord puissent facilement créer des demandes de réunion. Utilisez la procédure suivante pour créer un bouton sur la `MeetingRequestsDashboard` page qui permet d'accéder à la `CreateMeetingRequest` page.
**Pour ajouter un bouton permettant de naviguer `MeetingRequestsDashboard` de `CreateMeetingRequest`**
1. Dans le bandeau supérieur, sélectionnez **Pages**.
1. Choisissez la `MeetingRequestsDashboard` page.
1. Dans le panneau **Composants** de droite, recherchez le composant **Bouton**, faites-le glisser sur le canevas et placez-le au-dessus du tableau.
1. Cliquez sur le nouveau bouton pour le sélectionner.
1. Dans le panneau **Propriétés** de droite, mettez à jour les paramètres suivants :
1. Sélectionnez l'icône en forme de crayon pour renommer le bouton en**createMeetingRequestButton**.
1. **Libellé du bouton** :**Create Meeting Request**. Il s'agit du nom que les utilisateurs finaux verront.
1. Dans le menu déroulant **Icône**, sélectionnez **\$1 Plus**.
1. Créez un déclencheur qui dirige l'utilisateur final vers la `MeetingRequestsDashboard` page :
1. Dans la section **Déclencheurs**, choisissez **\$1 Ajouter**.
1. Dans **Type d'action**, sélectionnez **Naviguer**.
1. Choisissez le déclencheur que vous venez de créer pour le configurer.
1. Dans **Nom de l'action**, entrez un nom descriptif tel que**NavigateToCreateMeetingRequest**.
1. Dans le menu déroulant **Type de navigation**, sélectionnez **Page**.
1. Dans le menu déroulant **Naviguer vers**, sélectionnez la `CreateMeetingRequest` page.
## Étape 4 : prévisualiser l'application
Vous pouvez prévisualiser une application dans App Studio pour voir comment elle apparaîtra aux yeux des utilisateurs. Vous pouvez également tester ses fonctionnalités en l'utilisant et en vérifiant les journaux dans un panneau de débogage.
L'environnement de prévisualisation de l'application ne prend pas en charge l'affichage de données en temps réel. Il ne prend pas non plus en charge la connexion avec des ressources externes via des connecteurs, tels que des sources de données. Au lieu de cela, vous pouvez utiliser des exemples de données et des résultats simulés pour tester les fonctionnalités.
**Pour prévisualiser votre application à des fins de test**
1. Dans le coin supérieur droit du générateur d'applications, choisissez **Aperçu**.
1. Interagissez avec la `MeetingRequestsDashboard` page et testez le tableau, le formulaire et les boutons.
## Étape 5 : Publier l'application dans l'environnement **de test**
Maintenant que vous avez terminé de créer, de configurer et de tester votre application, il est temps de la publier dans l'environnement de **test** pour effectuer les derniers tests, puis de la partager avec les utilisateurs.
**Pour publier votre application dans l'environnement de test**
1. Dans le coin supérieur droit du générateur d'applications, choisissez **Publier**.
1. Ajoutez une description de version pour l'environnement de test.
1. Vérifiez et cochez la case concernant le SLA.
1. Sélectionnez **Démarrer**. La publication peut prendre jusqu'à 15 minutes.
1. (Facultatif) Lorsque vous êtes prêt, vous pouvez autoriser d'autres personnes à y accéder en choisissant **Partager** et en suivant les instructions.
**Note**
Pour partager des applications, un administrateur doit avoir créé des groupes d'utilisateurs finaux.
Après le test, choisissez à nouveau **Publier** pour promouvoir l'application dans l'environnement de production. Pour plus d'informations sur les différents environnements d'applications, consultez[Environnements d'applications](applications-publish.md#application-environments).
## Étapes suivantes
Maintenant que vous avez créé votre première application, voici les prochaines étapes :
1. Continuez à créer l'application de didacticiel. Maintenant que vous avez configuré les données, certaines pages et une automatisation, vous pouvez ajouter des pages supplémentaires et ajouter des composants pour en savoir plus sur la création d'applications.
1. Pour en savoir plus sur la création d'applications, consultez le[Documentation du constructeur](builder-documentation.md). Plus précisément, il pourrait être utile d'explorer les sujets suivants :
+ [Référence sur les actions Automation](automations-actions-reference.md)
+ [Référence des composants](components-reference.md)
+ [Interaction avec Amazon Simple Storage Service à l'aide de composants et d'automatisations](automations-s3.md)
+ [Considérations relatives à la sécurité et mesures d'atténuation](security-considerations-and-mitigations.md)
En outre, les rubriques suivantes contiennent des informations supplémentaires sur les concepts abordés dans le didacticiel :
+ [Prévisualisation, publication et partage d'applications](applications-preview-publish-share.md)
+ [Création d'une entité dans une application App Studio](data-entities-create.md)