View a markdown version of this page

Tutoriel : Commencez à créer à partir d'une application vide - AWS App Studio
Conditions préalablesÉtape 1 : Création d'une applicationÉtape 2 : créer une entité pour définir les données de votre applicationÉtape 3 : Conception de l'interface utilisateur (UI) et de la logiqueÉtape 4 : prévisualiser l'applicationÉtape 5 : Publiez l'application sur Tests environmentÉtapes suivantes

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.

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 des interfaces 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.

Pour comprendre comment créer des applications avec App Studio, il est essentiel de comprendre les quatre concepts fondamentaux suivants et la manière dont ils fonctionnent ensemble : composants, automatisations , données et connecteurs.

  • Composants  : les composants sont les éléments constitutifs 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 les objets d'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, tels que les demandes de rendez-vous avec les clients, les ordres du jour ou les participants. Vous pouvez connecter ces modèles de données à diverses sources de données, notamment des AWS services et des API externes, à l'aide de 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 bien d'autres utilisant OpenAPI ou des connecteurs 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 à 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 sont combinés 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, c'est pourquoi ce didacticiel commence é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 sert de base à votre application et alimente les différents composants et automatisations que vous allez créer.

  2. Créez votre interface utilisateur (UI)  : Une fois le modèle de données en place, le didacticiel vous guide 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 des demandes de réunion. Ces composants seront conçus pour afficher et interagir avec les données stockées dans l'MeetingRequestsentité. Cela permet à vos utilisateurs de visualiser, 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 Form pour collecter des données et un composant Button pour les soumettre.

  3. Ajoutez une logique métier à l'aide d'automatisations  : pour améliorer les fonctionnalités de votre application, vous allez configurer certains composants afin de permettre les interactions avec les utilisateurs. Par exemple, la navigation vers une page ou la création d'un nouvel enregistrement de demande de réunion dans l'MeetingRequestsentité.

  4. Améliorez grâce à la validation et aux expressions  : pour garantir l'intégrité et la précision de vos données, vous allez ajouter des règles de validation au composant Form. Cela permettra de s'assurer 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 de pouvoir afficher des informations dynamiques et contextuelles sur l'ensemble de votre interface utilisateur.

  5. Aperçu 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.

  6. 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 organisation, sans avoir besoin d'une expertise approfondie en programmation.

Conditions préalables

Avant de commencer, vérifiez et complétez les prérequis suivants :

  • Accès à AWS App Studio. Pour de plus amples informations, veuillez consulter Configuration et connexion à AWS App Studio.

  • Facultatif : passez AWS Concepts d'App Studio 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.

  2. Dans la barre de navigation de gauche, choisissez Builder hub, puis choisissez + Créer une application.

  3. Choisissez Repartir de zéro.

  4. Dans le champ Nom de l'application, donnez un nom à votre application, par exempleCustomer Meeting Requests.

  5. Si vous êtes invité à sélectionner des sources de données ou un connecteur, choisissez Ignorer pour les besoins de ce didacticiel.

  6. Choisissez Suivant pour continuer.

  7. (Facultatif) : regardez le didacticiel vidéo pour un aperçu rapide de la création d'applications dans App Studio.

  8. Choisissez Modifier l'application, ce qui vous permet d'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, de la même manière que 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 font office d'intermédiaire entre votre source de données réelle et votre application App Studio, et fournissent un endroit 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 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 à créer, gérer ou vous connecter manuellement à une source de données tierce, ni à 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 la 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 (similairemeetingName) aurait un type de chaîne, et une clé primaire numérique (similairemeetingId) aurait un type de flottant.

La clé primaire est un composant essentiel d'une entité car elle garantit l'intégrité des données, empêche leur duplication 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.

  2. Choisissez + Créer une entité.

  3. Choisissez Créer une entité gérée par App Studio.

  4. Dans le champ Nom de l'entité, indiquez le nom de votre entité. Dans le cadre de ce didacticiel, entrez MeetingRequests.

  5. Dans le champ Clé primaire, saisissez le nom de clé primaire à attribuer à la colonne clé primaire de votre entité. Dans le cadre de ce didacticiel, entrez requestID.

  6. Pour Type de données de clé primaire, choisissez Float.

  7. 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 pour 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.

Vous allez ensuite 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 domaine 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 (true/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 une gestion et un traitement appropriés des valeurs du champ. Par exemple, si vous enregistrez les noms des clients dans votre demande de réunion, vous devez sélectionner le type de String données qui convient aux valeurs de texte.

Pour ajouter des champs à votre MeetingRequests entité

  • Choisissez + 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

    2. Ajoutez un champ qui représente 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

    3. 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

    4. 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 manière 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. Choisissez l'onglet Exemples de données dans la bannière.

  2. Choisissez Générer d'autres exemples de données.

  3. Choisissez Enregistrer.

Vous pouvez également sélectionner Connexion dans la bannière pour consulter les informations relatives au connecteur et au tableau DynamoDB créé 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 laquelle vos utilisateurs vont interagir. 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 qui servira de 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, choisissez Pages.

  2. 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 Tableau et faites-le glisser sur le canevas.

  2. Choisissez le tableau dans le canevas pour le sélectionner.

  3. Dans le panneau Propriétés situé à droite, mettez à jour les paramètres suivants :

    1. Choisissez l'icône en forme de crayon pour renommer le tableau. meetingRequestsTable

    2. Dans la liste déroulante Source, choisissez Entity.

    3. Dans la liste déroulante Actions relatives aux données, choisissez l'entité que vous avez créée (MeetingRequests) et choisissez + Ajouter des actions relatives aux données.

  4. Si vous y êtes invité, choisissez GetAll.

    Note

    L'action GetAll data 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 GetAll data à un composant de tableau, par exemple, le tableau est automatiquement renseigné avec toutes les données de l'entité connectée et affiche chaque enregistrement sous forme de ligne dans le tableau.

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'MeetingRequestsentité, puis ramène l'utilisateur final à la MeetingRequestsDashboard page.

Pour ajouter une page de création de demande de réunion

  1. Dans la bannière supérieure, choisissez Pages.

  2. Dans le panneau de gauche, choisissez + Ajouter.

  3. Dans le panneau des propriétés situé à 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 ajouter un formulaire à la page que les utilisateurs finaux utiliseront pour saisir des informations afin de créer une demande de réunion dans l'MeetingRequestsentité. App Studio propose une méthode de génération d'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 la demande de réunion

  1. Dans le menu Composants de droite, recherchez le composant Formulaire et faites-le glisser sur le canevas.

  2. Sélectionnez Générer un formulaire.

  3. Dans la liste déroulante, sélectionnez l'MeetingRequestsentité.

  4. Choisissez Générer.

  5. Cliquez sur le bouton Soumettre sur le canevas pour le sélectionner.

  6. Dans le panneau des propriétés de droite, dans la section Déclencheurs, choisissez + Ajouter.

  7. Choisissez Naviguer.

  8. Dans le panneau des propriétés de droite, remplacez le nom de l'action par un nom descriptif, tel queNavigate to MeetingRequestsDashboard.

  9. Changez le type de navigation en page. Dans la liste déroulante Naviguer vers, choisissezMeetingRequestsDashboard.

Maintenant que nous disposons d'une page et d'un formulaire de création de demande de réunion, nous souhaitons faciliter la navigation vers cette page depuis la MeetingRequestsDashboard page, afin que les utilisateurs finaux consultant le tableau de bord puissent facilement créer des demandes de réunion. Procédez comme suit pour créer un bouton sur la MeetingRequestsDashboard page qui permet d'accéder à la CreateMeetingRequest page.

Pour ajouter un bouton permettant de MeetingRequestsDashboard naviguer depuis CreateMeetingRequest

  1. Dans la bannière supérieure, choisissez Pages.

  2. Choisissez la MeetingRequestsDashboard page.

  3. Dans le panneau Composants de droite, recherchez le composant Button, faites-le glisser sur le canevas et placez-le au-dessus du tableau.

  4. Cliquez sur le bouton qui vient d'être ajouté pour le sélectionner.

  5. Dans le panneau Propriétés situé à droite, mettez à jour les paramètres suivants :

    1. Sélectionnez l'icône en forme de crayon pour renommer le bouton. createMeetingRequestButton

    2. Libellé du bouton  :Create Meeting Request. Il s'agit du nom que les utilisateurs finaux verront.

    3. Dans la liste déroulante Icône, sélectionnez + Plus.

    4. Créez un déclencheur qui dirige l'utilisateur final vers la MeetingRequestsDashboard page :

      1. Dans la section Déclencheurs, choisissez + Ajouter.

      2. Dans Type d'action, sélectionnez Naviguer.

      3. Choisissez le déclencheur que vous venez de créer pour le configurer.

      4. Dans Nom de l'action, entrez un nom descriptif tel queNavigateToCreateMeetingRequest.

      5. Dans la liste déroulante Type de navigation, sélectionnez Page.

      6. Dans la liste déroulante 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 utilisateurs. Vous pouvez également tester ses fonctionnalités en l'utilisant et en consultant 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. Il ne prend pas non plus en charge la connexion avec des ressources externes à l'aide de connecteurs, telles que des sources de données. Vous pouvez plutôt utiliser des exemples de données et des sorties simulées pour tester les fonctionnalités.

Pour prévisualiser votre application à des fins de test

  1. Dans l'angle supérieur droit de l'éditeur d'applications, choisissez Aperçu.

  2. Interagissez avec la MeetingRequestsDashboard page et testez le tableau, le formulaire et les boutons.

Étape 5 : Publiez l'application sur Tests environment

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 tests finaux, puis la partager avec les utilisateurs.

Pour publier votre application dans l'environnement de test

  1. Dans l'angle supérieur droit de l'éditeur d'applications, choisissez Publier.

  2. Ajoutez une description de version pour l'environnement de test.

  3. Vérifiez et cochez la case concernant le SLA.

  4. Sélectionnez Démarrer. La publication peut prendre jusqu'à 15 minutes.

  5. (Facultatif) Lorsque vous êtes prêt, vous pouvez autoriser d'autres personnes à 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'application, consultezEnvironnements applicatifs.

Étapes suivantes

Maintenant que vous avez créé votre première application, voici les prochaines étapes :

  1. Continuez à créer l'application du didacticiel. Maintenant que vous avez configuré des 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.

  2. Pour en savoir plus sur la création d'applications, consultez leDocumentation pour les constructeurs. Plus précisément, il peut être utile d'explorer les sujets suivants :

    En outre, les rubriques suivantes contiennent plus d'informations sur les concepts abordés dans le didacticiel :