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.
# 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 **\+ Créer une application**.
1. Dans la boîte de dialogue **Créer une application**, nommez votre application, choisissez **Commencer à 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 **\+ 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 **\+ 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\_name}} 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 **\+ Ajouter une sortie**.
1. Pour **Sortie**, entrez**{{results.ListObjects1.Contents}}**. 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 **\+** Ajouter.
1. Choisissez **\+ 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 **\+ 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\_name}} 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 **\+** Ajouter.
1. Choisissez **\+ 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 **\+ 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\_name}} 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 **\+ Ajouter une sortie**.
1. Pour **Sortie**, entrez**{{results.GetObject1.Body.transformToWebStream()}}**. 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 visionnage 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 **\+ 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 **{{currentRow.Key}}**.
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 **\+ 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 **\+ 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**{{currentRow.Key}}**.
1. Pour le champ **Valeur**, saisissez **{{currentRow.Key}}**.
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**{{ui.table1.selectedRow["Filename"]}}**.
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 : **{{ui.table1.selectedRow["Filename"]}}**
### 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**{{ui.s3Upload1.files[0]?.nameWithExtension}}**.
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 **\+ 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 **\+ 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).