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

# AWS App Studio 入门
<a name="getting-started"></a>

以下入门教程将引导您完成在 App Studio 中构建第一个应用程序的过程。
+ **推荐**：要使用生成式 AI 来描述您要创建的应用程序，并自动创建该应用程序及其资源，请参阅[教程：使用 AI 生成应用程序](getting-started-tutorial-ai.md)。
+ 要从空应用程序开始构建，请参阅[教程：从一个空的应用程序开始构建](getting-started-tutorial-empty.md)。

# 教程：使用 AI 生成应用程序
<a name="getting-started-tutorial-ai"></a>

AWS App Studio 在整个服务中都包含生成式 AI 功能，可帮助加快应用程序构建。在本教程中，您将通过使用自然语言描述您的应用程序，学习如何使用 AI 生成应用程序。

使用 AI 生成应用程序是开始构建的好方法，因为应用程序的许多资源都是为您创建的。使用现有资源从生成的应用程序开始构建通常比从空应用程序开始构建要容易得多。

**注意**  
您可以查看博客文章[使用 AWS App Studio（预览版）使用自然语言构建企业级应用程序](https://aws.amazon.com/blogs/aws/build-custom-business-applications-without-cloud-expertise-using-aws-app-studio-preview)，以查看包含图像的类似演练。博客文章还包含有关设置和配置管理员相关资源的信息，但如果需要，您可以跳到有关构建应用程序的部分。

当 App Studio 生成带有 AI 的应用程序时，它会使用以下资源来创建应用程序，这些资源是针对您所描述的应用程序量身定制的：
+ **页面和组件**：*组件*是应用程序用户界面的基块。它们代表表格、表单和按钮等视觉元素。每个组件都有自己的一组属性，您可以根据自己的特定要求自定义组件。*页面*是组件的容器。
+ **自动化**：您可以使用*自动化*来定义控制应用程序行为的逻辑和工作流程。例如，您可以使用自动化来创建、更新、读取或删除数据表中的行，或者与 Amazon S3 存储桶中的对象进行交互。您还可以使用它们来处理诸如数据验证、通知或与其他系统的集成之类的任务。
+ **实体**：数据是为您的应用程序提供动力的信息。生成的应用程序会创建类似于表格的*实体*。实体代表您需要存储和处理的不同类型的数据，例如客户、产品或订单。您可以使用 App Studio 连接器将这些数据模型连接到各种数据源 APIs，包括 AWS 服务和外部数据源。

**Contents**
+ [先决条件](#getting-started-tutorial-ai-prerequisites)
+ [第 1 步：创建 应用程序](#getting-started-tutorial-ai-steps-create-application)
+ [第 2 步：探索您的新应用程序](#getting-started-tutorial-ai-steps-explore)
  + [浏览页面和组件](#getting-started-tutorial-ai-steps-explore-pages)
  + [探索自动化和操作](#getting-started-tutorial-ai-steps-explore-automations)
  + [使用实体浏览数据](#getting-started-tutorial-ai-steps-explore-data-entities)
+ [第 3 步：预览您的应用程序](#getting-started-tutorial-ai-steps-preview)
+ [后续步骤](#getting-started-tutorial-ai-next-steps)

## 先决条件
<a name="getting-started-tutorial-ai-prerequisites"></a>

在开始之前，请查看并完成以下先决条件：
+ 访问 AWS App Studio。有关更多信息，请参阅 [设置并登录 AWS App Studio](setting-up.md)。
+ 可选：查看[AWS 应用工作室的概念](concepts.md)以熟悉 App Studio 的重要概念。

## 第 1 步：创建 应用程序
<a name="getting-started-tutorial-ai-steps-create-application"></a>

生成应用程序的第一步是在 App Studio 中向 AI 助手描述要创建的应用程序。您可以查看将生成的应用程序，并在生成应用程序之前根据需要进行迭代。

**使用 AI 生成应用程序**

1. 登录 App Studio。

1. 在左侧导航栏中，选择 **Builder Hub**，然后选择 **\$1 创建应用程序**。

1. 选择 “**使用 AI 生成应用程序**”。

1. 在**应用程序名称**字段中，为您的应用程序提供一个名称。

1. 在 **“选择数据源**” 对话框中，选择 “**跳过**”。

1. 您可以通过在文本框中描述要生成的应用程序或在示例提示上选择 “**自定义**” 来开始定义要生成的应用程序。描述您的应用程序后，App Studio 会生成应用程序要求和详细信息供您查看。这包括用例、用户流和数据模型。

1. 使用文本框根据需要对应用程序进行迭代，直到您对要求和细节感到满意。

1. 准备好生成应用程序并开始构建时，请选择**生成应用程序**。

1. 或者，您可以观看一段简短的视频，详细介绍如何在您的新应用程序中导航。

1. 选择 **“编辑应用程序”** 以进入应用程序的开发环境。

## 第 2 步：探索您的新应用程序
<a name="getting-started-tutorial-ai-steps-explore"></a>

在开发环境中，您将找到以下资源：
+ 用于查看或编辑应用程序的画布。画布会根据所选资源而变化。
+ 画布顶部的导航选项卡。以下列表对这些选项卡进行了描述：
  + **页面**：使用页面和组件来设计应用程序界面的位置。
  + **自动化**：在自动化中使用操作来定义应用程序的业务逻辑。
  + **数据**：在其中定义实体、其字段、示例数据和数据操作，以定义应用程序的数据模型。
  + **应用程序设置**：用于定义应用程序设置，包括应用程序角色，用于为最终用户定义基于角色的页面可见性。
+ 左侧导航菜单，其中包含基于您正在查看的选项卡的资源。
+ 右侧菜单，列出 “**页面**” 和 “**自动化**” 选项卡中选定资源的资源和属性。
+ 在生成器底部显示警告和错误的调试控制台。您生成的应用程序中可能存在错误。这可能是由于自动化需要配置的连接器才能执行操作，例如使用 Amazon Simple Email Service 发送电子邮件。
+ “**询问 AI**” 聊天窗口，可从 AI 生成器助手那里获取情境帮助。

让我们仔细看看 “**页面**”、“**自动化**” 和 “**数据**” 选项卡。

### 浏览页面和组件
<a name="getting-started-tutorial-ai-steps-explore-pages"></a>

“**页面**” 选项卡显示为您生成的页面及其组件。

每个页面都代表您的应用程序的用户界面 (UI) 屏幕，您的用户将与之交互。在这些页面上，您可以找到各种组件（例如表格、表单和按钮）来创建所需的布局和功能。

请花点时间使用左侧导航菜单查看页面及其组件。选择页面或组件时，可以在右侧菜单中选择 “**属性**”。

### 探索自动化和操作
<a name="getting-started-tutorial-ai-steps-explore-automations"></a>

“**自动化**” 选项卡显示为您生成的自动化及其操作。

自动化定义应用程序的业务逻辑，例如创建、查看、更新或删除数据条目、发送电子邮件，甚至调用或 APIs Lambda 函数。

花点时间使用左侧导航菜单查看自动化。选择自动化后，可以在右侧的 “属性” 菜单上查看其**属性**。自动化包含以下资源：
+ 自动化由单个操作组成，这些操作是应用程序业务逻辑的基石。您可以在左侧导航菜单上或所选自动化的画布中查看自动化的操作。选择操作后，可以在右侧的 “属性” 菜单上查看其**属性**。
+ 自动化参数是将数据传递到自动化的方式。参数充当占位符，当自动化运行时，这些占位符会被实际值替换。这允许您每次使用相同的自动化，输入也不同。
+ 自动化输出是您配置自动化结果的地方。默认情况下，自动化没有输出，因此要在组件或其他自动化中使用自动化的结果，必须在此处定义它们。

有关更多信息，请参阅 [自动化概念](automations-concepts.md)。

### 使用实体浏览数据
<a name="getting-started-tutorial-ai-steps-explore-data-entities"></a>

“**数据**” 选项卡显示为您生成的实体。

实体表示保存应用程序数据的表，类似于数据库中的表。它们不是将应用程序的用户界面 (UI) 和自动化直接连接到数据源，而是先连接到实体。实体充当您的实际数据源和 App Studio 应用程序之间的中介。这为管理和访问您的数据提供了一个单一的地方。

花点时间查看通过从左侧导航菜单中选择生成的实体。您可以查看以下详细信息：
+ “**配置**” 选项卡显示实体名称及其字段，这些字段代表您的实体的列。
+ **数据操作**选项卡显示您的实体生成的数据操作。组件和自动化可以使用数据操作从您的实体中获取数据。
+ **示例数据**选项卡显示了示例数据，您可以使用这些数据在开发环境（不与外部服务通信）中测试您的应用程序。有关环境的更多信息，请参阅[应用程序环境](applications-publish.md#application-environments)。
+ “**连接**” 选项卡显示有关实体所连接的外部数据源的信息。App Studio 提供了一种使用 DynamoDB 表的托管数据存储解决方案。有关更多信息，请参阅 [AWS App Studio 中的管理数据实体](managed-data-entities.md)。

## 第 3 步：预览您的应用程序
<a name="getting-started-tutorial-ai-steps-preview"></a>

您可以在 App Studio 中预览应用程序，以查看其对用户的显示效果。您还可以通过使用它并在调试面板中查看日志来测试其功能。

应用程序预览环境不支持显示实时数据或使用连接器与外部资源（例如数据源）的连接。相反，您可以使用样本数据和模拟输出来测试功能。

**预览您的应用程序以进行测试**

1. 在应用程序构建器的右上角，选择**预览**。

1. 与您的应用程序的页面互动。

## 后续步骤
<a name="getting-started-tutorial-ai-next-steps"></a>

现在，您已经创建了第一个应用程序，接下来是一些后续步骤：
+ 有关包含图像的另一篇入门演练，请参阅博客文章[使用 AWS App Studio 使用自然语言构建企业级应用程序（预览版）](https://aws.amazon.com/blogs/aws/build-custom-business-applications-without-cloud-expertise-using-aws-app-studio-preview)。
+ 应用程序使用连接器发送和接收数据，或与外部服务（包括 AWS 服务和第三方服务）通信。有必要详细了解连接器以及如何对其进行配置以构建应用程序。请注意，您必须具有**管理员**角色才能管理连接器。要了解更多信息，请参阅[使用连接器将 App Studio 连接到其他服务](connectors.md)。
+ 要了解有关预览、发布以及最终与最终用户共享应用程序的更多信息，请参阅[预览、发布和共享应用程序](applications-preview-publish-share.md)。
+ 继续探索和更新您生成的应用程序，以获得一些动手体验。
+ 要了解有关构建应用程序的更多信息，请查看[生成器文档](builder-documentation.md)。具体而言，以下主题可能有助于探索：
  + [自动化操作参考](automations-actions-reference.md)
  + [组件参考](components-reference.md)
  + [使用组件和自动化与 Amazon 简单存储服务交互](automations-s3.md)
  + [安全注意事项和缓解措施](security-considerations-and-mitigations.md)

# 教程：从一个空的应用程序开始构建
<a name="getting-started-tutorial-empty"></a>

在本教程中，您将使用 AWS App Studio 构建内部客户会议请求应用程序。你将学习如何在 App Studio 中构建应用程序，同时重点介绍现实世界的用例和动手示例。此外，你还将学习如何定义数据结构、UI 设计和应用程序部署。

**注意**  
本教程详细介绍了如何从头开始构建应用程序，从空应用程序开始。通常，通过提供要创建的应用程序的描述，使用 AI 来帮助生成应用程序及其资源会更快、更容易。有关更多信息，请参阅 [教程：使用 AI 生成应用程序](getting-started-tutorial-ai.md)。

要了解如何使用 App Studio 构建应用程序，关键是要了解以下四个核心概念以及它们是如何协同工作的：**组件**、**自动化**、**数据**和**连接器**。
+ **组件**：组件是应用程序用户界面的基块。它们代表表格、表单和按钮等视觉元素。每个组件都有自己的属性集，您可以根据自己的特定要求对其进行自定义。
+ **自动化**：通过自动化，您可以定义控制应用程序行为的逻辑和工作流程。您可以使用自动化来创建、更新、读取或删除数据表中的行，或者与 Amazon S3 存储桶中的对象进行交互。您还可以使用它们来处理诸如数据验证、通知或与其他系统的集成之类的任务。
+ **数据**：数据是为您的应用程序提供动力的信息。在 App Studio 中，您可以定义称为*实体的*数据模型。实体代表您需要存储和处理的不同类型的数据，例如客户会议请求、议程或与会者。您可以使用 App Studio 连接器将这些数据模型连接到各种数据源 APIs，包括 AWS 服务和外部数据源。
+ **连接器**：App Studio 提供与各种数据源的连接，其中包括 Aurora、DynamoDB 和 Amazon Redshift 等 AWS 服务。数据源还包括第三方服务，例如Salesforce，或者许多其他使用 OpenAPI 或通用 API 连接器的服务。您可以使用 App Studio 连接器轻松地将这些企业级服务和外部应用程序中的数据和功能整合到您的应用程序中。

在学习本教程的过程中，您将探索组件、数据和自动化的关键概念是如何结合在一起构建您的内部客户会议请求应用程序的。

以下是描述你将在本教程中做什么的高级步骤：

1. 从@@ **数据开始**：许多应用程序都是从数据模型开始的，因此本教程也从数据开始。要构建 “客户会议请求” 应用程序，您需要先创建一个`MeetingRequests`实体。此实体代表用于存储所有相关会议请求信息（例如客户姓名、会议日期、议程和与会者）的数据结构。该数据模型是您的应用程序的基础，并为您将要构建的各种组件和自动化提供支持。

1. **创建您的用户界面 (UI)**：有了数据模型后，本教程将指导您完成用户界面 (UI) 的构建。在 App Studio 中，您可以通过添加*页面*并向其中添加*组件*来构建界面。您将向会议请求仪*表板页面添加表格*、*详细信息视图*和*日历*等组件。这些组件将设计为显示存储在`MeetingRequests`实体中的数据并与之交互。这允许您的用户查看、管理和安排客户会议。您还将创建一个会议请求创建页面。该页面包括一个用于收集数据的*表单*组件和一个用于提交数据的*按钮*组件。

1. **使用自动化功能添加业务逻辑**：为了增强应用程序的功能，您需要配置一些组件以启用用户交互。一些示例是导航到页面或在`MeetingRequests`实体中创建新的会议请求记录。

1. **使用验证和表达式进行增强**：为确保数据的完整性和准确性，您需要向*表单*组件添加验证规则。这将有助于确保用户在创建新的会议请求记录时提供完整有效的信息。此外，你还将使用表达式来引用和操作应用程序中的数据，这样你就可以在整个用户界面中显示动态和上下文信息。

1. **预览和测试**：在部署应用程序之前，您将有机会对其进行全面的预览和测试。这将允许您验证组件、数据和自动化是否全部无缝协作。这为您的用户提供了流畅直观的体验。

1. **发布应用程序**：最后，您将部署已完成的内部客户会议请求应用程序，并使其可供用户访问。借助 App Studio 中低代码方法的强大功能，您无需大量的编程专业知识即可构建满足组织特定需求的自定义应用程序。

**Contents**
+ [先决条件](#getting-started-tutorial-prerequisites)
+ [第 1 步：创建 应用程序](#getting-started-tutorial-steps-create-application)
+ [第 2 步：创建一个实体来定义应用程序的数据](#getting-started-tutorial-steps-create-entity)
  + [创建托管实体](#getting-started-tutorial-steps-create-managed-entity)
  + [向您的实体添加字段](#getting-started-tutorial-steps-add-fields)
+ [第 3 步：设计用户界面 (UI) 和逻辑](#getting-started-tutorial-steps-user-interface)
  + [添加会议请求控制面板页面](#getting-started-tutorial-steps-user-interface-create-page)
  + [添加会议请求创建页面](#getting-started-tutorial-steps-user-interface-add-create-customer-page)
+ [步骤 4：预览应用程序](#getting-started-tutorial-steps-preview)
+ [步骤 5：将应用程序发布到**测试**环境](#getting-started-tutorial-steps-publish)
+ [后续步骤](#getting-started-tutorial-next-steps)

## 先决条件
<a name="getting-started-tutorial-prerequisites"></a>

在开始之前，请查看并完成以下先决条件：
+ 访问 AWS App Studio。有关更多信息，请参阅 [设置并登录 AWS App Studio](setting-up.md)。
+ 可选：查看[AWS 应用工作室的概念](concepts.md)以熟悉 App Studio 的重要概念。
+ 可选：了解基本的 Web 开发概念，例如 JavaScript语法。
+ 可选：熟悉 AWS 服务。

## 第 1 步：创建 应用程序
<a name="getting-started-tutorial-steps-create-application"></a>

1. 登录 App Studio。

1. 在左侧导航栏中，选择 **Builder 中心**，然后选择 **\$1 创建应用程序**。

1. 选择**从头开始**。

1. 在**应用程序名称**字段中，为您的应用程序提供一个名称，例如**Customer Meeting Requests**。

1. 如果系统要求选择数据源或连接器，请选择**跳过**以了解本教程。

1. 选择**下一步**以继续。

1. （可选）：观看视频教程，快速了解如何在 App Studio 中构建应用程序。

1. 选择 **“编辑应用程序”**，即可进入 App Studio 应用程序生成器。

## 第 2 步：创建一个实体来定义应用程序的数据
<a name="getting-started-tutorial-steps-create-entity"></a>

实体表示保存应用程序数据的表，类似于数据库中的表。它们不是应用程序的用户界面 (UI) 和自动化直接连接到数据源，而是先连接到实体。实体充当您的实际数据源和 App Studio 应用程序之间的中介，并提供管理和访问数据的单一位置。

有四种方法可以创建实体。在本教程中，您将使用 App Studio 托管实体。

### 创建托管实体
<a name="getting-started-tutorial-steps-create-managed-entity"></a>

创建托管实体还会创建由 App Studio 管理的相应的 DynamoDB 表。在 App Studio 应用程序中对实体进行更改时，DynamoDB 表会自动更新。使用此选项，您无需手动创建、管理或连接到第三方数据源，也不必指定从实体字段到表列的映射。

创建实体时，必须定义**主键**字段。主键是实体中每条记录或每行的唯一标识符。这确保了可以轻松识别和检索每条记录，而不会产生模棱两可。主键由以下属性组成：
+ 主键名称：实体主键字段的名称。
+ 主键数据类型：主键字段的类型。在 App Studio 中，支持的主键类型为**字符串**（文本）和**浮点型**（表示数字）。文本主键（比如*meetingName*）的类型为 **String**，数字主键（比如*meetingId*）的类型为 **Float**。

主键是实体的关键组成部分，因为它可以确保数据完整性，防止数据重复，并实现高效的数据检索和查询。

**创建托管实体**

1. 从顶部栏菜单中选择 “**数据**”。

1. 选择 **\$1 创建实体**。

1. 选择**创建 App Studio 管理实体**。

1. 在**实体名称**字段中，为您的实体提供一个名称。在本教程中，请输入 **MeetingRequests**。

1. 在**主键**字段中，输入要分配给实体中主键列的主键名称标签。在本教程中，请输入 **requestID**。

1. 对于**主键数据类型**，选择 **Float**。

1. 选择 **Create entity (创建实体)**。

### 向您的实体添加字段
<a name="getting-started-tutorial-steps-add-fields"></a>

对于每个字段，您将指定**显示名称**，即应用程序用户可见的标签。显示名称可以包含空格和特殊字符，但在实体中必须是唯一的。显示名称可作为该字段的用户友好型标签，可帮助用户轻松识别和理解其用途。

接下来，您将提供**系统名称**，这是应用程序内部用来引用该字段的唯一标识符。系统名称应简洁，不含空格或特殊字符。系统名称允许应用程序更改字段的数据。它充当应用程序中该字段的唯一参考点。

最后，您将选择最能代表要在字段中存储**的数据类型**的数据类型，例如字符串（文本）、布尔值（真/假）、日期、十进制、浮点数、整数或。 DateTime定义适当的数据类型可确保数据的完整性，并允许正确处理和处理字段的值。例如，如果您在会议请求中存储客户姓名，则需要选择适合文本值`String`的数据类型。

**向您的`MeetingRequests`实体添加字段**
+ 选择 **\$1 添加字段**以添加以下四个字段：

  1. 添加一个代表客户姓名的字段，其中包含以下信息：
     + **显示名称**：**Customer name**
     + **系统名称**：**customerName**
     + **数据类型**：**String**

  1. 添加一个代表会议日期的字段，其中包含以下信息：
     + **显示名称**：**Meeting date**
     + **系统名称**：**meetingDate**
     + **数据类型**：**DateTime**

  1. 添加一个代表会议议程的字段，其中包含以下信息：
     + **显示名称**：**Agenda**
     + **系统名称**：**agenda**
     + **数据类型**：**String**

  1. 添加一个字段，用以下信息代表会议参与者：
     + **显示名称**：**Attendees**
     + **系统名称**：**attendees**
     + **数据类型**：**String**

您可以向实体添加示例数据，以便在发布应用程序之前使用这些数据来测试和预览应用程序。通过添加多达 500 行的模拟数据，您可以模拟真实场景并检查您的应用程序如何处理和显示各种类型的数据，而无需依赖实际数据或连接到外部服务。这可以帮助您在开发过程的早期发现并解决任何问题或不一致之处。这样可以确保您的应用程序在处理实际数据时按预期运行。

**向您的实体添加示例数据**

1. 在横幅中选择 “**样本数据**” 选项卡。

1. 选择 “**生成更多样本数据**”。

1. 选择**保存**。

或者，在横幅中选择 “**连接**”，查看有关连接器和为您创建的 DynamoDB 表的详细信息。

## 第 3 步：设计用户界面 (UI) 和逻辑
<a name="getting-started-tutorial-steps-user-interface"></a>

### 添加会议请求控制面板页面
<a name="getting-started-tutorial-steps-user-interface-create-page"></a>

在 App Studio 中，每个页面都代表用户将与之交互的应用程序用户界面 (UI) 屏幕。在这些页面中，您可以添加各种组件，例如表格、表单和按钮，以创建所需的布局和功能。

新创建的应用程序带有默认页面，因此您可以重命名该页面，而不是添加一个新页面来用作简单的会议请求仪表板页面。

**重命名默认页面**

1. 在顶部栏导航菜单中，选择**页面**。

1. **在左侧面板中，双击 **Page1**，将其重命名为**MeetingRequestsDashboard**，然后按 Enter。**

现在，向页面添加一个用于显示会议请求的表格组件。

**向会议请求仪表板页面添加表格组件**

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

1. 在画布中选择表格以将其选中。

1. 在右侧的 “**属性**” 面板中，更新以下设置：

   1. 选择铅笔图标将表格重命名为**meetingRequestsTable**。

   1. 在**来源**下拉列表中，选择**实体**。

   1. 在**数据操作**下拉列表中，选择您创建的实体 (**MeetingRequests**)，然后选择 **\$1 添加数据操作**。

1. 如果出现提示，请选择 **getAll**。
**注意**  
**getAll** 数据操作是一种特定类型的数据操作，用于检索指定实体中的所有记录（行）。例如，当您将 getAll 数据操作与表组件关联时，表格会自动填充来自连接实体的所有数据，并将每条记录显示为表中的一行。

### 添加会议请求创建页面
<a name="getting-started-tutorial-steps-user-interface-add-create-customer-page"></a>

接下来，创建一个包含最终用户用于创建会议请求的表单的页面。您还将添加一个提交按钮，用于在`MeetingRequests`实体中创建记录，然后将最终用户导航回`MeetingRequestsDashboard`页面。

**添加会议请求创建页面**

1. 在顶部横幅中，选择**页面**。

1. 在左侧面板中，选择 **\$1 添加**。

1. 在右侧的属性面板中，选择铅笔图标并将页面重命名为。**CreateMeetingRequest**

现在，页面已添加，您将在页面中添加一个表单，最终用户将使用该表单输入信息，以便在`MeetingRequests`实体中创建会议请求。App Studio 提供了一种从现有实体生成表单的方法，该方法可以根据实体的字段自动填充表单字段，还可以生成一个提交按钮，用于在实体中使用表单输入创建记录。

**在会议请求创建页面上自动生成来自实体的表单**

1. 在右侧的 “**组件**” 菜单上，找到**表单**组件并将其拖到画布上。

1. 选择 “**生成表单**”。

1. 从下拉列表中选择实`MeetingRequests`体。

1. 选择**生成**。

1. 选择画布上的 “**提交**” 按钮将其选中。

1. 在右侧属性面板的 “**触发器**” 部分，选择 **\$1 添加**。

1. 选择 “**导航”**。

1. 在右侧的属性面板中，将**操作名称**更改为描述性名称，例如。**Navigate to MeetingRequestsDashboard**

1. 将**导航类型**更改为页面。在 **“导航至”** 下拉列表中，选择**MeetingRequestsDashboard**。

现在我们有了会议请求创建页面和表单，我们希望可以轻松地从页面导航到此`MeetingRequestsDashboard`页面，以便查看仪表板的最终用户可以轻松创建会议请求。使用以下步骤在页面上创建一个用于导航到该`MeetingRequestsDashboard``CreateMeetingRequest`页面的按钮。

**添加从`MeetingRequestsDashboard`导航到的按钮 `CreateMeetingRequest`**

1. 在顶部横幅中，选择**页面**。

1. 选择`MeetingRequestsDashboard`页面。

1. 在右侧的 “**组件**” 面板中，找到 B **ut** ton 组件，将其拖到画布上，然后将其放在表格上方。

1. 选择新添加的按钮将其选中。

1. 在右侧的 “**属性**” 面板中，更新以下设置：

   1. 选择铅笔图标将按钮重命名为**createMeetingRequestButton**。

   1. **按钮标签**:**Create Meeting Request**. 这是最终用户将看到的名称。

   1. 在 “**图标**” 下拉列表中，选择 **\$1 Plus**。

   1. 创建一个触发器，将最终用户导航到该`MeetingRequestsDashboard`页面：

      1. 在 “**触发器**” 部分中，选择 **\$1 添加**。

      1. 在**操作类型**中，选择**导航**。

      1. 选择您刚刚创建的触发器进行配置。

      1. 在**操作名称**中，提供描述性名称，例如。**NavigateToCreateMeetingRequest**

      1. 在**导航类型**下拉列表中，选择**页面**。

      1. 在 **“导航至**” 下拉列表中，选择`CreateMeetingRequest`页面。

## 步骤 4：预览应用程序
<a name="getting-started-tutorial-steps-preview"></a>

您可以在 App Studio 中预览应用程序，以查看其对用户的显示效果。此外，您还可以通过使用它并在调试面板中查看日志来测试其功能。

应用程序预览环境不支持显示实时数据。它也不支持通过连接器与外部资源（例如数据源）进行连接。相反，您可以使用样本数据和模拟输出来测试功能。

**预览您的应用程序以进行测试**

1. 在应用程序构建器的右上角，选择**预览**。

1. 与`MeetingRequestsDashboard`页面互动，测试表格、表单和按钮。

## 步骤 5：将应用程序发布到**测试**环境
<a name="getting-started-tutorial-steps-publish"></a>

现在，您已经完成了应用程序的创建、配置和测试，是时候将其发布到**测试**环境以执行最终测试，然后与用户共享了。

**将您的应用程序发布到测试环境**

1. 在应用程序构建器的右上角，选择**发布**。

1. 为测试环境添加版本描述。

1. 查看并选中与 SLA 相关的复选框。

1. 选择**启动**。发布最多可能需要 15 分钟。

1. （可选）准备就绪后，您可以通过选择 “**共享**” 并按照提示向其他人授予访问权限。
**注意**  
要共享应用程序，管理员必须已创建最终用户组。

测试后，再次选择 “**发布**”，将应用程序提升到生产环境。有关不同应用程序环境的更多信息，请参阅[应用程序环境](applications-publish.md#application-environments)。

## 后续步骤
<a name="getting-started-tutorial-next-steps"></a>

现在您已经创建了第一个应用程序，接下来是一些后续步骤：

1. 继续构建教程应用程序。现在，您已经配置了数据、一些页面和自动化，您可以添加其他页面和添加组件，以了解有关构建应用程序的更多信息。

1. 要了解有关构建应用程序的更多信息，请参阅[生成器文档](builder-documentation.md)。具体而言，以下主题可能有助于探索：
   + [自动化操作参考](automations-actions-reference.md)
   + [组件参考](components-reference.md)
   + [使用组件和自动化与 Amazon 简单存储服务交互](automations-s3.md)
   + [安全注意事项和缓解措施](security-considerations-and-mitigations.md)

   此外，以下主题包含有关本教程中讨论的概念的更多信息：
   + [预览、发布和共享应用程序](applications-preview-publish-share.md)
   + [在 App Studio 应用程序中创建实体](data-entities-create.md)