Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.
# 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.*