本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。

# 使用组件和自动化与 Amazon 简单存储服务交互
<a name="automations-s3"></a>

您可以从 App Studio 应用程序中调用各种 Amazon S3 操作。例如，您可以创建一个简单的管理面板来管理您的用户和订单，并显示来自 Amazon S3 的媒体。虽然您可以使用调用操作调用任何 Amazon S3 AWS操作，但您可以将四个专**用** Amazon S3 操作添加到应用程序的自动化中，以便对 Amazon S3 存储桶和对象执行常见操作。这四个动作及其操作如下：
+ **放置对象**：使用`Amazon S3 PutObject`操作将对象添加到 Amazon S3 存储桶。
+ **获取对象**：使用`Amazon S3 GetObject`操作从 Amazon S3 存储桶中检索对象。
+ **列出对象**：使用`Amazon S3 ListObjects`操作列出 Amazon S3 存储桶中的对象。
+ **删除对象**：使用`Amazon S3 DeleteObject`操作从 Amazon S3 存储桶中删除对象。

除了操作之外，还有一个 **S3 上传**组件，您可以将其添加到应用程序的页面中。用户可以使用此组件选择要上传的文件，该组件调用将文件上传`Amazon S3 PutObject`到配置的存储桶和文件夹。本教程将使用此组件代替独立的 Pu **t Object** 自动化操作。（独立操作应用于更复杂的场景，这些场景涉及在上传之前或之后要执行的额外逻辑或操作。）

## 先决条件
<a name="automations-s3-prerequisites"></a>

本指南假设您已完成以下先决条件：

1. 创建并配置了亚马逊 S3 存储桶、IAM 角色和策略以及亚马逊 S3 连接器，以便成功将 Amazon S3 与 App Studio 集成。要创建连接器，必须具有管理员角色。有关更多信息，请参阅 [连接到亚马逊简单存储服务 (Amazon S3) Service](connectors-s3.md)。

## 创建一个空的应用程序
<a name="automations-s3-create-app"></a>

执行以下步骤，创建一个要在本指南中使用的空应用程序。

**创建空应用程序**

1. 在导航窗格中，选择**我的应用程序**。

1. 选择 **\+ 创建应用程序**。

1. 在 “**创建应用程序**” 对话框中，为应用程序命名，选择 “**从头开始**”，然后选择 “**下一步**”。

1. 在 “**连接现有数据**” 对话框中，选择 “**跳过**” 以创建应用程序。

1. 选择 **“编辑应用程序”**，进入新应用程序的画布，您可以在其中使用组件、自动化和数据来配置应用程序的外观和功能。

## 创建页面
<a name="automations-s3-create-pages"></a>

在应用程序中创建三个页面以收集或显示信息。

**创建页面**

1. 如有必要，请选择画布顶部的 “**页面**” 选项卡。

1. 在左侧导航栏中，有一个使用您的应用程序创建的页面。选择 “**\+ 添加**” 两次可再创建两个页面。导航窗格总共应显示三个页面。

1. 通过执行以下步骤更新 **Page1** 页面的名称：

   1. 选择省略号图标并选择**页面属性**。

   1. 在右侧的 “**属性**” 菜单中，选择铅笔图标以编辑名称。

   1. 输入 **FileList**，键入按 **Enter**。

1. 重复前面的步骤更新第二页和第三页，如下所示：
   + 将 **Page2** 重命名为。**UploadFile**
   + 将 **Page3** 重命名为。**FailUpload**

现在，您的应用程序应该有三个名为**FileList**、和**UploadFile**、的页面 **FailUpload**，它们显示在左侧的 “**页面**” 面板中。

接下来，您将创建和配置与 Amazon S3 交互的自动化。

## 创建和配置自动化
<a name="automations-s3-automations"></a>

创建与 Amazon S3 交互的应用程序的自动化程序。使用以下过程创建以下自动化：
+ **GetFiles** 自动化，用于列出您的 Amazon S3 存储桶中的对象，这些对象将用于填充表格组件。
+ **DeleteFile** 自动化，用于从您的 Amazon S3 存储桶中删除对象，该存储桶将用于向表格组件添加删除按钮。
+ **ViewFile** 自动化，可从您的 Amazon S3 存储桶中获取对象并显示该对象，用于显示有关从表格组件中选择的单个对象的更多详细信息。

### 创建`getFiles`自动化
<a name="automations-s3-get-files"></a>

创建自动化，列出指定 Amazon S3 存储桶中的文件。

1. 选择画布顶部的 “**自动化**” 选项卡。

1. 选择 **\+ 添加自动化**。

1. 在右侧面板中，选择 “**属性**”。

1. 通过选择铅笔图标来更新自动化名称。输入 **getFiles**，键入按 **Enter**。

1. 通过执行以下步骤添加 “**列出对象**” 操作：

   1. 在右侧面板中，选择**动作**。

   1. 选择 “**列出对象**” 以添加动作。该动作应命名`ListObjects1`。

1. 通过执行以下步骤来配置操作：

   1. 从画布中选择操作以打开右侧的 “**属性**” 菜单。

   1. 对于**连接器**，请选择您根据先决条件创建的 Amazon S3 连接器。

   1. 在**配置**中，输入以下文本，{{bucket\_name}}替换为您在先决条件中创建的存储桶：

      ```
      {
        "Bucket": "{{bucket_name}}",
        "Prefix": ""
      }
      ```
**注意**  
您可以使用该`Prefix`字段将响应限制为以指定字符串开头的对象。

1. 此自动化的输出将用于使用您的 Amazon S3 存储桶中的对象填充表组件。但是，默认情况下，自动化不会创建输出。通过执行以下步骤配置自动化以创建自动化输出：

   1. 在左侧导航栏中，选择 **GetFiles 自动化**。

   1. 在右侧的 “**属性**” 菜单上，在 “**自动输出**” 中，选择 “**\+ 添加输出**”。

   1. 在 “**输出**” 中，输入**\{\{results.ListObjects1.Contents\}\}**。此表达式返回操作的内容，现在可用于填充表格组件。

### 创建`deleteFile`自动化
<a name="automations-s3-delete-file"></a>

创建自动化，从指定的 Amazon S3 存储桶中删除对象。

1. 在左侧的 “**自动化**” 面板中，选择 **\+** 添加。

1. 选择 **\+ 添加自动化**。

1. 在右侧面板中，选择 “**属性**”。

1. 通过选择铅笔图标来更新自动化名称。输入 **deleteFile**，键入按 **Enter**。

1. 通过执行以下步骤，添加用于向自动化传递数据的自动化参数：

   1. 在右侧的 “**属性**” 菜单的 “**自动化参数**” 中，选择 **\+ 添加**。

   1. 选择铅笔图标编辑自动化参数。将参数名称更新为，**fileName**然后**按 Enter**。

1. 通过执行以下步骤添加 “**删除对象**” 操作：

   1. 在右侧面板中，选择**动作**。

   1. 选择 “**删除对象**” 以添加动作。该动作应命名`DeleteObject1`。

1. 通过执行以下步骤来配置操作：

   1. 从画布中选择操作以打开右侧的 “**属性**” 菜单。

   1. 对于**连接器**，请选择您根据先决条件创建的 Amazon S3 连接器。

   1. 在**配置**中，输入以下文本，{{bucket\_name}}替换为您在先决条件中创建的存储桶：

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

### 创建`viewFile`自动化
<a name="automations-s3-view-file"></a>

创建自动化，从指定的 Amazon S3 存储桶中检索单个对象。稍后，您将使用文件查看器组件来配置此自动化，以显示该对象。

1. 在左侧的 “**自动化**” 面板中，选择 **\+** 添加。

1. 选择 **\+ 添加自动化**。

1. 在右侧面板中，选择 “**属性**”。

1. 通过选择铅笔图标来更新自动化名称。输入 **viewFile**，键入按 **Enter**。

1. 通过执行以下步骤，添加用于向自动化传递数据的自动化参数：

   1. 在右侧的 “**属性**” 菜单的 “**自动化参数**” 中，选择 **\+ 添加**。

   1. 选择铅笔图标编辑自动化参数。将参数名称更新为，**fileName**然后**按 Enter**。

1. 通过执行以下步骤添加 “**获取对象**” 操作：

   1. 在右侧面板中，选择**动作**。

   1. 选择 “**获取对象**” 以添加动作。该动作应命名`GetObject1`。

1. 通过执行以下步骤来配置操作：

   1. 从画布中选择操作以打开右侧的 “**属性**” 菜单。

   1. 对于**连接器**，请选择您根据先决条件创建的 Amazon S3 连接器。

   1. 在**配置**中，输入以下文本，{{bucket\_name}}替换为您在先决条件中创建的存储桶：

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

1. 默认情况下，自动化不会创建输出。通过执行以下步骤配置自动化以创建自动化输出：

   1. 在左侧导航栏中，选择 **ViewFile 自动化**。

   1. 在右侧的 “**属性**” 菜单上，在 “**自动输出**” 中，选择 “**\+ 添加输出**”。

   1. 在 “**输出**” 中，输入**\{\{results.GetObject1.Body.transformToWebStream()\}\}**。此表达式返回操作的内容。
**注意**  
您可以通过以下方式阅读`S3 GetObject`的回复：  
`transformToWebStream`：返回一个流，必须使用该流才能检索数据。如果用作自动化输出，则自动化会处理此问题，并且输出可用作图像或 PDF 查看器组件的数据源。它也可以用作其他操作的输入，例如`S3 PutObject`。
`transformToString`：返回自动化的原始数据，如果您的文件包含文本内容（例如 JSON 数据），则应在 JavaScript 操作中使用该数据。必须等待，例如：`await results.GetObject1.Body.transformToString();`
`transformToByteArray`: 返回一个 8 位无符号整数的数组。此响应用于字节数组，该数组允许存储和操作二进制数据。必须等待，例如：`await results.GetObject1.Body.transformToByteArray();`

接下来，您将向之前创建的页面添加组件，并使用您的自动化功能对其进行配置，以便用户可以使用您的应用程序查看和删除文件。

## 添加和配置页面组件
<a name="automations-s3-components"></a>

现在，您已经创建了定义应用程序业务逻辑和功能的自动化，接下来您将创建组件并将它们连接起来。

### 向**FileList**页面添加组件
<a name="automations-s3-components-filelist-page"></a>

您之前创建的**FileList**页面将用于显示已配置的 Amazon S3 存储桶中的文件列表以及有关从列表中选择的任何文件的更多详细信息。为此，您将执行以下操作：

1. 创建表格组件以显示文件列表。您需要将表的行配置为使用之前创建的 **getFiles** 自动化的输出进行填充。

1. 创建 PDF 查看器组件以显示单个 PDF。您将使用之前创建的 ViewFile 自动化功能将组件配置为**查看从表中选择的文件**，从存储桶中提取文件。

**向**FileList**页面添加组件**

1. 选择画布顶部的 “**页面**” 选项卡。

1. 在左侧的 “**页面**” 面板中，选择**FileList**页面。

1. 在右侧的 “**组件**” 页面上，找到**表格**组件并将其拖动到画布的中央。

1. 选择您刚刚添加到页面的表格组件。

1. 在右侧的 “**属性**” 菜单上，选择 “**来源**” 下拉列表并选择 “**自动化**”。

1. 选择 “**自动化**” 下拉列表并选择 **GetFiles** 自动化。该表将使用 **getFiles** 自动化的输出作为其内容。

1. 添加一列，用文件名填充。

   1. 在右侧的 “**属性**” 菜单上，选择 “**列**” 旁边，选择 “**\+ 添加**”。

   1. 选择刚刚添加的 **Column1** 列右侧的箭头图标。

   1. 对于**列标签**，将列重命名为**Filename**。

   1. 对于**值**，请输入 **\{\{currentRow.Key\}\}**。

   1. 选择面板顶部的箭头图标可返回主**属性**面板。

1. 添加表格操作以连续删除文件。

   1. 在右侧的 “**属性**” 菜单上，选择 “**操作**” 旁边的 “**\+ 添加**”。

   1. 在 “**操作**” 中，将 **“按钮”** 重命名为**Delete**。

   1. 选择刚刚重命名的 “**删除”** 操作右侧的箭头图标。

   1. 在 **“点击时”** 中，选择 “**\+ 添加操作**”，然后选择 “**调用自动化**”。

   1. 选择为对其进行配置而添加的操作。

   1. 对于**操作名称**，输入 **DeleteRecord**。

   1. 在 “**调用自动化**” 中，选择**deleteFile**。

   1. 在参数文本框中，输入**\{\{currentRow.Key\}\}**。

   1. 对于**值**，请输入 **\{\{currentRow.Key\}\}**。

1. 在右侧面板中，选择 “**组件**” 以查看组件菜单。显示文件有两种选择：
   + **图像查看器**，用于查看`.jpg`扩展名为`.png``.jpeg`、或的文件。
   + 用于查看 **PDF 文件的 PDF 查看器**组件。

   在本教程中，您将添加和配置 **PDF 查看器**组件。

1. 添加 **PDF 查看器**组件。

   1. 在右侧的 “**组件**” 页面上，找到 **PDF 查看器**组件，然后将其拖到表格组件下方的画布上。

   1. 选择刚刚添加的 **PDF 查看器**组件。

   1. 在右侧的 “**属性**” 菜单上，选择 “**来源**” 下拉列表并选择 “**自动化**”。

   1. 选择 “**自动化**” 下拉列表并选择 **ViewFile** 自动化。该表将使用 **ViewFile** 自动化的输出作为其内容。

   1. 在参数文本框中，输入**\{\{ui.table1.selectedRow["Filename"]\}\}**。

   1. 在右侧面板中，还有一个 “**文件名” 字**段。此字段的值用作 PDF 查看器组件的标题。输入与上一步相同的文本:**\{\{ui.table1.selectedRow["Filename"]\}\}**.

### 向**UploadFile**页面添加组件
<a name="automations-s3-components-uploadfile-page"></a>

该**UploadFile**页面将包含一个文件选择器，可用于选择文件并将其上传到已配置的 Amazon S3 存储桶。您将在页面中添加 **S3 上传**组件，用户可以使用该组件来选择和上传文件。

1. 在左侧的 “**页面**” 面板中，选择**UploadFile**页面。

1. 在右侧的 “**组件**” 页面上，找**到 S3 上传**组件并将其拖到画布中央。

1. 选择您刚刚添加到页面的 S3 上传组件。

1. 在右侧的 “**属性**” 菜单上，配置组件：

   1. 在**连接器**下拉列表中，选择先决条件中创建的 Amazon S3 连接器。

   1. 在**存储桶中**，输入您的 Amazon S3 存储桶的名称。

   1. 对于**文件名**，输入 **\{\{ui.s3Upload1.files[0]?.nameWithExtension\}\}**。

   1. 对于 “**最大文件大小**”，**5**在文本框中输入，并确保**MB**在下拉列表中将其选中。

   1. 在 “**触发器**” 部分，通过执行以下步骤添加在上传成功或失败后运行的操作：

      要添加在成功上传后运行的操作，请执行以下操作：

      1. **在 “成功**时” 中，选择 “**\+ 添加操作**”，然后选择 “**导航**”。

      1. 选择为对其进行配置而添加的操作。

      1. 对于**导航类型**，请选择**页面**。

      1. **在 “导航到”** 中，选择**FileList**。

      1. 选择面板顶部的箭头图标可返回主**属性**面板。

      要添加在上传失败后运行的操作，请执行以下操作：

      1. **在 “失败**时” 中，选择 “**\+ 添加操作**”，然后选择 “**导航**”。

      1. 选择为对其进行配置而添加的操作。

      1. 对于**导航类型**，请选择**页面**。

      1. **在 “导航到”** 中，选择**FailUpload**。

      1. 选择面板顶部的箭头图标可返回主**属性**面板。

### 向**FailUpload**页面添加组件
<a name="automations-s3-components-failupload-page"></a>

该**FailUpload**页面是一个简单的页面，其中包含一个文本框，用于通知用户其上传失败。

1. 在左侧的 “**页面**” 面板中，选择**FailUpload**页面。

1. 在右侧的 “**组件**” 页面上，找到**文本**组件并将其拖动到画布的中央。

1. 选择您刚刚添加到页面的文本组件。

1. 在右侧的 “**属性**” 菜单上，在 “**值**” 中输入**Failed to upload, try again**。

## 更新您的应用程序安全设置
<a name="automations-s3-components-app-security-settings"></a>

App Studio 中的每个应用程序都有内容安全设置，您可以使用这些设置来限制外部媒体或资源，或者限制您可以向 Amazon S3 中的哪些域上传对象。默认设置是屏蔽所有域名。要从您的应用程序将对象上传到 Amazon S3，您必须更新设置以允许您要向其上传对象的域。

**允许域名将对象上传到 Amazon S3**

1. 选择**应用程序设置**选项卡。

1. 选择 “**内容安全设置**” 选项卡。

1. 对于 **Connect 来源**，选择 “**允许所有连接**”。

1. 选择**保存**。

## 后续步骤：预览并发布应用程序以供测试
<a name="automations-s3-preview-publish-test"></a>

该应用程序现已准备就绪，可以进行测试了。有关预览和发布应用程序的更多信息，请参阅[预览、发布和共享应用程序](applications-preview-publish-share.md)。