使用组件和自动化与亚马逊简单存储服务进行交互

创建空应用程序

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

2. 选择 + 创建应用程序。

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

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

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

创建页面

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

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

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

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

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

   3. 输入 FileList，键入按 Enter。

4. 重复前面的步骤更新第二和第三页，如下所示：

   • 将 Page2 重命名为。UploadFile

   • 将 Page3 重命名为。FailUpload

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

2. 选择 + 添加自动化。

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

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

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

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

   2. 选择 “列出对象” 以添加操作。该操作应命名ListObjects1。

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

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

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

   3. 对于配置，输入以下文本，bucket_name替换为您在必备条件中创建的存储桶：

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

      注意

      您可以使用该Prefix字段限制对以指定字符串开头的对象的响应。

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

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

   2. 在右侧的 “属性” 菜单的 “自动化输出” 中，选择 + 添加输出。

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

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

2. 选择 + 添加自动化。

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

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

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

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

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

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

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

   2. 选择 “删除对象” 以添加操作。该操作应命名DeleteObject1。

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

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

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

   3. 对于配置，输入以下文本，bucket_name替换为您在必备条件中创建的存储桶：

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

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

2. 选择 + 添加自动化。

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

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

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

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

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

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

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

   2. 选择 “获取对象” 以添加操作。该操作应命名GetObject1。

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

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

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

   3. 对于配置，输入以下文本，bucket_name替换为您在必备条件中创建的存储桶：

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

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

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

   2. 在右侧的 “属性” 菜单的 “自动化输出” 中，选择 + 添加输出。

   3. 对于 “输出”，输入{{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();

将组件添加到 FileList page

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

2. 在左侧的页面面板中，选择FileList页面。

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

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

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

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

7. 添加一个用文件名填充的列。

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

   2. 选择刚刚添加的 C olumn1 列右侧的箭头图标。

   3. 对于列标签，将该列重命名为Filename。

   4. 对于值，请输入 {{currentRow.Key}}。

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

8. 添加表格操作以删除一行中的文件。

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

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

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

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

   5. 选择添加的操作来对其进行配置。

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

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

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

   9. 对于值，请输入 {{currentRow.Key}}。

9. 在右侧面板中，选择 “组件” 以查看组件菜单。显示文件有两种选择：

   • 图像查看器，用于查看.jpg扩展名为.png.jpeg、或的文件。

   • 用于查看 PDF 文件的 PDF 查看器组件。

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

10. 添加 PDF 查看器组件。

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

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

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

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

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

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

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

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

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

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

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

   2. 对于存储桶，输入您的 Amazon S3 存储桶的名称。

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

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

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

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

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

      2. 选择添加的操作来对其进行配置。

      3. 对于导航类型，选择页面。

      4. 对于 “导航到”，选择FileList。

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

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

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

      2. 选择添加的操作来对其进行配置。

      3. 对于导航类型，选择页面。

      4. 对于 “导航到”，选择FailUpload。

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

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

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

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

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

允许域将对象上传到 Amazon S3

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

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

3. 对于 “连接源”，选择 “允许所有连接” 。

4. 选择保存。