本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。
# 教學
**Topics**
+ [使用 Amazon Bedrock 建置 AI 文字摘要器應用程式](tutorial-conversational-bedrock.md)
+ [與 Amazon Simple Storage Service 與元件和自動化互動](automations-s3.md)
+ [在 App Studio 應用程式中叫用 Lambda 函數](tutorial-lambda.md)
# 使用 Amazon Bedrock 建置 AI 文字摘要器應用程式
在本教學課程中，您將在 App Studio 中建置應用程式，該應用程式使用 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 App Studio 概念](concepts.md)和 [教學課程：從空白應用程式開始建置](getting-started-tutorial-empty.md)以熟悉重要的 App Studio 概念。
## 步驟 1：建立和設定 IAM 角色和 App Studio 連接器
若要提供 App Studio 對 Amazon Bedrock 模型的存取權，您必須：
1. 啟用您要在應用程式中使用的 Amazon Bedrock 模型。在本教學課程中，您將使用 **Claude 3 Sonnet**，因此請務必啟用該模型。
1. 建立具有 Amazon Bedrock 適當許可的 IAM 角色。
1. 使用將在應用程式中使用的 IAM 角色建立 App Studio 連接器。
前往 [連線至 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 的互動：
+ 輸入：將文字輸入從使用者傳遞至自動化的參數。
+ 動作：一個將文字輸入傳送至 Amazon Bedrock 並傳回輸出文字摘要的 **GenAI 提示**動作。
+ 輸出：自動化輸出，其中包含來自 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. 選擇鉛筆圖示、輸入名稱，然後按下 Enter 鍵，將動作重新命名**PromptBedrock**為 。
1. 在**連接器**中，選取在 中建立的連接器[步驟 1：建立和設定 IAM 角色和 App Studio 連接器](#tutorial-conversational-bedrock-steps-create-role-connector)。
1. 在**模型**中，選擇您要用來處理提示的 Amazon Bedrock 模型。在本教學課程中，您將選擇 **Claude 3.5 Sonnet。**
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 的**按鈕**元件。
+ **文字區域**元件，顯示來自 Amazon Bedrock 的摘要。
將**文字輸入**元件新增至使用者用來輸入要摘要之文字提示的頁面。
**新增文字輸入元件**
1. 在右側**元件**面板中，找到**文字輸入**元件並將其拖曳到畫布上。
1. 選擇畫布中的文字輸入以進行選取。
1. 在右側**屬性**面板中，更新下列設定：
1. 選擇鉛筆圖示，將文字輸入重新命名為 **inputPrompt**。
1. 在**標籤**中，輸入 **Prompt**。
1. 在**預留位置**中，輸入 **Enter text to be summarized**。
現在，新增使用者將選擇將提示傳送至 Amazon Bedrock 的 **Button** 元件。
**新增按鈕元件**
1. 在右側**元件**面板中，找到**按鈕**元件並將其拖曳到畫布上。
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. 在**元件**中，選取 **textSummary** 元件。
1. 在**動作**中，選取**設定值**。
1. 在**將值設為** 中，輸入 **\$1\$1results.invokeBedrockAutomation\$1\$1**。
## 步驟 5：將應用程式發佈至**測試**環境
一般而言，當您建置應用程式時，建議您預覽應用程式，以查看其外觀並對其功能進行初始測試。不過，由於應用程式不會與預覽環境中的外部服務互動，因此您將改為將應用程式發佈至測試環境，以測試傳送請求並從 Amazon Bedrock 接收回應。
**將您的應用程式發佈至測試環境**
1. 在應用程式建置器的右上角，選擇**發佈**。
1. 新增測試環境的版本描述。
1. 檢閱並選取有關 SLA 的核取方塊。
1. 選擇 **開始使用**。發佈最多可能需要 15 分鐘。
1. （選用） 當您準備好時，您可以選擇**共用**並依照提示給予其他人存取權。如需共用 App Studio 應用程式的詳細資訊，請參閱 [共用已發佈的應用程式](application-share.md)。
測試應用程式後，再次選擇**發佈**，將應用程式提升為生產環境。請注意，在共用最終使用者之前，生產環境中的應用程式無法使用。如需不同應用程式環境的詳細資訊，請參閱 [應用程式環境](applications-publish.md#application-environments)。
## (選用) 清除
您現在已成功完成教學課程，並使用 Amazon Bedrock 在 App Studio 中建置文字摘要應用程式。您可以繼續使用您的應用程式，也可以清除在本教學課程中建立的資源。下列清單包含要清除的資源清單：
+ 在 App Studio 中建立的 Amazon 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，並想要還原存取，請參閱《[Amazon Bedrock 使用者指南》中的管理對 Amazon Bedrock 基礎模型的存取](https://docs.aws.amazon.com/bedrock/latest/userguide/model-access.html)。 **
# 與 Amazon Simple Storage Service 與元件和自動化互動
您可以從 App Studio 應用程式叫用各種 Amazon S3 操作。例如，您可以建立簡單的管理員面板來管理您的使用者和訂單，並顯示來自 Amazon S3 的媒體。雖然您可以使用叫用** AWS**動作叫用任何 Amazon S3 操作，但您可以新增四個專用 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` 將檔案上傳至設定的儲存貯體和資料夾。本教學課程將使用此元件取代獨立的 **Put Object** 自動化動作。（在涉及上傳之前或之後要採取的其他邏輯或動作的更複雜案例中，應使用獨立動作。)
## 先決條件
本指南假設您已完成下列先決條件：
1. 建立並設定 Amazon S3 儲存貯體、IAM 角色和政策，以及 Amazon S3 連接器，以成功整合 Amazon S3 與 App Studio。若要建立連接器，您必須具有管理員角色。如需詳細資訊，請參閱[連線至 Amazon Simple Storage Service (Amazon S3)](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 互動的應用程式自動化。使用下列程序建立下列自動化：
+ 列出 Amazon S3 儲存貯體中物件的 **getFiles** 自動化，用於填充資料表元件。
+ **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. 在右側面板中，選擇**元件**以檢視元件選單。有兩種顯示檔案的選項：
+ **影像檢視器**，可檢視具有 `.png`、 `.jpeg`或 `.jpg`副檔名的檔案。
+ 用於檢視 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 函數的相關資訊。如需詳細資訊，請參閱 [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. 在右側**動作**選單中，選擇**叫用 Lambda** 將步驟新增至自動化。
1. 在畫布中選擇新的 Lambda 步驟，以檢視和設定其屬性。
1. 在右側**屬性**功能表中，執行下列步驟來設定步驟：
1. 在**連接器**中，選取為將 App Studio 連線至 Lambda 函數而建立的連接器。
1. 在**函數名稱**中，輸入 Lambda 函數的名稱。
1. 在**函數事件**中，輸入要傳遞給 Lambda 函數的事件。下列清單提供一些常見的使用案例範例：
+ 傳遞自動化參數的值，例如檔案名稱或其他字串： `varName: params.paramName`
+ 傳遞先前動作的結果： `varName: results.actionName1.data[0].fieldName`
+ 如果您在*迴圈*動作內新增*調用 Lambda* 動作，您可以從每個重複項目傳送類似於參數的欄位： `varName: currentItem.fieldName`
1. **模擬輸出**欄位可用於提供模擬輸出，以在預覽時測試應用程式，其中連接器未處於作用中狀態。
## 設定 UI 元素以執行自動化
現在您的自動化已設定 動作來叫用 Lambda 函數，您可以設定 UI 元素來執行自動化。在本教學課程中，您將建立一個按鈕，在按一下時執行自動化。
**提示**
您也可以使用*叫用自動化動作從其他自動化執行自動化*。
**從按鈕執行自動化**
1. 編輯應用程式時，請選擇**分頁**索引標籤。
1. 在右側功能表中，選擇**按鈕**元件，將按鈕新增至頁面。
1. 選擇新按鈕進行設定。
1. 在屬性右側****選單的**觸發**中，選擇 **\$1 新增**，然後選擇**叫用自動化**。
1. 選擇新的自動化調用觸發條件以進行設定。
1. 在**叫用自動化**中，選取叫用 Lambda 函數的自動化，並設定您要傳送至自動化的任何參數。
現在，在您應用程式中選擇此按鈕的任何使用者都會導致設定的自動化執行。
## 後續步驟：預覽和發佈應用程式以進行測試
您的應用程式現在已準備好進行測試。在開發環境中預覽您的應用程式時，連接器不會處於作用中狀態，因此您無法在預覽時測試自動化，因為它使用連接器來連線 AWS Lambda。若要測試依賴連接器的應用程式功能，您必須將應用程式發佈至測試環境。如需預覽和發佈應用程式的詳細資訊，請參閱[預覽、發佈和共用應用程式](applications-preview-publish-share.md)。