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.
# Tutoriels
**Topics**
+ [Créez une application de synthèse de texte basée sur l'IA avec Amazon Bedrock](tutorial-conversational-bedrock.md)
+ [Interaction avec Amazon Simple Storage Service à l'aide de composants et d'automatisations](automations-s3.md)
+ [Invocation de fonctions Lambda dans une application App Studio](tutorial-lambda.md)
# Créez une application de synthèse de texte basée sur l'IA avec Amazon Bedrock
Dans ce didacticiel, vous allez créer une application dans App Studio qui utilise Amazon Bedrock pour fournir des résumés concis des textes saisis par les utilisateurs finaux. L'application contient une interface utilisateur simple dans laquelle les utilisateurs peuvent saisir le texte qu'ils souhaitent résumer. Il peut s'agir de notes de réunion, de contenus d'articles, de résultats de recherche ou de toute autre information textuelle. Une fois que les utilisateurs ont saisi le texte, ils peuvent appuyer sur un bouton pour l'envoyer à Amazon Bedrock, qui le traitera à l'aide du modèle Claude 3 Sonnet et renverra une version résumée.
**Contents**
+ [Conditions préalables](#tutorial-conversational-bedrock-prerequisites)
+ [Étape 1 : créer et configurer un rôle IAM et un connecteur App Studio](#tutorial-conversational-bedrock-steps-create-role-connector)
+ [Étape 2 : Création d'une application](#tutorial-conversational-bedrock-steps-create-application)
+ [Étape 3 : Création et configuration d'une automatisation](#tutorial-conversational-bedrock-steps-create-automation)
+ [Étape 4 : Création de pages et de composants](#tutorial-conversational-bedrock-steps-user-interface)
+ [Renommer la page par défaut](#tutorial-conversational-bedrock-steps-user-interface-create-page)
+ [Ajouter des composants à la page](#tutorial-conversational-bedrock-steps-user-interface-add-components)
+ [Configuration des composants de la page](#tutorial-conversational-bedrock-steps-user-interface-configure-components)
+ [Étape 5 : Publier l'application dans l'environnement **de test**](#tutorial-conversational-bedrock-steps-publish)
+ [(Facultatif) Nettoyer](#tutorial-conversational-bedrock-steps-cleanup)
## Conditions préalables
Avant de commencer, passez en revue et remplissez les conditions préalables suivantes :
+ Accès à AWS App Studio. Notez que vous devez avoir le rôle d'administrateur pour créer un connecteur dans ce didacticiel.
+ Facultatif : passez en revue [AWS Concepts d'App Studio](concepts.md) et familiarisez-vous avec les concepts importants d'App Studio. [Tutoriel : Commencez à créer à partir d'une application vide](getting-started-tutorial-empty.md)
## Étape 1 : créer et configurer un rôle IAM et un connecteur App Studio
Pour permettre à App Studio d'accéder aux modèles Amazon Bedrock, vous devez :
1. Activez les modèles Amazon Bedrock que vous souhaitez utiliser dans votre application. Pour ce didacticiel, vous utiliserez **Claude 3 Sonnet**. Assurez-vous donc d'activer ce modèle.
1. Créez un rôle IAM avec les autorisations appropriées sur Amazon Bedrock.
1. Créez un connecteur App Studio avec le rôle IAM qui sera utilisé dans votre application.
Accédez à [Connectez-vous à Amazon Bedrock](connectors-bedrock.md) des instructions détaillées, puis revenez à ce didacticiel après avoir suivi les étapes et créé le connecteur.
## Étape 2 : Création d'une application
Utilisez la procédure suivante pour créer une application vide dans App Studio que vous intégrerez à l'application de synthèse de texte.
1. Connectez-vous à App Studio.
1. Accédez au Builder Hub et choisissez **\$1 Create app**.
1. Choisissez **Commencer à zéro**.
1. Dans le champ **Nom de l'application**, saisissez un nom pour votre application, tel que**Text Summarizer**.
1. Si vous êtes invité à sélectionner des sources de données ou un connecteur, choisissez **Skip** 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**, qui vous permettra d'accéder au studio d'applications.
## Étape 3 : Création et configuration d'une automatisation
Vous définissez la logique et le comportement d'une application App Studio dans les *automatisations.* Les automatisations se composent d'étapes individuelles appelées *actions*, de *paramètres* utilisés pour transmettre des données à l'action à partir d'autres ressources et d'une *sortie* pouvant être utilisée par d'autres automatisations ou composants. Au cours de cette étape, vous allez créer une automatisation qui gère l'interaction avec Amazon Bedrock avec les éléments suivants :
+ Entrées : paramètre permettant de transmettre le texte saisi par l'utilisateur à l'automatisation.
+ Actions : une action **GenAI Prompt** qui envoie le texte saisi à Amazon Bedrock et renvoie le résumé du texte de sortie.
+ Sorties : une sortie d'automatisation qui comprend le résumé traité par Amazon Bedrock, qui peut être utilisé dans votre application.
**Pour créer et configurer une automatisation qui envoie une invite à Amazon Bedrock, traite et renvoie un résumé**
1. Choisissez l'onglet **Automatisations** en haut du canevas.
1. Choisissez **\$1 Ajouter une automatisation**.
1. Dans le panneau de droite, sélectionnez **Propriétés**.
1. Mettez à jour le nom de l'automatisation en choisissant l'icône en forme de crayon. Entrez **InvokeBedrock** et appuyez sur **Entrée**.
1. Ajoutez un paramètre à l'automatisation qui sera utilisé pour transmettre l'invite de texte saisie par l'utilisateur à l'automatisation à utiliser dans la demande adressée à Amazon Bedrock en effectuant les étapes suivantes :
1. Dans le canevas, dans la zone de paramètres, choisissez **\$1 Ajouter**.
1. Pour **Name (Nom)**, entrez **input**.
1. Dans **Description**, entrez une description, telle que**Text to be sent to Amazon Bedrock**.
1. Dans **Type**, sélectionnez **Chaîne**.
1. Choisissez **Ajouter** pour créer le paramètre.
1. Ajoutez une action **GenAI Prompt** en effectuant les étapes suivantes :
1. Dans le panneau de droite, sélectionnez **Actions**.
1. Choisissez **GenAI Prompt** pour ajouter une action.
1. Configurez l'action en effectuant les étapes suivantes :
1. Choisissez l'action dans le canevas pour ouvrir le menu **Propriétés** de droite.
1. Renommez l'action **PromptBedrock** en choisissant l'icône en forme de crayon, en saisissant le nom et en appuyant sur Entrée.
1. Dans **Connector**, sélectionnez le connecteur créé dans[Étape 1 : créer et configurer un rôle IAM et un connecteur App Studio](#tutorial-conversational-bedrock-steps-create-role-connector).
1. Dans **Model**, choisissez le modèle Amazon Bedrock que vous souhaitez utiliser pour traiter l'invite. Dans ce tutoriel, vous allez choisir **Claude 3.5 Sonnet.**
1. Dans **Invite utilisateur**, entrez`{{params.input}}`. Cela représente le `input` paramètre que vous avez créé précédemment et contiendra le texte saisi par les utilisateurs de votre application.
1. Dans **Invite du système**, entrez les instructions du système que vous souhaitez envoyer à Amazon Bedrock. Pour ce didacticiel, entrez les informations suivantes :
```
You are a highly efficient text summarizer. Provide a concise summary of the prompted text, capturing the key points and main ideas.
```
1. Choisissez **Paramètres de demande** pour le développer et mettez à jour les champs suivants :
+ Dans **Température**, entrez`0`. La température détermine le caractère aléatoire ou créatif de la sortie sur une échelle de 0 à 10. Plus le chiffre est élevé, plus la réponse est créative.
+ Dans **Max Tokens**, entrez `4096` pour limiter la longueur de la réponse.
1. Le résultat de cette automatisation sera le texte résumé, mais par défaut, les automatisations ne créent pas de sorties. Configurez l'automatisation pour créer une sortie d'automatisation en effectuant les étapes suivantes :
1. Dans le menu de navigation de gauche, choisissez l'**InvokeBedrock**automatisation.
1. Dans le menu **Propriétés** de droite, dans **Sortie**, choisissez **\$1 Ajouter**.
1. Dans **Sortie**, entrez**\$1\$1results.PromptBedrock.text\$1\$1**. Cette expression renvoie le contenu de l'`processResults`action.
## Étape 4 : Création de pages et de composants
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, des boutons, etc. pour créer la mise en page et les fonctionnalités souhaitées.
### Renommer la page par défaut
L'application de synthèse de texte de ce didacticiel ne contiendra qu'une seule page. Les applications nouvellement créées sont fournies avec une page par défaut, vous allez donc la renommer au lieu d'en ajouter une.
**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, choisissez **Page1** et choisissez le panneau **Propriétés** dans le panneau de droite.
1. Choisissez l'icône en forme de crayon**TextSummarizationTool**, entrez et appuyez sur **Entrée**.
1. Dans **Libellé de navigation**, entrez**TextSummarizationTool**.
### Ajouter des composants à la page
Pour ce didacticiel, l'application de synthèse de texte comporte une page contenant les éléments suivants :
+ Composant de **saisie de texte** que les utilisateurs finaux utilisent pour saisir une invite à résumer.
+ Un composant **Button** utilisé pour envoyer l'invite à Amazon Bedrock.
+ Un composant de **zone de texte** qui affiche le résumé d'Amazon Bedrock.
Ajoutez un composant de **saisie de texte** à la page que les utilisateurs utiliseront pour saisir une invite de texte à résumer.
**Pour ajouter un composant de saisie de texte**
1. Dans le panneau **Composants** de droite, localisez le composant de **saisie de texte** et faites-le glisser sur le canevas.
1. Choisissez le texte saisi 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 texte saisi. **inputPrompt**
1. Dans **Label**, entrez**Prompt**.
1. Dans **Placeholder**, entrez**Enter text to be summarized**.
Ajoutez maintenant un composant **Button** que les utilisateurs choisiront pour envoyer l'invite à Amazon Bedrock.
**Pour ajouter un composant de bouton**
1. Dans le panneau **Composants** de droite, localisez le composant **Bouton** et faites-le glisser sur le canevas.
1. Cliquez sur le bouton dans le canevas pour le sélectionner.
1. Dans le panneau **Propriétés** de droite, mettez à jour les paramètres suivants :
1. Choisissez l'icône en forme de crayon pour renommer le bouton. **sendButton**
1. Dans **Libellé du bouton**, entrez**Send**.
Ajoutez maintenant un composant de **zone de texte** qui affichera le résumé renvoyé par Amazon Bedrock.
**Pour ajouter un composant de zone de texte**
1. Dans le panneau **Composants** de droite, localisez le composant **Zone de texte** et faites-le glisser sur le canevas.
1. Choisissez la zone de texte dans le canevas pour la sélectionner.
1. Dans le panneau **Propriétés** de droite, mettez à jour les paramètres suivants :
1. Choisissez l'icône en forme de crayon pour renommer le bouton. **textSummary**
1. Dans **Label**, entrez**Summary**.
### Configuration des composants de la page
Maintenant que l'application contient une page contenant des composants, l'étape suivante consiste à configurer les composants pour qu'ils adoptent le comportement approprié. Pour configurer un composant, tel qu'un bouton, afin qu'il prenne des mesures lorsqu'il interagit avec celui-ci, vous devez y ajouter un *déclencheur*. Pour l'application décrite dans ce didacticiel, vous allez ajouter deux déclencheurs au `sendButton` bouton pour effectuer les opérations suivantes :
+ Le premier déclencheur envoie le texte du `textPrompt` composant à Amazon Bedrock pour analyse.
+ Le deuxième déclencheur affiche le résumé renvoyé par Amazon Bedrock dans le `textSummary` composant.
**Pour ajouter un déclencheur qui envoie l'invite à Amazon Bedrock**
1. Cliquez sur le bouton dans le canevas pour le sélectionner.
1. Dans le panneau **Propriétés** de droite, dans la section **Déclencheurs**, choisissez **\$1 Ajouter**.
1. Choisissez **Invoke Automation**.
1. Choisissez le déclencheur **InvokeAutomation1** qui a été créé pour le configurer.
1. Dans **Nom de l'action**, entrez**invokeBedrockAutomation**.
1. Dans **Invoke Automation**, sélectionnez l'**InvokeBedrock**automatisation créée précédemment.
1. Dans la zone des paramètres, dans le paramètre **d'entrée** créé précédemment, entrez**\$1\$1ui.inputPrompt.value\$1\$1**, qui transmet le contenu du composant de saisie de `inputPrompt` texte.
1. Cliquez sur la flèche gauche en haut du panneau pour revenir au menu des propriétés du composant.
Maintenant que vous avez configuré un déclencheur qui invoque l'automatisation pour envoyer une demande à Amazon Bedrock lorsque vous cliquez sur le bouton, l'étape suivante consiste à configurer un deuxième déclencheur qui affiche les résultats dans le composant. `textSummary`
**Pour ajouter un déclencheur qui affiche les résultats d'Amazon Bedrock dans le composant de zone de texte**
1. Dans le panneau **Propriétés** situé à droite du bouton, dans la section **Déclencheurs**, choisissez **\$1 Ajouter**.
1. Choisissez **Exécuter l'action du composant**.
1. Choisissez le déclencheur **Runcomponentaction1** créé pour le configurer.
1. Dans **Nom de l'action**, entrez**setTextSummary**.
1. Dans **Composant**, sélectionnez le composant **TextSummary**.
1. Dans **Action**, sélectionnez **Définir la valeur**.
1. Dans **Définir la valeur sur**, entrez**\$1\$1results.invokeBedrockAutomation\$1\$1**.
## Étape 5 : Publier l'application dans l'environnement **de test**
Lorsque vous créez une application, il est généralement recommandé de la prévisualiser pour voir à quoi elle ressemble et de tester ses fonctionnalités dans un premier temps. Toutefois, étant donné que les applications n'interagissent pas avec les services externes dans l'environnement de prévisualisation, vous allez plutôt publier l'application dans l'environnement de test afin de pouvoir tester l'envoi de demandes et la réception de réponses d'Amazon Bedrock.
**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. Pour plus d'informations sur le partage d'applications App Studio, consultez[Partage d'applications publiées](application-share.md).
Après avoir testé votre application, choisissez à nouveau **Publier** pour promouvoir l'application dans l'environnement de production. Notez que les applications de l'environnement de production ne sont pas accessibles aux utilisateurs finaux tant qu'elles ne sont pas partagées. Pour plus d'informations sur les différents environnements d'applications, consultez[Environnements d'applications](applications-publish.md#application-environments).
## (Facultatif) Nettoyer
Vous avez maintenant terminé avec succès le didacticiel et créé une application de synthèse de texte dans App Studio avec Amazon Bedrock. Vous pouvez continuer à utiliser votre application ou nettoyer les ressources créées dans ce didacticiel. La liste suivante contient la liste des ressources à nettoyer :
+ Le connecteur Amazon Bedrock créé dans App Studio. Pour de plus amples informations, veuillez consulter [Affichage, modification et suppression de connecteurs](viewing-deleting-connectors.md).
+ L'application de synthèse de texte dans App Studio. Pour de plus amples informations, veuillez consulter [Suppression d’une application](applications-delete.md).
+ Rôle IAM créé dans la console IAM. Pour plus d'informations, consultez la section [Supprimer des rôles ou des profils d'instance](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_roles_manage_delete.html) dans le *Guide de Gestion des identités et des accès AWS l'utilisateur*.
+ Si vous avez demandé l'accès aux modèles pour utiliser Claude 3 Sonnet et que vous souhaitez rétablir l'accès, consultez la section [Gérer l'accès aux modèles de fondation Amazon Bedrock dans le guide de l'utilisateur](https://docs.aws.amazon.com/bedrock/latest/userguide/model-access.html) d'*Amazon Bedrock*.
# Interaction avec Amazon Simple Storage Service à l'aide de composants et d'automatisations
Vous pouvez appeler diverses opérations Amazon S3 à partir d'une application App Studio. Par exemple, vous pouvez créer un simple panneau d'administration pour gérer vos utilisateurs et vos commandes et afficher vos médias depuis Amazon S3. Bien que vous puissiez invoquer n'importe quelle opération Amazon S3 à l'aide de l' AWS action **Invoke**, il existe quatre actions Amazon S3 dédiées que vous pouvez ajouter aux automatisations de votre application pour effectuer des opérations courantes sur les buckets et les objets Amazon S3. Les quatre actions et leurs opérations sont les suivantes :
+ **Put Object** : utilise l'`Amazon S3 PutObject`opération pour ajouter un objet dans un compartiment Amazon S3.
+ **Obtenir l'objet** : utilise l'`Amazon S3 GetObject`opération pour récupérer un objet depuis un compartiment Amazon S3.
+ **Lister les objets** : utilise l'`Amazon S3 ListObjects`opération pour répertorier les objets d'un compartiment Amazon S3.
+ **Supprimer l'objet** : utilise l'`Amazon S3 DeleteObject`opération pour supprimer un objet d'un compartiment Amazon S3.
Outre les actions, il existe un composant de **téléchargement S3** que vous pouvez ajouter aux pages des applications. Les utilisateurs peuvent utiliser ce composant pour choisir un fichier à télécharger, et le composant appelle `Amazon S3 PutObject` pour télécharger le fichier dans le compartiment et le dossier configurés. Ce didacticiel utilisera ce composant à la place de l'action autonome d'automatisation **Put Object**. (L'action autonome doit être utilisée dans des scénarios plus complexes impliquant une logique ou des actions supplémentaires à effectuer avant ou après le téléchargement.)
## Conditions préalables
Ce guide part du principe que vous avez rempli les conditions préalables suivantes :
1. Création et configuration d'un compartiment Amazon S3, d'un rôle et d'une politique IAM, ainsi que d'un connecteur Amazon S3 afin d'intégrer avec succès Amazon S3 à App Studio. Pour créer un connecteur, vous devez avoir le rôle d'administrateur. Pour de plus amples informations, veuillez consulter [Connectez-vous à Amazon Simple Storage Service (Amazon S3)](connectors-s3.md).
## Création d'une application vide
Créez une application vide à utiliser tout au long de ce guide en effectuant les étapes suivantes.
**Pour créer une application vide**
1. Dans le volet de navigation, sélectionnez **Mes applications**.
1. Choisissez **\$1 Créer une application**.
1. Dans la boîte de dialogue **Créer une application**, donnez un nom à votre application, choisissez **Démarrer à partir de zéro**, puis cliquez sur **Suivant**.
1. Dans la boîte de dialogue **Connect to existing data**, choisissez **Skip** pour créer l'application.
1. Choisissez **Modifier l'application** pour accéder au canevas de votre nouvelle application, où vous pouvez utiliser des composants, des automatismes et des données pour configurer l'apparence et le fonctionnement de votre application.
## Création de pages
Créez trois pages dans votre application pour recueillir ou afficher des informations.
**Pour créer des pages**
1. Si nécessaire, choisissez l'onglet **Pages** en haut du canevas.
1. Dans la barre de navigation de gauche, une seule page a été créée avec votre application. Choisissez **\$1 Ajouter** deux fois pour créer deux pages supplémentaires. Le volet de navigation doit afficher trois pages au total.
1. Mettez à jour le nom de la page **Page1** en effectuant les étapes suivantes :
1. Cliquez sur l'icône représentant des points de suspension, puis **sur Propriétés de la page**.
1. Dans le menu **Propriétés** de droite, choisissez l'icône en forme de crayon pour modifier le nom.
1. Entrez **FileList** et appuyez sur **Entrée**.
1. Répétez les étapes précédentes pour mettre à jour les deuxième et troisième pages comme suit :
+ Renommez **Page2** en. **UploadFile**
+ Renommez **Page3** en. **FailUpload**
À présent, votre application doit comporter trois pages nommées et **FileList**UploadFile**FailUpload******, qui sont affichées dans le panneau **Pages** de gauche.
Ensuite, vous allez créer et configurer les automatisations qui interagissent avec Amazon S3.
## Création et configuration d'automatisations
Créez les automatisations de votre application qui interagissent avec Amazon S3. Utilisez les procédures suivantes pour créer les automatisations suivantes :
+ Une automatisation **GetFiles** qui répertorie les objets de votre compartiment Amazon S3, qui seront utilisés pour remplir un composant de table.
+ Une automatisation **DeleteFile** qui supprime un objet de votre compartiment Amazon S3, qui sera utilisé pour ajouter un bouton de suppression à un composant de table.
+ Une automatisation **ViewFile** qui extrait un objet de votre compartiment Amazon S3 et l'affiche, qui sera utilisée pour afficher plus de détails sur un seul objet sélectionné dans un composant de table.
### Créez une `getFiles` automatisation
Créez une automatisation qui listera les fichiers dans un compartiment Amazon S3 spécifié.
1. Choisissez l'onglet **Automatisations** en haut du canevas.
1. Choisissez **\$1 Ajouter une automatisation**.
1. Dans le panneau de droite, sélectionnez **Propriétés**.
1. Mettez à jour le nom de l'automatisation en choisissant l'icône en forme de crayon. Entrez **getFiles** et appuyez sur **Entrée**.
1. Ajoutez une action **Répertorier les objets** en effectuant les étapes suivantes :
1. Dans le panneau de droite, sélectionnez **Actions**.
1. Choisissez **Lister les objets** pour ajouter une action. L'action doit être nommée`ListObjects1`.
1. Configurez l'action en effectuant les étapes suivantes :
1. Choisissez l'action dans le canevas pour ouvrir le menu **Propriétés** de droite.
1. Pour **Connector**, choisissez le connecteur Amazon S3 que vous avez créé à partir des prérequis.
1. Dans **Configuration**, entrez le texte suivant, en le *bucket\$1name* remplaçant par le bucket que vous avez créé dans les conditions préalables :
```
{
"Bucket": "bucket_name",
"Prefix": ""
}
```
**Note**
Vous pouvez utiliser le `Prefix` champ pour limiter la réponse aux objets qui commencent par la chaîne spécifiée.
1. Le résultat de cette automatisation sera utilisé pour remplir un composant de table avec des objets provenant de votre compartiment Amazon S3. Cependant, par défaut, les automatisations ne créent pas de sorties. Configurez l'automatisation pour créer une sortie d'automatisation en effectuant les étapes suivantes :
1. Dans la barre de navigation de gauche, choisissez l'automatisation **GetFiles**.
1. Dans le menu **Propriétés** de droite, dans **Sortie automatique**, choisissez **\$1 Ajouter une sortie**.
1. Pour **Sortie**, entrez**\$1\$1results.ListObjects1.Contents\$1\$1**. Cette expression renvoie le contenu de l'action et peut désormais être utilisée pour remplir un composant de table.
### Créez une `deleteFile` automatisation
Créez une automatisation qui supprime un objet d'un compartiment Amazon S3 spécifié.
1. Dans le panneau **Automatisations** de gauche, choisissez **\$1** Ajouter.
1. Choisissez **\$1 Ajouter une automatisation**.
1. Dans le panneau de droite, sélectionnez **Propriétés**.
1. Mettez à jour le nom de l'automatisation en choisissant l'icône en forme de crayon. Entrez **deleteFile** et appuyez sur **Entrée**.
1. Ajoutez un paramètre d'automatisation, utilisé pour transmettre des données à une automatisation, en effectuant les étapes suivantes :
1. Dans le menu **Propriétés** de droite, dans **Paramètres d'automatisation**, choisissez **\$1 Ajouter**.
1. Cliquez sur l'icône en forme de crayon pour modifier le paramètre d'automatisation. Mettez à jour le nom du paramètre **fileName** et appuyez sur **Entrée**.
1. Ajoutez une action **Supprimer l'objet** en effectuant les étapes suivantes :
1. Dans le panneau de droite, sélectionnez **Actions**.
1. Choisissez **Supprimer l'objet** pour ajouter une action. L'action doit être nommée`DeleteObject1`.
1. Configurez l'action en effectuant les étapes suivantes :
1. Choisissez l'action dans le canevas pour ouvrir le menu **Propriétés** de droite.
1. Pour **Connector**, choisissez le connecteur Amazon S3 que vous avez créé à partir des prérequis.
1. Dans **Configuration**, entrez le texte suivant, en le *bucket\$1name* remplaçant par le bucket que vous avez créé dans les conditions préalables :
```
{
"Bucket": "bucket_name",
"Key": params.fileName
}
```
### Créez une `viewFile` automatisation
Créez une automatisation qui récupère un seul objet d'un compartiment Amazon S3 spécifié. Plus tard, vous configurerez cette automatisation avec un composant d'affichage de fichiers pour afficher l'objet.
1. Dans le panneau **Automatisations** de gauche, choisissez **\$1** Ajouter.
1. Choisissez **\$1 Ajouter une automatisation**.
1. Dans le panneau de droite, sélectionnez **Propriétés**.
1. Mettez à jour le nom de l'automatisation en choisissant l'icône en forme de crayon. Entrez **viewFile** et appuyez sur **Entrée**.
1. Ajoutez un paramètre d'automatisation, utilisé pour transmettre des données à une automatisation, en effectuant les étapes suivantes :
1. Dans le menu **Propriétés** de droite, dans **Paramètres d'automatisation**, choisissez **\$1 Ajouter**.
1. Cliquez sur l'icône en forme de crayon pour modifier le paramètre d'automatisation. Mettez à jour le nom du paramètre **fileName** et appuyez sur **Entrée**.
1. Ajoutez une action **Obtenir un objet** en effectuant les étapes suivantes :
1. Dans le panneau de droite, sélectionnez **Actions**.
1. Choisissez **Obtenir un objet** pour ajouter une action. L'action doit être nommée`GetObject1`.
1. Configurez l'action en effectuant les étapes suivantes :
1. Choisissez l'action dans le canevas pour ouvrir le menu **Propriétés** de droite.
1. Pour **Connector**, choisissez le connecteur Amazon S3 que vous avez créé à partir des prérequis.
1. Dans **Configuration**, entrez le texte suivant, en le *bucket\$1name* remplaçant par le bucket que vous avez créé dans les conditions préalables :
```
{
"Bucket": "bucket_name",
"Key": params.fileName
}
```
1. Par défaut, les automatisations ne créent pas de sorties. Configurez l'automatisation pour créer une sortie d'automatisation en effectuant les étapes suivantes :
1. Dans la barre de navigation de gauche, choisissez l'automatisation **ViewFile**.
1. Dans le menu **Propriétés** de droite, dans **Sortie automatique**, choisissez **\$1 Ajouter une sortie**.
1. Pour **Sortie**, entrez**\$1\$1results.GetObject1.Body.transformToWebStream()\$1\$1**. Cette expression renvoie le contenu de l'action.
**Note**
Vous pouvez lire la réponse de `S3 GetObject` l'une des manières suivantes :
`transformToWebStream`: Renvoie un flux qui doit être consommé pour récupérer les données. Si elle est utilisée comme sortie automatique, l'automatisation gère cela et la sortie peut être utilisée comme source de données d'un composant de visionneuse d'images ou de PDF. Il peut également être utilisé comme entrée pour une autre opération, telle que`S3 PutObject`.
`transformToString`: renvoie les données brutes de l'automatisation et doit être utilisé dans une JavaScript action si vos fichiers contiennent du texte, tel que des données JSON. Doit être attendu, par exemple : `await results.GetObject1.Body.transformToString();`
`transformToByteArray`: Renvoie un tableau d'entiers non signés de 8 bits. Cette réponse sert de tableau d'octets, qui permet le stockage et la manipulation de données binaires. Doit être attendu, par exemple : `await results.GetObject1.Body.transformToByteArray();`
Vous allez ensuite ajouter des composants aux pages que vous avez créées précédemment et les configurer avec vos automatisations afin que les utilisateurs puissent utiliser votre application pour afficher et supprimer des fichiers.
## Ajouter et configurer des composants de page
Maintenant que vous avez créé les automatisations qui définissent la logique métier et les fonctionnalités de votre application, vous allez créer des composants et les connecter tous les deux.
### Ajouter des composants à la **FileList**page
La **FileList**page que vous avez créée précédemment sera utilisée pour afficher la liste des fichiers du compartiment Amazon S3 configuré ainsi que des informations supplémentaires sur les fichiers sélectionnés dans la liste. Pour ce faire, vous devez effectuer les opérations suivantes :
1. Créez un composant de table pour afficher la liste des fichiers. Vous allez configurer les lignes de la table pour qu'elles soient remplies avec le résultat de l'automatisation **GetFiles** que vous avez créée précédemment.
1. Créez un composant de visionnage de PDF pour afficher un seul PDF. Vous allez configurer le composant pour afficher un fichier sélectionné dans le tableau, à l'aide de l'automatisation **ViewFile** que vous avez créée précédemment pour récupérer le fichier depuis votre bucket.
**Pour ajouter des composants à la **FileList**page**
1. Choisissez l'onglet **Pages** en haut du canevas.
1. Dans le panneau **Pages** de gauche, sélectionnez la **FileList**page.
1. Sur la page **Composants** de droite, recherchez le composant **Table** et faites-le glisser vers le centre du canevas.
1. Choisissez le composant de tableau que vous venez d'ajouter à la page.
1. **Dans le menu **Propriétés** de droite, choisissez le menu déroulant **Source** et sélectionnez Automatisation.**
1. Choisissez le menu déroulant **Automation** et sélectionnez l'automatisation **GetFiles**. Le tableau utilisera le résultat de l'automatisation **GetFiles** comme contenu.
1. Ajoutez une colonne à remplir avec le nom du fichier.
1. Dans le menu **Propriétés** de droite, à côté de **Colonnes**, choisissez **\$1 Ajouter**.
1. Cliquez sur l'icône en forme de flèche à droite de la **colonne 1** qui vient d'être ajoutée.
1. Pour **Libellé de colonne**, renommez la colonne en**Filename**.
1. Pour le champ **Valeur**, saisissez **\$1\$1currentRow.Key\$1\$1**.
1. Cliquez sur l'icône en forme de flèche en haut du panneau pour revenir au panneau principal **des propriétés**.
1. Ajoutez une action de tableau pour supprimer le fichier d'une ligne.
1. Dans le menu **Propriétés** de droite, à côté de **Actions**, choisissez **\$1 Ajouter**.
1. Dans **Actions**, renommez **Button** en. **Delete**
1. Cliquez sur l'icône en forme de flèche située à droite de l'action **Supprimer** qui vient d'être renommée.
1. Dans **Au clic**, choisissez **\$1 Ajouter une action**, puis choisissez **Invoke automation**.
1. Choisissez l'action qui a été ajoutée pour la configurer.
1. Pour **Nom de l’action**, saisissez **DeleteRecord**.
1. Dans **Invoke automation**, sélectionnez**deleteFile**.
1. Dans la zone de texte des paramètres, entrez**\$1\$1currentRow.Key\$1\$1**.
1. Pour le champ **Valeur**, saisissez **\$1\$1currentRow.Key\$1\$1**.
1. Dans le panneau de droite, choisissez **Composants** pour afficher le menu des composants. Deux options s'offrent à vous pour afficher les fichiers :
+ Une **visionneuse d'images** pour afficher les fichiers avec une `.jpg` extension `.png``.jpeg`, ou.
+ Un composant de **visionnage de PDF** permettant de visualiser des fichiers PDF.
Dans ce didacticiel, vous allez ajouter et configurer le composant de **visualisation de PDF**.
1. Ajoutez le composant de **visionnage de PDF**.
1. Sur la page **Composants** de droite, recherchez le composant du **lecteur PDF** et faites-le glisser vers le canevas, sous le composant du tableau.
1. Choisissez le composant de **visionnage de PDF** qui vient d'être ajouté.
1. **Dans le menu **Propriétés** de droite, choisissez le menu déroulant **Source** et sélectionnez Automatisation.**
1. Choisissez le menu déroulant **Automation** et sélectionnez l'automatisation **ViewFile**. Le tableau utilisera la sortie de l'automatisation **ViewFile** comme contenu.
1. Dans la zone de texte des paramètres, entrez**\$1\$1ui.table1.selectedRow["Filename"]\$1\$1**.
1. Dans le panneau de droite, il y a également un champ **Nom de fichier**. La valeur de ce champ est utilisée comme en-tête pour le composant de visualisation de PDF. Entrez le même texte qu'à l'étape précédente : **\$1\$1ui.table1.selectedRow["Filename"]\$1\$1**
### Ajouter des composants à la **UploadFile**page
La **UploadFile**page contiendra un sélecteur de fichier qui pourra être utilisé pour sélectionner et charger un fichier dans le compartiment Amazon S3 configuré. Vous allez ajouter le composant de **téléchargement S3** à la page, que les utilisateurs pourront utiliser pour sélectionner et télécharger un fichier.
1. Dans le panneau **Pages** de gauche, sélectionnez la **UploadFile**page.
1. Sur la page **Composants** de droite, recherchez le composant de **téléchargement S3** et faites-le glisser vers le centre du canevas.
1. Choisissez le composant de téléchargement S3 que vous venez d'ajouter à la page.
1. Dans le menu **Propriétés** de droite, configurez le composant :
1. Dans la liste déroulante **Connector**, sélectionnez le connecteur Amazon S3 créé dans les conditions requises.
1. Pour **Bucket**, entrez le nom de votre compartiment Amazon S3.
1. Dans le **champ Nom du fichier**, entrez**\$1\$1ui.s3Upload1.files[0]?.nameWithExtension\$1\$1**.
1. Pour **Taille maximale du fichier**, entrez **5** dans la zone de texte et assurez-vous qu'elle **MB** est sélectionnée dans le menu déroulant.
1. Dans la section **Déclencheurs**, ajoutez des actions qui s'exécutent après un téléchargement réussi ou non en effectuant les étapes suivantes :
Pour ajouter une action qui s'exécute une fois les chargements réussis, procédez comme suit :
1. Dans **En cas de succès**, choisissez **\$1 Ajouter une action**, puis sélectionnez **Naviguer**.
1. Choisissez l'action qui a été ajoutée pour la configurer.
1. Pour le **type de navigation**, choisissez **Page**.
1. Pour **Naviguer vers**, choisissez**FileList**.
1. Cliquez sur l'icône en forme de flèche en haut du panneau pour revenir au panneau principal **des propriétés**.
Pour ajouter une action qui s'exécute après un téléchargement infructueux, procédez comme suit :
1. Dans **En cas d'échec**, choisissez **\$1 Ajouter une action**, puis sélectionnez **Naviguer**.
1. Choisissez l'action qui a été ajoutée pour la configurer.
1. Pour le **type de navigation**, choisissez **Page**.
1. Pour **Naviguer vers**, choisissez**FailUpload**.
1. Cliquez sur l'icône en forme de flèche en haut du panneau pour revenir au panneau principal **des propriétés**.
### Ajouter des composants à la **FailUpload**page
La **FailUpload**page est une page simple contenant une zone de texte qui informe les utilisateurs que leur téléchargement a échoué.
1. Dans le panneau **Pages** de gauche, sélectionnez la **FailUpload**page.
1. Sur la page **Composants** de droite, recherchez le composant **Texte** et faites-le glisser vers le centre du canevas.
1. Choisissez le composant de texte que vous venez d'ajouter à la page.
1. Dans le menu **Propriétés** de droite, dans **Valeur**, entrez**Failed to upload, try again**.
## Mettez à jour les paramètres de sécurité de votre application
Chaque application d'App Studio possède des paramètres de sécurité du contenu que vous pouvez utiliser pour restreindre les médias ou les ressources externes, ou les domaines vers lesquels vous pouvez télécharger des objets dans Amazon S3. Le paramètre par défaut est de bloquer tous les domaines. Pour charger des objets vers Amazon S3 depuis votre application, vous devez mettre à jour le paramètre afin d'autoriser les domaines vers lesquels vous souhaitez télécharger des objets.
**Pour autoriser les domaines à télécharger des objets sur Amazon S3**
1. Choisissez l'onglet **Paramètres de l'application**.
1. Choisissez l'onglet **Paramètres de sécurité du contenu**.
1. Pour **Connect source**, choisissez **Autoriser toutes les connexions**.
1. Choisissez **Enregistrer**.
## Prochaines étapes : prévisualiser et publier l'application à des fins de test
L'application est maintenant prête à être testée. Pour plus d'informations sur la prévisualisation et la publication d'applications, consultez[Prévisualisation, publication et partage d'applications](applications-preview-publish-share.md).
# Invocation de fonctions Lambda dans une application App Studio
Ce didacticiel explique comment connecter App Studio à Lambda et appeler des fonctions Lambda depuis vos applications.
## Conditions préalables
Ce guide part du principe que vous avez rempli les conditions préalables suivantes :
1. Création d'une application App Studio. Si vous n'en avez pas, vous pouvez créer une application vide à utiliser dans le didacticiel. Pour de plus amples informations, veuillez consulter [Création d’une application](applications-create.md).
**Note**
Bien que vous n'ayez pas besoin d'une fonction Lambda pour suivre ce didacticiel et apprendre à la configurer, il peut être utile d'en avoir une pour vous assurer que vous avez correctement configuré l'application. [Ce didacticiel ne contient aucune information sur la création de fonctions Lambda. Pour plus d'informations, consultez le manuel du AWS Lambda développeur.](https://docs.aws.amazon.com/lambda/latest/dg/)
## Création d'un connecteur Lambda
Pour utiliser les fonctions Lambda dans votre application App Studio, vous devez utiliser un connecteur pour connecter App Studio à Lambda afin de permettre l'accès à vos fonctions. Vous devez être administrateur pour créer des connecteurs dans App Studio. Pour plus d'informations sur la création de connecteurs Lambda, notamment sur les étapes de création d'un connecteur Lambda, consultez. [Connect à AWS Lambda](connectors-lambda.md)
## Création et configuration d'une automatisation
Les automatisations sont utilisées pour définir la logique de votre application et sont composées d'actions. Pour appeler une fonction Lambda dans votre application, vous devez d'abord ajouter et configurer une action Invoke *Lambda* à une automatisation. Procédez comme suit pour créer une automatisation et y ajouter l'action *Invoke Lambda*.
1. Lorsque vous modifiez votre application, choisissez l'onglet **Automatisations**.
1. Choisissez **\$1 Ajouter une automatisation**.
1. Dans le menu **Actions** de droite, choisissez **Invoke Lambda** pour ajouter l'étape à votre automatisation.
1. Choisissez la nouvelle étape Lambda dans le canevas pour afficher et configurer ses propriétés.
1. Dans le menu **Propriétés** de droite, configurez l'étape en effectuant les étapes suivantes :
1. Dans **Connector**, sélectionnez le connecteur créé pour connecter App Studio à vos fonctions Lambda.
1. Dans **Nom de la fonction**, entrez le nom de votre fonction Lambda.
1. Dans **Événement de fonction**, entrez l'événement à transmettre à la fonction Lambda. Certains exemples de cas d'utilisation courants sont fournis dans la liste suivante :
+ Transmission de la valeur d'un paramètre d'automatisation, tel qu'un nom de fichier ou une autre chaîne : `varName: params.paramName`
+ Transmission du résultat d'une action précédente : `varName: results.actionName1.data[0].fieldName`
+ Si vous ajoutez une action *Invoke Lambda* dans une action *Loop*, vous pouvez envoyer des champs à partir de chaque élément itéré de la même manière que des paramètres : `varName: currentItem.fieldName`
1. Le champ **de sortie** simulée peut être utilisé pour fournir une sortie fictive afin de tester l'application lors de la prévisualisation, lorsque les connecteurs ne sont pas actifs.
## Configuration d'un élément d'interface utilisateur pour exécuter l'automatisation
Maintenant que vous disposez d'une automatisation configurée avec une action pour appeler votre fonction Lambda, vous pouvez configurer un élément d'interface utilisateur pour exécuter l'automatisation. Dans ce didacticiel, vous allez créer un bouton qui exécute l'automatisation lorsque vous cliquez dessus.
**Astuce**
Vous pouvez également exécuter des automatisations à partir d'autres automatismes à l'aide de l'action d'*automatisation Invoke*.
**Pour exécuter votre automatisation à partir d'un bouton**
1. Lorsque vous modifiez votre application, choisissez l'onglet **Pages**.
1. Dans le menu de droite, choisissez le composant **Bouton** pour ajouter un bouton à la page.
1. Cliquez sur le nouveau bouton pour le configurer.
1. Dans le menu **Propriétés** de droite, dans **Déclencheurs**, choisissez **\$1 Ajouter**, puis choisissez **Invoke automation**.
1. Choisissez le nouveau déclencheur d'appel automatique pour le configurer.
1. Dans **Invoke automation**, sélectionnez l'automatisation qui appelle votre fonction Lambda et configurez les paramètres que vous souhaitez envoyer à l'automatisation.
Désormais, tout utilisateur qui choisit ce bouton dans votre application entraînera l'exécution de l'automatisation configurée.
## Prochaines étapes : prévisualiser et publier l'application à des fins de test
Votre application est maintenant prête à être testée. Lorsque vous prévisualisez votre application dans l'environnement de développement, les connecteurs ne sont pas actifs. Vous ne pouvez donc pas tester l'automatisation lors de la prévisualisation, car elle utilise un connecteur pour se connecter. AWS Lambda Pour tester les fonctionnalités de votre application qui dépendent des connecteurs, vous devez publier l'application dans l'environnement de test. Pour plus d'informations sur la prévisualisation et la publication d'applications, consultez[Prévisualisation, publication et partage d'applications](applications-preview-publish-share.md).