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

# 與 Amazon Simple Storage Service 與元件和自動化互動
<a name="automations-s3"></a>

您可以從 App Studio 應用程式叫用各種 Amazon S3 操作。例如，您可以建立簡單的管理員面板來管理您的使用者和訂單，並顯示來自 Amazon S3 的媒體。雖然您可以使用叫用** AWS**動作叫用任何 Amazon S3 操作，但您可以新增四個專用 Amazon S3 動作至應用程式中的自動化，以在 Amazon S3 儲存貯體和物件上執行常見操作。四個動作及其操作如下所示：
+ **Put Object**：使用 `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** 自動化動作。（獨立動作應在更複雜的案例中使用，這些案例涉及上傳之前或之後要採取的其他邏輯或動作。)

## 先決條件
<a name="automations-s3-prerequisites"></a>

本指南假設您已完成下列先決條件：

1. 建立並設定 Amazon S3 儲存貯體、IAM 角色和政策，以及 Amazon S3 連接器，以成功整合 Amazon S3 與 App Studio。若要建立連接器，您必須具有管理員角色。如需詳細資訊，請參閱[連線至 Amazon Simple Storage Service (Amazon S3)](connectors-s3.md)。

## 建立空白應用程式
<a name="automations-s3-create-app"></a>

透過執行下列步驟，建立要在本指南中使用的空白應用程式。

**建立空白應用程式**

1. 在導覽窗格中，選擇**我的應用程式**。

1. 選擇 **\+ 建立應用程式**。

1. 在**建立應用程式**對話方塊中，為您的應用程式命名，選擇**從頭開始**，然後選擇**下一步**。

1. 在**連線至現有資料**對話方塊中，選擇**略過**以建立應用程式。

1. 選擇**編輯要**帶到新應用程式的畫布，您可以在其中使用元件、自動化和資料來設定應用程式的外觀和功能。

## 建立頁面
<a name="automations-s3-create-pages"></a>

在應用程式中建立三個頁面以收集或顯示資訊。

**建立頁面**

1. 如有必要，請選擇畫布頂端的**分頁**。

1. 在左側導覽中，您的應用程式已建立單一頁面。選擇 **\+ 新增**兩次以建立另外兩個頁面。導覽窗格應會顯示總共三個頁面。

1. 執行下列步驟來更新 **Page1** 頁面的名稱：

   1. 選擇省略號圖示，然後選擇**頁面屬性**。

   1. 在右側**屬性**功能表中，選擇鉛筆圖示以編輯名稱。

   1. 輸入 **FileList**，然後按 **Enter**。

1. 重複上述步驟以更新第二頁和第三頁，如下所示：
   + 將**Page2** 重新命名為 **UploadFile**。
   + 將 **Page3** 重新命名為 **FailUpload**。

現在，您的應用程式應該有三個頁面，名為 **FileList**、**UploadFile** 和 **FailUpload**，顯示在左側**頁面**面板中。

接著，您將建立和設定與 Amazon S3 互動的自動化。

## 建立和設定自動化
<a name="automations-s3-automations"></a>

建立與 Amazon S3 互動的應用程式自動化。使用下列程序建立下列自動化：
+ 列出 Amazon S3 儲存貯體中物件的 **getFiles** 自動化，用於填充資料表元件。
+ **deleteFile** 自動化會從 Amazon S3 儲存貯體刪除物件，其將用於將刪除按鈕新增至資料表元件。
+ **viewFile** 自動化會從 Amazon S3 儲存貯體取得物件並顯示它，用於顯示從資料表元件中選取之單一物件的更多詳細資訊。

### 建立`getFiles`自動化
<a name="automations-s3-get-files"></a>

建立自動化，列出指定 Amazon S3 儲存貯體中的檔案。

1. 選擇畫布頂端的**自動化**索引標籤。

1. 選擇 **\+ 新增自動化**。

1. 在右側面板中，選擇**屬性**。

1. 選擇鉛筆圖示來更新自動化名稱。輸入 **getFiles**，然後按 **Enter**。

1. 透過執行下列步驟來新增**清單物件**動作：

   1. 在右側面板中，選擇**動作**。

   1. 選擇**列出物件**以新增動作。動作應該命名為 `ListObjects1`。

1. 透過執行下列步驟來設定動作：

   1. 從畫布中選擇動作以開啟右側**屬性**功能表。

   1. 針對**連接器**，選擇您從先決條件建立的 Amazon S3 連接器。

   1. 針對**組態**，輸入下列文字，將 {{bucket\_name}} 取代為您在先決條件中建立的儲存貯體：

      ```
      {
        "Bucket": "{{bucket_name}}",
        "Prefix": ""
      }
      ```
**注意**  
您可以使用 `Prefix` 欄位，將回應限制為以指定字串開頭的物件。

1. 此自動化的輸出將用於將 Amazon S3 儲存貯體中的物件填入資料表元件。不過，根據預設，自動化不會建立輸出。執行下列步驟，設定自動化以建立自動化輸出：

   1. 在左側導覽中，選擇 **getFiles** 自動化。

   1. 在右側**屬性**功能表的**自動化輸出**中，選擇 **\+ 新增輸出**。

   1. 針對**輸出**，輸入 **{{results.ListObjects1.Contents}}**。此表達式會傳回 動作的內容，現在可以用來填入資料表元件。

### 建立`deleteFile`自動化
<a name="automations-s3-delete-file"></a>

建立從指定的 Amazon S3 儲存貯體刪除物件的自動化。

1. 在左側**自動化**面板中，選擇 **\+ 新增**。

1. 選擇 **\+ 新增自動化**。

1. 在右側面板中，選擇**屬性**。

1. 選擇鉛筆圖示來更新自動化名稱。輸入 **deleteFile**，然後按 **Enter**。

1. 透過執行下列步驟，新增用來將資料傳遞至自動化的自動化參數：

   1. 在**屬性**功能表右側，在**自動化參數**中，選擇 **\+ 新增**。

   1. 選擇鉛筆圖示以編輯自動化參數。將參數名稱更新為 **fileName**，然後按 **Enter** 鍵。

1. 透過執行下列步驟來新增**刪除物件**動作：

   1. 在右側面板中，選擇**動作**。

   1. 選擇**刪除物件**以新增動作。動作應該命名為 `DeleteObject1`。

1. 透過執行下列步驟來設定動作：

   1. 從畫布中選擇動作以開啟右側**屬性**功能表。

   1. 針對**連接器**，選擇您從先決條件建立的 Amazon S3 連接器。

   1. 針對**組態**，輸入下列文字，將 {{bucket\_name}} 取代為您在先決條件中建立的儲存貯體：

      ```
      {
        "Bucket": "{{bucket_name}}",
        "Key": params.fileName
      }
      ```

### 建立`viewFile`自動化
<a name="automations-s3-view-file"></a>

建立從指定的 Amazon S3 儲存貯體擷取單一物件的自動化。稍後，您將使用檔案檢視器元件來設定此自動化，以顯示物件。

1. 在左側**自動化**面板中，選擇 **\+ 新增**。

1. 選擇 **\+ 新增自動化**。

1. 在右側面板中，選擇**屬性**。

1. 選擇鉛筆圖示來更新自動化名稱。輸入 **viewFile**，然後按 **Enter**。

1. 透過執行下列步驟，新增用來將資料傳遞至自動化的自動化參數：

   1. 在**屬性**功能表右側，在**自動化參數**中，選擇 **\+ 新增**。

   1. 選擇鉛筆圖示以編輯自動化參數。將參數名稱更新為 **fileName**，然後按 **Enter** 鍵。

1. 透過執行下列步驟來新增**取得物件**動作：

   1. 在右側面板中，選擇**動作**。

   1. 選擇**取得物件**以新增動作。動作應該命名為 `GetObject1`。

1. 透過執行下列步驟來設定動作：

   1. 從畫布中選擇動作以開啟右側**屬性**功能表。

   1. 針對**連接器**，選擇您從先決條件建立的 Amazon S3 連接器。

   1. 針對**組態**，輸入下列文字，將 {{bucket\_name}} 取代為您在先決條件中建立的儲存貯體：

      ```
      {
        "Bucket": "{{bucket_name}}",
        "Key": params.fileName
      }
      ```

1. 根據預設，自動化不會建立輸出。執行下列步驟，設定自動化以建立自動化輸出：

   1. 在左側導覽中，選擇 **viewFile** 自動化。

   1. 在右側**屬性**功能表的**自動化輸出**中，選擇 **\+ 新增輸出**。

   1. 針對**輸出**，輸入 **{{results.GetObject1.Body.transformToWebStream()}}**。此表達式會傳回 動作的內容。
**注意**  
您可以透過`S3 GetObject`下列方式讀取 的回應：  
`transformToWebStream`：傳回必須取用的串流，才能擷取資料。如果用作自動化輸出，自動化會處理此問題，而輸出可以用作影像或 PDF 檢視器元件的資料來源。它也可以用作另一個操作的輸入，例如 `S3 PutObject`。
`transformToString`：傳回自動化的原始資料，如果您的檔案包含文字內容，例如 JSON 資料，則應用於 JavaScript 動作。必須等待，例如： `await results.GetObject1.Body.transformToString();`
`transformToByteArray`：傳回 8 位元未簽署整數的陣列。此回應提供位元組陣列的目的，允許儲存和處理二進位資料。必須等待，例如： `await results.GetObject1.Body.transformToByteArray();`

接下來，您將新增元件到您先前建立的頁面，並使用自動化進行設定，以便使用者可以使用您的應用程式來檢視和刪除檔案。

## 新增和設定頁面元件
<a name="automations-s3-components"></a>

現在您已建立定義應用程式商業邏輯和功能的自動化，您將建立元件並連接兩者。

### 將元件新增至 **FileList** 頁面
<a name="automations-s3-components-filelist-page"></a>

您先前建立的 **FileList** 頁面將用於顯示已設定 Amazon S3 儲存貯體中的檔案清單，以及從清單中選擇之任何檔案的詳細資訊。若要這麼做，您將執行下列動作：

1. 建立資料表元件以顯示檔案清單。您將設定資料表的資料列，以填入您先前建立的 **getFiles** 自動化輸出。

1. 建立 PDF 檢視器元件以顯示單一 PDF。您將設定 元件，使用您先前建立的 **viewFile** 自動化來從儲存貯體擷取檔案，以檢視從資料表中選取的檔案。

**將元件新增至 **FileList** 頁面**

1. 選擇畫布頂端的**分頁**。

1. 在左側**頁面**面板中，選擇 **FileList** 頁面。

1. 在右側**元件**頁面上，尋找**資料表**元件，並將其拖曳至畫布的中心。

1. 選擇您剛新增至頁面的資料表元件。

1. 在右側**屬性**功能表中，選擇**來源**下拉式清單，然後選取**自動化**。

1. 選擇**自動化**下拉式清單，然後選取 **getFiles** 自動化。資料表將使用 **getFiles** 自動化的輸出做為其內容。

1. 新增要填入檔案名稱的資料欄。

   1. 在右側**屬性**功能表的資料**欄**旁，選擇 **\+ 新增**。

   1. 選擇剛新增之 **Column1** 資料欄右側的箭頭圖示。

   1. 對於資料**欄標籤**，將資料欄重新命名為 **Filename**。

   1. 針對**數值**，輸入 **{{currentRow.Key}}**。

   1. 選擇面板頂端的箭頭圖示，以返回主要**屬性**面板。

1. 新增資料表動作以刪除資料列中的檔案。

   1. 在**屬性**功能表右側**的動作**旁，選擇 **\+ 新增**。

   1. 在**動作**中，將**按鈕**重新命名為 **Delete**。

   1. 選擇剛重新命名的**刪除**動作右側的箭頭圖示。

   1. 在**按一下時**，選擇 **\+ 新增動作**，然後選擇**叫用自動化**。

   1. 選擇新增的動作以進行設定。

   1. 針對**動作名稱**，輸入 **DeleteRecord**。

   1. 在**叫用自動化**中，選取 **deleteFile**。

   1. 在參數文字方塊中，輸入 **{{currentRow.Key}}**。

   1. 針對**數值**，輸入 **{{currentRow.Key}}**。

1. 在右側面板中，選擇**元件**以檢視元件選單。有兩種顯示檔案的選項：
   + **影像檢視器**，可檢視具有 `.png`、 `.jpeg`或 `.jpg`副檔名的檔案。
   + 用於檢視 PDF 檔案的 PDF **檢視器**元件。

   在本教學課程中，您將新增和設定 **PDF 檢視器**元件。

1. 新增 **PDF 檢視器**元件。

   1. 在右側**元件**頁面上，尋找 **PDF 檢視器**元件，並將其拖曳至資料表元件下方的畫布。

   1. 選擇剛新增的 **PDF 檢視器**元件。

   1. 在右側**屬性**功能表中，選擇**來源**下拉式清單，然後選取**自動化**。

   1. 選擇**自動化**下拉式清單，然後選取 **viewFile** 自動化。資料表將使用 **viewFile** 自動化的輸出做為其內容。

   1. 在參數文字方塊中，輸入 **{{ui.table1.selectedRow["Filename"]}}**。

   1. 在右側面板中，也有**檔案名稱**欄位。此欄位的值會用作 PDF 檢視器元件的標頭。輸入與上一個步驟相同的文字：**{{ui.table1.selectedRow["Filename"]}}**。

### 將元件新增至 **UploadFile** 頁面
<a name="automations-s3-components-uploadfile-page"></a>

**UploadFile** 頁面將包含檔案選取器，可用於選取檔案並將其上傳至設定的 Amazon S3 儲存貯體。您將新增 **S3 上傳**元件至頁面，使用者可以使用該頁面來選取和上傳檔案。

1. 在左側**頁面**面板中，選擇 **UploadFile** 頁面。

1. 在右側**元件**頁面上，尋找 **S3 上傳**元件，並將其拖曳至畫布的中心。

1. 選擇您剛新增至頁面的 S3 上傳元件。

1. 在**屬性**功能表右側，設定元件：

   1. 在**連接器**下拉式清單中，選取在先決條件中建立的 Amazon S3 連接器。

   1. 在**儲存貯體**中，輸入 Amazon S3 儲存貯體的名稱。

   1. 針對**檔案名稱**，輸入 **{{ui.s3Upload1.files[0]?.nameWithExtension}}**。

   1. 對於**檔案大小上限**，請在文字方塊**5**中輸入 ，並確保已在下拉式清單中選取 **MB** 。

   1. 在**觸發**區段中，透過執行下列步驟，新增成功或失敗上傳後執行的動作：

      若要新增成功上傳後執行的動作：

      1. 在**成功時**，選擇 **\+ 新增動作**，然後選取**導覽**。

      1. 選擇新增的動作以進行設定。

      1. 對於**導覽類型**，選擇**頁面**。

      1. 針對**導覽至**，選擇 **FileList**。

      1. 選擇面板頂端的箭頭圖示，以返回主要**屬性**面板。

      若要新增在上傳失敗後執行的動作：

      1. 在**失敗時**，選擇 **\+ 新增動作**，然後選取**導覽**。

      1. 選擇新增的動作以進行設定。

      1. 對於**導覽類型**，選擇**頁面**。

      1. 針對**導覽至**，選擇 **FailUpload**。

      1. 選擇面板頂端的箭頭圖示，以返回主要**屬性**面板。

### 將元件新增至 **FailUpload** 頁面
<a name="automations-s3-components-failupload-page"></a>

**FailUpload** 頁面是簡單的頁面，其中包含文字方塊，可通知使用者其上傳失敗。

1. 在左側**頁面**面板中，選擇 **FailUpload** 頁面。

1. 在右側**元件**頁面上，尋找**文字**元件，並將其拖曳至畫布的中心。

1. 選擇您剛新增至頁面的文字元件。

1. 在**屬性**功能表右側**的值**中，輸入 **Failed to upload, try again**。

## 更新您的應用程式安全設定
<a name="automations-s3-components-app-security-settings"></a>

App Studio 中的每個應用程式都有內容安全設定，可用來限制外部媒體或資源，或您可以上傳物件至 Amazon S3 中的哪些網域。預設設定為封鎖所有網域。若要從應用程式上傳物件至 Amazon S3，您必須更新 設定，以允許您要上傳物件的網域。

**允許網域將物件上傳至 Amazon S3**

1. 選擇**應用程式設定**索引標籤。

1. 選擇**內容安全設定**索引標籤。

1. 針對 **Connect 來源**，選擇**允許所有連線**。

1. 選擇**儲存**。

## 後續步驟：預覽和發佈要測試的應用程式
<a name="automations-s3-preview-publish-test"></a>

應用程式現在已準備好進行測試。如需預覽和發佈應用程式的詳細資訊，請參閱[預覽、發佈和共用應用程式](applications-preview-publish-share.md)。