本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。
# 教程
**Topics**
+ [使用 Amazon Bedrock 构建人工智能文本摘要器应用程序](tutorial-conversational-bedrock.md)
+ [使用组件和自动化与 Amazon 简单存储服务交互](automations-s3.md)
+ [在 App Studio 应用程序中调用 Lambda 函数](tutorial-lambda.md)
# 使用 Amazon Bedrock 构建人工智能文本摘要器应用程序
在本教程中，您将在 App Studio 中构建一个应用程序，该应用程序使用 Amazon Bedrock 来提供最终用户输入的文本的简明摘要。该应用程序包含一个简单的用户界面，用户可以在其中输入他们想要摘要的任何文本。这可能是会议记录、文章内容、研究结果或任何其他文字信息。用户输入文本后，他们可以按下按钮将文本发送到 Amazon Bedrock，Amazon Bedrock 将使用 Claude 3 Sonnet 模型对其进行处理并返回摘要版本。
**Contents**
+ [先决条件](#tutorial-conversational-bedrock-prerequisites)
+ [步骤 1：创建和配置 IAM 角色和 App Studio 连接器](#tutorial-conversational-bedrock-steps-create-role-connector)
+ [步骤 2：创建应用程序](#tutorial-conversational-bedrock-steps-create-application)
+ [步骤 3：创建和配置自动化](#tutorial-conversational-bedrock-steps-create-automation)
+ [步骤 4：创建页面和组件](#tutorial-conversational-bedrock-steps-user-interface)
+ [重命名默认页面](#tutorial-conversational-bedrock-steps-user-interface-create-page)
+ [向页面添加组件](#tutorial-conversational-bedrock-steps-user-interface-add-components)
+ [配置页面组件](#tutorial-conversational-bedrock-steps-user-interface-configure-components)
+ [步骤 5：将应用程序发布到**测试**环境](#tutorial-conversational-bedrock-steps-publish)
+ [（可选）清理](#tutorial-conversational-bedrock-steps-cleanup)
## 先决条件
在开始之前，请查看并完成以下先决条件：
+ 访问 AWS App Studio。请注意，您必须具有管理员角色才能在本教程中创建连接器。
+ 可选：查看[AWS 应用工作室的概念](concepts.md)并熟悉 App Studio 的重要概念。[教程：从一个空的应用程序开始构建](getting-started-tutorial-empty.md)
## 步骤 1：创建和配置 IAM 角色和 App Studio 连接器
要让 App Studio 访问亚马逊 Bedrock 型号，您必须：
1. 启用要在应用程序中使用的 Amazon Bedrock 模型。在本教程中，您将使用 **Claude 3 Sonnet**，因此请确保启用该模型。
1. 创建具有相应的 Amazon Bedrock 权限的 IAM 角色。
1. 使用将在您的应用程序中使用的 IAM 角色创建 App Studio 连接器。
[Connect 到 Amazon Bedrock](connectors-bedrock.md)有关详细说明，请在按照步骤操作并创建连接器后返回本教程。
## 步骤 2：创建应用程序
使用以下步骤在 App Studio 中创建一个空应用程序，然后将其内置到文本摘要器应用程序中。
1. 登录 App Studio。
1. 导航到生成器中心，然后选择 **\$1 创建应用程序**。
1. 选择**从头开始**。
1. 在**应用程序名称**字段中，为您的应用程序提供一个名称，例如**Text Summarizer**。
1. 如果系统要求您选择数据源或连接器，请在本教程中选择 “**跳过**”。
1. 选择**下一步**以继续。
1. （可选）：观看视频教程，快速了解如何在 App Studio 中构建应用程序。
1. 选择 **“编辑应用程序”**，这将带您进入应用程序工作室。
## 步骤 3：创建和配置自动化
您可以在*自动化中定义 App Studio 应用程序的逻辑和行为。*自动化由称为*操作*的各个步骤、用于将数据从其他资源传递给操作的*参数*以及可供其他自动化或组件使用的*输出*组成。在此步骤中，您将创建一个自动化系统，通过以下方式处理与 Amazon Bedrock 的互动：
+ 输入：用于将用户输入的文本传递给自动化的参数。
+ 操作：一个 **GenAI 提示**操作，用于将文本输入发送到 Amazon Bedrock 并返回输出文本摘要。
+ 输出：由来自 Amazon Bedrock 的已处理摘要组成的自动化输出，可在您的应用程序中使用。
**创建和配置自动化，以便向 Amazon Bedrock 发送提示并处理和返回摘要**
1. 选择画布顶部的 “**自动化**” 选项卡。
1. 选择 **\$1 添加自动化**。
1. 在右侧面板中，选择 “**属性**”。
1. 通过选择铅笔图标来更新自动化名称。输入 **InvokeBedrock**，键入按 **Enter**。
1. 通过执行以下步骤，向自动化添加一个参数，该参数将用于将用户输入的文本提示传递到自动化中，以便在向 Amazon Bedrock 的请求中使用：
1. 在画布的参数框中，选择 **\$1 添加**。
1. 在**名称**中，输入 **input**。
1. 在**描述**中，输入任何描述，例如**Text to be sent to Amazon Bedrock**。
1. 在**类型**中，选择**字符串**。
1. 选择 “**添加**” 以创建参数。
1. 通过执行以下步骤添加 **GenAI 提示**操作：
1. 在右侧面板中，选择**动作**。
1. 选择 **GenAI 提示**以添加操作。
1. 通过执行以下步骤来配置操作：
1. 从画布中选择操作以打开右侧的 “**属性**” 菜单。
1. **PromptBedrock**通过选择铅笔图标，输入名称并按 Enter 键将动作重命名为。
1. 在**连接器**中，选择在中创建的连接器[步骤 1：创建和配置 IAM 角色和 App Studio 连接器](#tutorial-conversational-bedrock-steps-create-role-connector)。
1. 在**模型**中，选择要用于处理提示的 Amazon Bedrock 型号。在本教程中，你将选择 **Claude 3.5 Sonn** et。
1. 在**用户提示符**中，输入`{{params.input}}`。这表示您之前创建的`input`参数，并将包含您的应用程序用户输入的文本。
1. 在**系统提示符**中，输入您要发送给 Amazon Bedrock 的系统提示符说明。在本教程中，输入以下内容：
```
You are a highly efficient text summarizer. Provide a concise summary of the prompted text, capturing the key points and main ideas.
```
1. 选择 “**请求设置”** 将其展开，然后更新以下字段：
+ 在**温度**中，输入`0`。温度在 0 到 10 的范围内决定输出的随机性或创造性。数字越高，回应就越有创意。
+ 在**最大代币**数中，输入`4096`以限制响应的长度。
1. 此自动化的输出将是摘要文本，但是，默认情况下，自动化不会创建输出。通过执行以下步骤配置自动化以创建自动化输出：
1. 在左侧导航栏中，选择**InvokeBedrock**自动化。
1. 在右侧的 “**属性**” 菜单的 “**输出**” 中，选择 **\$1 添加**。
1. 在**输出中，输**入**\$1\$1results.PromptBedrock.text\$1\$1**。此表达式返回`processResults`操作的内容。
## 步骤 4：创建页面和组件
在 App Studio 中，每个页面都代表用户将与之交互的应用程序用户界面 (UI) 屏幕。在这些页面中，您可以添加各种组件，例如表格、表单、按钮等，以创建所需的布局和功能。
### 重命名默认页面
本教程中的文本摘要器应用程序将仅包含一页。新创建的应用程序带有默认页面，因此您可以重命名该页面，而不是添加一个页面。
**重命名默认页面**
1. 在顶部栏导航菜单中，选择**页面**。
1. 在左侧面板中，选择 **Page1**，然后在右侧面板中选择 “**属性**” 面板。
1. 选择铅笔图标，输入**TextSummarizationTool**，然后**按 Enter**。
1. 在**导航标签**中输入**TextSummarizationTool**。
### 向页面添加组件
在本教程中，文本摘要器应用程序有一个包含以下组件的页面：
+ 一种**文本输入**组件，最终用户使用它来输入要汇总的提示。
+ 用于向 Amazon Bedrock 发送提示的 B **ut** ton 组件。
+ 一个**文本区域**组件，用于显示来自 Amazon Bedrock 的摘要。
向页面添加**文本输入**组件，用户将使用该组件输入要汇总的文本提示。
**添加文本输入组件**
1. 在右侧的 “**组件**” 面板中，找到**文本输入**组件并将其拖到画布上。
1. 选择画布中的文本输入以将其选中。
1. 在右侧的 “**属性**” 面板中，更新以下设置：
1. 选择铅笔图标将文本输入重命名为**inputPrompt**。
1. 在**标签**中，输入**Prompt**。
1. 在**占位符**中，输入**Enter text to be summarized**。
现在，添加一个 B **ut** ton 组件，用户可以选择将其发送到 Amazon Bedrock。
**添加按钮组件**
1. 在右侧的 “**组件**” 面板中，找到 B **ut** ton 组件并将其拖到画布上。
1. 在画布中选择按钮将其选中。
1. 在右侧的 “**属性**” 面板中，更新以下设置：
1. 选择要将按钮重命名为的铅笔图标**sendButton**。
1. 在 **“按钮标签”** 中，输入**Send**。
现在，添加一个**文本区域**组件，该组件将显示 Amazon Bedrock 返回的摘要。
**添加文本区域组件**
1. 在右侧的 “**组件**” 面板中，找到**文本区域**组件并将其拖到画布上。
1. 在画布中选择文本区域将其选中。
1. 在右侧的 “**属性**” 面板中，更新以下设置：
1. 选择要将按钮重命名为的铅笔图标**textSummary**。
1. 在**标签**中，输入**Summary**。
### 配置页面组件
现在，该应用程序包含一个包含组件的页面，下一步是配置组件以执行适当的行为。要将组件（例如按钮）配置为在与之交互时执行操作，必须向其添加*触发器*。对于本教程中的应用程序，您将在`sendButton`按钮中添加两个触发器来执行以下操作：
+ 第一个触发器将`textPrompt`组件中的文本发送到 Amazon Bedrock 进行分析。
+ 第二个触发器在`textSummary`组件中显示从 Amazon Bedrock 返回的摘要。
**添加将提示发送到 Amazon Bedrock 的触发器**
1. 在画布中选择按钮将其选中。
1. 在右侧的 “**属性**” 面板的 “**触发器**” 部分，选择 **\$1 添加**。
1. 选择 “**调用自动化**”。
1. 选择为对其进行配置而创建的 **InvokeAutomation1** 触发器。
1. 在**操作名称**中，输入**invokeBedrockAutomation**。
1. 在 “**调用自动化**” 中，选择之前创建的**InvokeBedrock**自动化。
1. 在参数框中，在之前创建的**输入**参数中输入**\$1\$1ui.inputPrompt.value\$1\$1**，它会传递`inputPrompt`文本输入组件中的内容。
1. 选择面板顶部的左箭头返回到组件属性菜单。
现在，您已经配置了一个触发器，该触发器会在点击按钮时调用自动向 Amazon Bedrock 发送请求，下一步是配置第二个触发器，在组件中显示结果。`textSummary`
**添加在文本区域组件中显示 Amazon Bedrock 结果的触发器**
1. 在按钮右侧的 “**属性**” 面板的 “**触发器**” 部分，选择 **\$1 添加**。
1. 选择 “**运行组件操作”**。
1. 选择为对其进行配置而创建的 **Runcomponentaction1** 触发器。
1. 在**操作名称**中，输入**setTextSummary**。
1. 在**组件**中，选择**文本摘要**组件。
1. 在 “**操作**” 中，选择 “**设置值**”。
1. 在 **“将值设置为**” 中，输入**\$1\$1results.invokeBedrockAutomation\$1\$1**。
## 步骤 5：将应用程序发布到**测试**环境
通常，在构建应用程序时，最好先对其进行预览以查看其外观并对其功能进行初步测试。但是，由于应用程序在预览环境中不与外部服务交互，因此您可以将应用程序发布到测试环境，以便能够测试发送请求和接收来自 Amazon Bedrock 的响应。
**将您的应用程序发布到测试环境**
1. 在应用程序构建器的右上角，选择**发布**。
1. 为测试环境添加版本描述。
1. 查看并选中与 SLA 相关的复选框。
1. 选择**启动**。发布最多可能需要 15 分钟。
1. （可选）准备就绪后，您可以通过选择 “**共享**” 并按照提示向其他人授予访问权限。有关共享 App Studio 应用程序的更多信息，请参阅[共享已发布的应用程序](application-share.md)。
测试应用程序后，再次选择 **Publish** 以将该应用程序提升到生产环境。请注意，生产环境中的应用程序只有在共享后才可供最终用户使用。有关不同应用程序环境的更多信息，请参阅[应用程序环境](applications-publish.md#application-environments)。
## （可选）清理
现在，您已成功完成本教程，并使用 Amazon Bedrock 在 App Studio 中构建了一个文本摘要应用程序。您可以继续使用您的应用程序，也可以清理在本教程中创建的资源。以下列表包含要清理的资源列表：
+ 在 App Studio 中创建的亚马逊 Bedrock 连接器。有关更多信息，请参阅 [查看、编辑和删除连接器](viewing-deleting-connectors.md)。
+ App Studio 中的文本摘要器应用程序。有关更多信息，请参阅 [删除 应用程序](applications-delete.md)。
+ 在 IAM 控制台中创建的 IAM 角色。有关更多信息，请参阅*AWS Identity and Access Management 用户指南*中的[删除角色或实例配置文件](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_roles_manage_delete.html)。
+ *如果您请求模型访问权限以使用 Claude 3 Sonnet 并希望恢复访问权限，请参阅《亚马逊 Bedrock [用户指南》中的 “管理对亚马逊 Bedrock 基础模型](https://docs.aws.amazon.com/bedrock/latest/userguide/model-access.html)的访问权限”。*
# 使用组件和自动化与 Amazon 简单存储服务交互
您可以从 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** 自动化操作。（独立操作应用于更复杂的场景，这些场景涉及在上传之前或之后要执行的额外逻辑或操作。）
## 先决条件
本指南假设您已完成以下先决条件：
1. 创建并配置了亚马逊 S3 存储桶、IAM 角色和策略以及亚马逊 S3 连接器，以便成功将 Amazon S3 与 App Studio 集成。要创建连接器，必须具有管理员角色。有关更多信息，请参阅 [连接到亚马逊简单存储服务 (Amazon S3) Service](connectors-s3.md)。
## 创建一个空的应用程序
执行以下步骤，创建一个要在本指南中使用的空应用程序。
**创建空应用程序**
1. 在导航窗格中，选择**我的应用程序**。
1. 选择 **\$1 创建应用程序**。
1. 在 “**创建应用程序**” 对话框中，为应用程序命名，选择 “**从头开始**”，然后选择 “**下一步**”。
1. 在 “**连接现有数据**” 对话框中，选择 “**跳过**” 以创建应用程序。
1. 选择 **“编辑应用程序”**，进入新应用程序的画布，您可以在其中使用组件、自动化和数据来配置应用程序的外观和功能。
## 创建页面
在应用程序中创建三个页面以收集或显示信息。
**创建页面**
1. 如有必要，请选择画布顶部的 “**页面**” 选项卡。
1. 在左侧导航栏中，有一个使用您的应用程序创建的页面。选择 “**\$1 添加**” 两次可再创建两个页面。导航窗格总共应显示三个页面。
1. 通过执行以下步骤更新 **Page1** 页面的名称：
1. 选择省略号图标并选择**页面属性**。
1. 在右侧的 “**属性**” 菜单中，选择铅笔图标以编辑名称。
1. 输入 **FileList**，键入按 **Enter**。
1. 重复前面的步骤更新第二页和第三页，如下所示：
+ 将 **Page2** 重命名为。**UploadFile**
+ 将 **Page3** 重命名为。**FailUpload**
现在，您的应用程序应该有三个名为**FileList**、和**UploadFile**、的页面 **FailUpload**，它们显示在左侧的 “**页面**” 面板中。
接下来，您将创建和配置与 Amazon S3 交互的自动化。
## 创建和配置自动化
创建与 Amazon S3 交互的应用程序的自动化程序。使用以下过程创建以下自动化：
+ **GetFiles** 自动化，用于列出您的 Amazon S3 存储桶中的对象，这些对象将用于填充表格组件。
+ **DeleteFile** 自动化，用于从您的 Amazon S3 存储桶中删除对象，该存储桶将用于向表格组件添加删除按钮。
+ **ViewFile** 自动化，可从您的 Amazon S3 存储桶中获取对象并显示该对象，用于显示有关从表格组件中选择的单个对象的更多详细信息。
### 创建`getFiles`自动化
创建自动化，列出指定 Amazon S3 存储桶中的文件。
1. 选择画布顶部的 “**自动化**” 选项卡。
1. 选择 **\$1 添加自动化**。
1. 在右侧面板中，选择 “**属性**”。
1. 通过选择铅笔图标来更新自动化名称。输入 **getFiles**，键入按 **Enter**。
1. 通过执行以下步骤添加 “**列出对象**” 操作：
1. 在右侧面板中，选择**动作**。
1. 选择 “**列出对象**” 以添加动作。该动作应命名`ListObjects1`。
1. 通过执行以下步骤来配置操作：
1. 从画布中选择操作以打开右侧的 “**属性**” 菜单。
1. 对于**连接器**，请选择您根据先决条件创建的 Amazon S3 连接器。
1. 在**配置**中，输入以下文本，*bucket\$1name*替换为您在先决条件中创建的存储桶：
```
{
"Bucket": "bucket_name",
"Prefix": ""
}
```
**注意**
您可以使用该`Prefix`字段将响应限制为以指定字符串开头的对象。
1. 此自动化的输出将用于使用您的 Amazon S3 存储桶中的对象填充表组件。但是，默认情况下，自动化不会创建输出。通过执行以下步骤配置自动化以创建自动化输出：
1. 在左侧导航栏中，选择 **GetFiles 自动化**。
1. 在右侧的 “**属性**” 菜单上，在 “**自动输出**” 中，选择 “**\$1 添加输出**”。
1. 在 “**输出**” 中，输入**\$1\$1results.ListObjects1.Contents\$1\$1**。此表达式返回操作的内容，现在可用于填充表格组件。
### 创建`deleteFile`自动化
创建自动化，从指定的 Amazon S3 存储桶中删除对象。
1. 在左侧的 “**自动化**” 面板中，选择 **\$1** 添加。
1. 选择 **\$1 添加自动化**。
1. 在右侧面板中，选择 “**属性**”。
1. 通过选择铅笔图标来更新自动化名称。输入 **deleteFile**，键入按 **Enter**。
1. 通过执行以下步骤，添加用于向自动化传递数据的自动化参数：
1. 在右侧的 “**属性**” 菜单的 “**自动化参数**” 中，选择 **\$1 添加**。
1. 选择铅笔图标编辑自动化参数。将参数名称更新为，**fileName**然后**按 Enter**。
1. 通过执行以下步骤添加 “**删除对象**” 操作：
1. 在右侧面板中，选择**动作**。
1. 选择 “**删除对象**” 以添加动作。该动作应命名`DeleteObject1`。
1. 通过执行以下步骤来配置操作：
1. 从画布中选择操作以打开右侧的 “**属性**” 菜单。
1. 对于**连接器**，请选择您根据先决条件创建的 Amazon S3 连接器。
1. 在**配置**中，输入以下文本，*bucket\$1name*替换为您在先决条件中创建的存储桶：
```
{
"Bucket": "bucket_name",
"Key": params.fileName
}
```
### 创建`viewFile`自动化
创建自动化，从指定的 Amazon S3 存储桶中检索单个对象。稍后，您将使用文件查看器组件来配置此自动化，以显示该对象。
1. 在左侧的 “**自动化**” 面板中，选择 **\$1** 添加。
1. 选择 **\$1 添加自动化**。
1. 在右侧面板中，选择 “**属性**”。
1. 通过选择铅笔图标来更新自动化名称。输入 **viewFile**，键入按 **Enter**。
1. 通过执行以下步骤，添加用于向自动化传递数据的自动化参数：
1. 在右侧的 “**属性**” 菜单的 “**自动化参数**” 中，选择 **\$1 添加**。
1. 选择铅笔图标编辑自动化参数。将参数名称更新为，**fileName**然后**按 Enter**。
1. 通过执行以下步骤添加 “**获取对象**” 操作：
1. 在右侧面板中，选择**动作**。
1. 选择 “**获取对象**” 以添加动作。该动作应命名`GetObject1`。
1. 通过执行以下步骤来配置操作：
1. 从画布中选择操作以打开右侧的 “**属性**” 菜单。
1. 对于**连接器**，请选择您根据先决条件创建的 Amazon S3 连接器。
1. 在**配置**中，输入以下文本，*bucket\$1name*替换为您在先决条件中创建的存储桶：
```
{
"Bucket": "bucket_name",
"Key": params.fileName
}
```
1. 默认情况下，自动化不会创建输出。通过执行以下步骤配置自动化以创建自动化输出：
1. 在左侧导航栏中，选择 **ViewFile 自动化**。
1. 在右侧的 “**属性**” 菜单上，在 “**自动输出**” 中，选择 “**\$1 添加输出**”。
1. 在 “**输出**” 中，输入**\$1\$1results.GetObject1.Body.transformToWebStream()\$1\$1**。此表达式返回操作的内容。
**注意**
您可以通过以下方式阅读`S3 GetObject`的回复：
`transformToWebStream`：返回一个流，必须使用该流才能检索数据。如果用作自动化输出，则自动化会处理此问题，并且输出可用作图像或 PDF 查看器组件的数据源。它也可以用作其他操作的输入，例如`S3 PutObject`。
`transformToString`：返回自动化的原始数据，如果您的文件包含文本内容（例如 JSON 数据），则应在 JavaScript 操作中使用该数据。必须等待，例如：`await results.GetObject1.Body.transformToString();`
`transformToByteArray`: 返回一个 8 位无符号整数的数组。此响应用于字节数组，该数组允许存储和操作二进制数据。必须等待，例如：`await results.GetObject1.Body.transformToByteArray();`
接下来，您将向之前创建的页面添加组件，并使用您的自动化功能对其进行配置，以便用户可以使用您的应用程序查看和删除文件。
## 添加和配置页面组件
现在，您已经创建了定义应用程序业务逻辑和功能的自动化，接下来您将创建组件并将它们连接起来。
### 向**FileList**页面添加组件
您之前创建的**FileList**页面将用于显示已配置的 Amazon S3 存储桶中的文件列表以及有关从列表中选择的任何文件的更多详细信息。为此，您将执行以下操作：
1. 创建表格组件以显示文件列表。您需要将表的行配置为使用之前创建的 **getFiles** 自动化的输出进行填充。
1. 创建 PDF 查看器组件以显示单个 PDF。您将使用之前创建的 ViewFile 自动化功能将组件配置为**查看从表中选择的文件**，从存储桶中提取文件。
**向**FileList**页面添加组件**
1. 选择画布顶部的 “**页面**” 选项卡。
1. 在左侧的 “**页面**” 面板中，选择**FileList**页面。
1. 在右侧的 “**组件**” 页面上，找到**表格**组件并将其拖动到画布的中央。
1. 选择您刚刚添加到页面的表格组件。
1. 在右侧的 “**属性**” 菜单上，选择 “**来源**” 下拉列表并选择 “**自动化**”。
1. 选择 “**自动化**” 下拉列表并选择 **GetFiles** 自动化。该表将使用 **getFiles** 自动化的输出作为其内容。
1. 添加一列，用文件名填充。
1. 在右侧的 “**属性**” 菜单上，选择 “**列**” 旁边，选择 “**\$1 添加**”。
1. 选择刚刚添加的 **Column1** 列右侧的箭头图标。
1. 对于**列标签**，将列重命名为**Filename**。
1. 对于**值**，请输入 **\$1\$1currentRow.Key\$1\$1**。
1. 选择面板顶部的箭头图标可返回主**属性**面板。
1. 添加表格操作以连续删除文件。
1. 在右侧的 “**属性**” 菜单上，选择 “**操作**” 旁边的 “**\$1 添加**”。
1. 在 “**操作**” 中，将 **“按钮”** 重命名为**Delete**。
1. 选择刚刚重命名的 “**删除”** 操作右侧的箭头图标。
1. 在 **“点击时”** 中，选择 “**\$1 添加操作**”，然后选择 “**调用自动化**”。
1. 选择为对其进行配置而添加的操作。
1. 对于**操作名称**，输入 **DeleteRecord**。
1. 在 “**调用自动化**” 中，选择**deleteFile**。
1. 在参数文本框中，输入**\$1\$1currentRow.Key\$1\$1**。
1. 对于**值**，请输入 **\$1\$1currentRow.Key\$1\$1**。
1. 在右侧面板中，选择 “**组件**” 以查看组件菜单。显示文件有两种选择：
+ **图像查看器**，用于查看`.jpg`扩展名为`.png``.jpeg`、或的文件。
+ 用于查看 **PDF 文件的 PDF 查看器**组件。
在本教程中，您将添加和配置 **PDF 查看器**组件。
1. 添加 **PDF 查看器**组件。
1. 在右侧的 “**组件**” 页面上，找到 **PDF 查看器**组件，然后将其拖到表格组件下方的画布上。
1. 选择刚刚添加的 **PDF 查看器**组件。
1. 在右侧的 “**属性**” 菜单上，选择 “**来源**” 下拉列表并选择 “**自动化**”。
1. 选择 “**自动化**” 下拉列表并选择 **ViewFile** 自动化。该表将使用 **ViewFile** 自动化的输出作为其内容。
1. 在参数文本框中，输入**\$1\$1ui.table1.selectedRow["Filename"]\$1\$1**。
1. 在右侧面板中，还有一个 “**文件名” 字**段。此字段的值用作 PDF 查看器组件的标题。输入与上一步相同的文本:**\$1\$1ui.table1.selectedRow["Filename"]\$1\$1**.
### 向**UploadFile**页面添加组件
该**UploadFile**页面将包含一个文件选择器，可用于选择文件并将其上传到已配置的 Amazon S3 存储桶。您将在页面中添加 **S3 上传**组件，用户可以使用该组件来选择和上传文件。
1. 在左侧的 “**页面**” 面板中，选择**UploadFile**页面。
1. 在右侧的 “**组件**” 页面上，找**到 S3 上传**组件并将其拖到画布中央。
1. 选择您刚刚添加到页面的 S3 上传组件。
1. 在右侧的 “**属性**” 菜单上，配置组件：
1. 在**连接器**下拉列表中，选择先决条件中创建的 Amazon S3 连接器。
1. 在**存储桶中**，输入您的 Amazon S3 存储桶的名称。
1. 对于**文件名**，输入 **\$1\$1ui.s3Upload1.files[0]?.nameWithExtension\$1\$1**。
1. 对于 “**最大文件大小**”，**5**在文本框中输入，并确保**MB**在下拉列表中将其选中。
1. 在 “**触发器**” 部分，通过执行以下步骤添加在上传成功或失败后运行的操作：
要添加在成功上传后运行的操作，请执行以下操作：
1. **在 “成功**时” 中，选择 “**\$1 添加操作**”，然后选择 “**导航**”。
1. 选择为对其进行配置而添加的操作。
1. 对于**导航类型**，请选择**页面**。
1. **在 “导航到”** 中，选择**FileList**。
1. 选择面板顶部的箭头图标可返回主**属性**面板。
要添加在上传失败后运行的操作，请执行以下操作：
1. **在 “失败**时” 中，选择 “**\$1 添加操作**”，然后选择 “**导航**”。
1. 选择为对其进行配置而添加的操作。
1. 对于**导航类型**，请选择**页面**。
1. **在 “导航到”** 中，选择**FailUpload**。
1. 选择面板顶部的箭头图标可返回主**属性**面板。
### 向**FailUpload**页面添加组件
该**FailUpload**页面是一个简单的页面，其中包含一个文本框，用于通知用户其上传失败。
1. 在左侧的 “**页面**” 面板中，选择**FailUpload**页面。
1. 在右侧的 “**组件**” 页面上，找到**文本**组件并将其拖动到画布的中央。
1. 选择您刚刚添加到页面的文本组件。
1. 在右侧的 “**属性**” 菜单上，在 “**值**” 中输入**Failed to upload, try again**。
## 更新您的应用程序安全设置
App Studio 中的每个应用程序都有内容安全设置，您可以使用这些设置来限制外部媒体或资源，或者限制您可以向 Amazon S3 中的哪些域上传对象。默认设置是屏蔽所有域名。要从您的应用程序将对象上传到 Amazon S3，您必须更新设置以允许您要向其上传对象的域。
**允许域名将对象上传到 Amazon S3**
1. 选择**应用程序设置**选项卡。
1. 选择 “**内容安全设置**” 选项卡。
1. 对于 **Connect 来源**，选择 “**允许所有连接**”。
1. 选择**保存**。
## 后续步骤：预览并发布应用程序以供测试
该应用程序现已准备就绪，可以进行测试了。有关预览和发布应用程序的更多信息，请参阅[预览、发布和共享应用程序](applications-preview-publish-share.md)。
# 在 App Studio 应用程序中调用 Lambda 函数
本教程向您展示如何将 App Studio 连接到 Lambda 以及如何从您的应用程序调用 Lambda 函数。
## 先决条件
本指南假设您已完成以下先决条件：
1. 已创建 App Studio 应用程序。如果没有，则可以创建一个空的应用程序以在本教程中使用。有关更多信息，请参阅 [创建 应用程序](applications-create.md)。
**注意**
虽然您不需要 Lambda 函数即可按照本教程学习如何对其进行配置，但拥有一个 Lambda 函数可能会有所帮助，以确保您已正确配置应用程序。[本教程不包含有关创建 Lambda 函数的信息。有关更多信息，请参阅开发人员指南。AWS Lambda](https://docs.aws.amazon.com/lambda/latest/dg/)
## 创建 Lambda 连接器
要在您的 App Studio 应用程序中使用 Lambda 函数，您必须使用连接器将 App Studio 连接到 Lambda，以提供对您的函数的访问权限。只有管理员才能在 App Studio 中创建连接器。有关创建 Lambda 连接器的更多信息，包括创建连接器的步骤，请参阅。[连接到 AWS Lambda](connectors-lambda.md)
## 创建和配置自动化
自动化用于定义应用程序的逻辑，由操作组成。要在应用程序中调用 Lambda 函数，您需要先向自动化添加并配置 “调用 *Lambda*” 操作。使用以下步骤创建自动化并向其添加 “*调用 Lambda*” 操作。
1. 编辑应用程序时，选择 “**自动化” 选项卡。**
1. 选择 **\$1 添加自动化**。
1. 在右侧的 “**操作**” 菜单中，选择 “**调用 Lambd** a”，将该步骤添加到您的自动化中。
1. 在画布中选择新的 Lambda 步骤以查看和配置其属性。
1. 在右侧的 “**属性**” 菜单中，通过执行以下步骤来配置该步骤：
1. 在 **C** onnector 中，选择为将 App Studio 连接到您的 Lambda 函数而创建的连接器。
1. 在**函数名称**中，输入您的 Lambda 函数的名称。
1. 在**函数事件**中，输入要传递给 Lambda 函数的事件。以下列表提供了一些常见的用例示例：
+ 传递自动化参数的值，例如文件名或其他字符串：`varName: params.paramName`
+ 传递先前操作的结果：`varName: results.actionName1.data[0].fieldName`
+ 如果您在 L *oop* 操作中*添加 Invoke Lambda* 操作，则可以从每个迭代项目中发送与参数类似的字段：`varName: currentItem.fieldName`
1. **Mocked ou** tput 字段可用于提供模拟输出，以便在预览时测试应用程序，其中连接器未处于活动状态。
## 配置用户界面元素以运行自动化
现在，您的自动化配置了调用您的 Lambda 函数的操作，您可以配置一个用户界面元素来运行自动化。在本教程中，您将创建一个按钮，单击该按钮即可运行自动化。
**提示**
您还可以使用 “*调用自动化” 操作从其他自动化*中运行自动化。
**通过按钮运行自动化**
1. 编辑应用程序时，选择 “**页面**” 选项卡。
1. 在右侧菜单中，选择 B **ut** ton 组件以向页面添加按钮。
1. 选择新按钮进行配置。
1. 在右侧的 “**属性**” 菜单的 “**触发器**” 中，选择 “**\$1 添加**”，然后选择 “**调用自动化**”。
1. 选择新的自动化调用触发器进行配置。
1. 在**调用自动化**中，选择调用您的 Lambda 函数的自动化，并配置要发送给自动化的任何参数。
现在，任何在您的应用程序中选择此按钮的用户都将使配置的自动化运行。
## 后续步骤：预览并发布应用程序以供测试
您的应用程序现已准备好进行测试。在开发环境中预览应用程序时，连接器处于非活动状态，因此您无法在预览时测试自动化，因为它使用连接器进行连接。 AWS Lambda要测试您的应用程序依赖于连接器的功能，您必须将应用程序发布到测试环境。有关预览和发布应用程序的更多信息，请参阅[预览、发布和共享应用程序](applications-preview-publish-share.md)。