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

# 教程：从一个空的应用程序开始构建
<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)