Interaction avec Amazon Simple Storage Service à l'aide de composants et d'automatisations

Pour créer une application vide

1. Dans le volet de navigation, sélectionnez Mes applications.

2. Choisissez + Créer une application.

3. Dans la boîte de dialogue Créer une application, donnez un nom à votre application, choisissez Repartir de zéro, puis cliquez sur Suivant.

4. Dans la boîte de dialogue Connexion aux données existantes, choisissez Ignorer pour créer l'application.

5. Choisissez Modifier l'application pour accéder au canevas de votre nouvelle application, où vous pouvez utiliser des composants, des automatisations et des données pour configurer l'apparence et les fonctions de votre application.

Pour créer des pages

1. Si nécessaire, choisissez l'onglet Pages en haut du canevas.

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

3. Mettez à jour le nom de la page Page1 en effectuant les étapes suivantes :

   1. Choisissez l'icône en forme d'ellipses et choisissez Propriétés de la page.

   2. Dans le menu Propriétés de droite, choisissez l'icône en forme de crayon pour modifier le nom.

   3. Entrez FileList et appuyez sur Entrée.

4. Répétez les étapes précédentes pour mettre à jour les deuxième et troisième pages comme suit :

   • Renommez la page 2 en. UploadFile

   • Renommez la page 3 en. FailUpload

1. Choisissez l'onglet Automatisations en haut du canevas.

2. Choisissez + Ajouter une automatisation.

3. Dans le panneau de droite, choisissez Propriétés.

4. Mettez à jour le nom de l'automatisation en choisissant l'icône en forme de crayon. Entrez getFiles et appuyez sur Entrée.

5. Ajoutez une action Lister les objets en effectuant les étapes suivantes :

   1. Dans le panneau de droite, choisissez Actions.

   2. Choisissez Lister les objets pour ajouter une action. L'action doit être nomméeListObjects1.

6. Configurez l'action en effectuant les étapes suivantes :

   1. Choisissez l'action dans le canevas pour ouvrir le menu Propriétés de droite.

   2. Pour Connector, choisissez le connecteur Amazon S3 que vous avez créé à partir des prérequis.

   3. Pour Configuration, entrez le texte suivant, en le bucket_name remplaçant par le compartiment que vous avez créé dans les prérequis :

      {
        "Bucket": "bucket_name",
        "Prefix": ""
      }

      Note

      Vous pouvez utiliser Prefix ce champ pour limiter la réponse aux objets commençant par la chaîne spécifiée.

7. 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 navigation de gauche, choisissez l'automatisation GetFiles.

   2. Dans le menu Propriétés de droite, dans Sortie automatique, choisissez + Ajouter une sortie.

   3. Dans le champ 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 tableau.

1. Dans le panneau Automatisations de gauche, choisissez + Ajouter.

2. Choisissez + Ajouter une automatisation.

3. Dans le panneau de droite, choisissez Propriétés.

4. Mettez à jour le nom de l'automatisation en choisissant l'icône en forme de crayon. Entrez deleteFile et appuyez sur Entrée.

5. Ajoutez un paramètre d'automatisation, utilisé pour transmettre des données à un automatisme, en effectuant les étapes suivantes :

   1. Dans le menu Propriétés de droite, dans Paramètres d'automatisation, choisissez + Ajouter.

   2. Cliquez sur l'icône en forme de crayon pour modifier le paramètre d'automatisation. Modifiez le nom du paramètre fileName et appuyez sur Entrée.

6. Ajoutez une action Supprimer l'objet en effectuant les étapes suivantes :

   1. Dans le panneau de droite, choisissez Actions.

   2. Choisissez Supprimer l'objet pour ajouter une action. L'action doit être nomméeDeleteObject1.

7. Configurez l'action en effectuant les étapes suivantes :

   1. Choisissez l'action dans le canevas pour ouvrir le menu Propriétés de droite.

   2. Pour Connector, choisissez le connecteur Amazon S3 que vous avez créé à partir des prérequis.

   3. Pour Configuration, entrez le texte suivant, en le bucket_name remplaçant par le compartiment que vous avez créé dans les prérequis :

      {
        "Bucket": "bucket_name",
        "Key": params.fileName
      }

1. Dans le panneau Automatisations de gauche, choisissez + Ajouter.

2. Choisissez + Ajouter une automatisation.

3. Dans le panneau de droite, choisissez Propriétés.

4. Mettez à jour le nom de l'automatisation en choisissant l'icône en forme de crayon. Entrez viewFile et appuyez sur Entrée.

5. Ajoutez un paramètre d'automatisation, utilisé pour transmettre des données à un automatisme, en effectuant les étapes suivantes :

   1. Dans le menu Propriétés de droite, dans Paramètres d'automatisation, choisissez + Ajouter.

   2. Cliquez sur l'icône en forme de crayon pour modifier le paramètre d'automatisation. Modifiez le nom du paramètre fileName et appuyez sur Entrée.

6. Ajoutez une action Obtenir un objet en effectuant les étapes suivantes :

   1. Dans le panneau de droite, choisissez Actions.

   2. Choisissez Obtenir un objet pour ajouter une action. L'action doit être nomméeGetObject1.

7. Configurez l'action en effectuant les étapes suivantes :

   1. Choisissez l'action dans le canevas pour ouvrir le menu Propriétés de droite.

   2. Pour Connector, choisissez le connecteur Amazon S3 que vous avez créé à partir des prérequis.

   3. Pour Configuration, entrez le texte suivant, en le bucket_name remplaçant par le compartiment que vous avez créé dans les prérequis :

      {
        "Bucket": "bucket_name",
        "Key": params.fileName
      }

8. 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 navigation de gauche, choisissez l'automatisation ViewFile.

   2. Dans le menu Propriétés de droite, dans Sortie automatique, choisissez + Ajouter une sortie.

   3. Dans le champ Sortie, entrez{{results.GetObject1.Body.transformToWebStream()}}. Cette expression renvoie le contenu de l'action.

      Note

      Vous pouvez lire la réponse de S3 GetObject de la manière suivante :

      • transformToWebStream: Renvoie un flux qui doit être consommé pour récupérer les données. Si elle est utilisée comme sortie d'automatisation, l'automatisation gère cela et la sortie peut être utilisée comme source de données d'un composant de visionnage d'image ou de PDF. Il peut également être utilisé comme entrée pour une autre opération, telle queS3 PutObject.

      • transformToString: renvoie les données brutes de l'automatisation et doit être utilisée dans une JavaScript action si vos fichiers contiennent du contenu textuel, tel que des données JSON. Il faut attendre, par exemple : await results.GetObject1.Body.transformToString();

      • transformToByteArray: Renvoie un tableau d'entiers non signés sur 8 bits. Cette réponse sert à créer un tableau d'octets, qui permet le stockage et la manipulation de données binaires. Il faut attendre, par exemple : await results.GetObject1.Body.transformToByteArray();

Pour ajouter des composants au FileList page

1. Choisissez l'onglet Pages en haut du canevas.

2. Dans le panneau Pages de gauche, choisissez la FileList page.

3. Sur la page Composants de droite, recherchez le composant Tableau et faites-le glisser vers le centre du canevas.

4. Choisissez le composant de tableau que vous venez d'ajouter à la page.

5. Dans le menu Propriétés de droite, choisissez la liste déroulante Source et sélectionnez Automatisation.

6. Choisissez la liste déroulante Automation et sélectionnez l'automatisation GetFiles. Le tableau utilisera la sortie de l'automatisation GetFiles comme contenu.

7. Ajoutez une colonne à remplir avec le nom du fichier.

   1. Dans le menu Propriétés de droite, à côté de Colonnes, choisissez + Ajouter.

   2. Choisissez l'icône en forme de flèche à droite de la colonne Colonne1 qui vient d'être ajoutée.

   3. Pour Libellé de colonne, renommez la colonne enFilename.

   4. Pour le champ Valeur, saisissez {{currentRow.Key}}.

   5. Cliquez sur l'icône en forme de flèche en haut du panneau pour revenir au panneau principal des propriétés.

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

   2. Dans Actions, renommez le bouton en. Delete

   3. Choisissez l'icône en forme de flèche à droite de l'action Supprimer qui vient d'être renommée.

   4. Dans En un clic, choisissez + Ajouter une action, puis choisissez Invoke automation.

   5. Choisissez l'action qui a été ajoutée pour la configurer.

   6. Pour Nom de l’action, saisissez DeleteRecord.

   7. Dans Invoke automation, sélectionnezdeleteFile.

   8. Dans la zone de texte du paramètre, entrez{{currentRow.Key}}.

   9. Pour le champ Valeur, saisissez {{currentRow.Key}}.

9. Dans le panneau de droite, choisissez Composants pour afficher le menu des composants. Deux options s'offrent à vous pour afficher les fichiers :

   • Visionneuse d'images permettant d'afficher les fichiers .png portant une .jpg extension.jpeg, ou.

   • Composant de visualisation de PDF permettant de visualiser des fichiers PDF.

   Dans ce didacticiel, vous allez ajouter et configurer le composant de visualisation de PDF.

10. Ajoutez le composant de visualisation de PDF.

    1. Sur la page Composants de droite, recherchez le composant du visualiseur PDF et faites-le glisser vers le canevas, en dessous du composant tableau.

    2. Choisissez le composant de visionneuse PDF qui vient d'être ajouté.

    3. Dans le menu Propriétés de droite, choisissez la liste déroulante Source et sélectionnez Automatisation.

    4. Choisissez la liste déroulante Automation et sélectionnez l'automatisation ViewFile. Le tableau utilisera la sortie de l'automatisation ViewFile comme contenu.

    5. Dans la zone de texte du paramètre, entrez{{ui.table1.selectedRow["Filename"]}}.

    6. Dans le panneau de droite, il existe également un champ Nom de fichier. La valeur de ce champ est utilisée comme en-tête pour le composant du visualiseur PDF. Entrez le même texte qu'à l'étape précédente :{{ui.table1.selectedRow["Filename"]}}.

1. Dans le panneau Pages de gauche, choisissez la UploadFile page.

2. Sur la page Composants de droite, recherchez le composant de téléchargement S3 et faites-le glisser vers le centre du canevas.

3. Choisissez le composant de téléchargement S3 que vous venez d'ajouter à la page.

4. Dans le menu Propriétés de droite, configurez le composant :

   1. Dans la liste déroulante Connector, sélectionnez le connecteur Amazon S3 qui a été créé dans les conditions requises.

   2. Pour Bucket, entrez le nom de votre bucket Amazon S3.

   3. Dans le champ Nom du fichier, entrez{{ui.s3Upload1.files[0]?.nameWithExtension}}.

   4. Pour Taille de fichier maximale, entrez 5 dans la zone de texte et assurez-vous que cette option MB est sélectionnée dans la liste déroulante.

   5. Dans la section Déclencheurs, ajoutez des actions qui s'exécutent après des chargements réussis ou non en effectuant les étapes suivantes :

      Pour ajouter une action qui s'exécute après des chargements réussis, procédez comme suit :

      1. Dans En cas de succès, choisissez + Ajouter une action et sélectionnez Naviguer.

      2. Choisissez l'action qui a été ajoutée pour la configurer.

      3. Pour Type de navigation, choisissez Page.

      4. Pour Naviguer vers, choisissezFileList.

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

      2. Choisissez l'action qui a été ajoutée pour la configurer.

      3. Pour Type de navigation, choisissez Page.

      4. Pour Naviguer vers, choisissezFailUpload.

      5. Cliquez sur l'icône en forme de flèche en haut du panneau pour revenir au panneau principal des propriétés.

1. Dans le panneau Pages de gauche, choisissez la FailUpload page.

2. Sur la page Composants de droite, recherchez le composant Texte et faites-le glisser vers le centre du canevas.

3. Choisissez le composant de texte que vous venez d'ajouter à la page.

4. Dans le menu Propriétés de droite, dans Valeur, entrezFailed to upload, try again.

Pour autoriser les domaines à charger des objets sur Amazon S3

1. Choisissez l'onglet Paramètres de l'application.

2. Choisissez l'onglet Paramètres de sécurité du contenu.

3. Pour Connecter la source, choisissez Autoriser toutes les connexions.

4. Choisissez Enregistrer.