Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.
# Berinteraksi dengan Amazon Simple Storage Service dengan komponen dan otomatisasi
Anda dapat menjalankan berbagai operasi Amazon S3 dari aplikasi App Studio. Misalnya, Anda dapat membuat panel admin sederhana untuk mengelola pengguna dan pesanan Anda dan menampilkan media Anda dari Amazon S3. **Meskipun Anda dapat menjalankan operasi Amazon S3 apa pun menggunakan tindakan AWS Invoke, ada empat tindakan Amazon S3 khusus yang dapat Anda tambahkan ke otomatisasi di aplikasi untuk melakukan operasi umum pada bucket dan objek Amazon S3.** Keempat tindakan dan operasinya adalah sebagai berikut:
+ **Put Object**: Menggunakan `Amazon S3 PutObject` operasi untuk menambahkan objek bucket Amazon S3.
+ **Dapatkan Objek**: Menggunakan `Amazon S3 GetObject` operasi untuk mengambil objek dari bucket Amazon S3.
+ **Daftar Objek**: Menggunakan `Amazon S3 ListObjects` operasi untuk mencantumkan objek di bucket Amazon S3.
+ **Hapus Objek**: Menggunakan `Amazon S3 DeleteObject` operasi untuk menghapus objek dari bucket Amazon S3.
Selain tindakan, ada komponen **unggah S3** yang dapat Anda tambahkan ke halaman dalam aplikasi. Pengguna dapat menggunakan komponen ini untuk memilih file yang akan diunggah, dan komponen memanggil `Amazon S3 PutObject` untuk mengunggah file ke bucket dan folder yang dikonfigurasi. Tutorial ini akan menggunakan komponen ini sebagai pengganti tindakan otomatisasi **Put Object** mandiri. (Tindakan mandiri harus digunakan dalam skenario yang lebih kompleks yang melibatkan logika atau tindakan tambahan yang harus diambil sebelum atau setelah mengunggah.)
## Prasyarat
Panduan ini mengasumsikan Anda telah menyelesaikan prasyarat berikut:
1. Membuat dan mengonfigurasi bucket Amazon S3, peran dan kebijakan IAM, serta konektor Amazon S3 agar berhasil mengintegrasikan Amazon S3 dengan App Studio. Untuk membuat konektor, Anda harus memiliki peran Administrator. Untuk informasi selengkapnya, lihat [Connect ke Amazon Simple Storage Service (Amazon S3)](connectors-s3.md).
## Buat aplikasi kosong
Buat aplikasi kosong untuk digunakan di seluruh panduan ini dengan melakukan langkah-langkah berikut.
**Untuk membuat aplikasi kosong**
1. Di panel navigasi, pilih **Aplikasi saya**.
1. Pilih **\+ Buat aplikasi**.
1. Di kotak dialog **Buat aplikasi**, beri nama aplikasi Anda, pilih **Mulai dari awal**, dan pilih **Berikutnya**.
1. Di kotak dialog **Connect to existing data**, pilih **Lewati** untuk membuat aplikasi.
1. Pilih **Edit aplikasi** untuk dibawa ke kanvas aplikasi baru Anda, di mana Anda dapat menggunakan komponen, otomatisasi, dan data untuk mengonfigurasi tampilan dan fungsi aplikasi Anda.
## Buat halaman
Buat tiga halaman dalam aplikasi Anda untuk mengumpulkan atau menampilkan informasi.
**Untuk membuat halaman**
1. Jika perlu, pilih tab **Halaman** di bagian atas kanvas.
1. Di navigasi sebelah kiri, ada satu halaman yang dibuat dengan aplikasi Anda. Pilih **\+ Tambahkan** dua kali untuk membuat dua halaman lagi. Panel navigasi harus menampilkan tiga halaman total.
1. Perbarui nama halaman **Page1** dengan melakukan langkah-langkah berikut:
1. Pilih ikon elips dan pilih properti **Halaman**.
1. Di menu **Properties** sebelah kanan, pilih ikon pensil untuk mengedit nama.
1. Masuk **FileList** dan tekan **Enter**.
1. Ulangi langkah sebelumnya untuk memperbarui halaman kedua dan ketiga sebagai berikut:
+ Ubah nama **Page2** menjadi. **UploadFile**
+ Ubah nama **Page3** menjadi. **FailUpload**
Sekarang, aplikasi Anda harus memiliki tiga halaman bernama **FileList**, **UploadFile**, dan **FailUpload**, yang ditampilkan di panel **Pages** sebelah kiri.
Selanjutnya, Anda akan membuat dan mengonfigurasi otomatisasi yang berinteraksi dengan Amazon S3.
## Buat dan konfigurasikan otomatisasi
Buat otomatisasi aplikasi Anda yang berinteraksi dengan Amazon S3. Gunakan prosedur berikut untuk membuat otomatisasi berikut:
+ Otomatisasi **GetFiles** yang mencantumkan objek di bucket Amazon S3 Anda, yang akan digunakan untuk mengisi komponen tabel.
+ Otomatisasi **DeleteFile** yang menghapus objek dari bucket Amazon S3 Anda, yang akan digunakan untuk menambahkan tombol hapus ke komponen tabel.
+ Otomatisasi **ViewFile** yang mendapatkan objek dari bucket Amazon S3 Anda dan menampilkannya, yang akan digunakan untuk menampilkan detail selengkapnya tentang satu objek yang dipilih dari komponen tabel.
### Buat `getFiles` otomatisasi
Buat otomatisasi yang akan mencantumkan file dalam bucket Amazon S3 tertentu.
1. Pilih tab **Automations** di bagian atas kanvas.
1. Pilih **\+ Tambahkan otomatisasi**.
1. Di panel sebelah kanan, pilih **Properties**.
1. Perbarui nama otomatisasi dengan memilih ikon pensil. Masuk **getFiles** dan tekan **Enter**.
1. Tambahkan tindakan **objek Daftar** dengan melakukan langkah-langkah berikut:
1. Di panel sebelah kanan, pilih **Tindakan**.
1. Pilih **Daftar objek** untuk menambahkan tindakan. Tindakan itu harus diberi nama`ListObjects1`.
1. Konfigurasikan tindakan dengan melakukan langkah-langkah berikut:
1. Pilih tindakan dari kanvas untuk membuka menu **Properties** sebelah kanan.
1. Untuk **Konektor**, pilih konektor Amazon S3 yang Anda buat dari prasyarat.
1. Untuk **Konfigurasi**, masukkan teks berikut, ganti {{bucket\_name}} dengan bucket yang Anda buat di prasyarat:
```
{
"Bucket": "{{bucket_name}}",
"Prefix": ""
}
```
**catatan**
Anda dapat menggunakan `Prefix` bidang untuk membatasi respons terhadap objek yang dimulai dengan string yang ditentukan.
1. Output otomatisasi ini akan digunakan untuk mengisi komponen tabel dengan objek dari bucket Amazon S3 Anda. Namun, secara default, otomatisasi tidak membuat output. Konfigurasikan otomatisasi untuk membuat output otomatisasi dengan melakukan langkah-langkah berikut:
1. Di navigasi sebelah kiri, pilih otomatisasi **GetFiles**.
1. Di menu **Properties** sebelah kanan, di **Output otomatisasi**, pilih **\+ Tambahkan output**.
1. Untuk **Output**, masukkan**{{results.ListObjects1.Contents}}**. Ekspresi ini mengembalikan isi tindakan, dan sekarang dapat digunakan untuk mengisi komponen tabel.
### Buat `deleteFile` otomatisasi
Buat otomatisasi yang menghapus objek dari bucket Amazon S3 tertentu.
1. **Di panel **Otomatisasi** sebelah kiri, pilih \+ Tambah.**
1. Pilih **\+ Tambahkan otomatisasi**.
1. Di panel sebelah kanan, pilih **Properties**.
1. Perbarui nama otomatisasi dengan memilih ikon pensil. Masuk **deleteFile** dan tekan **Enter**.
1. Tambahkan parameter otomatisasi, yang digunakan untuk meneruskan data ke otomatisasi, dengan melakukan langkah-langkah berikut:
1. Di menu **Properties** sebelah kanan, di **parameter Otomasi**, pilih **\+ Tambah**.
1. Pilih ikon pensil untuk mengedit parameter otomatisasi. Perbarui nama parameter ke **fileName** dan tekan **Enter**.
1. Tambahkan tindakan **Hapus objek** dengan melakukan langkah-langkah berikut:
1. Di panel sebelah kanan, pilih **Tindakan**.
1. Pilih **Hapus objek** untuk menambahkan tindakan. Tindakan itu harus diberi nama`DeleteObject1`.
1. Konfigurasikan tindakan dengan melakukan langkah-langkah berikut:
1. Pilih tindakan dari kanvas untuk membuka menu **Properties** sebelah kanan.
1. Untuk **Konektor**, pilih konektor Amazon S3 yang Anda buat dari prasyarat.
1. Untuk **Konfigurasi**, masukkan teks berikut, ganti {{bucket\_name}} dengan bucket yang Anda buat di prasyarat:
```
{
"Bucket": "{{bucket_name}}",
"Key": params.fileName
}
```
### Buat `viewFile` otomatisasi
Buat otomatisasi yang mengambil satu objek dari bucket Amazon S3 tertentu. Nanti, Anda akan mengonfigurasi otomatisasi ini dengan komponen penampil file untuk menampilkan objek.
1. **Di panel **Otomatisasi** sebelah kiri, pilih \+ Tambah.**
1. Pilih **\+ Tambahkan otomatisasi**.
1. Di panel sebelah kanan, pilih **Properties**.
1. Perbarui nama otomatisasi dengan memilih ikon pensil. Masuk **viewFile** dan tekan **Enter**.
1. Tambahkan parameter otomatisasi, yang digunakan untuk meneruskan data ke otomatisasi, dengan melakukan langkah-langkah berikut:
1. Di menu **Properties** sebelah kanan, di **parameter Otomasi**, pilih **\+ Tambah**.
1. Pilih ikon pensil untuk mengedit parameter otomatisasi. Perbarui nama parameter ke **fileName** dan tekan **Enter**.
1. Tambahkan tindakan **Get object** dengan melakukan langkah-langkah berikut:
1. Di panel sebelah kanan, pilih **Tindakan**.
1. Pilih **Dapatkan objek** untuk menambahkan tindakan. Tindakan itu harus diberi nama`GetObject1`.
1. Konfigurasikan tindakan dengan melakukan langkah-langkah berikut:
1. Pilih tindakan dari kanvas untuk membuka menu **Properties** sebelah kanan.
1. Untuk **Konektor**, pilih konektor Amazon S3 yang Anda buat dari prasyarat.
1. Untuk **Konfigurasi**, masukkan teks berikut, ganti {{bucket\_name}} dengan bucket yang Anda buat di prasyarat:
```
{
"Bucket": "{{bucket_name}}",
"Key": params.fileName
}
```
1. Secara default, otomatisasi tidak membuat output. Konfigurasikan otomatisasi untuk membuat output otomatisasi dengan melakukan langkah-langkah berikut:
1. Di navigasi sebelah kiri, pilih otomatisasi **ViewFile**.
1. Di menu **Properties** sebelah kanan, di **Output otomatisasi**, pilih **\+ Tambahkan output**.
1. Untuk **Output**, masukkan**{{results.GetObject1.Body.transformToWebStream()}}**. Ekspresi ini mengembalikan isi dari tindakan.
**catatan**
Anda dapat membaca tanggapan dengan `S3 GetObject` cara-cara berikut:
`transformToWebStream`: Mengembalikan aliran, yang harus dikonsumsi untuk mengambil data. Jika digunakan sebagai output otomatisasi, otomatisasi menangani ini, dan output dapat digunakan sebagai sumber data dari gambar atau komponen penampil PDF. Ini juga dapat digunakan sebagai input ke operasi lain, seperti`S3 PutObject`.
`transformToString`: Mengembalikan data mentah otomatisasi, dan harus digunakan dalam JavaScript tindakan jika file Anda berisi konten teks, seperti data JSON. Harus ditunggu, misalnya: `await results.GetObject1.Body.transformToString();`
`transformToByteArray`: Mengembalikan array 8-bit integer unsigned. Respons ini melayani tujuan array byte, yang memungkinkan penyimpanan dan manipulasi data biner. Harus ditunggu, misalnya: `await results.GetObject1.Body.transformToByteArray();`
Selanjutnya, Anda akan menambahkan komponen ke halaman yang Anda buat sebelumnya, dan mengonfigurasinya dengan otomatisasi Anda sehingga pengguna dapat menggunakan aplikasi Anda untuk melihat dan menghapus file.
## Tambahkan dan konfigurasikan komponen halaman
Sekarang setelah Anda membuat otomatisasi yang menentukan logika bisnis dan fungsionalitas aplikasi Anda, Anda akan membuat komponen dan menghubungkan keduanya.
### Tambahkan komponen ke **FileList**halaman
**FileList**Halaman yang Anda buat sebelumnya akan digunakan untuk menampilkan daftar file di bucket Amazon S3 yang dikonfigurasi dan detail lebih lanjut tentang file apa pun yang dipilih dari daftar. Untuk melakukan itu, Anda akan melakukan hal berikut:
1. Buat komponen tabel untuk menampilkan daftar file. Anda akan mengonfigurasi baris tabel yang akan diisi dengan output otomatisasi **GetFiles** yang sebelumnya Anda buat.
1. Buat komponen penampil PDF untuk menampilkan satu PDF. Anda akan mengonfigurasi komponen untuk melihat file yang dipilih dari tabel, menggunakan otomatisasi **ViewFile** yang sebelumnya Anda buat untuk mengambil file dari bucket Anda.
**Untuk menambahkan komponen ke **FileList**halaman**
1. Pilih tab **Pages** di bagian atas kanvas.
1. Di panel **Pages** sebelah kiri, pilih halaman. **FileList**
1. Di halaman **Components** sebelah kanan, temukan komponen **Table** dan seret ke tengah kanvas.
1. Pilih komponen tabel yang baru saja Anda tambahkan ke halaman.
1. **Di menu **Properties** sebelah kanan, pilih dropdown **Source** dan pilih Automation.**
1. Pilih dropdown **Otomasi** dan pilih otomatisasi **GetFiles**. Tabel akan menggunakan output otomatisasi **GetFiles** sebagai isinya.
1. Tambahkan kolom yang akan diisi dengan nama file.
1. Di menu **Properties** sebelah kanan, di sebelah **Kolom**, pilih **\+ Tambah**.
1. Pilih ikon panah di sebelah kanan kolom **Column1** yang baru saja ditambahkan.
1. Untuk **label Kolom**, ganti nama kolom menjadi**Filename**.
1. Untuk **Nilai**, masukkan **{{currentRow.Key}}**.
1. Pilih ikon panah di bagian atas panel untuk kembali ke panel **Properties** utama.
1. Tambahkan tindakan tabel untuk menghapus file berturut-turut.
1. Di menu **Properties** sebelah kanan, di samping **Actions**, pilih **\+ Add**.
1. Di **Actions**, ganti nama **Button** menjadi**Delete**.
1. Pilih ikon panah di sebelah kanan tindakan **Hapus** yang baru saja diganti namanya.
1. Di **On click**, pilih **\+ Add action** dan pilih **Invoke automation**.
1. Pilih tindakan yang ditambahkan untuk mengonfigurasinya.
1. Untuk **nama Action**, masukkan**DeleteRecord**.
1. Di **Invoke automation**, pilih**deleteFile**.
1. Di kotak teks parameter, masukkan**{{currentRow.Key}}**.
1. Untuk **Nilai**, masukkan **{{currentRow.Key}}**.
1. Di panel sebelah kanan, pilih **Komponen** untuk melihat menu komponen. Ada dua pilihan untuk menampilkan file:
+ **Penampil gambar** untuk melihat file dengan`.png`,`.jpeg`, atau `.jpg` ekstensi.
+ Komponen **penampil PDF** untuk melihat file PDF.
Dalam tutorial ini, Anda akan menambahkan dan mengkonfigurasi komponen **penampil PDF**.
1. Tambahkan komponen **penampil PDF**.
1. Di halaman **Komponen** sebelah kanan, temukan komponen **penampil PDF** dan seret ke kanvas, di bawah komponen tabel.
1. Pilih komponen **penampil PDF** yang baru saja ditambahkan.
1. **Di menu **Properties** sebelah kanan, pilih dropdown **Source** dan pilih Automation.**
1. Pilih dropdown **Otomasi** dan pilih otomatisasi **ViewFile**. Tabel akan menggunakan output dari otomatisasi **ViewFile** sebagai isinya.
1. Di kotak teks parameter, masukkan**{{ui.table1.selectedRow["Filename"]}}**.
1. Di panel sebelah kanan, ada juga bidang **Nama file**. Nilai bidang ini digunakan sebagai header untuk komponen penampil PDF. Masukkan teks yang sama dengan langkah sebelumnya:**{{ui.table1.selectedRow["Filename"]}}**.
### Tambahkan komponen ke **UploadFile**halaman
**UploadFile**Halaman akan berisi pemilih file yang dapat digunakan untuk memilih dan mengunggah file ke bucket Amazon S3 yang dikonfigurasi. Anda akan menambahkan komponen **unggah S3** ke halaman, yang dapat digunakan pengguna untuk memilih dan mengunggah file.
1. Di panel **Pages** sebelah kiri, pilih halaman. **UploadFile**
1. Di halaman **Components** sebelah kanan, temukan komponen **upload S3** dan seret ke tengah kanvas.
1. Pilih komponen upload S3 yang baru saja Anda tambahkan ke halaman.
1. Di menu **Properties** sebelah kanan, konfigurasikan komponen:
1. Di dropdown **Connector**, pilih konektor Amazon S3 yang dibuat dalam prasyarat.
1. Untuk **Bucket**, masukkan nama bucket Amazon S3 Anda.
1. Untuk **nama File**, masukkan**{{ui.s3Upload1.files[0]?.nameWithExtension}}**.
1. Untuk **ukuran file Max**, masukkan **5** di kotak teks, dan pastikan yang **MB** dipilih di dropdown.
1. Di bagian **Pemicu**, tambahkan tindakan yang berjalan setelah unggahan berhasil atau tidak berhasil dengan melakukan langkah-langkah berikut:
Untuk menambahkan tindakan yang berjalan setelah unggahan berhasil:
1. **Di On success**, pilih **\+ Add action** dan pilih **Navigate**.
1. Pilih tindakan yang ditambahkan untuk mengonfigurasinya.
1. Untuk **jenis Navigasi**, pilih **Halaman**.
1. Untuk **Navigasi ke**, pilih**FileList**.
1. Pilih ikon panah di bagian atas panel untuk kembali ke panel **Properties** utama.
Untuk menambahkan tindakan yang berjalan setelah unggahan gagal:
1. **Di Kegagalan**, pilih **\+ Tambahkan tindakan** dan pilih **Navigasi**.
1. Pilih tindakan yang ditambahkan untuk mengonfigurasinya.
1. Untuk **jenis Navigasi**, pilih **Halaman**.
1. Untuk **Navigasi ke**, pilih**FailUpload**.
1. Pilih ikon panah di bagian atas panel untuk kembali ke panel **Properties** utama.
### Tambahkan komponen ke **FailUpload**halaman
**FailUpload**Halaman ini adalah halaman sederhana yang berisi kotak teks yang memberi tahu pengguna bahwa unggahan mereka gagal.
1. Di panel **Pages** sebelah kiri, pilih halaman. **FailUpload**
1. Di halaman **Components** sebelah kanan, temukan komponen **Text** dan seret ke tengah kanvas.
1. Pilih komponen teks yang baru saja Anda tambahkan ke halaman.
1. Di menu **Properties** sebelah kanan, di **Value**, masukkan**Failed to upload, try again**.
## Memperbarui setelan keamanan aplikasi
Setiap aplikasi di App Studio memiliki pengaturan keamanan konten yang dapat Anda gunakan untuk membatasi media atau sumber daya eksternal, atau domain mana di Amazon S3 yang dapat Anda unggah objek. Pengaturan default adalah memblokir semua domain. Untuk mengunggah objek ke Amazon S3 dari aplikasi Anda, Anda harus memperbarui pengaturan untuk mengizinkan domain yang ingin Anda unggah objek.
**Untuk mengizinkan domain untuk mengunggah objek ke Amazon S3**
1. Pilih tab **Pengaturan aplikasi**.
1. Pilih tab **Pengaturan Keamanan Konten**.
1. Untuk **Connect source**, pilih **Izinkan semua koneksi**.
1. Pilih **Simpan**.
## Langkah selanjutnya: Pratinjau dan publikasikan aplikasi untuk pengujian
Aplikasi ini sekarang siap untuk pengujian. Untuk informasi selengkapnya tentang pratinjau dan penerbitan aplikasi, lihat[Mempratinjau, menerbitkan, dan berbagi aplikasi](applications-preview-publish-share.md).