本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。

# 教學課程：從空白應用程式開始建置
<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 連接器，將這些資料模型連接到各種資料來源，包括 AWS 服務和外部 APIs。
+ **連接器**：App Studio 提供具有各種資料來源的連線，包括 Aurora、DynamoDB 和 Amazon Redshift 等 AWS 服務。資料來源也包括第三方服務，例如 Salesforce，或使用 OpenAPI 或一般 API 連接器的其他許多服務。您可以使用 App Studio 連接器，輕鬆地將來自這些企業級服務和外部應用程式的資料和功能整合到您的應用程式中。

隨著教學課程的進行，您將探索元件、資料和自動化的關鍵概念如何結合起來，以建置您的內部客戶會議請求應用程式。

以下是說明您將在本教學課程中做什麼的高階步驟：

1. **從資料**開始：許多應用程式從資料模型開始，因此本教學課程也從資料開始。若要建置客戶會議請求應用程式，請先建立`MeetingRequests`實體。此實體代表儲存所有相關會議請求資訊的資料結構，例如客戶名稱、會議日期、議程和出席者。此資料模型是應用程式的基礎，並支援您將建置的各種元件和自動化。

1. **建立您的使用者介面 (UI)**：設定資料模型後，教學課程會引導您建置使用者介面 (UI)。在 App Studio 中，您可以透過新增*頁面*和新增*元件*來建置 UI。您可以將*資料表*、*詳細資訊檢視*和*行事曆*等元件新增至會議請求儀表板頁面。這些元件旨在顯示存放在`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 App Studio 概念](concepts.md)以熟悉重要的 App Studio 概念。
+ 選用：了解基本 Web 開發概念，例如 JavaScript 語法。
+ 選用：熟悉 AWS 服務。

## 步驟 1：建立 應用程式
<a name="getting-started-tutorial-steps-create-application"></a>

1. 登入 App Studio。

1. 在左側導覽中，選擇**建置器中樞**，然後選擇 **\$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*) 會有一種**字串**類型，數值主索引鍵 （例如 *meetingId*) 會有一種 **Float** 類型。

主索引鍵是實體的重要元件，因為它會強制執行資料完整性、防止資料重複，並啟用有效的資料擷取和查詢。

**建立受管實體**

1. 從頂端列功能表中選擇**資料**。

1. 選擇 **\$1 建立實體**。

1. 選擇**建立 App Studio 受管實體**。

1. 在**實體名稱**欄位中，提供實體的名稱。針對本教學，輸入 **MeetingRequests**。

1. 在**主索引鍵**欄位中，輸入要提供給實體中主索引鍵資料欄的主索引鍵名稱標籤。針對本教學，輸入 **requestID**。

1. 針對**主索引鍵資料類型**，選擇**浮動**。

1. 選擇 **Create entity** (建立實體)。

### 將欄位新增至您的實體
<a name="getting-started-tutorial-steps-add-fields"></a>

對於每個欄位，您將指定**顯示名稱**，這是應用程式使用者可見的標籤。顯示名稱可以包含空格和特殊字元，但在實體中必須是唯一的。顯示名稱可做為易於使用的 欄位標籤，並協助使用者輕鬆識別和了解其用途。

接著，您將提供**系統名稱**，這是應用程式在內部用來參考 欄位的唯一識別符。系統名稱應該簡潔，沒有空格或特殊字元。系統名稱允許應用程式變更欄位的資料。它可做為應用程式內 欄位的唯一參考點。

最後，您將選取****最能代表您要在 欄位中存放的資料類型，例如字串 （文字）、布林值 (true/false)、日期、小數、浮點數、整數或 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. 選擇 **Generate (產生)**。

1. 選擇畫布上的**提交**按鈕以進行選取。

1. 在右側屬性面板的**觸發**區段中，選擇 **\$1 新增**。

1. 選擇**導覽**。

1. 在右側屬性面板中，將**動作名稱**變更為描述性名稱，例如 **Navigate to MeetingRequestsDashboard**。

1. 將**導覽類型**變更為頁面。在**導覽至**下拉式清單中，選擇 **MeetingRequestsDashboard**。

現在我們有了會議請求建立頁面和表單，我們希望從`MeetingRequestsDashboard`頁面輕鬆導覽至此頁面，以便檢閱儀表板的最終使用者可以輕鬆建立會議請求。使用下列程序，在導覽至`MeetingRequestsDashboard`頁面的頁面上建立按鈕`CreateMeetingRequest`。

**新增按鈕以從 導覽`MeetingRequestsDashboard`至 `CreateMeetingRequest`**

1. 在頂端橫幅中，選擇**頁面**。

1. 選擇`MeetingRequestsDashboard`頁面。

1. 在右側**元件**面板中，尋找**按鈕**元件，將其拖曳到畫布上，並將其放在資料表上方。

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 Simple Storage Service 與元件和自動化互動](automations-s3.md)
   + [安全考量和緩解措施](security-considerations-and-mitigations.md)

   此外，下列主題包含教學課程中討論之概念的詳細資訊：
   + [預覽、發佈和共用應用程式](applications-preview-publish-share.md)
   + [在 App Studio 應用程式中建立實體](data-entities-create.md)