Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.
# Tutorial
**Topics**
+ [Buat aplikasi peringkas teks AI dengan Amazon Bedrock](tutorial-conversational-bedrock.md)
+ [Berinteraksi dengan Amazon Simple Storage Service dengan komponen dan otomatisasi](automations-s3.md)
+ [Memanggil fungsi Lambda di aplikasi App Studio](tutorial-lambda.md)
# Buat aplikasi peringkas teks AI dengan Amazon Bedrock
Dalam tutorial ini, Anda akan membangun aplikasi di App Studio yang menggunakan Amazon Bedrock untuk memberikan ringkasan ringkas input teks dari pengguna akhir. Aplikasi ini berisi antarmuka pengguna sederhana di mana pengguna dapat memasukkan teks apa pun yang ingin diringkas. Ini bisa berupa catatan pertemuan, konten artikel, temuan penelitian, atau informasi tekstual lainnya. Setelah pengguna memasukkan teks, mereka dapat menekan tombol untuk mengirim teks ke Amazon Bedrock, yang akan memprosesnya menggunakan model Claude 3 Sonnet dan mengembalikan versi yang diringkas.
**Contents**
+ [Prasyarat](#tutorial-conversational-bedrock-prerequisites)
+ [Langkah 1: Buat dan konfigurasikan peran IAM dan konektor App Studio](#tutorial-conversational-bedrock-steps-create-role-connector)
+ [Langkah 2: Buat aplikasi](#tutorial-conversational-bedrock-steps-create-application)
+ [Langkah 3: Buat dan konfigurasikan otomatisasi](#tutorial-conversational-bedrock-steps-create-automation)
+ [Langkah 4: Buat halaman dan komponen](#tutorial-conversational-bedrock-steps-user-interface)
+ [Ganti nama halaman default](#tutorial-conversational-bedrock-steps-user-interface-create-page)
+ [Tambahkan komponen ke halaman](#tutorial-conversational-bedrock-steps-user-interface-add-components)
+ [Konfigurasikan komponen halaman](#tutorial-conversational-bedrock-steps-user-interface-configure-components)
+ [Langkah 5: Publikasikan aplikasi ke lingkungan **Pengujian**](#tutorial-conversational-bedrock-steps-publish)
+ [(Opsional) Bersihkan](#tutorial-conversational-bedrock-steps-cleanup)
## Prasyarat
Sebelum Anda memulai, tinjau dan lengkapi prasyarat berikut:
+ Akses ke AWS App Studio. Perhatikan bahwa Anda harus memiliki peran Admin untuk membuat konektor dalam tutorial ini.
+ Opsional: Tinjau [AWS Konsep App Studio](concepts.md) dan [Tutorial: Mulai membangun dari aplikasi kosong](getting-started-tutorial-empty.md) untuk membiasakan diri dengan konsep App Studio yang penting.
## Langkah 1: Buat dan konfigurasikan peran IAM dan konektor App Studio
Untuk menyediakan akses App Studio ke model Amazon Bedrock, Anda harus:
1. Aktifkan model Amazon Bedrock yang ingin Anda gunakan di aplikasi Anda. Untuk tutorial ini, Anda akan menggunakan **Claude 3 Sonnet**, jadi pastikan Anda mengaktifkan model itu.
1. Buat peran IAM dengan izin yang sesuai untuk Amazon Bedrock.
1. Buat konektor App Studio dengan peran IAM yang akan digunakan di aplikasi Anda.
Pergi ke [Connect ke Amazon Bedrock](connectors-bedrock.md) untuk petunjuk rinci, dan kembali ke tutorial ini setelah Anda mengikuti langkah-langkah dan membuat konektor.
## Langkah 2: Buat aplikasi
Gunakan prosedur berikut untuk membuat aplikasi kosong di App Studio yang akan Anda buat ke dalam aplikasi peringkas teks.
1. Masuk ke App Studio.
1. Arahkan ke hub pembuat dan pilih **\$1 Buat aplikasi**.
1. Pilih **Mulai dari awal**.
1. Di bidang **Nama aplikasi**, berikan nama untuk aplikasi Anda, seperti**Text Summarizer**.
1. Jika Anda diminta untuk memilih sumber data atau konektor, pilih **Lewati** untuk keperluan tutorial ini.
1. Pilih **Berikutnya** untuk melanjutkan.
1. (Opsional): Tonton tutorial video untuk ikhtisar singkat tentang membangun aplikasi di App Studio.
1. Pilih **Edit aplikasi**, yang akan membawa Anda ke studio aplikasi.
## Langkah 3: Buat dan konfigurasikan otomatisasi
Anda menentukan logika dan perilaku aplikasi App Studio dalam *otomatisasi.* Otomatisasi terdiri dari langkah-langkah individual yang dikenal sebagai *tindakan*, *parameter* yang digunakan untuk meneruskan data ke tindakan dari sumber daya lain, dan *output* yang dapat digunakan oleh otomatisasi atau komponen lain. Pada langkah ini, Anda akan membuat otomatisasi yang menangani interaksi dengan Amazon Bedrock dengan yang berikut:
+ Input: Parameter untuk meneruskan input teks dari pengguna ke otomatisasi.
+ Tindakan: Satu tindakan **GenAI Prompt** yang mengirimkan input teks ke Amazon Bedrock dan mengembalikan ringkasan teks keluaran.
+ Output: Output otomatisasi yang terdiri dari ringkasan yang diproses dari Amazon Bedrock, yang dapat digunakan di aplikasi Anda.
**Untuk membuat dan mengonfigurasi otomatisasi yang mengirimkan prompt ke Amazon Bedrock dan memproses serta mengembalikan ringkasan**
1. Pilih tab **Automations** di bagian atas kanvas.
1. Pilih **\$1 Tambahkan otomatisasi**.
1. Di panel sebelah kanan, pilih **Properties**.
1. Perbarui nama otomatisasi dengan memilih ikon pensil. Masuk **InvokeBedrock** dan tekan **Enter**.
1. Tambahkan parameter ke otomatisasi yang akan digunakan untuk meneruskan input prompt teks dari pengguna ke otomatisasi yang akan digunakan dalam permintaan ke Amazon Bedrock dengan melakukan langkah-langkah berikut:
1. Di kanvas, di kotak parameter, pilih **\$1 Tambah**.
1. Di **Nama**, masukkan **input**.
1. Dalam **Deskripsi**, masukkan deskripsi apa pun, seperti**Text to be sent to Amazon Bedrock**.
1. Di **Type**, pilih **String**.
1. Pilih **Tambah** untuk membuat parameter.
1. Tambahkan tindakan **GenAI Prompt** dengan melakukan langkah-langkah berikut:
1. Di panel sebelah kanan, pilih **Tindakan**.
1. Pilih **GenAI Prompt** untuk menambahkan tindakan.
1. Konfigurasikan tindakan dengan melakukan langkah-langkah berikut:
1. Pilih tindakan dari kanvas untuk membuka menu **Properties** sebelah kanan.
1. Ubah nama tindakan menjadi **PromptBedrock** dengan memilih ikon pensil, memasukkan nama, dan menekan enter.
1. Di **Connector**, pilih konektor yang dibuat di[Langkah 1: Buat dan konfigurasikan peran IAM dan konektor App Studio](#tutorial-conversational-bedrock-steps-create-role-connector).
1. Di **Model**, pilih model Amazon Bedrock yang ingin Anda gunakan untuk memproses prompt. Dalam tutorial ini, Anda akan memilih **Claude 3.5** Sonnet.
1. Di **Prompt pengguna**, masukkan`{{params.input}}`. Ini mewakili `input` parameter yang Anda buat sebelumnya, dan akan berisi input teks oleh pengguna aplikasi Anda.
1. Dalam **Prompt sistem**, masukkan instruksi prompt sistem yang ingin Anda kirim ke Amazon Bedrock. Untuk tutorial ini, masukkan yang berikut ini:
```
You are a highly efficient text summarizer. Provide a concise summary of the prompted text, capturing the key points and main ideas.
```
1. Pilih **Minta setelan** untuk memperluasnya, dan perbarui bidang berikut:
+ Dalam **Suhu**, masukkan`0`. Tempearture menentukan keacakan atau kreativitas output pada skala 0 hingga 10. Semakin tinggi angkanya, semakin kreatif responsnya.
+ Di **Token Maks**, masukkan `4096` untuk membatasi panjang respons.
1. Output dari otomatisasi ini akan menjadi teks yang diringkas, 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. **InvokeBedrock**
1. Di menu **Properties** sebelah kanan, di **Output**, pilih **\$1 Tambah**.
1. Di **Output**, masukkan**\$1\$1results.PromptBedrock.text\$1\$1**. Ekspresi ini mengembalikan isi `processResults` tindakan.
## Langkah 4: Buat halaman dan komponen
Di App Studio, setiap halaman mewakili layar antarmuka pengguna (UI) aplikasi yang akan berinteraksi dengan pengguna Anda. Dalam halaman ini, Anda dapat menambahkan berbagai komponen seperti tabel, formulir, tombol, dan lainnya untuk membuat tata letak dan fungsionalitas yang diinginkan.
### Ganti nama halaman default
Aplikasi ringkasan teks dalam tutorial ini hanya akan berisi satu halaman. Aplikasi yang baru dibuat dilengkapi dengan halaman default, jadi Anda akan mengganti namanya alih-alih menambahkannya.
**Untuk mengganti nama halaman default**
1. Di menu navigasi bilah atas, pilih **Halaman**.
1. Di panel sisi kiri, pilih **Page1** dan pilih panel **Properties** di panel sisi kanan.
1. Pilih ikon pensil, masukkan**TextSummarizationTool**, dan tekan **Enter**.
1. Di **label Navigasi** masukkan**TextSummarizationTool**.
### Tambahkan komponen ke halaman
Untuk tutorial ini, aplikasi text summarizer memiliki satu halaman yang berisi komponen-komponen berikut:
+ Komponen **input Teks** yang digunakan pengguna akhir untuk memasukkan prompt yang akan diringkas.
+ Komponen **Tombol** yang digunakan untuk mengirim prompt ke Amazon Bedrock.
+ Komponen **area Teks** yang menampilkan ringkasan dari Amazon Bedrock.
Tambahkan komponen **input Teks** ke halaman yang akan digunakan pengguna untuk memasukkan prompt teks yang akan diringkas.
**Untuk menambahkan komponen input teks**
1. Di panel **Components** sebelah kanan, cari komponen **input Teks** dan seret ke kanvas.
1. Pilih input teks di kanvas untuk memilihnya.
1. Di panel **Properties** sisi kanan, perbarui pengaturan berikut:
1. Pilih ikon pensil untuk mengganti nama input teks menjadi**inputPrompt**.
1. Di **Label**, masukkan**Prompt**.
1. Di **Placeholder, masukkan**. **Enter text to be summarized**
Sekarang, tambahkan komponen **Tombol** yang akan dipilih pengguna untuk mengirim prompt ke Amazon Bedrock.
**Untuk menambahkan komponen tombol**
1. Di panel **Components** sebelah kanan, cari komponen **Button** dan seret ke kanvas.
1. Pilih tombol di kanvas untuk memilihnya.
1. Di panel **Properties** sisi kanan, perbarui pengaturan berikut:
1. Pilih ikon pensil untuk mengganti nama tombol menjadi**sendButton**.
1. Di **Label Tombol**, masukkan**Send**.
Sekarang, tambahkan komponen **area Teks** yang akan menampilkan ringkasan yang dikembalikan oleh Amazon Bedrock.
**Untuk menambahkan komponen area teks**
1. Di panel **Components** sebelah kanan, cari komponen **area Teks** dan seret ke kanvas.
1. Pilih area teks di kanvas untuk memilihnya.
1. Di panel **Properties** sisi kanan, perbarui pengaturan berikut:
1. Pilih ikon pensil untuk mengganti nama tombol menjadi**textSummary**.
1. Di **Label**, masukkan**Summary**.
### Konfigurasikan komponen halaman
Sekarang aplikasi berisi halaman dengan komponen, langkah selanjutnya adalah mengonfigurasi komponen untuk melakukan perilaku yang sesuai. Untuk mengonfigurasi komponen, seperti tombol, untuk mengambil tindakan saat berinteraksi dengannya, Anda harus menambahkan *pemicu* ke dalamnya. Untuk aplikasi dalam tutorial ini, Anda akan menambahkan dua pemicu ke `sendButton` tombol untuk melakukan hal berikut:
+ Pemicu pertama mengirimkan teks dalam `textPrompt` komponen ke Amazon Bedrock untuk dianalisis.
+ Pemicu kedua menampilkan ringkasan yang dikembalikan dari Amazon Bedrock di `textSummary` komponen.
**Untuk menambahkan pemicu yang mengirimkan prompt ke Amazon Bedrock**
1. Pilih tombol di kanvas untuk memilihnya.
1. Di panel **Properties** sisi kanan, di bagian **Pemicu**, pilih **\$1** Tambah.
1. Pilih **Invoke Automation**.
1. Pilih pemicu **InvokeAutomation1** yang dibuat untuk mengonfigurasinya.
1. Di **Nama Tindakan**, masukkan**invokeBedrockAutomation**.
1. Di **Invoke Automation**, pilih **InvokeBedrock**otomatisasi yang dibuat sebelumnya.
1. Di kotak parameter, dalam parameter **input** yang dibuat sebelumnya, masukkan**\$1\$1ui.inputPrompt.value\$1\$1**, yang melewati konten dalam komponen input `inputPrompt` teks.
1. Pilih panah kiri di bagian atas panel untuk kembali ke menu properti komponen.
Sekarang, Anda telah mengonfigurasi pemicu yang memanggil otomatisasi untuk mengirim permintaan ke Amazon Bedrock saat tombol diklik, langkah selanjutnya adalah mengonfigurasi pemicu kedua yang menampilkan hasil dalam komponen. `textSummary`
**Untuk menambahkan pemicu yang menampilkan hasil Amazon Bedrock di komponen area teks**
1. Di panel **Properti** sisi kanan tombol, di bagian **Pemicu**, pilih **\$1** Tambah.
1. Pilih **Jalankan tindakan komponen**.
1. Pilih pemicu **Runcomponentaction1** yang dibuat untuk mengonfigurasinya.
1. Di **Nama Tindakan**, masukkan**setTextSummary**.
1. Di **Komponen**, pilih komponen **TextSummary**.
1. Dalam **Tindakan**, pilih **Tetapkan nilai**.
1. Di **Tetapkan nilai ke**, masukkan**\$1\$1results.invokeBedrockAutomation\$1\$1**.
## Langkah 5: Publikasikan aplikasi ke lingkungan **Pengujian**
Biasanya, saat Anda sedang membangun aplikasi, praktik yang baik adalah mempratinjaunya untuk melihat tampilannya dan melakukan pengujian awal pada fungsinya. Namun, karena aplikasi tidak berinteraksi dengan layanan eksternal di lingkungan pratinjau, Anda akan memublikasikan aplikasi ke lingkungan Pengujian untuk dapat menguji permintaan pengiriman dan menerima tanggapan dari Amazon Bedrock.
**Untuk memublikasikan aplikasi Anda ke lingkungan Pengujian**
1. Di pojok kanan atas pembuat aplikasi, pilih **Publikasikan**.
1. Tambahkan deskripsi versi untuk lingkungan Pengujian.
1. Tinjau dan pilih kotak centang mengenai SLA.
1. Pilih **Mulai**. Penerbitan dapat memakan waktu hingga 15 menit.
1. (Opsional) Saat Anda siap, Anda dapat memberi orang lain akses dengan memilih **Bagikan** dan mengikuti petunjuknya. Untuk informasi selengkapnya tentang berbagi aplikasi App Studio, lihat[Berbagi aplikasi yang diterbitkan](application-share.md).
Setelah menguji aplikasi Anda, pilih **Publish** lagi untuk mempromosikan aplikasi ke lingkungan Produksi. Perhatikan bahwa aplikasi di lingkungan Produksi tidak tersedia untuk pengguna akhir hingga aplikasi tersebut dibagikan. Untuk informasi selengkapnya tentang lingkungan aplikasi yang berbeda, lihat[Lingkungan aplikasi](applications-publish.md#application-environments).
## (Opsional) Bersihkan
Anda sekarang telah berhasil menyelesaikan tutorial dan membangun aplikasi ringkasan teks di App Studio dengan Amazon Bedrock. Anda dapat terus menggunakan aplikasi Anda, atau Anda dapat membersihkan sumber daya yang dibuat dalam tutorial ini. Daftar berikut berisi daftar sumber daya yang akan dibersihkan:
+ Konektor Amazon Bedrock dibuat di App Studio. Untuk informasi selengkapnya, lihat [Melihat, mengedit, dan menghapus konektor](viewing-deleting-connectors.md).
+ Aplikasi peringkas teks di App Studio. Untuk informasi selengkapnya, lihat [Menghapus aplikasi](applications-delete.md).
+ Peran IAM dibuat di konsol IAM. Untuk informasi selengkapnya, lihat [Menghapus peran atau profil instance](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_roles_manage_delete.html) di *Panduan AWS Identity and Access Management Pengguna*.
+ *Jika Anda meminta akses model untuk menggunakan Claude 3 Sonnet dan ingin mengembalikan akses, lihat Mengelola [akses ke model foundation Amazon Bedrock di](https://docs.aws.amazon.com/bedrock/latest/userguide/model-access.html) Panduan Pengguna Amazon Bedrock.*
# 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 **\$1 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 **\$1 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 **\$1 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\$1name* 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 **\$1 Tambahkan output**.
1. Untuk **Output**, masukkan**\$1\$1results.ListObjects1.Contents\$1\$1**. 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 \$1 Tambah.**
1. Pilih **\$1 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 **\$1 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\$1name* 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 \$1 Tambah.**
1. Pilih **\$1 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 **\$1 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\$1name* 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 **\$1 Tambahkan output**.
1. Untuk **Output**, masukkan**\$1\$1results.GetObject1.Body.transformToWebStream()\$1\$1**. 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 **\$1 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 **\$1\$1currentRow.Key\$1\$1**.
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 **\$1 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 **\$1 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**\$1\$1currentRow.Key\$1\$1**.
1. Untuk **Nilai**, masukkan **\$1\$1currentRow.Key\$1\$1**.
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**\$1\$1ui.table1.selectedRow["Filename"]\$1\$1**.
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:**\$1\$1ui.table1.selectedRow["Filename"]\$1\$1**.
### 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**\$1\$1ui.s3Upload1.files[0]?.nameWithExtension\$1\$1**.
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 **\$1 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 **\$1 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).
# Memanggil fungsi Lambda di aplikasi App Studio
Tutorial ini menunjukkan cara menghubungkan App Studio ke Lambda dan menjalankan fungsi Lambda dari aplikasi Anda.
## Prasyarat
Panduan ini mengasumsikan Anda telah menyelesaikan prasyarat berikut:
1. Membuat aplikasi App Studio. Jika Anda tidak memilikinya, Anda dapat membuat aplikasi kosong untuk digunakan dalam tutorial. Untuk informasi selengkapnya, lihat [Membuat aplikasi](applications-create.md).
**catatan**
Meskipun Anda tidak memerlukan fungsi Lambda untuk mengikuti tutorial ini dan mempelajari cara mengonfigurasinya, mungkin bermanfaat jika memilikinya untuk memastikan Anda telah mengonfigurasi aplikasi dengan benar. [Tutorial ini tidak berisi informasi tentang membuat fungsi Lambda. untuk informasi lebih lanjut, lihat Panduan Pengembang AWS Lambda .](https://docs.aws.amazon.com/lambda/latest/dg/)
## Buat konektor Lambda
Untuk menggunakan fungsi Lambda di aplikasi App Studio, Anda harus menggunakan konektor untuk menghubungkan App Studio ke Lambda untuk menyediakan akses ke fungsi Anda. Anda harus menjadi Administrator untuk membuat konektor di App Studio. Untuk informasi selengkapnya tentang membuat konektor Lambda, termasuk langkah-langkah untuk membuatnya, lihat. [Connect ke AWS Lambda](connectors-lambda.md)
## Buat dan konfigurasikan otomatisasi
Otomatisasi digunakan untuk menentukan logika aplikasi Anda dan terdiri dari tindakan. Untuk menjalankan fungsi Lambda di aplikasi, Anda terlebih dahulu menambahkan dan mengonfigurasi tindakan *Invoke Lambda ke otomatisasi*. Gunakan langkah-langkah berikut untuk membuat otomatisasi dan menambahkan tindakan *Invoke Lambda ke* dalamnya.
1. Saat mengedit aplikasi Anda, pilih tab **Automations.**
1. Pilih **\$1 Tambahkan otomatisasi**.
1. Di menu **Tindakan** sebelah kanan, pilih Panggil **Lambda** untuk menambahkan langkah ke otomatisasi Anda.
1. Pilih langkah Lambda baru di kanvas untuk melihat dan mengkonfigurasi propertinya.
1. Di menu **Properties** sebelah kanan, konfigurasikan langkah dengan melakukan langkah-langkah berikut:
1. Di **Connector**, pilih konektor yang dibuat untuk menghubungkan App Studio ke fungsi Lambda Anda.
1. Di **nama Fungsi**, masukkan nama fungsi Lambda Anda.
1. Dalam **acara Fungsi**, masukkan acara yang akan diteruskan ke fungsi Lambda. Beberapa contoh kasus penggunaan umum disediakan dalam daftar berikut:
+ Melewati nilai parameter otomatisasi, seperti nama file atau string lainnya: `varName: params.paramName`
+ Melewati hasil dari tindakan sebelumnya: `varName: results.actionName1.data[0].fieldName`
+ *Jika Anda menambahkan tindakan *Invoke Lambda* di dalam tindakan Loop, Anda dapat mengirim kolom dari setiap item iterasi yang mirip dengan parameter:* `varName: currentItem.fieldName`
1. Bidang **keluaran Mocked** dapat digunakan untuk menyediakan output tiruan untuk menguji aplikasi saat melihat pratinjau, di mana konektor tidak aktif.
## Konfigurasikan elemen UI untuk menjalankan otomatisasi
Sekarang setelah Anda memiliki otomatisasi yang dikonfigurasi dengan tindakan untuk menjalankan fungsi Lambda Anda, Anda dapat mengonfigurasi elemen UI untuk menjalankan otomatisasi. Dalam tutorial ini, Anda akan membuat tombol yang menjalankan otomatisasi saat diklik.
**Tip**
Anda juga dapat menjalankan otomatisasi dari otomatisasi lain dengan tindakan otomatisasi *Invoke*.
**Untuk menjalankan otomatisasi Anda dari sebuah tombol**
1. Saat mengedit aplikasi Anda, pilih tab **Pages**.
1. Di menu sebelah kanan, pilih komponen **Tombol** untuk menambahkan tombol ke halaman.
1. Pilih tombol baru untuk mengkonfigurasinya.
1. Di menu **Properties** sebelah kanan, di **Triggers**, pilih **\$1 Add** dan pilih **Invoke** automation.
1. Pilih pemicu pemanggilan otomatisasi baru untuk mengonfigurasinya.
1. Di **otomatisasi Invoke**, pilih otomatisasi yang memanggil fungsi Lambda Anda dan konfigurasikan parameter apa pun yang ingin Anda kirim ke otomatisasi.
Sekarang, setiap pengguna yang memilih tombol ini di aplikasi Anda akan menyebabkan otomatisasi yang dikonfigurasi berjalan.
## Langkah selanjutnya: Pratinjau dan publikasikan aplikasi untuk pengujian
Aplikasi Anda sekarang siap untuk pengujian. Saat mempratinjau aplikasi di lingkungan Pengembangan, konektor tidak aktif, sehingga Anda tidak dapat menguji otomatisasi saat melihat pratinjau karena menggunakan konektor untuk disambungkan. AWS Lambda Untuk menguji fungsionalitas aplikasi yang bergantung pada konektor, Anda harus memublikasikan aplikasi ke lingkungan Pengujian. Untuk informasi selengkapnya tentang pratinjau dan penerbitan aplikasi, lihat[Mempratinjau, menerbitkan, dan berbagi aplikasi](applications-preview-publish-share.md).