Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.
# Dokumentasi pembangun
Topik berikut berisi informasi untuk membantu pengguna di App Studio yang membuat, mengedit, dan menerbitkan aplikasi.
**Topics**
+ [Tutorial](tutorials.md)
+ [Membangun aplikasi App Studio Anda dengan AI generatif](generative-ai.md)
+ [Membuat, mengedit, dan menghapus aplikasi](applications-create-edit-delete.md)
+ [Mempratinjau, menerbitkan, dan berbagi aplikasi](applications-preview-publish-share.md)
+ [Halaman dan komponen: Bangun antarmuka pengguna aplikasi Anda](pages-components-ux.md)
+ [Otomatisasi dan tindakan: Tentukan logika bisnis aplikasi](automations.md)
+ [Entitas dan tindakan data: Mengonfigurasi model data aplikasi Anda](data.md)
+ [Parameter halaman dan otomatisasi](paramters.md)
+ [Menggunakan JavaScript untuk menulis ekspresi di App Studio](expressions.md)
+ [Ketergantungan data dan pertimbangan waktu](data-dependencies-timing-considerations.md)
+ [Membangun aplikasi dengan banyak pengguna](builder-collaboration.md)
+ [Melihat atau memperbarui setelan keamanan konten aplikasi Anda](app-content-security-settings-csp.md)
# 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).
# Membangun aplikasi App Studio Anda dengan AI generatif
AWS App Studio menyediakan kemampuan AI generatif terintegrasi untuk mempercepat pengembangan dan merampingkan tugas-tugas umum. Anda dapat memanfaatkan AI generatif untuk menghasilkan dan mengedit aplikasi, model data, data sampel, dan bahkan mendapatkan bantuan kontekstual saat membuat aplikasi.
## Menghasilkan aplikasi Anda
Untuk memulai yang dipercepat, Anda dapat menghasilkan seluruh aplikasi menggunakan perintah bahasa alami yang didukung oleh AI. Kemampuan ini memungkinkan Anda untuk menggambarkan fungsionalitas aplikasi yang Anda inginkan, dan AI akan secara otomatis membangun model data, antarmuka pengguna, alur kerja, dan konektor. Untuk informasi selengkapnya tentang membuat aplikasi dengan AI, lihat[Membuat aplikasi](applications-create.md).
## Membangun atau mengedit aplikasi Anda
Saat mengedit aplikasi, Anda dapat menggunakan obrolan untuk menjelaskan perubahan yang ingin Anda buat dan aplikasi Anda diperbarui secara otomatis. Anda dapat memilih dari petunjuk sampel yang ada atau memasukkan prompt Anda sendiri. Obrolan dapat digunakan untuk menambah, mengedit, dan menghapus komponen yang didukung, dan juga membuat dan mengonfigurasi otomatisasi dan tindakan. Gunakan prosedur berikut untuk menggunakan AI untuk mengedit atau membangun aplikasi Anda.
**Untuk mengedit aplikasi Anda dengan AI**
1. Jika perlu, edit aplikasi Anda untuk menavigasi ke studio aplikasi.
1. (Opsional) Pilih halaman atau komponen yang ingin Anda edit dengan AI.
1. Pilih **Build with AI** di pojok kiri bawah untuk membuka obrolan.
1. Masukkan perubahan yang ingin Anda buat, atau pilih dari contoh petunjuk.
1. Tinjau perubahan yang akan dilakukan. Jika Anda ingin perubahan dilakukan, pilih **Konfirmasi**. Jika tidak, masukkan prompt lain.
1. Tinjau ringkasan perubahan.
## Menghasilkan model data Anda
Anda dapat secara otomatis membuat entitas dengan bidang, tipe data, dan tindakan data berdasarkan nama entitas yang disediakan. Untuk informasi selengkapnya tentang membuat entitas, termasuk membuat entitas menggunakan GenAi, lihat[Membuat entitas di aplikasi App Studio](data-entities-create.md).
Anda juga dapat memperbarui entitas yang ada dengan cara berikut:
+ Tambahkan lebih banyak bidang ke entitas. Untuk informasi selengkapnya, lihat [Menambahkan, mengedit, atau menghapus bidang entitas](data-entities-edit-fields.md).
+ Tambahkan tindakan data ke entitas. Untuk informasi selengkapnya, lihat [Membuat tindakan data](data-entities-edit-data-actions.md#data-entities-data-action-add).
## Menghasilkan data sampel
Anda dapat menghasilkan data sampel untuk entitas berdasarkan bidang entitas. Ini berguna untuk menguji aplikasi Anda sebelum menghubungkan sumber data eksternal, atau menguji aplikasi Anda di lingkungan Pengembangan, yang tidak berkomunikasi dengan sumber data eksternal. Untuk informasi selengkapnya, lihat [Menambahkan atau menghapus data sampel](data-entities-edit-sample-data.md).
Setelah memublikasikan aplikasi ke Pengujian atau Produksi, sumber dan konektor data langsung Anda akan digunakan di lingkungan tersebut.
## Mengkonfigurasi tindakan untuk layanan AWS
Saat mengintegrasikan dengan AWS layanan seperti Amazon Simple Email Service, Anda dapat menggunakan AI untuk menghasilkan contoh konfigurasi dengan bidang yang telah diisi sebelumnya berdasarkan layanan yang dipilih. Untuk mencobanya, Di menu **Properties** dari tindakan otomatisasi **AWS Invoke**, perluas bidang **Konfigurasi** dengan memilih panah dua sisi. Kemudian, pilih **Hasilkan konfigurasi sampel**.
## Tanggapan mengejek
Anda dapat menghasilkan respons yang diejek untuk tindakan AWS layanan. Ini berguna untuk menguji aplikasi Anda di lingkungan Pengembangan, yang tidak berkomunikasi dengan sumber data eksternal.
## Meminta bantuan AI saat membangun
Di studio aplikasi, Anda akan menemukan tombol **Minta AI untuk bantuan** pada sumber daya atau properti yang didukung. Gunakan ini untuk mendapatkan saran kontekstual, dokumentasi, dan panduan yang terkait dengan tampilan saat ini atau komponen yang dipilih. Ajukan pertanyaan umum tentang App Studio, praktik terbaik pembuatan aplikasi, atau kasus penggunaan aplikasi khusus Anda untuk menerima informasi dan rekomendasi yang disesuaikan.
# Membuat, mengedit, dan menghapus aplikasi
**Contents**
+ [Membuat aplikasi](applications-create.md)
+ [Mengimpor aplikasi](applications-import.md)
+ [Aplikasi yang dapat diimpor yang disediakan oleh App Studio](applications-import.md#app-catalog)
+ [Menduplikasi aplikasi](applications-duplicate.md)
+ [Mengedit atau membangun aplikasi](applications-edit.md)
+ [Mengedit versi aplikasi yang diterbitkan sebelumnya](applications-edit-previously-published-version.md)
+ [Mengganti nama aplikasi](applications-rename.md)
+ [Menghapus aplikasi](applications-delete.md)
# Membuat aplikasi
Gunakan prosedur berikut untuk membuat aplikasi di App Studio.
**Untuk membuat aplikasi**
1. Di panel navigasi, pilih **Aplikasi saya** di bagian **Build** untuk menavigasi ke daftar aplikasi Anda.
1. Pilih **\$1 Buat aplikasi**.
1. Di kotak dialog **Create app**, beri nama aplikasi Anda dan pilih salah satu metode pembuatan aplikasi berikut:
+ **Buat aplikasi dengan AI**: Pilih opsi ini untuk mendeskripsikan aplikasi Anda dengan bahasa alami, dan minta AI menghasilkan aplikasi dan sumber dayanya untuk Anda.
+ **Mulai dari awal**: Pilih opsi ini untuk mulai membangun dari aplikasi kosong.
1. Pilih **Berikutnya**.
1. Jika Anda memilih **Menghasilkan aplikasi dengan AI**:
1. **Di kotak dialog **Connect to existing data**, tambahkan sumber data yang ada ke aplikasi Anda dengan memilih **Connector** yang menyediakan akses App Studio ke sumber data, lalu pilih **Tablse**, dan pilih Berikutnya.** Menambahkan sumber data di sini membantu AI menghasilkan aplikasi yang dioptimalkan untuk Anda. Anda dapat melewati langkah ini dan menambahkan sumber data nanti dengan memilih **Lewati**.
1. Setelah penundaan singkat (beberapa menit), Anda akan dibawa ke halaman **Hasilkan aplikasi menggunakan AI**, tempat Anda dapat mendeskripsikan aplikasi yang ingin Anda buat.
1. Anda dapat mulai mendeskripsikan aplikasi Anda dalam obrolan, atau Anda dapat memilih dan menyesuaikan contoh prompt yang disediakan.
1. Setelah prompt Anda dianalisis, tinjau persyaratan dan ikhtisar aplikasi. Gunakan obrolan untuk meminta perubahan apa pun, atau pilih **Mulai dari** awal untuk memulai dari prompt kosong.
1. Saat siap, pilih **Hasilkan aplikasi**.
1. Setelah dibuat, pratinjau aplikasi Anda di tab lain dengan memilih **aplikasi Pratinjau**. Saat Anda siap untuk mulai mengedit, Anda dapat memilih **Edit aplikasi**. Jelajahi halaman, otomatisasi, dan data aplikasi Anda untuk membiasakan diri dengannya. Tinjau kesalahan atau peringatan apa pun di panel debug bawah. Untuk mempelajari cara membuat aplikasi menggunakan AI, lihat[Tutorial: Menghasilkan aplikasi menggunakan AI](getting-started-tutorial-ai.md). Untuk informasi umum tentang cara kerja pembuatan di App Studio, lihat[Cara kerja AWS App Studio](how-it-works.md).
1. Jika Anda memilih **Mulai dari awal**:
1. **Di kotak dialog **Connect to existing data**, tambahkan sumber data yang ada ke aplikasi Anda dengan memilih **Connector** yang menyediakan akses App Studio ke sumber data, lalu pilih **Tablse**, dan pilih Berikutnya.** Anda dapat melewati langkah ini dan menambahkan sumber data nanti dengan memilih **Lewati**.
1. Setelah aplikasi Anda dibuat, pilih **Edit aplikasi** untuk mulai mengedit aplikasi Anda. Untuk mempelajari tentang membangun dari aplikasi kosong, lihat[Tutorial: Mulai membangun dari aplikasi kosong](getting-started-tutorial-empty.md). Untuk informasi umum tentang cara kerja pembuatan di App Studio, lihat[Cara kerja AWS App Studio](how-it-works.md).
# Mengimpor aplikasi
Anda dapat mengimpor salinan aplikasi yang diekspor ke instans App Studio. Anda dapat mengimpor aplikasi yang telah diekspor dari instans App Studio lain, atau aplikasi dari katalog yang disediakan oleh App Studio. Mengimpor aplikasi dari katalog aplikasi App Studio dapat membantu Anda memulai aplikasi dengan fungsionalitas serupa, atau membantu Anda mempelajari pembuatan aplikasi di App Studio dengan menjelajahi aplikasi yang diimpor.
Saat Anda mengimpor aplikasi ke instans, salinan aplikasi asli akan dibuat di instance Anda. Setelah aplikasi baru dibuat, Anda akan dinavigasi ke lingkungan Pengembangan aplikasi, tempat Anda dapat melihat pratinjau dan menelusuri fungsionalitas aplikasi.
**Awas**
Saat Anda mengimpor aplikasi, Anda mengimpor semua logika dari aplikasi, yang dapat mengakibatkan perilaku yang tidak diinginkan atau tidak terduga. Misalnya, mungkin ada kueri destruktif yang menghapus data dari database yang Anda sambungkan ke aplikasi. Kami merekomendasikan untuk meninjau aplikasi dan konfigurasinya secara menyeluruh, dan mengujinya pada aset non-produksi sebelum menghubungkan data produksi ke sana.
**Untuk mengimpor aplikasi**
1. Di panel navigasi, pilih **Aplikasi saya** di bagian **Build** untuk menavigasi ke daftar aplikasi Anda.
1. Pilih panah tarik-turun di sebelah **\$1 Buat aplikasi**.
1. Pilih **Impor aplikasi**.
1. Di kotak dialog **Impor aplikasi**, dalam **kode Impor**, masukkan kode impor aplikasi yang ingin Anda impor. Untuk daftar aplikasi yang disediakan oleh App Studio yang dapat diimpor, termasuk deskripsi aplikasi dan kode impor, lihat[Aplikasi yang dapat diimpor yang disediakan oleh App Studio](#app-catalog).
1. Pilih **Impor** untuk mengimpor aplikasi dan pergi ke lingkungan Pengembangan aplikasi yang diimpor untuk melihat atau mengeditnya. Untuk informasi yang membangun aplikasi di App Studio, lihat [Cara kerja AWS App Studio](how-it-works.md)
## Aplikasi yang dapat diimpor yang disediakan oleh App Studio
App Studio menyediakan aplikasi yang dapat diimpor ke instans Anda untuk membantu Anda mempelajari tentang pembuatan aplikasi. Untuk melihat bagaimana fungsionalitas aplikasi tertentu diimplementasikan di App Studio, Anda dapat melihat pratinjau aplikasi dan kemudian menelusuri konfigurasinya di lingkungan Pengembangan.
Tabel berikut berisi daftar aplikasi, kode impornya, dan deskripsi singkat aplikasi. Setiap aplikasi menyertakan `README` halaman yang berisi informasi tentang aplikasi yang dapat Anda lihat setelah Anda mengimpornya.
| Nama aplikasi | Deskripsi | Kode impor |
| --- | --- | --- |
| **Survei Permintaan Swag** | Aplikasi permintaan barang curian internal yang dirancang bagi karyawan untuk memesan barang dagangan perusahaan bermerek. Karyawan dapat memilih item dan menentukan ukuran dan mengirimkan permintaan mereka melalui formulir sederhana. Aplikasi ini menangani semua data melalui penyimpanan bawaan, menghilangkan kebutuhan akan koneksi eksternal. | Survei Permintaan Barangan/EC4F5FAF-E2F8-42EE-AB8D-6723d8ca21b2 |
| **Pelacakan Sprint** | Aplikasi manajemen sprint yang dapat digunakan tim untuk mengatur dan melacak pekerjaan pengembangan perangkat lunak. Pengguna dapat membuat sprint, menambahkan tugas, menetapkan pekerjaan, dan memantau kemajuan melalui tampilan sprint, track, dan tugas khusus. Aplikasi ini menangani semua data melalui penyimpanan bawaan, menghilangkan kebutuhan akan koneksi eksternal. | Pelacakan sprint/8f31e160-771f-48d7-87b0-374e285e2fbc |
| **Pelacak Sentimen Ulasan Amazon** | Aplikasi ini adalah alat analisis umpan balik pelanggan yang menghasilkan skor sentimen dari ulasan produk untuk membantu bisnis memahami kepuasan pelanggan. Aplikasi ini mencakup utilitas pembuatan data sampel untuk pengujian cepat dan memerlukan konektor Amazon Bedrock untuk wawasan bertenaga AI, sambil mempertahankan semua data lain dalam sistem penyimpanan bawaan. | Pelacak Sentimen Ulasan Amazon/60F0DAE4-F8E2-4C20-9583-FA456F5ebFab |
| **Pemrosesan Faktur dan Tanda Terima** | Aplikasi pemrosesan tanda terima ini menghemat waktu dan mengurangi kesalahan dengan mengotomatiskan entri data manual dan merampingkan alur kerja persetujuan dokumen. Solusinya membutuhkan konektor Amazon Textract, Amazon S3 dan Amazon SES. Ini menggunakan Amazon Ttract untuk menganalisis dan mengekstrak data dari tanda terima yang disimpan di Amazon S3, kemudian memproses dan mengirim email informasi yang diekstraksi ke pemberi persetujuan menggunakan Amazon SES. | Pemrosesan Faktur dan Penerimaan/98BDE3AE-E454-4B18-A1E6-6F23e8B2A4F1 |
| **Inspeksi dan Audit Inventaris** | Aplikasi untuk mengelola inspeksi gudang dan pelacakan peralatan. Pengguna dapat melakukan penilaian pass/fail peralatan berdasarkan lokasi kamar, memantau tingkat inventaris, dan melihat riwayat inspeksi. Aplikasi ini menyediakan sistem terpusat untuk melacak inspeksi fasilitas dan status peralatan. Aplikasi ini menangani semua data melalui penyimpanan bawaan, menghilangkan kebutuhan akan koneksi eksternal. | Inspeksi dan Audit Inventaris/CF570a06-1c5e-4dd7-9ea8-5c04723d687f |
| **Pelacak Adopsi Produk** | Aplikasi komprehensif untuk mengelola pengembangan produk yang memusatkan umpan balik pelanggan, permintaan fitur, dan catatan pertemuan pelanggan. Tim dapat melacak interaksi pelanggan, mengatur persyaratan, dan menghasilkan laporan yang didukung AI untuk perencanaan peta jalan triwulanan. Aplikasi ini mencakup utilitas data sampel dan memanfaatkan Amazon Bedrock untuk wawasan AI dan Amazon Aurora PostgreSQL untuk manajemen data. | Pelacak Adopsi Produk/9B3A4437-BB50-467F-AE9E-D108776B7CA1 |
| **Penyematan Cepat** | Aplikasi demo yang memungkinkan pengguna untuk melihat analitik saat bekerja dengan data yang mendasarinya. Aplikasi ini berisi dua metode untuk menyematkan dasbor Amazon Quick di App Studio: pendekatan berbasis API untuk pengguna terdaftar dan anonim (memerlukan konektor Cepat), dan integrasi iFrame untuk dasbor publik. | Quicksight Embedding/0cdc15fc-ca8b-41b7-869e-ed13c9072bc8 |
| **Wastafel Dapur** | Aplikasi referensi yang menampilkan kiat pengembangan App Studio tingkat lanjut dan praktik terbaik. Termasuk contoh kerja manajemen status, penanganan data CSV, integrasi API browser, dan pola UI yang dapat dipelajari dan diterapkan oleh pembangun dalam aplikasi mereka sendiri. Tak satu pun dari contoh memerlukan koneksi eksternal. | App Studio Wastafel Dapur/1cfe6b2f-544c-4611-b82c-80eadc76a0c8 |
# Menduplikasi aplikasi
Pemilik aplikasi dan pemilik bersama dapat menduplikasi aplikasi mereka untuk membuat salinan aplikasi yang tepat. Menduplikasi aplikasi sangat membantu jika Anda ingin mempertahankan status saat ini untuk tujuan pengujian, atau menggunakan aplikasi duplikat sebagai starter untuk membuat aplikasi baru.
**Untuk menduplikasi aplikasi**
1. Di panel navigasi, pilih **Aplikasi saya** di bagian **Build**. Anda akan dibawa ke halaman yang menampilkan daftar aplikasi yang dapat Anda akses.
1. Pilih dropdown di kolom **Actions** dari aplikasi yang ingin Anda duplikat.
1. Pilih **Duplikat.** Jika opsional **Duplikat** tidak tersedia, kemungkinan besar Anda bukan pemilik atau pemilik bersama aplikasi.
1. Secara opsional berikan nama aplikasi duplikat. Nama defaultnya adalah*Current\$1App\$1Name COPY*.
1. Pilih **Duplikat.**
# Mengedit atau membangun aplikasi
Gunakan prosedur berikut untuk mengedit aplikasi di App Studio.
**Untuk mengedit (membangun) aplikasi**
1. Di panel navigasi, pilih **Aplikasi saya** di bagian **Build**. Anda akan dibawa ke halaman yang menampilkan daftar aplikasi yang dapat Anda akses.
1. Di kolom **Tindakan** aplikasi yang ingin Anda edit, pilih **Edit**. Ini akan membawa Anda ke lingkungan Pengembangan, di mana Anda dapat menggunakan komponen, otomatisasi, dan data untuk mengonfigurasi tampilan dan fungsi aplikasi Anda. Untuk informasi tentang membangun aplikasi, lihat[Memulai dengan AWS App Studio](getting-started.md).
# Mengedit versi aplikasi yang diterbitkan sebelumnya
Gunakan prosedur berikut untuk mengedit versi aplikasi App Studio yang telah dipublikasikan sebelumnya. Setelah Anda memilih untuk mengedit versi yang diterbitkan sebelumnya, Anda dapat mengedit aplikasi di lingkungan Pengembangan, atau mempublikasikannya ke Pengujian dan kemudian Produksi.
**Awas**
Versi yang diterbitkan sebelumnya menggantikan versi aplikasi yang sedang berlangsung di lingkungan Pengembangan. Setiap perubahan yang tidak dipublikasikan pada aplikasi Anda akan hilang.
Mengedit versi yang diterbitkan sebelumnya berguna jika Anda secara tidak sengaja mempublikasikan perubahan atau perubahan yang tidak diinginkan yang merusak aplikasi untuk pengguna Anda, dan Anda ingin membuat atau mengedit lebih lanjut dari versi aplikasi sebelumnya.
**catatan**
Jika Anda mendeteksi masalah dengan aplikasi yang dipublikasikan dan perlu segera memublikasikan versi yang sebelumnya berfungsi, atau Anda ingin memublikasikan versi sebelumnya tetapi mempertahankan pembaruan terbaru ke aplikasi di lingkungan Pengembangan, Anda harus mengembalikan aplikasi sebagai gantinya. Untuk informasi selengkapnya, lihat [Kembali ke versi yang diterbitkan sebelumnya](application-rollback-version.md).
**Untuk mengedit versi aplikasi yang diterbitkan sebelumnya**
1. Jika perlu, navigasikan ke studio aplikasi aplikasi Anda.
1. Pilih panah tarik-turun di sebelah tombol **Publikasikan**, lalu pilih **Publish** Center.
1. Pilih **Riwayat versi** untuk melihat daftar versi aplikasi yang diterbitkan sebelumnya.
1. Temukan versi yang ingin Anda edit, dan pilih **Edit**.
1. Tinjau informasinya, dan pilih **Kembalikan**.
1. Versi yang Anda pilih untuk diedit sekarang adalah versi saat ini di lingkungan Pengembangan. Anda dapat membuat perubahan padanya, atau mempublikasikannya ke lingkungan Pengujian sebagaimana adanya dengan memilih **Publikasikan**. Setelah dipublikasikan ke Pengujian, Anda dapat mempublikasikan lagi ke lingkungan Produksi jika diinginkan.
# Mengganti nama aplikasi
Gunakan prosedur berikut untuk mengganti nama aplikasi di App Studio. Anda dapat mengganti nama aplikasi dari daftar aplikasi, atau dari lingkungan Pengembangan saat membangun aplikasi.
**Untuk mengganti nama aplikasi**
1. Di panel navigasi, pilih **Aplikasi saya** di bagian **Build**. Anda akan dibawa ke halaman yang menampilkan daftar aplikasi yang dapat Anda akses.
1. Anda dapat mengganti nama aplikasi dari daftar ini, atau dari lingkungan Pengembangan saat mengedit.
+ Untuk mengganti nama dari daftar ini:
1. **Pilih dropdown di kolom **Tindakan** aplikasi yang ingin Anda ganti nama, lalu pilih Ganti nama.**
1. Beri nama baru pada aplikasi Anda, dan pilih **Ganti nama**.
+ Untuk mengganti nama dari lingkungan Pengembangan:
1. Di kolom **Tindakan** aplikasi yang ingin Anda edit, pilih **Edit**.
1. Di lingkungan Pengembangan, pilih nama aplikasi dan perbarui, lalu tekan Enter atau navigasikan dari bidang teks untuk menyimpan perubahan Anda.
# Menghapus aplikasi
Gunakan prosedur berikut untuk menghapus aplikasi di App Studio.
**Untuk menghapus aplikasi**
1. Di panel navigasi, pilih **Aplikasi saya** di bagian **Build**. Anda akan dibawa ke halaman yang menampilkan daftar aplikasi yang dapat Anda akses.
1. Pilih dropdown di kolom **Actions** dari aplikasi yang ingin Anda hapus.
1. Pilih **Hapus**.
1. Di kotak dialog **Hapus aplikasi**, tinjau informasi tentang menghapus aplikasi dengan cermat. Jika Anda ingin menghapus aplikasi, pilih **Hapus**.
# Mempratinjau, menerbitkan, dan berbagi aplikasi
**Topics**
+ [Pratinjau aplikasi](applications-preview.md)
+ [Penerbitan aplikasi](applications-publish.md)
+ [Berbagi aplikasi yang diterbitkan](application-share.md)
+ [Kembali ke versi yang diterbitkan sebelumnya](application-rollback-version.md)
+ [Mengekspor aplikasi](applications-export.md)
# Pratinjau aplikasi
Anda dapat melihat pratinjau aplikasi di App Studio untuk melihat bagaimana mereka akan muncul kepada pengguna dan juga menguji fungsinya dengan menggunakannya dan memeriksa log di panel debug.
Lingkungan pratinjau aplikasi tidak mendukung menampilkan data langsung atau koneksi dengan sumber daya eksternal dengan konektor, seperti sumber data. Untuk menguji fungsionalitas di lingkungan pratinjau, Anda dapat menggunakan keluaran tiruan dalam otomatisasi dan data sampel dalam entitas. Untuk melihat aplikasi Anda dengan data real-time, Anda harus mempublikasikan aplikasi Anda. Untuk informasi selengkapnya, lihat [Penerbitan aplikasi](applications-publish.md).
Lingkungan pratinjau atau pengembangan tidak memperbarui aplikasi yang diterbitkan di lingkungan lain. Jika aplikasi belum dipublikasikan, pengguna tidak akan dapat mengaksesnya sampai diterbitkan dan dibagikan. Jika aplikasi telah diterbitkan dan dibagikan, pengguna masih akan mengakses versi yang telah diterbitkan, dan bukan versi yang digunakan dalam lingkungan pratinjau.
**Untuk melihat pratinjau aplikasi Anda**
1. Jika perlu, navigasikan ke studio aplikasi aplikasi yang ingin Anda pratinjau:
1. Di panel navigasi, pilih **Aplikasi saya** di bagian **Build**.
1. Pilih **Edit** untuk aplikasi.
1. Pilih **Pratinjau** untuk membuka lingkungan pratinjau untuk aplikasi.
1. (Opsional) Perluas panel debug dengan memilih header di dekat bagian bawah layar. Anda dapat memfilter panel berdasarkan jenis pesan dengan memilih jenis pesan di bagian **Filter log**. Anda dapat menghapus log panel dengan memilih **Hapus konsol**.
1. Saat berada di lingkungan pratinjau, Anda dapat menguji aplikasi Anda dengan menavigasi di sekitar halamannya, menggunakan komponennya, dan memilih tombolnya untuk memulai otomatisasi yang mentransfer data. Karena lingkungan pratinjau tidak mendukung data langsung atau koneksi ke sumber eksternal, Anda dapat melihat contoh data yang ditransfer di panel debug.
# Penerbitan aplikasi
Setelah selesai membuat dan mengonfigurasi aplikasi, langkah selanjutnya adalah mempublikasikannya untuk menguji transfer data atau membagikannya dengan pengguna akhir. Untuk memahami aplikasi penerbitan di App Studio, penting untuk memahami lingkungan yang tersedia. App Studio menyediakan tiga lingkungan terpisah, yang dijelaskan dalam daftar berikut:
1. **Pengembangan**: Di mana Anda membangun dan melihat pratinjau aplikasi Anda. Anda tidak perlu mempublikasikan ke lingkungan Pengembangan, karena versi terbaru aplikasi Anda di-host di sana secara otomatis. Tidak ada data langsung atau layanan atau sumber daya pihak ketiga yang tersedia di lingkungan ini.
1. **Pengujian**: Di mana Anda dapat melakukan pengujian komprehensif aplikasi Anda. Di lingkungan Pengujian, Anda dapat terhubung ke, mengirim data ke, dan menerima data dari layanan lain.
1. **Produksi**: Lingkungan operasional langsung untuk konsumsi pengguna akhir.
Semua pembuatan aplikasi Anda berlangsung di lingkungan **Pengembangan**. Kemudian, publikasikan ke lingkungan **Pengujian** untuk menguji transfer data antara layanan lain, dan pengujian penerimaan pengguna (UAT) dengan menyediakan URL akses ke pengguna akhir. Setelah itu, publikasikan aplikasi Anda ke lingkungan **Produksi** untuk melakukan pengujian akhir sebelum membagikannya kepada pengguna. Untuk informasi selengkapnya tentang lingkungan aplikasi, lihat[Lingkungan aplikasi](#application-environments).
Ketika Anda mempublikasikan aplikasi, itu tidak tersedia untuk pengguna sampai dibagikan. Ini memberi Anda kesempatan untuk menggunakan dan menguji aplikasi di lingkungan Pengujian dan Produksi sebelum pengguna dapat mengaksesnya. Saat Anda memublikasikan aplikasi ke Production yang sebelumnya telah diterbitkan dan dibagikan, versi yang tersedia untuk pengguna diperbarui.
## Penerbitan aplikasi
Gunakan prosedur berikut untuk memublikasikan aplikasi App Studio ke lingkungan Pengujian atau Produksi.
**Untuk mempublikasikan aplikasi ke lingkungan Pengujian atau Produksi**
1. Di panel navigasi, pilih **Aplikasi saya** di bagian **Build**. Anda akan dibawa ke halaman yang menampilkan daftar aplikasi yang dapat Anda akses.
1. Pilih **Edit** untuk aplikasi yang ingin Anda publikasikan.
1. Pilih **Publikasikan** di pojok kanan atas.
1. Dalam kotak dialog **Publikasikan pembaruan Anda**:
1. Tinjau informasi tentang menerbitkan aplikasi.
1. (Opsional) Dalam **deskripsi Versi**, sertakan deskripsi versi aplikasi ini.
1. Pilih kotak untuk mengetahui informasi tentang lingkungan.
1. Pilih **Mulai**. Diperlukan waktu hingga 15 menit agar aplikasi diperbarui di lingkungan hidup.
1. Untuk informasi tentang melihat aplikasi di lingkungan Pengujian atau Produksi, lihat[Melihat aplikasi yang dipublikasikan](#application-viewing-published).
**catatan**
Menggunakan aplikasi di lingkungan Pengujian atau Produksi akan menghasilkan transfer data langsung, seperti membuat catatan dalam tabel sumber data yang telah terhubung dengan konektor.
Aplikasi yang dipublikasikan yang belum pernah dibagikan tidak akan tersedia untuk pengguna atau pembangun lainnya. Untuk membuat aplikasi tersedia bagi pengguna, Anda harus membagikannya setelah penerbitan. Untuk informasi selengkapnya, lihat [Berbagi aplikasi yang diterbitkan](application-share.md).
## Melihat aplikasi yang dipublikasikan
Anda dapat melihat aplikasi yang dipublikasikan ke lingkungan Pengujian dan Produksi untuk menguji aplikasi sebelum membagikannya dengan pengguna akhir atau pembangun lainnya.
**Untuk melihat aplikasi yang dipublikasikan di lingkungan Pengujian atau Produksi**
1. Jika perlu, navigasikan ke studio aplikasi aplikasi yang ingin Anda pratinjau:
1. Di panel navigasi, pilih **Aplikasi saya** di bagian **Build**.
1. Pilih **Edit** untuk aplikasi.
1. **Pilih panah tarik-turun di samping **Publish** di pojok kanan atas dan pilih Publish Center.**
1. Dari pusat penerbitan, Anda dapat melihat lingkungan tempat aplikasi Anda dipublikasikan. Jika aplikasi Anda dipublikasikan ke lingkungan Pengujian atau Produksi, Anda dapat melihat aplikasi menggunakan tautan **URL** untuk setiap lingkungan.
**catatan**
Menggunakan aplikasi di lingkungan Pengujian atau Produksi akan menghasilkan transfer data langsung, seperti membuat catatan dalam tabel sumber data yang telah terhubung dengan konektor.
## Lingkungan aplikasi
AWS App Studio menyediakan kemampuan manajemen siklus hidup aplikasi (ALM) dengan tiga lingkungan terpisah - Pengembangan, Pengujian, dan Produksi. Ini membantu Anda lebih mudah melakukan praktik terbaik seperti memelihara lingkungan terpisah, kontrol versi, berbagi, dan memantau di seluruh siklus hidup aplikasi.
### Lingkungan pengembangan
Lingkungan **Pengembangan** adalah kotak pasir terisolasi tempat Anda dapat membuat aplikasi tanpa terhubung ke sumber atau layanan data langsung apa pun menggunakan studio aplikasi dan data sampel. Di lingkungan Pengembangan, Anda dapat melihat pratinjau aplikasi untuk melihat dan menguji aplikasi tanpa mengorbankan data produksi.
Meskipun aplikasi Anda tidak terhubung ke layanan lain di lingkungan Pengembangan, Anda dapat mengonfigurasi berbagai sumber daya di aplikasi untuk meniru konektor dan otomatisasi data langsung.
Ada panel debug yang dapat dilipat yang menyertakan kesalahan dan peringatan di bagian bawah studio aplikasi di lingkungan Pengembangan untuk membantu Anda memeriksa dan men-debug aplikasi saat Anda membangun. Untuk informasi selengkapnya tentang pemecahan masalah dan debugging aplikasi, lihat. [Memecahkan masalah dan men-debug App Studio](troubleshooting-and-debugging.md)
### Lingkungan pengujian
Setelah pengembangan aplikasi awal Anda selesai, langkah selanjutnya adalah mempublikasikan ke lingkungan **Pengujian**. Saat berada di lingkungan Pengujian, aplikasi Anda dapat terhubung, mengirim data ke, dan menerima data dari layanan lain. Oleh karena itu, Anda dapat menggunakan lingkungan ini untuk melakukan pengujian komprehensif termasuk pengujian penerimaan pengguna (UAT) dengan menyediakan URL akses ke pengguna akhir.
**catatan**
Publikasi awal Anda ke lingkungan Pengujian dapat memakan waktu hingga 15 menit.
Versi aplikasi yang dipublikasikan ke lingkungan Pengujian akan dihapus setelah 3 jam pengguna akhir tidak aktif. Namun, semua versi tetap ada dan dapat dipulihkan dari tab **Riwayat Versi**.
Fitur utama dari lingkungan Pengujian adalah sebagai berikut:
+ Pengujian integrasi dengan sumber data langsung dan APIs
+ Pengujian penerimaan pengguna (UAT) difasilitasi melalui akses terkontrol
+ Lingkungan untuk mengumpulkan umpan balik dan mengatasi masalah
+ Kemampuan untuk memeriksa dan men-debug aktivitas sisi klien dan sisi server menggunakan konsol browser dan alat pengembang.
Untuk informasi selengkapnya tentang pemecahan masalah dan debugging aplikasi, lihat. [Memecahkan masalah dan men-debug App Studio](troubleshooting-and-debugging.md)
### Lingkungan produksi
Setelah menguji dan memperbaiki masalah apa pun, Anda dapat mempromosikan versi aplikasi Anda dari lingkungan Pengujian ke lingkungan Produksi untuk penggunaan operasional langsung. Meskipun lingkungan Produksi adalah lingkungan operasional langsung untuk konsumsi pengguna akhir, Anda dapat menguji versi yang dipublikasikan sebelum membagikannya kepada pengguna.
Versi Anda yang dipublikasikan di lingkungan Produksi akan dihapus setelah 14 hari pengguna akhir tidak aktif. Namun, semua versi tetap ada dan dapat dipulihkan dari tab **Riwayat Versi**.
Fitur utama dari lingkungan Produksi adalah sebagai berikut:
+ Lingkungan operasional langsung untuk konsumsi pengguna akhir
+ Kontrol akses berbasis peran granular
+ Kontrol versi dan kemampuan rollback
+ Kemampuan untuk memeriksa dan men-debug aktivitas sisi klien saja
+ Menggunakan konektor langsung, data, otomatisasi, dan APIs
## Manajemen versi dan rilis
App Studio menyediakan kontrol versi dan kemampuan manajemen rilis melalui sistem versioningnya di pusat **Publish**.
Kemampuan pembuatan versi kunci:
+ Penerbitan ke lingkungan Pengujian menghasilkan nomor versi baru (1.0, 2.0, 3.0...).
+ Nomor versi tidak berubah saat mempromosikan dari lingkungan Pengujian ke Produksi.
+ Anda dapat memutar kembali ke versi sebelumnya dari **Riwayat Versi**.
+ Aplikasi yang dipublikasikan ke lingkungan Pengujian dihentikan sementara setelah 3 jam tidak aktif. Versi dipertahankan dan dapat dipulihkan dari **Riwayat Versi**.
+ Aplikasi yang dipublikasikan ke lingkungan Produksi dihapus setelah 14 hari tidak aktif. Versi dipertahankan dan dapat dipulihkan dari **Riwayat Versi**.
Model pembuatan versi ini memungkinkan iterasi cepat sambil mempertahankan keterlacakan, kemampuan rollback, dan kinerja optimal di seluruh siklus pengembangan dan pengujian aplikasi.
## Pemeliharaan dan operasi
App Studio mungkin perlu menerbitkan ulang aplikasi Anda secara otomatis untuk menangani tugas pemeliharaan tertentu, aktivitas operasional, dan menggabungkan pustaka perangkat lunak baru. Tidak ada tindakan yang diperlukan dari Anda, pembangun, tetapi pengguna akhir mungkin perlu masuk kembali ke aplikasi. Dalam situasi tertentu, kami mungkin meminta Anda untuk menerbitkan ulang aplikasi Anda untuk menggabungkan fitur dan pustaka baru yang tidak dapat kami tambahkan sendiri secara otomatis. Anda harus menyelesaikan kesalahan dan meninjau peringatan sebelum menerbitkan ulang.
# Berbagi aplikasi yang diterbitkan
Ketika Anda mempublikasikan aplikasi yang belum dipublikasikan, itu tidak tersedia untuk pengguna sampai dibagikan. Setelah aplikasi yang diterbitkan telah dibagikan, itu akan tersedia untuk pengguna dan tidak perlu dibagikan lagi jika versi lain diterbitkan.
**catatan**
Bagian ini adalah tentang berbagi aplikasi yang diterbitkan dengan pengguna akhir atau penguji. Untuk informasi tentang mengundang pengguna lain untuk membuat aplikasi, lihat[Membangun aplikasi dengan banyak pengguna](builder-collaboration.md).
**Untuk berbagi aplikasi yang diterbitkan**
1. Akses kotak dialog **Bagikan** dari daftar aplikasi, atau studio aplikasi aplikasi Anda dengan menggunakan petunjuk berikut:
+ Untuk mengakses kotak dialog **Bagikan** dari daftar aplikasi: Di panel navigasi, pilih **Aplikasi saya** di bagian **Build**. **Pilih dropdown di kolom **Tindakan** aplikasi yang ingin Anda bagikan dan pilih Bagikan.**
+ Untuk mengakses kotak dialog **Bagikan** dari studio aplikasi: Dari studio aplikasi aplikasi Anda, pilih **Bagikan** di header atas.
1. Di kotak dialog **Bagikan**, pilih tab untuk lingkungan yang ingin Anda bagikan. Jika Anda tidak melihat tab **Pengujian** atau **Produksi**, aplikasi Anda mungkin tidak dipublikasikan ke lingkungan terkait. Untuk informasi selengkapnya tentang penerbitan, lihat[Penerbitan aplikasi](applications-publish.md).
1. Di tab yang sesuai, pilih grup dari menu tarik-turun untuk berbagi lingkungan dengan mereka.
1. (Opsional) Tetapkan peran tingkat aplikasi ke grup untuk menguji atau mengonfigurasi visibiitas halaman bersyarat. Untuk informasi selengkapnya, lihat [Mengkonfigurasi visibilitas halaman berbasis peran](app-level-roles.md).
1. Pilih **Bagikan**.
1. (Opsional) Salin dan bagikan tautan dengan pengguna. Hanya pengguna yang telah dibagikan aplikasi dan lingkungan yang dapat mengakses aplikasi di lingkungan yang sesuai.
# Kembali ke versi yang diterbitkan sebelumnya
Gunakan prosedur berikut untuk memutar kembali lingkungan Produksi aplikasi App Studio Anda ke versi yang diterbitkan sebelumnya. Pengguna akhir aplikasi Anda akan terpengaruh dan melihat versi aplikasi yang digulung kembali setelah aplikasi tersebut di-deploy. Saat Anda memutar kembali aplikasi, aplikasi juga memutar kembali kode komponen ke versi dari waktu publikasi sebelumnya dan memengaruhi seluruh tumpukan penerapan aplikasi (kode pengguna, status konfigurasi komponen). Ini berarti bahwa setiap pembaruan yang dilakukan App Studio pada kode komponen, seperti bidang atau perubahan konfigurasi lainnya, akan digulirkan kembali untuk memastikan versi aplikasi yang digulung kembali beroperasi seperti saat awalnya diterbitkan.
Versi aplikasi yang sedang berlangsung di lingkungan Pengembangan tidak terpengaruh saat Anda memutar kembali versi yang dipublikasikan.
Mengembalikan versi aplikasi yang dipublikasikan sangat membantu jika Anda mendeteksi masalah dengan aplikasi yang dipublikasikan dan perlu segera mempublikasikan versi yang sebelumnya berfungsi, atau Anda ingin mempublikasikan versi sebelumnya dan mempertahankan pembaruan terbaru ke aplikasi di lingkungan Pengembangan.
**catatan**
Jika Anda ingin mengembalikan lingkungan Pengembangan aplikasi ke versi yang diterbitkan sebelumnya, Anda harus mengembalikan aplikasi tersebut. Untuk informasi selengkapnya, lihat [Mengedit versi aplikasi yang diterbitkan sebelumnya](applications-edit-previously-published-version.md).
**Untuk memutar kembali versi lingkungan Produksi ke versi aplikasi yang diterbitkan sebelumnya**
1. Jika perlu, navigasikan ke lingkungan Pengembangan aplikasi Anda dengan mengeditnya. Untuk informasi selengkapnya, lihat [Mengedit atau membangun aplikasi](applications-edit.md).
1. Pilih panah tarik-turun versi di bagian atas ubin lingkungan **Produksi** untuk melihat versi yang tersedia untuk memutar kembali. Dropdown berisi versi yang diterbitkan dalam 30 hari terakhir. Jika dropdown ini dinonaktifkan, mungkin karena publikasi aplikasi sudah berlangsung, dan hanya satu publikasi yang dapat terjadi pada saat yang bersamaan.
1. Pilih versi yang ingin Anda putar kembali.
1. Masukkan alasan untuk memutar kembali, dan pilih **Gulung kembali**. Publikasi rollback akan dimulai dan setelah selesai, lingkungan Produksi aplikasi Anda akan diperbarui ke versi yang dipilih.
**catatan**
Anda juga dapat melanjutkan ke versi aplikasi yang diterbitkan sebelumnya setelah Anda memutar kembali.
# Mengekspor aplikasi
Anda dapat mengekspor snapshot aplikasi Anda untuk membagikannya dengan instans App Studio lainnya. Saat Anda mengekspor aplikasi, snapshot dibuat dari lingkungan Pengembangan aplikasi, dan kode impor dibuat. Kode impor kemudian dapat digunakan untuk mengimpor aplikasi ke instance App Studio lainnya, di mana ia dapat dilihat dan dibangun.
Aplikasi yang diekspor dapat diimpor ke instans di semua yang Wilayah AWS didukung oleh App Studio.
**Untuk mengekspor aplikasi**
1. Di panel navigasi, pilih **Aplikasi saya** di bagian **Build** untuk menavigasi ke daftar aplikasi Anda.
1. Pilih dropdown di kolom **Tindakan** aplikasi yang ingin Anda ekspor.
1. Pilih **Ekspor**.
1. Prosedur untuk membuat dan berbagi kode impor bervariasi tergantung pada apakah kode impor telah dibuat untuk aplikasi atau belum.
+ Jika kode impor belum dibuat:
1. Di **Izin impor aplikasi**, tentukan instance mana yang dapat mengimpor aplikasi yang diekspor. Anda dapat memberikan izin impor ke semua instance, atau menambahkan instance App Studio tertentu dengan memasukkan instansnya. IDs Pisahkan beberapa instance IDs dengan koma.
Untuk menemukan ID instans Anda, navigasikan ke setelan akun instans Anda dengan memilih **Pengaturan akun** di konsol App Studio.
1. Pilih **Hasilkan kode impor**.
1. Salin dan bagikan kode impor yang dihasilkan.
+ Jika kode impor telah dibuat:
1. Untuk membagikan aplikasi yang saat ini diekspor, salin dan bagikan kode impor yang ada. Untuk membuat aplikasi baru yang diekspor dengan perubahan terbaru pada aplikasi Anda, pilih **Buat kode baru**. Anda juga dapat memperbarui izin impor jika diperlukan.
# Halaman dan komponen: Bangun antarmuka pengguna aplikasi Anda
**Topics**
+ [Mengelola halaman](pages.md)
+ [Mengelola komponen](adding-editing-deleting-components.md)
+ [Mengkonfigurasi visibilitas halaman berbasis peran](app-level-roles.md)
+ [Memesan dan mengatur halaman dalam navigasi aplikasi](pages-order.md)
+ [Ubah warna di aplikasi Anda dengan tema aplikasi](app-theme.md)
+ [Referensi komponen](components-reference.md)
# Mengelola halaman
Gunakan prosedur berikut untuk membuat, mengedit, atau menghapus halaman dari AWS aplikasi App Studio Anda.
**Halaman** adalah wadah untuk [komponen](concepts.md#concepts-component), yang membentuk UI aplikasi di App Studio. Setiap halaman mewakili layar antarmuka pengguna (UI) aplikasi Anda yang akan berinteraksi dengan pengguna Anda. Halaman dibuat dan diedit di tab **Halaman** di studio aplikasi.
# Membuat halaman
Gunakan prosedur berikut untuk membuat halaman dalam aplikasi di App Studio. Untuk informasi tentang menduplikasi halaman yang ada, lihat[Menduplikasi halaman](pages-duplicate.md).
**Untuk membuat halaman**
1. Jika perlu, navigasikan ke lingkungan Pengembangan aplikasi Anda dengan mengeditnya.
1. Arahkan ke tab **Halaman**.
1. Di menu **Halaman** sisi kiri, pilih **\$1** Tambah.
# Menduplikasi halaman
Gunakan prosedur berikut untuk menduplikasi halaman dalam aplikasi di App Studio.
**Untuk menduplikasi halaman**
1. Jika perlu, navigasikan ke lingkungan Pengembangan aplikasi Anda dengan mengeditnya.
1. Arahkan ke tab **Halaman**.
1. **Di menu **Pages** sisi kiri, pilih menu elips di sebelah nama halaman yang ingin Anda duplikat dan pilih Duplikat.** Halaman duplikat ditambahkan langsung setelah halaman asli.
# Melihat dan mengedit properti halaman
Gunakan prosedur berikut untuk mengedit halaman dalam aplikasi di App Studio. Anda dapat mengedit properti seperti nama halaman, parameternya, dan tata letaknya.
**Untuk melihat atau mengedit properti halaman**
1. Jika perlu, navigasikan ke lingkungan Pengembangan aplikasi Anda dengan mengeditnya.
1. Arahkan ke tab **Halaman**.
1. **Di menu **Halaman** sisi kiri, pilih menu elips di sebelah nama halaman yang ingin Anda edit dan pilih Properti halaman.** Ini membuka menu **Properties** sisi kanan.
1. Untuk mengedit nama halaman:
**catatan**
****Karakter nama halaman yang valid: **A-Z**, **a-z**, **0-9, \$1**, \$1****
1. Pilih ikon pensil di sebelah nama di dekat bagian atas menu **Properties**.
1. Masukkan nama baru untuk halaman Anda dan tekan Enter.
1. Untuk membuat, mengedit, atau menghapus parameter halaman:
1. Untuk membuat parameter halaman, pilih **\$1 Tambahkan baru** di bagian **Parameter halaman**.
1. Untuk mengedit nilai **Kunci** atau **Deskripsi** parameter halaman, pilih bidang input properti yang ingin Anda ubah dan masukkan nilai baru. Perubahan Anda disimpan saat Anda mengedit.
1. Untuk menghapus parameter halaman, pilih ikon sampah dari parameter halaman yang ingin Anda hapus.
1. Untuk menambah, mengedit, atau menghapus logo atau spanduk halaman:
1. Untuk menambahkan logo halaman atau spanduk, aktifkan opsi masing-masing di bagian **Gaya**. Konfigurasikan sumber gambar dan berikan teks alt secara opsional.
1. Untuk mengedit logo halaman atau spanduk, perbarui bidang di bagian **Gaya**.
1. Untuk menghapus logo halaman atau spanduk, nonaktifkan opsi masing-masing di bagian **Gaya**.
1. Untuk mengedit tata letak halaman:
1. Perbarui bidang di bagian **Tata Letak**.
# Menghapus halaman
Gunakan prosedur berikut untuk menghapus halaman dari aplikasi di App Studio.
**Untuk menghapus halaman**
1. Jika perlu, navigasikan ke lingkungan Pengembangan aplikasi Anda dengan mengeditnya.
1. Arahkan ke tab **Halaman**.
1. **Di menu **Halaman** sisi kiri, pilih menu elips di sebelah nama halaman yang ingin Anda hapus dan pilih Hapus.**
# Mengelola komponen
Gunakan prosedur berikut untuk menambah, mengedit, dan menghapus komponen di atau dari halaman di studio aplikasi App Studio untuk membuat antarmuka pengguna yang diinginkan untuk aplikasi Anda.
# Menambahkan komponen ke halaman
Gunakan prosedur berikut untuk menambahkan komponen ke halaman di App Studio. Untuk informasi tentang menduplikasi komponen yang ada, lihat[Duplikasi komponen](duplicating-components.md).
1. Jika perlu, navigasikan ke lingkungan Pengembangan aplikasi Anda dengan mengeditnya.
1. Arahkan ke tab **Halaman**.
1. Panel komponen terletak di menu sisi kanan, yang berisi komponen yang tersedia.
1. Seret dan jatuhkan komponen yang diinginkan dari panel ke kanvas. Atau, Anda dapat mengklik dua kali pada komponen di panel untuk secara otomatis menambahkannya ke tengah halaman saat ini.
1. Sekarang setelah Anda menambahkan komponen, gunakan panel **Properties** sisi kanan untuk menyesuaikan pengaturannya, seperti sumber data, tata letak, dan perilaku. Untuk informasi rinci tentang mengonfigurasi setiap jenis komponen, lihat[Referensi komponen](components-reference.md).
# Duplikasi komponen
Gunakan prosedur berikut untuk menduplikasi komponen di aplikasi App Studio. Komponen duplikat berisi otomatisasi atau entitas yang ditautkan dari komponen asli.
1. Jika perlu, navigasikan ke lingkungan Pengembangan aplikasi Anda dengan mengeditnya.
1. Arahkan ke tab **Halaman**.
1. Ada dua cara untuk menduplikasi komponen:
+ Di menu **Pages** sisi kiri, perluas halaman yang berisi komponen yang ingin Anda duplikat. **Pilih menu elips di sebelah nama komponen yang ingin Anda duplikat dan pilih Duplikat.**
+ Pilih komponen yang ingin Anda duplikat, dan pilih ikon duplikat.
Komponen duplikat ditambahkan langsung setelah komponen asli.
**Tip**
Anda dapat membatalkan duplikasi komponen, bersama dengan banyak tindakan lain di lingkungan Pengembangan, dengan menggunakan pintasan keyboard CTRL\$1Z atau CMD\$1Z.
# Melihat dan mengedit properti komponen
1. Jika perlu, navigasikan ke lingkungan Pengembangan aplikasi Anda dengan mengeditnya.
1. Arahkan ke tab **Halaman**.
1. Di menu **Pages** sisi kiri, perluas halaman yang berisi komponen dan pilih komponen yang akan dilihat atau diedit. Atau, Anda dapat memilih halaman dan kemudian memilih komponen dari kanvas.
1. Panel **Properties** sisi kanan menampilkan pengaturan yang dapat dikonfigurasi untuk komponen yang dipilih.
1. Jelajahi berbagai properti dan opsi yang tersedia, dan perbarui seperlunya untuk mengonfigurasi tampilan dan perilaku komponen. Misalnya, Anda mungkin ingin mengubah sumber data, mengonfigurasi tata letak, atau mengaktifkan fungsionalitas tambahan.
Untuk informasi rinci tentang mengonfigurasi setiap jenis komponen, lihat[Referensi komponen](components-reference.md).
# Menghapus komponen
1. Jika perlu, navigasikan ke lingkungan Pengembangan aplikasi Anda dengan mengeditnya.
1. Arahkan ke tab **Halaman**.
1. Di menu **Pages** sisi kiri, pilih komponen yang akan dihapus untuk memilihnya.
1. Di menu **Properties** sisi kanan, pilih ikon sampah.
1. Di kotak dialog konfirmasi, pilih **Hapus**.
# Mengkonfigurasi visibilitas halaman berbasis peran
Anda dapat membuat peran dalam aplikasi App Studio dan mengonfigurasi visbilitas halaman berdasarkan peran tersebut. Misalnya, Anda dapat membuat peran berdasarkan kebutuhan pengguna atau tingkat akses, seperti administrator, manajer, atau pengguna untuk aplikasi yang menyediakan fitur seperti persetujuan proyek atau pemrosesan klaim dan membuat halaman tertentu terlihat oleh peran tertentu. Dalam contoh ini, administrator mungkin memiliki akses penuh, manajer mungkin memiliki akses untuk melihat dasbor pelaporan, dan pengguna mungkin memiliki akses ke halaman tugas dengan formulir input.
Gunakan prosedur berikut untuk mengonfigurasi visbilitas halaman berbasis peran di aplikasi App Studio Anda.
1. Jika perlu, navigasikan ke studio aplikasi aplikasi Anda. **Dari menu navigasi sisi kiri, pilih **Aplikasi saya, temukan aplikasi** Anda dan pilih Edit.**
1. Buat peran tingkat aplikasi di studio aplikasi.
1. Pilih tab **Pengaturan aplikasi** di bagian atas studio aplikasi.
1. Pilih **\$1 Tambahkan Peran**
1. Dalam **nama Peran**, berikan nama untuk mengidentifikasi peran Anda. Sebaiknya gunakan nama yang mendeskriptif tingkat akses atau tugas grup, karena Anda akan menggunakan nama tersebut untuk mengatur visibilitas halaman.
1. Secara opsional, di **Deskripsi**, tambahkan deskripsi untuk peran tersebut.
1. Ulangi langkah-langkah ini untuk membuat peran sebanyak yang diperlukan.
1. Konfigurasikan visiblitas halaman Anda
1. Pilih tab **Pages** di bagian atas studio aplikasi.
1. Dari menu **Halaman sisi kiri, pilih halaman** yang ingin Anda konfigurasikan visibilitas berbasis peran.
1. Di menu sisi kanan, pilih tab **Properties**.
1. Di **Visibilitas**, nonaktifkan **Buka untuk semua pengguna akhir**.
1. Tetap pilih **Peran** untuk memilih dari daftar peran yang Anda buat di langkah sebelumnya. Pilih **Kustom** untuk menulis JavaScript ekspresi untuk konfigurasi visibilitas yang lebih kompleks.
1. Dengan **Peran** yang dipilih, centang kotak peran aplikasi yang halamannya akan terlihat.
1. Dengan **Custom** selected, masukkan JavaScript ekspresi yang menyelesaikan ke true atau false. Gunakan contoh berikut untuk memeriksa apakah pengguna saat ini memiliki peran *manajer*:`{{currentUser.roles.includes('manager')}}`.
1. Setelah visibilitas Anda dikonfigurasi, Anda dapat menguji visiblitas halaman dengan melihat pratinjau aplikasi Anda.
1. Pilih **Pratinjau** untuk membuka pratinjau aplikasi Anda.
1. Di kanan atas pratinjau, pilih menu **Pratinjau sebagai** dan centang kotak peran yang ingin Anda uji. Halaman yang terlihat harus mencerminkan peran yang dipilih.
1. Sekarang, tetapkan grup ke peran aplikasi untuk aplikasi yang dipublikasikan. Penugasan grup dan peran harus dikonfigurasi secara terpisah untuk setiap lingkungan. Untuk informasi selengkapnya tentang lingkungan aplikasi, lihat[Lingkungan aplikasi](applications-publish.md#application-environments).
**catatan**
Aplikasi Anda harus dipublikasikan ke lingkungan Pengujian atau Produksi untuk menetapkan grup App Studio ke peran yang telah Anda buat dan konfigurasikan. Jika perlu, publikasikan aplikasi Anda untuk menetapkan grup ke peran. Untuk informasi selengkapnya tentang penerbitan, lihat[Penerbitan aplikasi](applications-publish.md).
1. Di kanan atas studio aplikasi, pilih **Bagikan**.
1. Pilih tab untuk lingkungan yang ingin Anda konfigurasikan visibilitas halaman.
1. Pilih kotak input **Grup pencarian** dan pilih grup yang akan digunakan untuk berbagi versi aplikasi. Anda dapat memasukkan teks untuk mencari grup.
1. Di menu tarik-turun, pilih peran yang akan ditetapkan ke grup. Anda dapat memilih **Tidak ada peran** untuk membagikan versi aplikasi dan tidak menetapkan peran ke grup. Hanya halaman yang terlihat oleh semua pengguna yang akan terlihat oleh grup tanpa peran.
1. Pilih **Bagikan**. Ulangi langkah-langkah ini untuk menambahkan grup sebanyak yang diperlukan.
# Memesan dan mengatur halaman dalam navigasi aplikasi
Topik ini mencakup informasi tentang penataan ulang dan pengorganisasian halaman dalam aplikasi App Studio. Ada dua area produk di mana halaman aplikasi terlihat: di menu **Halaman** sebelah kiri saat mengedit aplikasi di studio aplikasi, dan navigasi sebelah kiri pratinjau aplikasi yang diterbitkan.
## Mengurutkan halaman di menu **Pages** sebelah kiri saat mengedit aplikasi
Saat mengedit aplikasi di studio aplikasi, halaman diurutkan berdasarkan waktu pembuatan di menu **Halaman** sebelah kiri. Anda tidak dapat menyusun ulang halaman di menu ini.
## Mengurutkan, menampilkan, atau menyembunyikan halaman dalam navigasi pratinjau atau aplikasi yang dipublikasikan
Anda dapat mengedit pengaturan navigasi sebelah kiri pratinjau atau aplikasi yang dipublikasikan berikut:
+ Visibilitas seluruh navigasi
+ Visibilitas halaman tertentu dalam navigasi
+ Urutan halaman dalam navigasi
**Untuk mengedit navigasi sebelah kiri pratinjau atau aplikasi yang dipublikasikan**
1. Jika perlu, navigasikan ke studio aplikasi aplikasi Anda untuk mengeditnya.
1. Di menu **Pages** sebelah kiri, pilih **Header & navigasi**.
1. Di menu **Header & navigasi** sisi kanan, lihat atau edit yang berikut ini:
1. Untuk menyembunyikan atau menampilkan navigasi di aplikasi, gunakan sakelar **Navigasi aplikasi**.
1. Untuk menyembunyikan halaman dari navigasi aplikasi, seret halaman ke bagian **Halaman yang tidak ditautkan**. ****
1. Untuk menyusun ulang halaman dalam navigasi aplikasi, seret ke urutan yang diinginkan di bagian **Halaman Tertaut**.
# Ubah warna di aplikasi Anda dengan tema aplikasi
Gunakan prosedur berikut untuk memperbarui warna dalam aplikasi Anda dengan mengonfigurasi tema aplikasi.
1. Jika perlu, navigasikan ke studio aplikasi aplikasi Anda untuk mengeditnya.
1. Di studio aplikasi, arahkan ke tab **Halaman**.
1. Di navigasi sebelah kiri, pilih **Tema aplikasi untuk membuka setelan tema** aplikasi sebelah kanan.
1. Pada **tema Dasar**, pilih **mode Cahaya atau mode** **Gelap**.
1. Untuk menambahkan warna kustom ke aplikasi Anda, aktifkan tombol **Sesuaikan** dan perbarui pengaturan berikut:
1. Dalam **warna Primer**, pilih warna yang diterapkan ke komponen tertentu dan navigasi aplikasi Anda. Anda dapat memilih warna dengan color picker, RGB, HSL, atau kode HEX.
**catatan**
App Studio akan secara otomatis memastikan warna Anda dapat diakses. Misalnya, jika Anda memilih warna terang dalam mode cahaya, itu akan diperbarui agar lebih mudah diakses.
1. Dalam **warna Header**, pilih warna yang diterapkan ke header aplikasi Anda. Anda dapat memilih warna dengan color picker, RGB, HSL, atau kode HEX.
1. Pilih **tema default** untuk melihat dan memilih dari tema yang telah ditentukan sebelumnya, atau pilih **Randomize** untuk menghasilkan warna primer dan header acak.
1. Pilih **Simpan Perubahan** untuk memperbarui tema aplikasi Anda.
# Referensi komponen
Topik ini merinci setiap komponen App Studio, propertinya, dan menyertakan contoh konfigurasi.
## Properti komponen umum
Bagian ini menguraikan properti dan fitur umum yang dibagikan di beberapa komponen di studio aplikasi. Detail implementasi spesifik dan kasus penggunaan untuk setiap jenis properti dapat bervariasi tergantung pada komponennya, tetapi konsep umum properti ini tetap konsisten di seluruh App Studio.
### Nama
Nama default dihasilkan untuk setiap komponen; Namun, Anda dapat mengedit untuk mengubah nama unik untuk setiap komponen. Anda akan menggunakan nama ini untuk mereferensikan komponen dan datanya dari komponen atau ekspresi lain dalam halaman yang sama. Batasan: Jangan sertakan spasi dalam nama komponen; itu hanya dapat memiliki huruf, angka, garis bawah dan tanda dolar. Contoh:`userNameInput`,`ordersTable`,`metricCard1`.
### Nilai primer, Nilai sekunder, dan Nilai
Banyak komponen di studio aplikasi menyediakan bidang untuk menentukan nilai atau ekspresi yang menentukan konten atau data yang ditampilkan dalam komponen. Bidang ini sering diberi label sebagai`Primary value`,`Secondary value`, atau sederhananya`Value`, tergantung pada jenis dan tujuan komponen.
`Primary value`Bidang ini biasanya digunakan untuk menentukan nilai utama, titik data, atau konten yang harus ditampilkan secara jelas dalam komponen.
`Secondary value`Bidang, bila tersedia, digunakan untuk menampilkan nilai atau informasi tambahan atau pendukung di samping nilai primer.
`Value`Bidang ini memungkinkan Anda untuk menentukan nilai atau ekspresi yang harus ditampilkan dalam komponen.
Bidang ini mendukung input teks statis dan ekspresi dinamis. Dengan menggunakan ekspresi, Anda dapat mereferensikan data dari komponen lain, sumber data, atau variabel dalam aplikasi Anda, memungkinkan tampilan konten dinamis dan berbasis data.
#### Sintaks untuk ekspresi
Sintaks untuk memasukkan ekspresi di bidang ini mengikuti pola yang konsisten:
```
{{expression}}
```
Di mana *expression* adalah ekspresi valid yang mengevaluasi nilai atau data yang diinginkan yang ingin Anda tampilkan.
##### Contoh: Teks statis
+ Nilai primer: Anda dapat memasukkan nomor statis atau nilai secara langsung, seperti `"123"` atau`"$1,999.99"`.
+ Nilai sekunder: Anda dapat memasukkan label teks statis, seperti `"Goal"` atau`"Projected Revenue"`.
+ Nilai: Anda dapat memasukkan string statis, seperti `"since last month"` atau`"Total Quantity"`.
##### Contoh: Ekspresi
+ `Hello, {{currentUser.firstName}}`: Menampilkan salam dengan nama depan pengguna yang saat ini masuk.
+ `{{currentUser.role === 'Admin' ? 'Admin Dashboard' : 'User Dashboard'}}`: Secara kondisional menampilkan judul dasbor yang berbeda berdasarkan peran pengguna.
+ `{{ui.componentName.data?.[0]?.fieldName}}`: Mengambil nilai `fieldName` bidang dari item pertama dalam data komponen dengan ID`componentName`.
+ `{{ui.componentName.value * 100}}`: Melakukan perhitungan pada nilai komponen dengan ID`componentName`.
+ `{{ui.componentName.value + ' items'}}`: Menggabungkan nilai komponen dengan ID `componentName` dan string. `' items'`
+ `{{ui.ordersTable.data?.[0]?.orderNumber}}`: Mengambil nomor urut dari baris pertama data dalam `ordersTable` komponen.
+ `{{ui.salesMetrics.data?.[0]?.totalRevenue * 1.15}}`: Menghitung pendapatan yang diproyeksikan dengan meningkatkan total pendapatan dari baris pertama data dalam `salesMetrics` komponen sebesar 15%.
+ `{{ui.customerProfile.data?.[0]?.firstName + ' ' + ui.customerProfile.data?.lastName}}`: Menggabungkan nama depan dan belakang dari data dalam komponen. `customerProfile`
+ `{{new Date(ui.orderDetails.data?.orderDate).toLocaleDateString()}}`: Memformat tanggal pesanan dari `orderDetails` komponen ke string tanggal yang lebih mudah dibaca.
+ `{{ui.productList.data?.length}}`: Menampilkan jumlah total produk dalam data yang terhubung ke `productList` komponen.
+ `{{ui.discountPercentage.value * ui.orderTotal.value}}`: Menghitung jumlah diskon berdasarkan persentase diskon dan total pesanan.
+ `{{ui.cartItemCount.value + ' items in cart'}}`: Menampilkan jumlah item di keranjang belanja, bersama dengan label`items in cart`.
Dengan menggunakan bidang ekspresi ini, Anda dapat membuat konten dinamis dan berbasis data dalam aplikasi Anda, memungkinkan Anda menampilkan informasi yang disesuaikan dengan konteks pengguna atau status aplikasi Anda. Ini memungkinkan pengalaman pengguna yang lebih personal dan interaktif.
### Label
Properti **Label** memungkinkan Anda untuk menentukan keterangan atau judul untuk komponen. Label ini biasanya ditampilkan di samping atau di atas komponen, membantu pengguna memahami tujuannya.
Anda dapat menggunakan teks statis dan ekspresi untuk menentukan label.
#### Contoh: Teks statis
Jika Anda memasukkan teks “Nama Depan” di bidang Label, komponen akan menampilkan “Nama Depan” sebagai labelnya.
#### Contoh: Ekspresi
##### Contoh: Toko ritel
Contoh berikut mempersonalisasi label untuk setiap pengguna, membuat antarmuka terasa lebih disesuaikan dengan individu:
```
{{currentUser.firstName}} {{currentUser.lastName}}'s Account
```
##### Contoh: Manajemen proyek SaaS
Contoh berikut menarik data dari proyek yang dipilih untuk memberikan label khusus konteks, membantu pengguna tetap berorientasi dalam aplikasi:
```
Project {{ui.projectsTable.selectedRow.id}} - {{ui.projectsTable.selectedRow.name}}
```
##### Contoh: Klinik kesehatan
Contoh berikut merujuk profil pengguna saat ini dan informasi dokter, memberikan pengalaman yang lebih personal bagi pasien.
```
Dr. {{ui.doctorProfileTable.data.firstName}}
{{ui.doctorProfileTable.data.lastName}}
```
### Placeholder
Properti Placeholder memungkinkan Anda menentukan petunjuk atau teks panduan yang ditampilkan dalam komponen saat kosong. Ini dapat membantu pengguna memahami format input yang diharapkan atau memberikan konteks tambahan.
Anda dapat menggunakan teks statis dan ekspresi untuk menentukan placeholder.
#### Contoh: Teks statis
Jika Anda memasukkan teks `Enter your name` di bidang **Placeholder**, komponen akan ditampilkan `Enter your name` sebagai teks placeholder.
#### Contoh: Ekspresi
##### Contoh: Jasa keuangan
`Enter the amount you'd like to deposit into your {{ui.accountsTable.selectedRow.balance}} account`Contoh-contoh ini menarik data dari akun yang dipilih untuk menampilkan petunjuk yang relevan, membuat antarmuka intuitif bagi pelanggan perbankan.
##### Contoh: E-commerce
`Enter the coupon code for {{ui.cartTable.data.currency}} total`Placeholder di sini diperbarui secara dinamis berdasarkan konten keranjang pengguna, memberikan pengalaman checkout yang mulus.
##### Contoh: Klinik kesehatan
`Enter your {{ui.patientProfile.data.age}}-year-old patient's symptoms`Dengan menggunakan ekspresi yang merujuk usia pasien, aplikasi dapat membuat placeholder yang lebih personal dan bermanfaat.
### Sumber
Properti **Sumber** memungkinkan Anda untuk memilih sumber data untuk komponen. Setelah dipilih, Anda dapat memilih dari jenis sumber data berikut:`entity`,`expression`, atau`automation`.
#### Entitas
Memilih **Entitas** sebagai sumber data memungkinkan Anda menghubungkan komponen ke entitas atau model data yang ada dalam aplikasi Anda. Ini berguna ketika Anda memiliki struktur atau skema data yang terdefinisi dengan baik yang ingin Anda manfaatkan di seluruh aplikasi Anda.
Kapan menggunakan sumber data entitas:
+ Bila Anda memiliki model data atau entitas yang berisi informasi yang ingin ditampilkan dalam komponen (misalnya, entitas “Produk” dengan bidang seperti “Nama”, “Deskripsi”, “Harga”).
+ Saat Anda perlu mengambil data secara dinamis dari database, API, atau sumber data eksternal lainnya dan menyajikannya dalam komponen.
+ Bila Anda ingin memanfaatkan hubungan dan asosiasi yang ditentukan dalam model data aplikasi Anda.
##### Memilih kueri pada entitas
Terkadang, Anda mungkin ingin menghubungkan komponen ke kueri tertentu yang mengambil data dari entitas, bukan seluruh entitas. Di sumber data Entitas, Anda memiliki opsi untuk memilih dari kueri yang ada atau membuat yang baru.
Dengan memilih kueri, Anda dapat:
+ Filter data yang ditampilkan dalam komponen berdasarkan kriteria tertentu.
+ Teruskan parameter ke kueri untuk memfilter atau mengurutkan data secara dinamis.
+ Manfaatkan gabungan kompleks, agregasi, atau teknik manipulasi data lainnya yang didefinisikan dalam kueri.
Misalnya, jika Anda memiliki `Customers` entitas dalam aplikasi Anda dengan bidang seperti`Name`,`Email`, dan`PhoneNumber`. Anda dapat menghubungkan komponen tabel ke entitas ini dan memilih tindakan `ActiveCustomers` data yang telah ditentukan sebelumnya yang memfilter pelanggan berdasarkan statusnya. Ini memungkinkan Anda untuk menampilkan hanya pelanggan aktif dalam tabel, bukan seluruh basis data pelanggan.
##### Menambahkan parameter ke sumber data entitas
Saat menggunakan entitas sebagai sumber data, Anda juga dapat menambahkan parameter ke komponen. Parameter ini dapat digunakan untuk memfilter, mengurutkan, atau mengubah data yang ditampilkan dalam komponen.
Misalnya, jika Anda memiliki `Products` entitas dengan bidang seperti`Name`,`Description`,`Price`, dan`Category`. Anda dapat menambahkan parameter bernama `category` ke komponen tabel yang menampilkan daftar produk. Saat pengguna memilih kategori dari dropdown, tabel akan secara otomatis diperbarui untuk hanya menampilkan produk yang termasuk dalam kategori yang dipilih, menggunakan `{{params.category}}` ekspresi dalam tindakan data.
#### Ekspresi
Pilih **Ekspresi** sebagai sumber data untuk memasukkan ekspresi kustom atau perhitungan untuk menghasilkan data untuk komponen secara dinamis. Ini berguna ketika Anda perlu melakukan transformasi, menggabungkan data dari berbagai sumber, atau menghasilkan data berdasarkan logika bisnis tertentu.
Kapan menggunakan sumber data **Ekspresi**:
+ Ketika Anda perlu menghitung atau memperoleh data yang tidak tersedia secara langsung dalam model data Anda (misalnya, menghitung total nilai pesanan berdasarkan kuantitas dan harga).
+ Bila Anda ingin menggabungkan data dari beberapa entitas atau sumber data untuk membuat tampilan komposit (misalnya, menampilkan riwayat pesanan pelanggan bersama dengan informasi kontak mereka).
+ Saat Anda perlu membuat data berdasarkan aturan atau ketentuan tertentu (misalnya, menampilkan daftar “Produk yang Direkomendasikan” berdasarkan riwayat penelusuran pengguna).
Misalnya, jika Anda memiliki *Metrics* komponen yang perlu menampilkan total pendapatan untuk bulan berjalan, Anda dapat menggunakan ekspresi seperti berikut ini untuk menghitung dan menampilkan pendapatan bulanan:
```
{{ui.table1.orders.concat(ui.table1.orderDetails).filter(o => o.orderDate.getMonth() === new Date().getMonth()).reduce((a, b) => a + (b.quantity * b.unitPrice), 0)}}
```
##### Otomatisasi
Pilih **Otomasi** sebagai sumber data untuk menghubungkan komponen ke otomatisasi atau alur kerja yang ada di aplikasi Anda. Ini berguna ketika data atau fungsionalitas untuk komponen dihasilkan atau diperbarui sebagai bagian dari proses atau alur kerja tertentu.
Kapan menggunakan sumber data **Otomasi**:
+ Ketika data yang ditampilkan dalam komponen adalah hasil dari otomatisasi atau alur kerja tertentu (misalnya, tabel “Persetujuan Tertunda” yang diperbarui sebagai bagian dari proses persetujuan).
+ Saat Anda ingin memicu tindakan atau pembaruan komponen berdasarkan peristiwa atau kondisi dalam otomatisasi (misalnya, memperbarui Metrik dengan angka penjualan terbaru untuk SKU).
+ Ketika Anda perlu mengintegrasikan komponen dengan layanan atau sistem lain dalam aplikasi Anda melalui otomatisasi (misalnya, mengambil data dari API pihak ketiga dan menampilkannya dalam tabel).
Misalnya, jika Anda memiliki komponen stepflow yang memandu pengguna melalui proses lamaran kerja. Komponen stepflow dapat dihubungkan ke otomatisasi yang menangani pengajuan lamaran kerja, pemeriksaan latar belakang, dan pembuatan penawaran. Saat otomatisasi berlangsung melalui langkah-langkah ini, komponen stepflow dapat diperbarui secara dinamis untuk mencerminkan status aplikasi saat ini.
Dengan hati-hati memilih sumber data yang sesuai untuk setiap komponen, Anda dapat memastikan bahwa antarmuka pengguna aplikasi Anda didukung oleh data dan logika yang tepat, memberikan pengalaman yang mulus dan menarik bagi pengguna Anda.
### Terlihat jika
Gunakan properti **Visible if** untuk menampilkan atau menyembunyikan komponen atau elemen berdasarkan kondisi atau nilai data tertentu. Ini berguna ketika Anda ingin mengontrol visibilitas bagian-bagian tertentu dari antarmuka pengguna aplikasi Anda secara dinamis.
Properti **Visible if** menggunakan sintaks berikut:
```
{{expression ? true : false}}
```
atau
```
{{expression}}
```
Di mana *expression* adalah ekspresi boolean yang mengevaluasi salah satu atau`true`. `false`
Jika ekspresi dievaluasi`true`, komponen akan terlihat. Jika ekspresi dievaluasi`false`, komponen akan disembunyikan. Ekspresi dapat mereferensikan nilai dari komponen lain, sumber data, atau variabel dalam aplikasi Anda.
#### Contoh ekspresi jika terlihat
##### Contoh: Menampilkan atau menyembunyikan kolom input kata sandi berdasarkan input email
Bayangkan Anda memiliki formulir login dengan bidang input email dan bidang input kata sandi. Anda ingin menampilkan bidang input kata sandi hanya jika pengguna telah memasukkan alamat email. Anda dapat menggunakan ekspresi Visible if berikut:
```
{{ui.emailInput.value !== ""}}
```
Ekspresi ini memeriksa apakah nilai `emailInput` komponen bukan string kosong. Jika pengguna telah memasukkan alamat email, ekspresi akan dievaluasi`true`, dan bidang input kata sandi akan terlihat. Jika bidang email kosong, ekspresi dievaluasi`false`, dan bidang input kata sandi akan disembunyikan.
##### Contoh: Menampilkan kolom formulir tambahan berdasarkan pilihan dropdown
Katakanlah Anda memiliki formulir di mana pengguna dapat memilih kategori dari daftar dropdown. Bergantung pada kategori yang dipilih, Anda ingin menampilkan atau menyembunyikan kolom formulir tambahan untuk mengumpulkan informasi yang lebih spesifik.
Misalnya, jika pengguna memilih *Products* kategori, Anda dapat menggunakan ekspresi berikut untuk menampilkan *Product Details* bidang tambahan:
```
{{ui.categoryDropdown.value === "Products"}}
```
Jika pengguna memilih *Services* atau *Consulting* kategori, Anda dapat menggunakan ekspresi ini untuk menampilkan kumpulan bidang tambahan yang berbeda:
```
{{ui.categoryDropdown.value === "Services" || ui.categoryDropdown.value === "Consulting"}}
```
##### Contoh: Lainnya
Untuk membuat komponen terlihat jika nilai `textInput1` komponen bukan string kosong:
```
{{ui.textInput1.value === "" ? false : true}}
```
Untuk membuat komponen selalu terlihat:
```
{{true}}
```
Untuk membuat komponen terlihat jika nilai `emailInput` komponen bukan string kosong:
```
{{ui.emailInput.value !== ""}}
```
### Dinonaktifkan jika
Fitur **Disabled if** memungkinkan Anda mengaktifkan atau menonaktifkan komponen secara kondisional berdasarkan kondisi atau nilai data tertentu. Hal ini dicapai dengan menggunakan properti **Disabled if**, yang menerima ekspresi boolean yang menentukan apakah komponen harus diaktifkan atau dinonaktifkan.
Properti **Disabled if** menggunakan sintaks berikut:
```
{{expression ? true : false}}
```
atau
```
{{expression}}
```
#### Contoh ekspresi jika dinonaktifkan
##### Contoh: Menonaktifkan tombol kirim berdasarkan validasi formulir
Jika Anda memiliki formulir dengan beberapa bidang input, dan Anda ingin menonaktifkan tombol kirim sampai semua bidang yang diperlukan diisi dengan benar, Anda dapat menggunakan ekspresi **Disabled If** berikut:
```
{{ui.nameInput.value === "" || ui.emailInput.value === "" || ui.passwordInput.value === ""}}
```
Ekspresi ini memeriksa apakah ada bidang input yang diperlukan (`nameInput``emailInput`,,`passwordInput`) kosong. Jika salah satu bidang kosong, ekspresi dievaluasi`true`, dan tombol kirim akan dinonaktifkan. Setelah semua bidang yang diperlukan diisi, ekspresi dievaluasi`false`, dan tombol kirim akan diaktifkan.
Dengan menggunakan jenis ekspresi bersyarat ini di properti **Visible if** dan **Disabled ff**, Anda dapat membuat antarmuka pengguna dinamis dan responsif yang beradaptasi dengan input pengguna, memberikan pengalaman yang lebih efisien dan relevan bagi pengguna aplikasi Anda.
Di mana *expression* adalah ekspresi boolean yang mengevaluasi baik benar atau salah.
Contoh:
```
{{ui.textInput1.value === "" ? true : false}}: The component will be Disabled if the textInput1 component's value is an empty string.
{{!ui.nameInput.isValid || !ui.emailInput.isValid || !ui.passwordInput.isValid}}: The component will be Disabled if any of the named input fields are invalid.
```
#### Tata letak kontainer
Properti tata letak menentukan bagaimana konten atau elemen dalam komponen diatur dan diposisikan. Beberapa opsi tata letak tersedia, masing-masing diwakili oleh ikon:
+ **Tata Letak Kolom**: Tata letak ini mengatur konten atau elemen secara vertikal, dalam satu kolom.
+ **Tata letak dua kolom**: Tata letak ini membagi komponen menjadi dua kolom dengan lebar yang sama, memungkinkan Anda untuk memposisikan konten atau elemen berdampingan.
+ **Tata letak baris**: Tata letak ini mengatur konten atau elemen secara horizontal, dalam satu baris.
##### Orientasi
+ **Horizontal**: Tata letak ini mengatur konten atau elemen secara horizontal, dalam satu baris.
+ **Vertikal**: Tata letak ini mengatur konten atau elemen secara vertikal, dalam satu kolom.
+ **Inline wrapped**: Tata letak ini mengatur konten atau elemen secara horizontal, tetapi membungkus ke baris berikutnya jika elemen melebihi lebar yang tersedia.
##### Keselarasan
+ **Kiri**: Sejajarkan konten atau elemen ke sisi kiri komponen.
+ **Pusat**: Memusatkan konten atau elemen secara horizontal di dalam komponen.
+ **Kanan**: Menyelaraskan konten atau elemen ke sisi kanan komponen.
##### Lebar
Properti **Width** menentukan ukuran horizontal komponen. Anda dapat memasukkan nilai persentase antara 0% dan 100%, mewakili lebar komponen relatif terhadap wadah induknya atau ruang yang tersedia.
##### Tinggi
Properti **Height** menentukan ukuran vertikal komponen. Nilai “auto” menyesuaikan tinggi komponen secara otomatis berdasarkan kontennya atau ruang yang tersedia.
##### Ruang antara
**Spasi antar** properti menentukan jarak atau kesenjangan antara konten atau elemen dalam komponen. Anda dapat memilih nilai dari 0px (tanpa spasi) ke 64px, dengan penambahan 4px (misalnya, 4px, 8px, 12px, dll.).
##### Bantalan
Properti **Padding** mengontrol ruang antara konten atau elemen dan tepi komponen. Anda dapat memilih nilai dari 0px (tanpa padding) ke 64px, dengan penambahan 4px (misalnya, 4px, 8px, 12px, dll.).
##### Latar Belakang
**Latar Belakang** mengaktifkan atau menonaktifkan warna latar belakang atau gaya untuk komponen.
Properti tata letak ini memberikan fleksibilitas dalam mengatur dan memposisikan konten dalam suatu komponen, serta mengontrol ukuran, jarak, dan tampilan visual komponen itu sendiri.
## Komponen data
Bagian ini mencakup berbagai komponen data yang tersedia di studio aplikasi, termasuk komponen **Tabel**, **Detail**, **Metrik**, **Formulir**, dan **Repeater**. Komponen ini digunakan untuk menampilkan, mengumpulkan, dan memanipulasi data dalam aplikasi Anda.
### Tabel
Komponen **Tabel** menampilkan data dalam format tabel, dengan baris dan kolom. Ini digunakan untuk menyajikan data terstruktur, seperti daftar item atau catatan dari database, secara terorganisir dan easy-to-read cara.
#### Properti tabel
Komponen **Tabel** berbagi beberapa sifat umum dengan komponen lain, seperti`Name`,`Source`, dan`Actions`. Untuk informasi lebih lanjut tentang properti ini, lihat[Properti komponen umum](#common-properties).
Selain properti umum, komponen **Tabel** memiliki properti dan opsi konfigurasi tertentu, termasuk`Columns`,`Search and export`, dan`Expressions`.
##### Kolom
Di bagian ini, Anda dapat menentukan kolom yang akan ditampilkan dalam tabel. Setiap kolom dapat dikonfigurasi dengan properti berikut:
+ **Format**: Tipe data bidang, misalnya: teks, nomor, tanggal.
+ **Label kolom**: Teks header untuk kolom.
+ **Nilai**: Bidang dari sumber data yang harus ditampilkan di kolom ini.
Bidang ini memungkinkan Anda untuk menentukan nilai atau ekspresi yang harus ditampilkan di sel kolom. Anda dapat menggunakan ekspresi untuk mereferensikan data dari sumber yang terhubung atau komponen lainnya.
Contoh: `{{currentRow.title}}` - Ekspresi ini akan menampilkan nilai *title* bidang dari baris saat ini di sel kolom.
+ **Aktifkan pengurutan**: Toggle ini memungkinkan Anda mengaktifkan atau menonaktifkan fungsionalitas penyortiran untuk kolom tertentu. Saat diaktifkan, pengguna dapat mengurutkan data tabel berdasarkan nilai di kolom ini.
##### Cari dan ekspor
Komponen **Tabel** menyediakan sakelar berikut untuk mengaktifkan atau menonaktifkan fungsi pencarian dan ekspor:
+ **Tampilkan pencarian** Saat diaktifkan, sakelar ini menambahkan kolom input pencarian ke tabel, memungkinkan pengguna untuk mencari dan memfilter data yang ditampilkan.
+ **Tampilkan ekspor** Saat diaktifkan, sakelar ini menambahkan opsi ekspor ke tabel, memungkinkan pengguna mengunduh data tabel dalam berbagai format, misalnya: CSV.
**catatan**
Secara default, fungsi pencarian terbatas pada data yang telah dimuat ke dalam tabel. Untuk menggunakan pencarian secara mendalam, Anda harus memuat semua halaman data.
##### Baris per halaman
Anda dapat menentukan jumlah baris yang akan ditampilkan per halaman dalam tabel. Pengguna kemudian dapat menavigasi antar halaman untuk melihat kumpulan data lengkap.
##### Batas pra-pengambilan
Tentukan jumlah maksimum catatan yang akan diambil sebelumnya di setiap permintaan kueri. Maksimumnya adalah 3000.
##### Tindakan
Di bagian **Tindakan**, konfigurasikan properti berikut:
+ **Lokasi tindakan**: Saat **Pin ke kanan** diaktifkan, tindakan tambahan apa pun akan selalu ditampilkan di sebelah kanan tabel, terlepas dari pengguliran pengguna.
+ **Tindakan**: Tambahkan tombol tindakan ke tabel. Anda dapat mengonfigurasi tombol-tombol ini untuk melakukan tindakan tertentu saat diklik oleh pengguna, seperti:
+ Jalankan tindakan komponen
+ Arahkan ke halaman yang berbeda
+ Memanggil tindakan data
+ Jalankan kustom JavaScript
+ Memanggil otomatisasi
##### Ekspresi
Komponen **Tabel** menyediakan beberapa area untuk menggunakan ekspresi dan kemampuan tindakan tingkat baris yang memungkinkan Anda menyesuaikan dan meningkatkan fungsionalitas dan interaktivitas tabel. Mereka memungkinkan Anda untuk secara dinamis referensi dan menampilkan data dalam tabel. Dengan memanfaatkan bidang ekspresi ini, Anda dapat membuat kolom dinamis, meneruskan data ke tindakan tingkat baris, dan data tabel referensi dari komponen atau ekspresi lain dalam aplikasi Anda.
##### Contoh: Mereferensikan nilai baris
`{{currentRow.columnName}}`atau Ekspresi `{{currentRow["Column Name"]}}` ini memungkinkan Anda untuk mereferensikan nilai kolom tertentu untuk baris saat ini yang sedang dirender. Ganti *columnName* atau *Column Name* dengan nama sebenarnya dari kolom yang ingin Anda referensikan.
Contoh:
+ `{{currentRow.productName}}`Menampilkan nama produk untuk baris saat ini.
+ `{{currentRow["Supplier Name"]}}`Menampilkan nama pemasok untuk baris saat ini, di mana header kolom berada*Supplier Name*.
+ `{{currentRow.orderDate}}`Menampilkan tanggal pesanan untuk baris saat ini.
##### Contoh: Mereferensikan baris yang dipilih
`{{ui.table1.selectedRow["columnName"]}}`Ekspresi ini memungkinkan Anda untuk mereferensikan nilai kolom tertentu untuk baris yang saat ini dipilih dalam tabel dengan ID*table1*. Ganti *table1* dengan ID sebenarnya dari komponen tabel Anda, dan *columnName* dengan nama kolom yang ingin Anda referensikan.
Contoh:
+ `{{ui.ordersTable.selectedRow["totalAmount"]}}`Menampilkan jumlah total untuk baris yang saat ini dipilih dalam tabel dengan ID*ordersTable*.
+ `{{ui.customersTable.selectedRow["email"]}}`Menampilkan alamat email untuk baris yang dipilih saat ini dalam tabel dengan ID*customersTable*.
+ `{{ui.employeesTable.selectedRow["department"]}}`Menampilkan departemen untuk baris yang saat ini dipilih dalam tabel dengan ID*employeesTable*.
##### Contoh: Membuat kolom kustom
Anda dapat menambahkan kolom kustom ke tabel berdasarkan data yang dikembalikan dari tindakan, otomatisasi, atau ekspresi data yang mendasarinya. Anda dapat menggunakan nilai kolom dan JavaScript ekspresi yang ada untuk membuat kolom baru.
Contoh:
+ `{{currentRow.quantity * currentRow.unitPrice}}`Membuat kolom baru yang menampilkan harga total dengan mengalikan kolom kuantitas dan harga satuan.
+ `{{new Date(currentRow.orderDate).toLocaleDateString()}}`Membuat kolom baru yang menampilkan tanggal pemesanan dalam format yang lebih mudah dibaca.
+ `{{currentRow.firstName + ' ' + currentRow.lastName + ' (' + currentRow.email + ')' }}`Membuat kolom baru yang menampilkan nama lengkap dan alamat email untuk setiap baris.
##### Contoh: Menyesuaikan nilai tampilan kolom:
Anda dapat menyesuaikan nilai tampilan bidang dalam kolom tabel dengan mengatur `Value` bidang pemetaan kolom. Ini memungkinkan Anda untuk menerapkan pemformatan atau transformasi khusus ke data yang ditampilkan.
Contoh:
+ `{{ currentRow.rating >= 4 ? '⭐️'.repeat(currentRow.rating) : currentRow.rating }}`Menampilkan emoji bintang berdasarkan nilai peringkat untuk setiap baris.
+ `{{ currentRow.category.toLowerCase().replace(/\b\w/g, c => c.toUpperCase()) }}`Menampilkan nilai kategori dengan setiap kata dikapitalisasi untuk setiap baris.
+ `{{ currentRow.status === 'Active' ? '🟢 Active' : '🔴 Inactive' }}`: Menampilkan emoji lingkaran berwarna dan teks berdasarkan nilai status untuk setiap baris.
##### Tindakan tombol tingkat baris
`{{currentRow.columnName}}`atau `{{currentRow["Column Name"]}}` Anda dapat menggunakan ekspresi ini untuk meneruskan konteks baris yang direferensikan dalam tindakan tingkat baris, seperti menavigasi ke halaman lain dengan data baris yang dipilih atau memicu otomatisasi dengan data baris.
Contoh:
+ Jika Anda memiliki tombol edit di kolom tindakan baris, Anda dapat meneruskan `{{currentRow.orderId}}` sebagai parameter untuk menavigasi ke halaman pengeditan pesanan dengan ID pesanan yang dipilih.
+ Jika Anda memiliki tombol hapus di kolom tindakan baris, Anda dapat meneruskan `{{currentRow.customerName}}` ke otomatisasi yang mengirimkan email konfirmasi ke pelanggan sebelum menghapus pesanan mereka.
+ Jika Anda memiliki tombol detail tampilan di kolom tindakan baris, Anda dapat meneruskan `{{currentRow.employeeId}}` ke otomatisasi yang mencatat karyawan yang melihat detail pesanan.
Dengan memanfaatkan bidang ekspresi dan kemampuan tindakan tingkat baris ini, Anda dapat membuat tabel yang sangat disesuaikan dan interaktif yang menampilkan dan memanipulasi data berdasarkan kebutuhan spesifik Anda. Selain itu, Anda dapat menghubungkan tindakan tingkat baris dengan komponen atau otomatisasi lain dalam aplikasi Anda, memungkinkan aliran dan fungsionalitas data yang mulus.
### Detail
Komponen **Detail** dirancang untuk menampilkan informasi rinci tentang catatan atau item tertentu. Ini menyediakan ruang khusus untuk menyajikan data komprehensif yang terkait dengan satu entitas atau baris, sehingga ideal untuk menampilkan detail mendalam atau memfasilitasi entri data dan tugas pengeditan.
#### Properti detail
Komponen **Detail** berbagi beberapa properti umum dengan komponen lain, seperti`Name`,`Source`, dan`Actions`. Untuk informasi lebih lanjut tentang properti ini, lihat[Properti komponen umum](#common-properties).
Komponen **Detail** juga memiliki properti dan opsi konfigurasi tertentu, termasuk`Fields`,`Layout`, dan`Expressions`.
#### Tata Letak
Bagian **Tata Letak** memungkinkan Anda untuk menyesuaikan pengaturan dan presentasi bidang dalam komponen **Detail**. Anda dapat mengonfigurasi opsi seperti:
+ **Jumlah kolom**: Tentukan jumlah kolom untuk menampilkan bidang di.
+ **Urutan bidang**: Seret dan lepas bidang untuk menyusun ulang tampilannya.
+ **Spasi dan perataan**: Sesuaikan jarak dan penyelarasan bidang di dalam komponen.
#### Ekspresi dan contoh
Komponen **Detail** menyediakan berbagai bidang ekspresi yang memungkinkan Anda mereferensikan dan menampilkan data dalam komponen secara dinamis. Ekspresi ini memungkinkan Anda membuat komponen **Detail** yang disesuaikan dan interaktif yang terhubung secara mulus dengan data dan logika aplikasi Anda.
##### Contoh: Mereferensikan data
`{{ui.details.data[0]?.["colName"]}}`: Ekspresi ini memungkinkan Anda untuk mereferensikan nilai kolom bernama “colName” untuk item pertama (indeks 0) dalam larik data yang terhubung ke komponen **Detail** dengan ID “detail”. Ganti “colName” dengan nama sebenarnya dari kolom yang ingin Anda referensikan. Misalnya, ekspresi berikut akan menampilkan nilai kolom “CustomerName” untuk item pertama dalam larik data yang terhubung ke komponen “detail”:
```
{{ui.details.data[0]?.["customerName"]}}
```
**catatan**
Ekspresi ini berguna ketika komponen **Detail** berada di halaman yang sama dengan tabel yang direferensikan, dan Anda ingin menampilkan data dari baris pertama tabel di komponen **Detail**.
##### Contoh: Rendering bersyarat
`{{ui.table1.selectedRow["colName"]}}`: Ekspresi ini mengembalikan true jika baris yang dipilih dalam tabel dengan ID *table1* memiliki data untuk kolom bernama*colName*. Ini dapat digunakan untuk menampilkan atau menyembunyikan komponen **Detail secara** kondisional berdasarkan apakah baris tabel yang dipilih kosong atau tidak.
Contoh:
Anda dapat menggunakan ekspresi ini di `Visible if` properti komponen **Detail** untuk menampilkan atau menyembunyikannya secara kondisional berdasarkan baris yang dipilih dalam tabel.
```
{{ui.table1.selectedRow["customerName"]}}
```
Jika ekspresi ini dievaluasi ke true (baris yang dipilih dalam *table1* komponen memiliki nilai untuk *customerName* kolom), komponen **Detail** akan terlihat. Jika ekspresi mengevaluasi ke false (yaitu, baris yang dipilih kosong atau tidak memiliki nilai untuk “CustomerName”), komponen Detail akan **disembunyikan**.
##### Contoh: Tampilan bersyarat
`{{(ui.Component.value === "green" ? "🟢" : ui.Component.value === "yellow" ? "🟡" : ui.detail1.data?.[0]?.CustomerStatus)}}`: Ekspresi ini secara kondisional menampilkan emoji berdasarkan nilai komponen atau bidang data.
Kerusakan:
+ `ui.Component.value`: Referensi nilai komponen dengan ID*Component*.
+ `=== "green"`: Memeriksa apakah nilai komponen sama dengan string “hijau”.
+ `? "🟢"`: Jika kondisinya benar, menampilkan emoji lingkaran hijau.
+ `: ui.Component.value === "yellow" ? "🟡"`: Jika kondisi pertama salah, periksa apakah nilai komponen sama dengan string “kuning”.
+ `? "🟡"`: Jika kondisi kedua benar, menampilkan emoji kotak kuning.
+ `: ui.detail1.data?.[0]?.CustomerStatus`: Jika kedua kondisi salah, ini mereferensikan nilai CustomerStatus "" dari item pertama dalam larik data yang terhubung ke komponen Detail dengan ID “detail1".
Ekspresi ini dapat digunakan untuk menampilkan emoji atau nilai tertentu berdasarkan nilai komponen atau bidang data dalam komponen **Detail**.
### Metrik-metrik
Komponen **Metrik** adalah elemen visual yang menampilkan metrik kunci atau titik data dalam format seperti kartu. Ini dirancang untuk memberikan cara yang ringkas dan menarik secara visual untuk menyajikan informasi penting atau indikator kinerja.
#### Properti metrik
Komponen **Metrik** berbagi beberapa properti umum dengan komponen lain, seperti`Name`,`Source`, dan`Actions`. Untuk informasi lebih lanjut tentang properti ini, lihat[Properti komponen umum](#common-properties).
#### Tren
Fitur tren Metrik memungkinkan Anda untuk menampilkan indikator visual kinerja atau perubahan dari waktu ke waktu untuk metrik yang ditampilkan.
##### Nilai tren
Bidang ini memungkinkan Anda untuk menentukan nilai atau ekspresi yang harus digunakan untuk menentukan arah dan besarnya tren. Biasanya, ini akan menjadi nilai yang mewakili perubahan atau kinerja selama periode waktu tertentu.
Contoh:
```
{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue}}
```
Ekspresi ini mengambil nilai month-over-month pendapatan dari item pertama dalam data yang terhubung ke Metrik “SalesMetrics”.
##### Tren positif
Bidang ini memungkinkan Anda untuk memasukkan ekspresi yang mendefinisikan kondisi untuk tren positif. Ekspresi harus mengevaluasi benar atau salah.
Contoh:
```
{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue > 0}}
```
Ekspresi ini memeriksa apakah nilai month-over-month pendapatan lebih besar dari 0, menunjukkan tren positif.
##### Tren negatif
Bidang ini memungkinkan Anda untuk memasukkan ekspresi yang mendefinisikan kondisi untuk tren negatif. Ekspresi harus mengevaluasi benar atau salah.
Contoh:
```
{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue < 0}}
```
Ekspresi ini memeriksa apakah nilai month-over-month pendapatan kurang dari 0, menunjukkan tren negatif.
##### Bilah warna
Toggle ini memungkinkan Anda mengaktifkan atau menonaktifkan tampilan bilah berwarna untuk menunjukkan status tren secara visual.
##### Contoh Color Bar:
##### Contoh: Tren metrik penjualan
+ **Nilai tren**: `{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue}}`
+ **Tren positif**: `{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue > 0}}`
+ **Tren negatif**: `{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue < 0}}`
+ **Bilah warna**: Diaktifkan
##### Contoh: tren metrik inventaris
+ **Nilai tren**: `{{ui.inventoryMetrics.data?.[0]?.currentInventory - ui.inventoryMetrics.data?.[1]?.currentInventory}}`
+ **Tren positif**: `{{ui.inventoryMetrics.data?.[0]?.currentInventory > ui.inventoryMetrics.data?.[1]?.currentInventory}}`
+ **Tren negatif**: `{{ui.inventoryMetrics.data?.[0]?.currentInventory < ui.inventoryMetrics.data?.[1]?.currentInventory}}`
+ **Warna Bbar: Diaktifkan**
##### Contoh: Tren kepuasan pelanggan
+ **Nilai tren**: `{{ui.customerSatisfactionMetrics.data?.[0]?.npsScore}}`
+ **Tren positif**: `{{ui.customerSatisfactionMetrics.data?.[0]?.npsScore >= 8}}`
+ **Tren negatif**: `{{ui.customerSatisfactionMetrics.data?.[0]?.npsScore < 7}}`
+ **Bilah warna**: Diaktifkan
Dengan mengonfigurasi properti terkait tren ini, Anda dapat membuat komponen **Metrik** yang memberikan representasi visual dari kinerja atau perubahan dari waktu ke waktu untuk metrik yang ditampilkan.
Dengan memanfaatkan ekspresi ini, Anda dapat membuat komponen metrik yang sangat disesuaikan dan interaktif yang mereferensikan dan menampilkan data secara dinamis, memungkinkan Anda menampilkan metrik utama, indikator kinerja, dan visualisasi berbasis data dalam aplikasi Anda.
#### Contoh ekspresi metrik
Di panel properti, Anda dapat memasukkan ekspresi untuk menampilkan judul, nilai primer, nilai sekunder, dan keterangan nilai untuk menampilkan nilai secara dinamis.
##### Contoh: Mereferensikan nilai primer
`{{ui.metric1.primaryValue}}`: Ekspresi ini memungkinkan Anda untuk mereferensikan nilai utama komponen **Metrik** dengan ID *metric1* dari komponen atau ekspresi lain dalam halaman yang sama.
Contoh: `{{ui.salesMetrics.primaryValue}}` akan menampilkan nilai utama komponen *salesMetrics* **Metrik**.
##### Contoh: Merujuk nilai sekunder
`{{ui.metric1.secondaryValue}}`: Ekspresi ini memungkinkan Anda untuk mereferensikan nilai sekunder komponen **Metrik** dengan ID *metric1* dari komponen atau ekspresi lain dalam halaman yang sama.
Contoh: `{{ui.revenueMetrics.secondaryValue}}` akan menampilkan nilai sekunder dari komponen *revenueMetrics* **Metrik**.
##### Contoh: Mereferensikan data
`{{ui.metric1.data}}`: Ekspresi ini memungkinkan Anda untuk mereferensikan data komponen **Metrik** dengan ID *metric1* dari komponen atau ekspresi lain dalam halaman yang sama.
Contoh: `{{ui.kpiMetrics.data}}` akan mereferensikan data yang terhubung ke komponen *kpiMetrics* **Metrik**.
##### Contoh: Menampilkan nilai data tertentu:
`{{ui.metric1.data?.[0]?.id}}`: Ekspresi ini adalah contoh bagaimana menampilkan informasi tertentu dari data yang terhubung ke komponen **Metrik** dengan ID*metric1*. Ini berguna ketika Anda ingin menampilkan properti tertentu dari item pertama dalam data.
Kerusakan:
+ `ui.metric1`: Referensi komponen **Metrik** dengan ID*metric1*.
+ `data`: Mengacu pada informasi atau kumpulan data yang terhubung ke komponen itu.
+ `?.[0]`: Berarti item atau entri pertama dalam kumpulan data itu.
+ `?.id`: Menampilkan *id* nilai atau pengenal item atau entri pertama itu.
Contoh: `{{ui.orderMetrics.data?.[0]?.orderId}}` akan menampilkan *orderId* nilai item pertama dalam data yang terhubung ke komponen *orderMetrics* **Metrik**.
##### Contoh: Menampilkan panjang data
`{{ui.metric1.data?.length}}`: Ekspresi ini menunjukkan cara menampilkan panjang (jumlah item) dalam data yang terhubung ke komponen **Metrik** dengan ID. *metric1* Ini berguna ketika Anda ingin menampilkan jumlah item dalam data.
Kerusakan:
+ `ui.metric1.data`: Referensi kumpulan data yang terhubung ke komponen.
+ `?.length`: Mengakses jumlah total atau jumlah item atau entri dalam kumpulan data tersebut.
Contoh: `{{ui.productMetrics.data?.length}}` akan menampilkan jumlah item dalam data yang terhubung ke komponen *productMetrics* **Metrik**.
### Repeater
Komponen **Repeater** adalah komponen dinamis yang memungkinkan Anda menghasilkan dan menampilkan kumpulan elemen berdasarkan sumber data yang disediakan. Ini dirancang untuk memfasilitasi pembuatan daftar, kisi, atau pola berulang dalam antarmuka pengguna aplikasi Anda. Beberapa contoh kasus penggunaan meliputi:
+ Menampilkan kartu untuk setiap pengguna di akun
+ Menampilkan daftar produk yang menyertakan gambar dan tombol untuk menambahkannya ke keranjang
+ Menampilkan daftar file yang dapat diakses pengguna
Komponen **Repeater** membedakan dirinya dari komponen **Table** dengan konten yang kaya. Komponen **Tabel** memiliki format baris dan kolom yang ketat. **Repeater** dapat menampilkan data Anda dengan lebih fleksibel.
#### Properti repeater
Komponen **Repeater** berbagi beberapa properti umum dengan komponen lain, seperti`Name`,`Source`, dan`Actions`. Untuk informasi lebih lanjut tentang properti ini, lihat[Properti komponen umum](#common-properties).
Selain properti umum, komponen **Repeater** memiliki properti tambahan dan opsi konfigurasi berikut.
#### Template barang
**Template Item** adalah wadah tempat Anda dapat menentukan struktur dan komponen yang akan diulang untuk setiap item di sumber data. Anda dapat menarik dan melepas komponen lain ke dalam wadah ini, seperti **Teks**, **Gambar**, **Tombol**, atau komponen lain yang Anda butuhkan untuk mewakili setiap item.
Di dalam **Template item**, Anda dapat mereferensikan properti atau nilai dari item saat ini menggunakan ekspresi dalam format`{{currentItem.propertyName}}`.
Misalnya, jika sumber data Anda berisi `itemName` properti, Anda dapat menggunakan `{{currentItem.itemName}}` untuk menampilkan nama item dari item saat ini.
#### Tata Letak
Bagian **Layout** memungkinkan Anda untuk mengkonfigurasi pengaturan elemen berulang dalam Komponen Repeater.
##### Orientasi
+ **Daftar**: Mengatur elemen berulang secara vertikal dalam satu kolom.
+ **Grid**: Mengatur elemen berulang dalam tata letak grid dengan beberapa kolom.
##### Baris per halaman
Tentukan jumlah baris yang akan ditampilkan per halaman dalam tata letak daftar. Pagination disediakan untuk item yang meluap jumlah baris yang ditentukan.
##### Kolom dan Baris per Halaman (Grid)
+ **Kolom**: Tentukan jumlah kolom dalam tata letak kisi.
+ **Baris per Halaman**: Tentukan jumlah baris yang akan ditampilkan per halaman dalam tata letak kisi. Pagination disediakan untuk item yang meluap dimensi grid yang ditentukan.
#### Ekspresi dan contoh
Komponen **Repeater** menyediakan berbagai bidang ekspresi yang memungkinkan Anda mereferensikan dan menampilkan data dalam komponen secara dinamis. Ekspresi ini memungkinkan Anda membuat komponen **Repeater** yang disesuaikan dan interaktif yang terhubung secara mulus dengan data dan logika aplikasi Anda.
##### Contoh: Mereferensikan item
+ `{{currentItem.propertyName}}`: Properti referensi atau nilai dari item saat ini dalam **Template Item**.
+ `{{ui.repeaterID[index]}}`: Referensi item tertentu di Komponen Repeater dengan indeksnya.
##### Contoh: Merender daftar produk
+ **Sumber**: Pilih *Products* entitas sebagai sumber data.
+ **Template Item**: Tambahkan komponen **Container** dengan komponen **Teks** di dalamnya untuk menampilkan nama produk (`{{currentItem.productName}}`) dan komponen **Image** untuk menampilkan image produk (`{{currentItem.productImageUrl}}`).
+ **Layout**: Atur `Orientation` ke `List` dan `Rows per Page` sesuaikan sesuai keinginan.
##### Contoh: Menghasilkan kisi avatar pengguna
+ **Sumber**: Gunakan ekspresi untuk menghasilkan array data pengguna (misalnya,`[{name: 'John', avatarUrl: '...'}, {...}, {...}]`).
+ **Template Item**: Tambahkan komponen **Image** dan atur `Source` propertinya ke`{{currentItem.avatarUrl}}`.
+ **Layout**: Atur `Orientation` ke`Grid`, tentukan jumlah `Columns` dan`Rows per Page`, dan sesuaikan `Space Between` dan `Padding` sesuai kebutuhan.
Dengan menggunakan `Repeater` komponen, Anda dapat membuat antarmuka pengguna dinamis dan berbasis data, merampingkan proses rendering koleksi elemen dan mengurangi kebutuhan untuk pengulangan manual atau hard-coding.
### Formulir
Komponen Formulir dirancang untuk menangkap input pengguna dan memfasilitasi tugas entri data dalam aplikasi Anda. Ini menyediakan tata letak terstruktur untuk menampilkan bidang input, dropdown, kotak centang, dan kontrol formulir lainnya, memungkinkan pengguna untuk memasukkan atau memodifikasi data dengan mulus. Anda dapat menyarangkan komponen lain di dalam komponen formulir, seperti tabel.
#### Properti bentuk
Komponen **Form** berbagi beberapa properti umum dengan komponen lain, seperti`Name`,`Source`, dan`Actions`. Untuk informasi lebih lanjut tentang properti ini, lihat[Properti komponen umum](#common-properties).
#### Menghasilkan Formulir
Fitur **Hasilkan Formulir** memudahkan untuk membuat bidang formulir dengan cepat dengan mengisinya secara otomatis berdasarkan sumber data yang dipilih. Hal ini dapat menghemat waktu dan tenaga ketika membangun formulir yang perlu menampilkan sejumlah besar bidang.
**Untuk menggunakan fitur **Generate Form**:**
1. Dalam properti komponen **Form**, cari bagian **Generate Form**.
1. Pilih sumber data yang ingin Anda gunakan untuk menghasilkan bidang formulir. Ini bisa berupa entitas, alur kerja, atau sumber data lain yang tersedia di aplikasi Anda.
1. Bidang formulir akan dibuat secara otomatis berdasarkan sumber data yang dipilih, termasuk label bidang, jenis, dan pemetaan data.
1. Tinjau bidang yang dihasilkan dan buat penyesuaian yang diperlukan, seperti menambahkan aturan validasi atau mengubah urutan bidang.
1. Setelah Anda puas dengan konfigurasi formulir, pilih **Kirim** untuk menerapkan bidang yang dihasilkan ke komponen **Formulir** Anda.
Fitur **Generate Form** sangat berguna ketika Anda memiliki model data yang terdefinisi dengan baik atau kumpulan entitas dalam aplikasi Anda yang Anda perlukan untuk menangkap masukan pengguna. Dengan membuat kolom formulir secara otomatis, Anda dapat menghemat waktu dan memastikan konsistensi di seluruh formulir aplikasi Anda.
Setelah menggunakan fitur **Hasilkan Formulir**, Anda dapat menyesuaikan tata letak, tindakan, dan ekspresi untuk komponen **Formulir** agar sesuai dengan kebutuhan spesifik Anda.
#### Ekspresi dan contoh
Seperti komponen lainnya, Anda dapat menggunakan ekspresi untuk referensi dan menampilkan data dalam komponen **Formulir**. Contoh:
+ `{{ui.userForm.data.email}}`: Referensi nilai `email` bidang dari sumber data yang terhubung ke komponen **Formulir** dengan ID`userForm`.
**catatan**
Lihat [Properti komponen umum](#common-properties) untuk contoh ekspresi lebih lanjut dari properti umum.
Dengan mengonfigurasi properti ini dan memanfaatkan ekspresi, Anda dapat membuat komponen Formulir yang disesuaikan dan interaktif yang terintegrasi secara mulus dengan sumber data dan logika aplikasi Anda. Komponen-komponen ini dapat digunakan untuk menangkap input pengguna, menampilkan data yang telah diisi sebelumnya, dan memicu tindakan berdasarkan pengiriman formulir atau interaksi pengguna.
### Stepflow
Komponen **Stepflow** dirancang untuk memandu pengguna melalui proses multi-langkah atau alur kerja dalam aplikasi Anda. Ini menyediakan antarmuka terstruktur dan intuitif untuk menyajikan urutan langkah, masing-masing dengan set input, validasi, dan tindakannya sendiri.
Komponen Stepflow berbagi beberapa properti umum dengan komponen lain, seperti`Name`,`Source`, dan`Actions`. Untuk informasi lebih lanjut tentang properti ini, lihat[Properti komponen umum](#common-properties).
Komponen **Stepflow** memiliki properti tambahan dan opsi konfigurasi, seperti`Step Navigation`,`Validation`, dan`Expressions`.
## Komponen AI
### Generasi AI
Komponen **Gen AI** adalah wadah pengelompokan yang digunakan untuk mengelompokkan komponen dan logika yang menyertainya untuk dengan mudah mengeditnya dengan AI menggunakan obrolan di dalam studio aplikasi. Saat Anda menggunakan obrolan untuk membuat komponen, mereka akan dikelompokkan ke dalam wadah **Gen AI**. Untuk informasi tentang mengedit atau menggunakan komponen ini, lihat[Membangun atau mengedit aplikasi Anda](generative-ai.md#generative-ai-build-app).
## Komponen teks & angka
### Masukan teks
Komponen **input Teks** memungkinkan pengguna untuk memasukkan dan mengirimkan data teks dalam aplikasi Anda. Ini menyediakan cara sederhana dan intuitif untuk menangkap input pengguna, seperti nama, alamat, atau informasi tekstual lainnya.
+ `{{ui.inputTextID.value}}`: Mengembalikan nilai yang disediakan di bidang input.
+ `{{ui.inputTextID.isValid}}`: Mengembalikan validitas nilai yang disediakan di bidang input.
### Teks
Komponen **Teks** digunakan untuk menampilkan informasi tekstual dalam aplikasi Anda. Ini dapat digunakan untuk menampilkan teks statis, nilai dinamis, atau konten yang dihasilkan dari ekspresi.
### Area teks
Komponen **area Teks** dirancang untuk menangkap input teks multi-baris dari pengguna. Ini menyediakan area bidang input yang lebih besar bagi pengguna untuk memasukkan entri teks yang lebih panjang, seperti deskripsi, catatan, atau komentar.
+ `{{ui.textAreaID.value}}`: Mengembalikan nilai yang disediakan di area teks.
+ `{{ui.textAreaID.isValid}}`: Mengembalikan validitas nilai yang disediakan di area teks.
### Email
Komponen **Email** adalah bidang input khusus yang dirancang untuk menangkap alamat email dari pengguna. Ini dapat menegakkan aturan validasi khusus untuk memastikan nilai yang dimasukkan mematuhi format email yang benar.
+ `{{ui.emailID.value}}`: Mengembalikan nilai yang disediakan di bidang input email.
+ `{{ui.emailID.isValid}}`: Mengembalikan validitas nilai yang disediakan di bidang input email.
### Kata Sandi
Komponen **Kata Sandi** adalah bidang input yang dirancang khusus bagi pengguna untuk memasukkan informasi sensitif, seperti kata sandi atau kode PIN. Ini menutupi karakter yang dimasukkan untuk menjaga privasi dan keamanan.
+ `{{ui.passwordID.value}}`: Mengembalikan nilai yang disediakan di bidang input password.
+ `{{ui.passwordID.isValid}}`: Mengembalikan validitas nilai yang disediakan di bidang input password.
### Pencarian
Komponen **Pencarian** memberi pengguna bidang input khusus untuk melakukan kueri penelusuran atau memasukkan istilah penelusuran dalam data yang terisi dalam aplikasi.
+ `{{ui.searchID.value}}`: Mengembalikan nilai yang disediakan di bidang pencarian.
### Telepon
Komponen **Telepon** adalah bidang input yang disesuaikan untuk menangkap nomor telepon atau informasi kontak lainnya dari pengguna. Ini dapat mencakup aturan validasi khusus dan opsi pemformatan untuk memastikan nilai yang dimasukkan mematuhi format nomor telepon yang benar.
+ `{{ui.phoneID.value}}`: Mengembalikan nilai yang disediakan di bidang input telepon.
+ `{{ui.phoneID.isValid}}`: Mengembalikan validitas nilai yang disediakan di bidang input telepon.
### Bilangan
Komponen **Number** adalah bidang input yang dirancang khusus bagi pengguna untuk memasukkan nilai numerik. Ini dapat menegakkan aturan validasi untuk memastikan nilai yang dimasukkan adalah nomor yang valid dalam rentang atau format tertentu.
+ `{{ui.numberID.value}}`: Mengembalikan nilai yang disediakan di bidang input angka.
+ `{{ui.numberID.isValid}}`: Mengembalikan validitas nilai yang disediakan di bidang input angka.
### Mata Uang
Komponen **mata uang** adalah bidang input khusus untuk menangkap nilai atau jumlah moneter. Ini dapat mencakup opsi pemformatan untuk menampilkan simbol mata uang, pemisah desimal, dan menegakkan aturan validasi khusus untuk input mata uang.
+ `{{ui.currencyID.value}}`: Mengembalikan nilai yang diberikan dalam bidang masukan mata uang.
+ `{{ui.currencyID.isValid}}`: Mengembalikan validitas nilai yang diberikan di bidang masukan mata uang.
### Detail pasangan
Komponen **pasangan Detail** digunakan untuk menampilkan pasangan kunci-nilai atau pasangan informasi terkait dalam format terstruktur dan dapat dibaca. Ini biasanya digunakan untuk menyajikan detail atau metadata yang terkait dengan item atau entitas tertentu.
## Komponen seleksi
### Beralih
Komponen **Switch** adalah kontrol antarmuka pengguna yang memungkinkan pengguna untuk beralih di antara dua status atau opsi, seperti. on/off, true/false, or enabled/disabled Ini memberikan representasi visual dari keadaan saat ini dan memungkinkan pengguna untuk mengubahnya dengan satu klik atau ketuk.
### Ganti grup
Komponen **grup Switch** adalah kumpulan kontrol sakelar individual yang memungkinkan pengguna memilih satu atau beberapa opsi dari set yang telah ditentukan sebelumnya. Ini memberikan representasi visual dari opsi yang dipilih dan tidak dipilih, sehingga memudahkan pengguna untuk memahami dan berinteraksi dengan pilihan yang tersedia.
#### Beralih bidang ekspresi grup
+ `{{ui.switchGroupID.value}}`: Mengembalikan array string yang berisi nilai setiap sakelar yang diaktifkan oleh pengguna aplikasi.
### Grup kotak centang
Komponen **grup Checkbox** menyajikan pengguna dengan sekelompok kotak centang, memungkinkan mereka untuk memilih beberapa opsi secara bersamaan. Ini berguna ketika Anda ingin memberi pengguna kemampuan untuk memilih satu atau lebih item dari daftar opsi.
#### Bidang ekspresi grup kotak centang
+ `{{ui.checkboxGroupID.value}}`: Mengembalikan array string yang berisi nilai setiap kotak centang yang dipilih oleh pengguna aplikasi.
### Grup radio
Komponen **grup Radio** adalah satu set tombol radio yang memungkinkan pengguna untuk memilih satu opsi dari beberapa pilihan yang saling eksklusif. Ini memastikan bahwa hanya satu opsi yang dapat dipilih pada satu waktu, memberikan cara yang jelas dan tidak ambigu bagi pengguna untuk membuat pilihan.
#### Bidang ekspresi grup radio
Bidang berikut dapat digunakan dalam ekspresi.
+ `{{ui.radioGroupID.value}}`: Mengembalikan nilai tombol radio yang dipilih oleh pengguna aplikasi.
### Pilih tunggal
Komponen **Pilih Tunggal** menyajikan pengguna dengan daftar opsi, dari mana mereka dapat memilih satu item. Ini biasanya digunakan dalam skenario di mana pengguna perlu membuat pilihan dari serangkaian opsi yang telah ditentukan, seperti memilih kategori, lokasi, atau preferensi.
#### Bidang ekspresi pilih tunggal
+ `{{ui.singleSelectID.value}}`: Mengembalikan nilai item daftar yang dipilih oleh pengguna aplikasi.
### Multi pilih
Komponen **Multi select** mirip dengan komponen **Pilih Tunggal** tetapi memungkinkan pengguna untuk memilih beberapa opsi secara bersamaan dari daftar pilihan. Ini berguna ketika pengguna perlu membuat beberapa pilihan dari serangkaian opsi yang telah ditentukan, seperti memilih beberapa tag, minat, atau preferensi.
#### Bidang ekspresi multi pilih
+ `{{ui.multiSelectID.value}}`: Mengembalikan array string yang berisi nilai setiap item daftar yang dipilih oleh pengguna aplikasi.
## Tombol & komponen navigasi
Studio aplikasi menyediakan berbagai tombol dan komponen navigasi untuk memungkinkan pengguna memicu tindakan dan menavigasi dalam aplikasi Anda.
### Komponen tombol
Komponen tombol yang tersedia adalah:
+ Tombol
+ Tombol yang diuraikan
+ Tombol ikon
+ Tombol teks
Komponen tombol ini berbagi properti umum berikut:
#### Daftar isi
+ **Label tombol**: Teks yang akan ditampilkan pada tombol.
#### Tipe
+ **Tombol**: Tombol standar.
+ **Diuraikan**: Tombol dengan gaya yang diuraikan.
+ **Ikon**: Tombol dengan ikon.
+ **Teks**: Tombol teks saja.
#### Size
Ukuran tombol. Nilai yang mungkin adalah `Small`, `Medium`, dan `Large`.
#### Ikon
Anda dapat memilih dari berbagai ikon yang akan ditampilkan pada tombol, termasuk:
+ Amplop Tertutup
+ lonceng
+ Orang
+ Menu Hamburger
+ Pencarian
+ Info dilingkari
+ Perlengkapan
+ Chevron Kiri
+ Chevron Kanan
+ Titik Horisontal
+ Sampah
+ Edit
+ Memeriksa
+ Tutup
+ Rumah
+ Ditambah
#### Pemicu
Saat tombol diklik, Anda dapat mengonfigurasi satu atau beberapa tindakan yang akan dipicu. Jenis tindakan yang tersedia adalah:
+ **Basic**
+ Jalankan tindakan komponen: Mengeksekusi tindakan tertentu dalam komponen.
+ Navigasi: Menavigasi ke halaman atau tampilan lain.
+ Memanggil Tindakan Data: Memicu tindakan terkait data, seperti membuat, memperbarui, atau menghapus catatan.
+ **Advanced**
+ JavaScript: Menjalankan JavaScript kode kustom.
+ Memanggil Otomasi: Memulai otomatisasi atau alur kerja yang ada.
#### JavaScript properti tombol aksi
Pilih jenis `JavaScript` tindakan untuk menjalankan JavaScript kode kustom saat tombol diklik.
##### Kode sumber
Di `Source code` bidang, Anda dapat memasukkan JavaScript ekspresi atau fungsi Anda. Contoh:
```
return "Hello World";
```
Ini hanya akan mengembalikan string `Hello World` ketika tombol diklik.
##### Kondisi: Jalankan jika
Anda juga dapat memberikan ekspresi boolean yang menentukan apakah JavaScript tindakan harus dijalankan atau tidak. Ini menggunakan sintaks berikut:
```
{{ui.textinput1.value !== ""}}
```
Dalam contoh ini, JavaScript tindakan hanya akan berjalan jika nilai `textinput1` komponen bukan string kosong.
Dengan menggunakan opsi pemicu lanjutan ini, Anda dapat membuat perilaku tombol yang sangat disesuaikan yang terintegrasi langsung dengan logika dan data aplikasi Anda. Ini memungkinkan Anda untuk memperluas fungsionalitas tombol bawaan dan menyesuaikan pengalaman pengguna dengan kebutuhan spesifik Anda.
**catatan**
Selalu uji JavaScript tindakan Anda secara menyeluruh untuk memastikan mereka berfungsi seperti yang diharapkan.
### Hyperlink
Komponen **Hyperlink** menyediakan tautan yang dapat diklik untuk menavigasi ke rute aplikasi eksternal atau internal. URLs
#### Properti hyperlink
##### Daftar isi
+ **Label hyperlink**: Teks yang akan ditampilkan sebagai label hyperlink.
##### URL
URL tujuan untuk hyperlink, yang dapat berupa situs web eksternal atau rute aplikasi internal.
##### Pemicu
Saat hyperlink diklik, Anda dapat mengonfigurasi satu atau beberapa tindakan yang akan dipicu. Jenis tindakan yang tersedia sama dengan yang ada pada komponen tombol.
## Komponen tanggal & waktu
### Date
Komponen **Tanggal** memungkinkan pengguna untuk memilih dan memasukkan tanggal.
Komponen **Tanggal** berbagi beberapa properti umum dengan komponen lain, seperti`Name`,`Source`, dan`Validation`. Untuk informasi lebih lanjut tentang properti ini, lihat[Properti komponen umum](#common-properties).
Selain properti umum, komponen **Tanggal** memiliki properti spesifik berikut:
#### Properti tanggal
##### Format
+ **YYYY/MM/DD**, **DD/MM/YYYY**, **YYYY/MM/DD**, **YYYY/DD/MM**, **MM/DD**, **DD/MM**: Format di mana tanggal harus ditampilkan.
##### Nilai
+ **YYYY-MM-DD**: Format di mana nilai tanggal disimpan secara internal.
##### Tanggal Min
+ **YYYY-MM-DD**: Tanggal minimum yang dapat dipilih.
**catatan**
Nilai ini harus sesuai dengan format`YYYY-MM-DD`.
##### Tanggal maks
+ **YYYY-MM-DD**: Tanggal maksimum yang dapat dipilih.
**catatan**
Nilai ini harus sesuai dengan format`YYYY-MM-DD`.
##### Jenis kalender
+ **1 Bulan**, **2 Bulan**: Jenis UI kalender yang akan ditampilkan.
##### Tanggal dinonaktifkan
+ **Sumber**: Sumber data untuk tanggal yang harus dinonaktifkan. Misalnya: Tidak ada, Ekspresi.
+ **Tanggal dinonaktifkan**: Ekspresi yang menentukan tanggal mana yang harus dinonaktifkan, seperti:
+ `{{currentRow.column}}`: Menonaktifkan tanggal yang cocok dengan apa yang dievaluasi oleh ekspresi ini.
+ `{{new Date(currentRow.dateColumn) < new Date("2023-01-01")}}`: Menonaktifkan tanggal sebelum 1 Januari 2023
+ `{{new Date(currentRow.dateColumn).getDay() === 0 || new Date(currentRow.dateColumn).getDay() === 6}}`: Menonaktifkan akhir pekan.
##### Perilaku
+ **Terlihat jika**: Ekspresi yang menentukan visibilitas komponen **Tanggal**.
+ **Nonaktifkan if**: Ekspresi yang menentukan apakah komponen **Tanggal** harus dinonaktifkan.
#### Validasi
Bagian **Validasi** memungkinkan Anda menentukan aturan dan batasan tambahan untuk masukan tanggal. Dengan mengonfigurasi aturan validasi ini, Anda dapat memastikan bahwa nilai tanggal yang dimasukkan oleh pengguna memenuhi persyaratan spesifik aplikasi Anda. Anda dapat menambahkan jenis validasi berikut:
+ **Wajib**: Toggle ini memastikan bahwa pengguna harus memasukkan nilai tanggal sebelum mengirimkan formulir.
+ **Kustom**: Anda dapat membuat aturan validasi kustom menggunakan JavaScript ekspresi. Contoh:
```
{{new Date(ui.dateInput.value) < new Date("2023-01-01")}}
```
Ekspresi ini memeriksa apakah tanggal yang dimasukkan sebelum 1 Januari 2023. Jika kondisinya benar, validasi akan gagal.
Anda juga dapat memberikan pesan validasi kustom untuk ditampilkan ketika validasi tidak terpenuhi:
```
"Validation not met. The date must be on or after January 1, 2023."
```
Dengan mengonfigurasi aturan validasi ini, Anda dapat memastikan bahwa nilai tanggal yang dimasukkan oleh pengguna memenuhi persyaratan spesifik aplikasi Anda.
#### Ekspresi dan contoh
Komponen **Tanggal** menyediakan bidang ekspresi berikut:
+ `{{ui.dateID.value}}`: Mengembalikan nilai tanggal yang dimasukkan oleh pengguna dalam format`YYYY-MM-DD`.
### Waktu
Komponen **Time** memungkinkan pengguna untuk memilih dan memasukkan nilai waktu. Dengan mengonfigurasi berbagai properti komponen **Time**, Anda dapat membuat kolom input waktu yang memenuhi persyaratan spesifik aplikasi Anda, seperti membatasi rentang waktu yang dapat dipilih, menonaktifkan waktu tertentu, dan mengontrol visibilitas dan interaktivitas komponen.
#### Properti waktu
Komponen **Time** berbagi beberapa properti umum dengan komponen lain, seperti`Name`,`Source`, dan`Validation`. Untuk informasi lebih lanjut tentang properti ini, lihat[Properti komponen umum](#common-properties).
Selain properti umum, komponen **Time** memiliki properti spesifik berikut:
##### Interval waktu
+ **5 menit**, **10 menit**, **15 menit**, **20 menit**, **25 menit**, **30 menit**, **60 menit**: Interval yang tersedia untuk memilih waktu.
##### Nilai
+ **HH: MM AA**: Format di mana nilai waktu disimpan secara internal.
**catatan**
Nilai ini harus sesuai dengan format`HH:MM AA`.
##### Placeholder
+ **Pengaturan kalender**: Teks placeholder ditampilkan saat bidang waktu kosong.
##### Waktu min
+ **HH: MM AA**: Waktu minimum yang dapat dipilih.
**catatan**
Nilai ini harus sesuai dengan format`HH:MM AA`.
##### Waktu maks
+ **HH: MM AA**: Waktu maksimum yang dapat dipilih.
**catatan**
Nilai ini harus sesuai dengan format`HH:MM AA`.
##### Waktu dinonaktifkan
+ **Sumber: Sumber** data untuk waktu yang harus dinonaktifkan (misalnya, Tidak Ada, Ekspresi).
+ **Waktu dinonaktifkan**: Ekspresi yang menentukan waktu mana yang harus dinonaktifkan, seperti`{{currentRow.column}}`.
##### Konfigurasi waktu dinonaktifkan
Anda dapat menggunakan bagian **Waktu Dinonaktifkan** untuk menentukan nilai waktu mana yang seharusnya tidak tersedia untuk dipilih.
##### Sumber
+ **Tidak ada**: Tidak ada waktu dinonaktifkan.
+ **Ekspresi**: Anda dapat menggunakan JavaScript ekspresi untuk menentukan waktu mana yang harus dinonaktifkan, seperti`{{currentRow.column}}`.
##### Contoh ekspresi:
```
{{currentRow.column === "Lunch Break"}}
```
Ekspresi ini akan menonaktifkan setiap saat di mana kolom “Lunch Break” benar untuk baris saat ini.
Dengan mengonfigurasi aturan validasi ini dan ekspresi waktu yang dinonaktifkan, Anda dapat memastikan bahwa nilai waktu yang dimasukkan oleh pengguna memenuhi persyaratan spesifik aplikasi Anda.
##### Perilaku
+ **Terlihat jika**: Ekspresi yang menentukan visibilitas komponen Waktu.
+ **Nonaktifkan if**: Ekspresi yang menentukan apakah komponen Time harus dinonaktifkan.
##### Validasi
+ **Wajib**: Toggle yang memastikan pengguna harus memasukkan nilai waktu sebelum mengirimkan formulir.
+ **Kustom**: Memungkinkan Anda membuat aturan validasi kustom menggunakan JavaScript ekspresi.
Pesan **Validasi Kustom: Pesan** yang akan ditampilkan saat validasi kustom tidak terpenuhi.
Contoh:
```
{{ui.timeInput.value === "09:00 AM" || ui.timeInput.value === "09:30 AM"}}
```
Ekspresi ini memeriksa apakah waktu yang dimasukkan adalah 9:00 AM atau 9:30 AM. Jika kondisinya benar, validasi akan gagal.
Anda juga dapat memberikan pesan validasi kustom untuk ditampilkan ketika validasi tidak terpenuhi:
```
Validation not met. The time must be 9:00 AM or 9:30 AM.
```
#### Ekspresi dan contoh
Komponen Time menyediakan bidang ekspresi berikut:
+ `{{ui.timeID.value}}`: Mengembalikan nilai waktu yang dimasukkan oleh pengguna dalam format HH: MM AA.
##### Contoh: Nilai waktu
+ `{{ui.timeID.value}}`: Mengembalikan nilai waktu yang dimasukkan oleh pengguna dalam format`HH:MM AA`.
##### Contoh: Perbandingan waktu
+ `{{ui.timeInput.value > "10:00 AM"}}`: Memeriksa apakah nilai waktu lebih besar dari 10:00 AM.
+ `{{ui.timeInput.value < "05:00 pM"}}`: Memeriksa apakah nilai waktu kurang dari 17:00.
### Rentang tanggal
Komponen **rentang Tanggal** memungkinkan pengguna untuk memilih dan memasukkan rentang tanggal. Dengan mengonfigurasi berbagai properti komponen Rentang Tanggal, Anda dapat membuat kolom input rentang tanggal yang memenuhi persyaratan spesifik aplikasi Anda, seperti membatasi rentang tanggal yang dapat dipilih, menonaktifkan tanggal tertentu, dan mengontrol visibilitas dan interaktivitas komponen.
#### Properti rentang tanggal
Komponen **Rentang Tanggal** berbagi beberapa properti umum dengan komponen lain, seperti`Name`,`Source`, dan`Validation`. Untuk informasi lebih lanjut tentang properti ini, lihat[Properti komponen umum](#common-properties).
Selain properti umum, komponen **Rentang Tanggal** memiliki properti spesifik berikut:
##### Format
+ **MM/DD/YYYY**: Format di mana rentang tanggal harus ditampilkan.
##### Tanggal mulai
+ **YYYY-MM-DD**: Tanggal minimum yang dapat dipilih sebagai awal rentang.
**catatan**
Nilai ini harus sesuai dengan format`YYYY-MM-DD`.
##### Tanggal akhir
+ **YYYY-MM-DD**: Tanggal maksimum yang dapat dipilih sebagai akhir rentang.
**catatan**
Nilai ini harus sesuai dengan format`YYYY-MM-DD`.
##### Placeholder
+ **Pengaturan kalender**: Teks placeholder ditampilkan saat bidang rentang tanggal kosong.
##### Tanggal Min
+ **YYYY-MM-DD**: Tanggal minimum yang dapat dipilih.
**catatan**
Nilai ini harus sesuai dengan format`YYYY-MM-DD`.
##### Tanggal maks
+ **YYYY-MM-DD**: Tanggal maksimum yang dapat dipilih.
**catatan**
Nilai ini harus sesuai dengan format`YYYY-MM-DD`.
##### Jenis kalender
+ **1 Bulan**: Jenis UI kalender yang akan ditampilkan. Misalnya, satu bulan.
+ **2 Bulan**: Jenis UI kalender yang akan ditampilkan. Misalnya, dua bulan.
##### Hari wajib dipilih
+ **0**: Jumlah hari wajib yang harus dipilih dalam rentang tanggal.
##### Tanggal dinonaktifkan
+ **Sumber: Sumber** data untuk tanggal yang harus dinonaktifkan (misalnya, Tidak Ada, Ekspresi, Entitas, atau Otomasi).
+ **Tanggal dinonaktifkan**: Ekspresi yang menentukan tanggal mana yang harus dinonaktifkan, seperti`{{currentRow.column}}`.
##### Validasi
Bagian **Validasi** memungkinkan Anda untuk menentukan aturan dan batasan tambahan untuk input rentang tanggal.
#### Ekspresi dan contoh
Komponen **Rentang Tanggal** menyediakan bidang ekspresi berikut:
+ `{{ui.dateRangeID.startDate}}`: Mengembalikan tanggal mulai dari rentang yang dipilih dalam format`YYYY-MM-DD`.
+ `{{ui.dateRangeID.endDate}}`: Mengembalikan tanggal akhir rentang yang dipilih dalam format`YYYY-MM-DD`.
##### Contoh: Menghitung perbedaan tanggal
+ `{(new Date(ui.dateRangeID.endDate) - new Date(ui.dateRangeID.startDate)) / (1000 * 60 * 60 * 24)}}`Menghitung jumlah hari antara tanggal mulai dan akhir.
##### Contoh: Visibilitas bersyarat berdasarkan rentang tanggal
+ `{{new Date(ui.dateRangeID.startDate) < new Date("2023-01-01") || new Date(ui.dateRangeID.endDate) > new Date("2023-12-31")}}`Memeriksa apakah rentang tanggal yang dipilih berada di luar tahun 2023.
##### Contoh: Tanggal dinonaktifkan berdasarkan data baris saat ini
+ `{{currentRow.isHoliday}}`Menonaktifkan tanggal di mana kolom “isHoliday” di baris saat ini benar.
+ `{{new Date(currentRow.dateColumn) < new Date("2023-01-01")}}`Menonaktifkan tanggal sebelum 1 Januari 2023 berdasarkan “DateColumn” di baris saat ini.
+ `{{new Date(currentRow.dateColumn).getDay() === 0 || new Date(currentRow.dateColumn).getDay() === 6}}`Menonaktifkan akhir pekan berdasarkan “DateColumn” di baris saat ini.
##### Validasi kustom
+ `{{new Date(ui.dateRangeID.startDate) > new Date(ui.dateRangeID.endDate)}}`Memeriksa apakah tanggal mulai lebih lambat dari tanggal akhir, yang akan gagal validasi kustom.
## Komponen media
Studio aplikasi menyediakan beberapa komponen untuk menyematkan dan menampilkan berbagai jenis media dalam aplikasi Anda.
### Sematan iFrame
Komponen **embed iFrame** memungkinkan Anda untuk menyematkan konten web eksternal atau aplikasi dalam aplikasi Anda menggunakan iFrame.
#### Properti embed iFrame
##### URL
**catatan**
Sumber media yang ditampilkan dalam komponen ini harus diizinkan dalam pengaturan keamanan konten aplikasi Anda. Untuk informasi selengkapnya, lihat [Melihat atau memperbarui setelan keamanan konten aplikasi Anda](app-content-security-settings-csp.md).
URL konten eksternal atau aplikasi yang ingin Anda sematkan.
##### Tata Letak
+ **Lebar**: Lebar iFrame, ditentukan sebagai persentase (%) atau nilai piksel tetap (misalnya, 300px).
+ **Tinggi**: Tinggi iFrame, ditentukan sebagai persentase (%) atau nilai piksel tetap.
### Unggah S3
Komponen **unggahan S3** memungkinkan pengguna untuk mengunggah file ke bucket Amazon S3. Dengan mengonfigurasi komponen **Unggah S3**, Anda dapat memungkinkan pengguna untuk dengan mudah mengunggah file ke penyimpanan Amazon S3 aplikasi Anda, dan kemudian memanfaatkan informasi file yang diunggah dalam logika dan antarmuka pengguna aplikasi Anda.
**catatan**
Ingatlah untuk memastikan bahwa izin yang diperlukan dan konfigurasi bucket Amazon S3 tersedia untuk mendukung unggahan file dan persyaratan penyimpanan aplikasi Anda.
#### Properti unggah S3
##### Konfigurasi S3
+ **Konektor: Pilih konektor** Amazon S3 yang telah dikonfigurasi sebelumnya untuk digunakan untuk unggahan file.
+ **Bucket: Bucket** Amazon S3 tempat file akan diunggah.
+ **Folder**: Folder di dalam ember Amazon S3 tempat file akan disimpan.
+ **Nama file**: Konvensi penamaan untuk file yang diunggah.
##### Konfigurasi unggahan file
+ **Label**: Label atau instruksi yang ditampilkan di atas area unggahan file.
+ **Deskripsi**: Petunjuk atau informasi tambahan tentang unggahan file.
+ **Jenis file**: Jenis file yang diizinkan untuk diunggah. Misalnya: gambar, dokumen, atau video.
+ **Ukuran**: Ukuran maksimum file individual yang dapat diunggah.
+ **Label tombol**: Teks yang ditampilkan pada tombol pemilihan file.
+ **Gaya tombol**: Gaya tombol pemilihan file. Misalnya, diuraikan atau diisi.
+ **Ukuran tombol**: Ukuran tombol pemilihan file.
##### Validasi
+ **Jumlah maksimum file**: Jumlah maksimum file yang dapat diunggah sekaligus.
+ **Ukuran file maks**: Ukuran maksimum yang diizinkan untuk setiap file individual.
##### Pemicu
+ Saat **berhasil**: Tindakan yang akan dipicu saat unggahan file berhasil.
+ Saat **gagal**: Tindakan yang akan dipicu saat unggahan file gagal.
#### Bidang ekspresi unggah S3
Komponen **upload S3** menyediakan bidang ekspresi berikut:
+ `{{ui.s3uploadID.files}}`: Mengembalikan array file yang telah diunggah.
+ `{{ui.s3uploadID.files[0]?.size}}`: Mengembalikan ukuran file pada indeks yang ditunjuk.
+ `{{ui.s3uploadID.files[0]?.type}}`: Mengembalikan jenis file pada indeks yang ditunjuk.
+ `{{ui.s3uploadID.files[0]?.nameOnly}}`: Mengembalikan nama file, tanpa akhiran ekstensi, pada indeks yang ditunjuk.
+ `{{ui.s3uploadID.files[0]?.nameWithExtension}}`: Mengembalikan nama file dengan akhiran ekstensi pada indeks yang ditunjuk.
#### Ekspresi dan contoh
##### Contoh: Mengakses file yang diunggah
+ `{{ui.s3uploadID.files.length}}`: Mengembalikan jumlah file yang telah diunggah.
+ `{{ui.s3uploadID.files.map(f => f.name).join(', ')}}`: Mengembalikan daftar dipisahkan koma dari nama file yang telah diunggah.
+ `{{ui.s3uploadID.files.filter(f => f.type.startsWith('image/'))}}`: Mengembalikan array hanya file gambar yang telah diunggah.
##### Contoh: Memvalidasi unggahan file
+ `{{ui.s3uploadID.files.some(f => f.size > 5 * 1024 * 1024)}}`: Memeriksa apakah ada file yang diunggah melebihi ukuran 5 MB.
+ `{{ui.s3uploadID.files.every(f => f.type === 'image/png')}}`: Memeriksa apakah semua file yang diunggah adalah gambar PNG.
+ `{{ui.s3uploadID.files.length > 3}}`: Memeriksa apakah lebih dari 3 file telah diunggah.
##### Contoh: Memicu tindakan
+ `{{ui.s3uploadID.files.length > 0 ? 'Upload Successful' : 'No files uploaded'}}`: Menampilkan pesan sukses jika setidaknya satu file telah diunggah.
+ `{{ui.s3uploadID.files.some(f => f.type.startsWith('video/')) ? triggerVideoProcessing() : null}}`: Memicu otomatisasi pemrosesan video jika ada file video yang telah diunggah.
+ `{{ui.s3uploadID.files.map(f => f.url)}}`: Mengambil file URLs yang diunggah, yang dapat digunakan untuk menampilkan atau memproses file lebih lanjut.
Ekspresi ini memungkinkan Anda mengakses file yang diunggah, memvalidasi unggahan file, dan memicu tindakan berdasarkan hasil unggahan file. Dengan memanfaatkan ekspresi ini, Anda dapat membuat perilaku yang lebih dinamis dan cerdas dalam fungsionalitas unggah file aplikasi Anda.
**catatan**
Ganti *s3uploadID* dengan ID komponen **upload S3** Anda.
### Komponen penampil PDF
Komponen **penampil PDF** memungkinkan pengguna untuk melihat dan berinteraksi dengan dokumen PDF dalam aplikasi Anda. App Studio mendukung jenis input yang berbeda ini untuk Sumber PDF, komponen **penampil PDF** memberikan fleksibilitas dalam cara Anda dapat mengintegrasikan dokumen PDF ke dalam aplikasi Anda, apakah itu dari URL statis, URI data inline, atau konten yang dihasilkan secara dinamis.
#### Properti penampil PDF
##### Sumber
**catatan**
Sumber media yang ditampilkan dalam komponen ini harus diizinkan dalam pengaturan keamanan konten aplikasi Anda. Untuk informasi selengkapnya, lihat [Melihat atau memperbarui setelan keamanan konten aplikasi Anda](app-content-security-settings-csp.md).
Sumber dokumen PDF, yang dapat berupa ekspresi, entitas, URL, atau otomatisasi.
##### Ekspresi
Gunakan ekspresi untuk menghasilkan sumber PDF secara dinamis.
##### Entitas
Hubungkan komponen **penampil PDF** ke entitas data yang berisi dokumen PDF.
##### URL
Tentukan URL dokumen PDF.
##### URL
Anda dapat memasukkan URL yang mengarah ke dokumen PDF yang ingin Anda tampilkan. Ini bisa berupa URL web publik atau URL dalam aplikasi Anda sendiri.
Contoh: `https://example.com/document.pdf`
##### URI Data
**URI Data** adalah cara ringkas untuk menyertakan file data kecil (seperti gambar atau PDFs) sebaris dalam aplikasi Anda. Dokumen PDF dikodekan sebagai string base64 dan disertakan langsung dalam konfigurasi komponen.
##### Gumpalan atau ArrayBuffer
Anda juga dapat memberikan dokumen PDF sebagai Blob atau ArrayBuffer objek, yang memungkinkan Anda untuk secara dinamis menghasilkan atau mengambil data PDF dari berbagai sumber dalam aplikasi Anda.
##### Otomatisasi
Hubungkan komponen **penampil PDF** ke otomatisasi yang menyediakan dokumen PDF.
##### Tindakan
+ **Unduh**: Menambahkan tombol atau tautan yang memungkinkan pengguna mengunduh dokumen PDF.
##### Tata Letak
+ **Lebar**: Lebar PDF Viewer, ditentukan sebagai persentase (%) atau nilai piksel tetap (misalnya, 600px).
+ **Tinggi**: Ketinggian PDF Viewer, ditentukan sebagai nilai piksel tetap.
### Penampil gambar
Komponen **penampil gambar** memungkinkan pengguna untuk melihat dan berinteraksi dengan file gambar dalam aplikasi Anda.
#### Properti penampil gambar
##### Sumber
**catatan**
Sumber media yang ditampilkan dalam komponen ini harus diizinkan dalam pengaturan keamanan konten aplikasi Anda. Untuk informasi selengkapnya, lihat [Melihat atau memperbarui setelan keamanan konten aplikasi Anda](app-content-security-settings-csp.md).
+ **Entity**: Connect komponen **Image viewer** ke entitas data yang berisi file gambar.
+ **URL**: Tentukan URL file gambar.
+ **Ekspresi**: Gunakan ekspresi untuk menghasilkan sumber gambar secara dinamis.
+ **Otomasi**: Hubungkan komponen **penampil gambar** ke otomatisasi yang menyediakan file gambar.
##### Teks Alt
Deskripsi teks alternatif dari gambar, yang digunakan untuk tujuan aksesibilitas.
##### Tata Letak
+ **Image fit**: Menentukan bagaimana gambar harus diubah ukurannya dan ditampilkan di dalam komponen. Misalnya: `Contain`, `Cover`, atau `Fill`.
+ **Lebar**: Lebar komponen **penampil gambar**, ditentukan sebagai persentase (%) atau nilai piksel tetap (misalnya, 300px).
+ **Tinggi**: Ketinggian komponen **penampil gambar**, ditentukan sebagai nilai piksel tetap.
+ **Latar Belakang**: Memungkinkan Anda untuk mengatur warna latar belakang atau gambar untuk komponen **penampil Gambar**.
# Otomatisasi dan tindakan: Tentukan logika bisnis aplikasi
**Otomatisasi** adalah bagaimana Anda mendefinisikan logika bisnis aplikasi Anda. Komponen utama otomatisasi adalah: pemicu yang memulai otomatisasi, urutan satu atau lebih tindakan, parameter input yang digunakan untuk meneruskan data ke otomatisasi, dan output.
**Topics**
+ [Konsep otomatisasi](automations-concepts.md)
+ [Membuat, mengedit, dan menghapus otomatisasi](automations-create-edit-delete.md)
+ [Menambahkan, mengedit, dan menghapus tindakan otomatisasi](automations-actions-add-edit-delete.md)
+ [Referensi tindakan otomatis](automations-actions-reference.md)
# Konsep otomatisasi
Berikut adalah beberapa konsep dan istilah yang perlu diketahui saat mendefinisikan dan mengonfigurasi logika bisnis aplikasi Anda menggunakan otomatisasi di App Studio.
## Otomatisasi
**Otomatisasi** adalah bagaimana Anda mendefinisikan logika bisnis aplikasi Anda. Komponen utama otomatisasi adalah: pemicu yang memulai otomatisasi, urutan satu atau lebih tindakan, parameter input yang digunakan untuk meneruskan data ke otomatisasi, dan output.
## Tindakan
Tindakan otomatisasi, yang biasa disebut sebagai **tindakan**, adalah langkah logika individual yang membentuk otomatisasi. Setiap tindakan melakukan tugas tertentu, baik itu mengirim email, membuat catatan data, menjalankan fungsi Lambda, atau memanggil. APIs Tindakan ditambahkan ke otomatisasi dari pustaka tindakan, dan dapat dikelompokkan ke dalam pernyataan atau loop bersyarat.
## Parameter masukan otomatisasi
**Parameter input otomatisasi** adalah nilai input dinamis yang dapat Anda teruskan dari komponen ke otomatisasi untuk membuatnya fleksibel dan dapat digunakan kembali. Pikirkan parameter sebagai variabel untuk otomatisasi Anda, alih-alih nilai hard-coding ke dalam otomatisasi, Anda dapat menentukan parameter dan memberikan nilai yang berbeda bila diperlukan. Parameter memungkinkan Anda untuk menggunakan otomatisasi yang sama dengan input yang berbeda setiap kali dijalankan.
## Output yang diejek
Beberapa tindakan berinteraksi dengan sumber daya atau layanan eksternal menggunakan konektor. Saat menggunakan lingkungan pratinjau, aplikasi tidak berinteraksi dengan layanan eksternal. Untuk menguji tindakan yang menggunakan konektor di lingkungan pratinjau, Anda dapat menggunakan **keluaran tiruan** untuk mensimulasikan perilaku dan keluaran konektor. Output tiruan dikonfigurasi menggunakan JavaScript, dan hasilnya disimpan dalam hasil tindakan, sama seperti respons konektor disimpan dalam aplikasi yang diterbitkan.
Dengan menggunakan mocking, Anda dapat menggunakan lingkungan pratinjau untuk menguji berbagai skenario dan dampaknya terhadap tindakan lain dengan otomatisasi seperti mensimulasikan nilai hasil yang berbeda, skenario kesalahan, kasus tepi, atau jalur tidak bahagia tanpa memanggil layanan eksternal melalui konektor.
## Output otomatisasi
**Output otomatisasi** digunakan untuk meneruskan nilai dari satu otomatisasi ke sumber daya aplikasi lainnya, seperti komponen atau otomatisasi lainnya. Output otomatisasi dikonfigurasi sebagai ekspresi, dan ekspresi dapat mengembalikan nilai statis atau nilai dinamis yang dihitung dari parameter dan tindakan otomatisasi. Secara default, otomatisasi tidak mengembalikan data apa pun, termasuk hasil tindakan dalam otomatisasi.
Beberapa contoh bagaimana output otomatisasi dapat digunakan:
+ Anda dapat mengonfigurasi output otomatisasi untuk mengembalikan array, dan meneruskan array itu untuk mengisi komponen data.
+ Anda dapat menggunakan otomatisasi untuk menghitung nilai, dan meneruskan nilai itu ke beberapa otomatisasi lain sebagai cara untuk memusatkan dan menggunakan kembali logika bisnis.
## Pemicu
**Pemicu** menentukan kapan, dan pada kondisi apa, otomatisasi akan berjalan. Beberapa contoh pemicu adalah `On click` untuk tombol dan `On select` untuk input teks. Jenis komponen menentukan daftar pemicu yang tersedia untuk komponen tersebut. Pemicu ditambahkan ke [komponen](concepts.md#concepts-component) dan dikonfigurasi di studio aplikasi.
# Membuat, mengedit, dan menghapus otomatisasi
**Contents**
+ [Membuat otomatisasi](#automations-create)
+ [Melihat atau mengedit properti otomatisasi](#automations-edit)
+ [Menghapus otomatisasi](#automations-delete)
## Membuat otomatisasi
Gunakan prosedur berikut untuk membuat otomatisasi dalam aplikasi App Studio. Setelah dibuat, otomatisasi harus dikonfigurasi dengan mengedit propertinya dan menambahkan tindakan ke dalamnya.
**Untuk membuat otomatisasi**
1. Jika perlu, navigasikan ke studio aplikasi aplikasi Anda.
1. Pilih tab **Otomasi**.
1. Jika Anda tidak memiliki otomatisasi, pilih **\$1 Tambahkan otomatisasi** di kanvas. **Jika tidak, di menu **Otomatisasi** sisi kiri, pilih \$1 Tambah.**
1. Otomatisasi baru akan dibuat, dan Anda dapat mulai mengedit propertinya atau menambahkan dan mengonfigurasi tindakan untuk menentukan logika bisnis aplikasi Anda.
## Melihat atau mengedit properti otomatisasi
Gunakan prosedur berikut untuk melihat atau mengedit properti otomatisasi.
**Untuk melihat atau mengedit properti otomatisasi**
1. Jika perlu, navigasikan ke studio aplikasi aplikasi Anda.
1. Pilih tab **Otomasi**.
1. **Di menu **Automations sebelah kiri, pilih otomatisasi** yang ingin Anda lihat atau edit properti untuk membuka menu Properties sisi kanan.**
1. Di menu **Properties**, Anda dapat melihat properti berikut:
+ **Pengidentifikasi otomatisasi**: Nama unik otomatisasi. Untuk mengeditnya, masukkan pengenal baru di bidang teks.
+ **Parameter otomatisasi**: Parameter otomatisasi digunakan untuk meneruskan nilai dinamis dari UI aplikasi Anda ke otomatisasi dan tindakan data. Untuk menambahkan parameter, pilih **\$1 Tambah**. Pilih ikon pensil untuk mengubah nama, deskripsi, atau jenis parameter. Untuk menghapus parameter, pilih ikon sampah.
**Tip**
Anda juga dapat menambahkan parameter otomatisasi langsung dari kanvas.
+ **Output otomatisasi**: Output otomatisasi digunakan untuk mengonfigurasi data mana dari otomatisasi yang dapat direferensikan dalam otomatisasi atau komponen lain. Secara default, otomatisasi tidak membuat output. Untuk menambahkan output otomatisasi pilih **\$1 Tambah**. Untuk menghapus output, pilih ikon sampah.
1. Anda menentukan apa yang dilakukan otomatisasi dengan menambahkan dan mengonfigurasi tindakan. Untuk informasi selengkapnya tentang tindakan, lihat [Menambahkan, mengedit, dan menghapus tindakan otomatisasi](automations-actions-add-edit-delete.md) dan[Referensi tindakan otomatis](automations-actions-reference.md).
## Menghapus otomatisasi
Gunakan prosedur berikut untuk menghapus otomatisasi dalam aplikasi App Studio.
**Untuk menghapus otomatisasi**
1. Jika perlu, navigasikan ke studio aplikasi aplikasi Anda.
1. Pilih tab **Otomasi**.
1. **Di menu **Otomatisasi** sisi kiri, pilih menu elips dari otomatisasi yang ingin Anda hapus, dan pilih Hapus.** Atau, Anda dapat memilih ikon sampah dari menu **Properti** sisi kanan otomatisasi.
1. Di kotak dialog konfirmasi, pilih **Hapus**.
# Menambahkan, mengedit, dan menghapus tindakan otomatisasi
Tindakan otomatisasi, yang biasa disebut sebagai **tindakan**, adalah langkah logika individual yang membentuk otomatisasi. Setiap tindakan melakukan tugas tertentu, baik itu mengirim email, membuat catatan data, menjalankan fungsi Lambda, atau memanggil. APIs Tindakan ditambahkan ke otomatisasi dari pustaka tindakan, dan dapat dikelompokkan ke dalam pernyataan atau loop bersyarat.
**Contents**
+ [Menambahkan tindakan otomatisasi](#automations-actions-add)
+ [Melihat dan mengedit properti tindakan otomatisasi](#automations-actions-edit)
+ [Menghapus tindakan otomatisasi](#automations-actions-delete)
## Menambahkan tindakan otomatisasi
Gunakan prosedur berikut untuk menambahkan tindakan ke otomatisasi dalam aplikasi App Studio.
**Untuk menambahkan tindakan otomatisasi**
1. Jika perlu, navigasikan ke studio aplikasi aplikasi Anda.
1. Pilih tab **Otomasi**.
1. Di menu **Otomatisasi** sisi kiri, pilih otomatisasi yang ingin Anda tambahkan tindakan.
1. Di menu **Tindakan** sebelah kanan, pilih tindakan yang ingin Anda tambahkan, atau seret dan jatuhkan tindakan ke kanvas. Setelah tindakan dibuat, Anda dapat memilih tindakan untuk mengonfigurasi properti tindakan untuk menentukan fungsionalitas tindakan. Untuk informasi selengkapnya tentang properti tindakan dan mengonfigurasinya, lihat[Referensi tindakan otomatis](automations-actions-reference.md).
## Melihat dan mengedit properti tindakan otomatisasi
Gunakan prosedur berikut untuk melihat atau mengedit properti tindakan otomatisasi di aplikasi App Studio.
**Untuk melihat atau mengedit properti tindakan otomatisasi**
1. Jika perlu, navigasikan ke studio aplikasi aplikasi Anda.
1. Pilih tab **Otomasi**.
1. Di menu **Otomatisasi** sisi kiri, pilih tindakan yang ingin Anda lihat atau edit properti. Atau, Anda dapat memilih tindakan di kanvas saat melihat otomatisasi yang mengandungnya.
1. Anda dapat melihat atau mengedit properti tindakan di menu **Properti** sisi kanan. Properti untuk tindakan berbeda untuk setiap jenis tindakan. Untuk informasi selengkapnya tentang properti tindakan dan mengonfigurasinya, lihat[Referensi tindakan otomatis](automations-actions-reference.md).
## Menghapus tindakan otomatisasi
Gunakan prosedur berikut untuk menghapus tindakan dari otomatisasi di aplikasi App Studio.
**Untuk menghapus tindakan otomatisasi**
1. Jika perlu, navigasikan ke studio aplikasi aplikasi Anda.
1. Pilih tab **Otomasi**.
1. Di menu **Otomatisasi** sisi kiri, pilih otomatisasi yang berisi tindakan yang ingin Anda hapus.
1. Di kanvas, pilih ikon sampah dalam tindakan yang ingin Anda hapus dan pilih **Hapus**.
# Referensi tindakan otomatis
Berikut ini adalah dokumentasi referensi untuk tindakan otomatisasi yang digunakan di App Studio.
Tindakan otomatisasi, yang biasa disebut sebagai **tindakan**, adalah langkah logika individual yang membentuk otomatisasi. Setiap tindakan melakukan tugas tertentu, baik itu mengirim email, membuat catatan data, menjalankan fungsi Lambda, atau memanggil. APIs Tindakan ditambahkan ke otomatisasi dari pustaka tindakan, dan dapat dikelompokkan ke dalam pernyataan atau loop bersyarat.
Untuk informasi tentang membuat dan mengonfigurasi otomatisasi dan tindakannya, lihat topik di. [Otomatisasi dan tindakan: Tentukan logika bisnis aplikasi](automations.md)
## Memanggil API
Memanggil permintaan HTTP REST API. Builder dapat menggunakan tindakan ini untuk mengirim permintaan dari App Studio ke sistem atau layanan lain APIs. Misalnya, Anda dapat menggunakannya untuk terhubung ke sistem pihak ketiga atau aplikasi lokal untuk mengakses data penting bisnis, atau memanggil titik akhir API yang tidak dapat dipanggil oleh tindakan App Studio khusus.
Untuk informasi selengkapnya tentang REST APIs, lihat [Apa itu RESTful API?](https://aws.amazon.com/what-is/restful-api/) .
### Sifat-sifat
#### Konektor
**Konektor** yang akan digunakan untuk permintaan API yang dibuat oleh tindakan ini. Dropdown konektor hanya berisi konektor dari jenis berikut: `API Connector` dan. `OpenAPI Connector` Bergantung pada bagaimana konektor dikonfigurasi, konektor dapat berisi informasi penting seperti kredensional dan header default atau parameter kueri.
Untuk informasi selengkapnya tentang konektor API, termasuk perbandingan antara penggunaan `API Connector` dan`OpenAPI Connector`, lihat[Connect ke layanan pihak ketiga](add-connector-third-party.md).
#### Properti konfigurasi permintaan API
Pilih **Konfigurasi permintaan API** dari panel properti untuk membuka kotak dialog konfigurasi permintaan. Jika **konektor API** dipilih, kotak dialog akan menyertakan informasi konektor.
**Metode:** Metode untuk panggilan API. Kemungkinan nilainya adalah sebagai berikut:
+ `DELETE`: Menghapus sumber daya tertentu.
+ `GET`: Mengambil informasi atau data.
+ `HEAD`: Mengambil hanya header dari respon tanpa tubuh.
+ `POST`: Mengirimkan data untuk diproses.
+ `PUSH`: Mengirimkan data untuk diproses.
+ `PATCH`: Sebagian memperbarui sumber daya tertentu.
**Path:** Jalur relatif ke sumber daya.
**Header:** Setiap header dalam bentuk pasangan kunci-nilai yang akan dikirim dengan permintaan API. Jika konektor dipilih, header yang dikonfigurasi akan ditambahkan secara otomatis dan tidak dapat dihapus. Header yang dikonfigurasi tidak dapat diedit, tetapi Anda dapat menggantinya dengan menambahkan header lain dengan nama yang sama.
**Parameter kueri:** Parameter kueri apa pun dalam bentuk pasangan nilai kunci yang akan dikirim bersama permintaan API. Jika konektor dipilih, parameter kueri yang dikonfigurasi akan ditambahkan secara otomatis dan tidak dapat diedit atau dihapus.
**Body:** Informasi yang akan dikirim dengan permintaan API dalam format JSON. Tidak ada badan untuk `GET` permintaan.
#### Output yang diejek
Tindakan tidak berinteraksi dengan layanan atau sumber daya eksternal di lingkungan pratinjau. Bidang **keluaran Mocked** digunakan untuk menyediakan ekspresi JSON yang mensimulasikan perilaku konektor di lingkungan pratinjau untuk tujuan pengujian. Cuplikan ini disimpan di `results` peta tindakan, sama seperti respons konektor untuk aplikasi yang diterbitkan di lingkungan langsung.
Dengan bidang ini, Anda dapat menguji berbagai skenario dan dampaknya terhadap tindakan lain dalam otomatisasi seperti mensimulasikan nilai hasil yang berbeda, skenario kesalahan, kasus tepi, atau jalur yang tidak menyenangkan tanpa berkomunikasi dengan layanan eksternal melalui konektor.
## Memohon AWS
Memanggil operasi dari AWS layanan. Ini adalah tindakan umum untuk memanggil AWS layanan atau operasi, dan harus digunakan jika tidak ada tindakan khusus untuk AWS layanan atau operasi yang diinginkan.
### Sifat-sifat
#### Layanan
AWS Layanan yang berisi operasi yang akan dijalankan.
#### Operasi
Operasi yang harus dijalankan.
#### Konektor
Konektor yang akan digunakan untuk operasi yang dijalankan oleh tindakan ini. Konektor yang dikonfigurasi harus diatur dengan kredensional yang tepat untuk menjalankan operasi, dan informasi konfigurasi lainnya, seperti AWS wilayah yang berisi sumber daya apa pun yang direferensikan dalam operasi.
#### Konfigurasi
Input JSON menjadi ketika menjalankan operasi yang ditentukan. Untuk informasi selengkapnya tentang mengonfigurasi input untuk AWS operasi, lihat. [AWS SDK untuk JavaScript](https://docs.aws.amazon.com/sdk-for-javascript)
## Memanggil Lambda
Memanggil fungsi Lambda yang ada.
### Sifat-sifat
#### Konektor
Konektor yang akan digunakan untuk fungsi Lambda dijalankan oleh tindakan ini. Konektor yang dikonfigurasi harus diatur dengan kredensional yang tepat untuk mengakses fungsi Lambda, dan informasi konfigurasi lainnya, seperti AWS wilayah yang berisi fungsi Lambda. Untuk informasi selengkapnya tentang mengonfigurasi konektor untuk Lambda, lihat. [Langkah 3: Buat konektor Lambda](connectors-lambda.md#connectors-lambda-create-connector)
#### Nama fungsi
Nama fungsi Lambda yang akan dijalankan. Perhatikan bahwa ini adalah nama fungsi, dan bukan fungsi ARN (Amazon Resource Name).
#### Acara fungsi
Pasangan nilai kunci yang akan diteruskan ke fungsi Lambda Anda sebagai muatan acara.
#### Output yang diejek
Tindakan tidak berinteraksi dengan layanan atau sumber daya eksternal di lingkungan pratinjau. Bidang **keluaran Mocked** digunakan untuk menyediakan ekspresi JSON yang mensimulasikan perilaku konektor di lingkungan pratinjau untuk tujuan pengujian. Cuplikan ini disimpan di `results` peta tindakan, sama seperti respons konektor untuk aplikasi yang diterbitkan di lingkungan langsung.
Dengan bidang ini, Anda dapat menguji berbagai skenario dan dampaknya terhadap tindakan lain dalam otomatisasi seperti mensimulasikan nilai hasil yang berbeda, skenario kesalahan, kasus tepi, atau jalur yang tidak menyenangkan tanpa berkomunikasi dengan layanan eksternal melalui konektor.
## Loop
Menjalankan tindakan bersarang berulang kali untuk mengulang melalui daftar item, satu item pada satu waktu. Misalnya, tambahkan [Buat catatan](#automations-actions-reference-create-record) tindakan ke tindakan loop untuk membuat beberapa catatan.
Tindakan loop dapat disarangkan dalam loop lain atau tindakan kondisi. Tindakan loop dijalankan secara berurutan, dan tidak secara paralel. Hasil dari setiap tindakan dalam loop hanya dapat diakses ke tindakan berikutnya dalam iterasi loop yang sama. Mereka tidak dapat diakses di luar loop atau dalam iterasi loop yang berbeda.
### Sifat-sifat
#### Sumber
Daftar item untuk diulang, satu item pada satu waktu. Sumber dapat berupa hasil dari tindakan sebelumnya atau daftar statis string, angka, atau objek yang dapat Anda berikan menggunakan JavaScript ekspresi.
##### Contoh
Daftar berikut berisi contoh input sumber.
+ Hasil dari tindakan sebelumnya: `{{results.actionName.data}}`
+ Daftar angka: `{{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]}}`
+ Daftar string: `{{["apple", "banana", "orange", "grape", "kiwi"]}}`
+ Nilai yang dihitung: `{{params.actionName.split("\n")}}`
#### Nama item saat ini
Nama variabel yang dapat digunakan untuk mereferensikan item saat ini yang sedang diulang. Nama item saat ini dapat dikonfigurasi sehingga Anda dapat membuat sarang dua atau lebih loop dan mengakses variabel dari setiap loop. Misalnya, jika Anda melakukan looping melalui negara dan kota dengan dua loop, Anda dapat mengkonfigurasi dan referensi `currentCountry` dan. `currentCity`
## Kondisi
Menjalankan tindakan berdasarkan hasil dari satu atau lebih kondisi logis tertentu yang dievaluasi ketika otomatisasi dijalankan. Tindakan kondisi terdiri dari komponen-komponen berikut:
+ Bidang *kondisi*, yang digunakan untuk memberikan JavaScript ekspresi yang mengevaluasi `true` atau`false`.
+ *Cabang yang benar*, yang berisi tindakan yang dijalankan jika kondisi berubah menjadi. `true`
+ *Cabang palsu*, yang berisi tindakan yang dijalankan jika kondisi berubah menjadi. `false`
Tambahkan tindakan ke cabang benar dan salah dengan menyeretnya ke dalam tindakan kondisi.
### Sifat-sifat
#### Kondisi
JavaScript Ekspresi yang akan dievaluasi ketika tindakan dijalankan.
## Buat catatan
Membuat satu rekaman di entitas App Studio yang ada.
### Sifat-sifat
#### Entitas
Entitas di mana catatan akan dibuat. Setelah entitas dipilih, nilai harus ditambahkan ke bidang entitas untuk catatan yang akan dibuat. Jenis bidang, dan jika bidang diperlukan atau opsional didefinisikan dalam entitas.
## Perbarui catatan
Memperbarui rekaman yang ada di entitas App Studio.
### Sifat-sifat
#### Entitas
Entitas yang berisi catatan yang akan diperbarui.
#### Ketentuan
Kriteria yang menentukan catatan mana yang diperbarui oleh tindakan. Anda dapat mengelompokkan kondisi untuk membuat satu pernyataan logis. Anda dapat menggabungkan grup atau kondisi dengan `AND` atau `OR` pernyataan.
#### Bidang
Bidang yang akan diperbarui dalam catatan yang ditentukan oleh kondisi.
#### Nilai
Nilai yang akan diperbarui di bidang yang ditentukan.
## Hapus catatan
Menghapus rekaman dari entitas App Studio.
### Sifat-sifat
#### Entitas
Entitas yang berisi catatan yang akan dihapus.
#### Ketentuan
Kriteria yang menentukan catatan mana yang dihapus oleh tindakan. Anda dapat mengelompokkan kondisi untuk membuat satu pernyataan logika. Anda dapat menggabungkan grup atau kondisi dengan `AND` atau `OR` pernyataan.
## Memanggil tindakan data
Menjalankan tindakan data dengan parameter opsional.
### Sifat-sifat
#### Tindakan data
Tindakan data yang akan dijalankan oleh tindakan.
#### Parameter
Parameter tindakan data yang akan digunakan oleh tindakan data. Parameter tindakan data digunakan untuk mengirim nilai yang digunakan sebagai input untuk tindakan data. Parameter tindakan data dapat ditambahkan saat mengonfigurasi tindakan otomatisasi, tetapi harus diedit di tab **Data**.
#### Pengaturan lanjutan
`Invoke data action`Tindakan ini berisi pengaturan lanjutan berikut:
+ **Ukuran halaman:** Jumlah maksimum catatan untuk diambil dalam setiap kueri. Nilai defaultnya adalah 500, dan nilai maksimumnya adalah 3000.
+ Token **pagination: Token** yang digunakan untuk mengambil catatan tambahan dari kueri. Misalnya, jika `Page size` diatur ke 500, tetapi ada lebih dari 500 catatan, meneruskan token pagination ke kueri berikutnya akan mengambil 500 berikutnya. Token akan tidak terdefinisi jika tidak ada lagi catatan atau halaman yang ada.
## Amazon S3: Letakkan objek
Menggunakan `Amazon S3 PutObject` operasi untuk menambahkan objek yang diidentifikasi oleh kunci (jalur file) ke bucket Amazon S3 yang ditentukan.
### Sifat-sifat
#### Konektor
Konektor yang akan digunakan untuk operasi yang dijalankan oleh tindakan ini. Konektor yang dikonfigurasi harus diatur dengan kredensional yang sesuai untuk menjalankan operasi, dan informasi konfigurasi lainnya, seperti AWS wilayah yang berisi sumber daya apa pun yang direferensikan dalam operasi.
#### Konfigurasi
Opsi yang diperlukan untuk digunakan dalam `PutObject` perintah. Opsinya adalah sebagai berikut:
**catatan**
Untuk informasi selengkapnya tentang `Amazon S3 PutObject` operasi, lihat [PutObject](https://docs.aws.amazon.com/AmazonS3/latest/API/API_PutObject.html)di *Referensi API Amazon Simple Storage Service*.
+ **Bucket:** Nama ember Amazon S3 untuk meletakkan objek.
+ **Kunci:** Nama unik objek yang akan dimasukkan ke dalam ember Amazon S3.
+ **Tubuh:** Isi objek yang akan dimasukkan ke dalam ember Amazon S3.
#### Output yang diejek
Tindakan tidak berinteraksi dengan layanan atau sumber daya eksternal di lingkungan pratinjau. Bidang **keluaran Mocked** digunakan untuk menyediakan ekspresi JSON yang mensimulasikan perilaku konektor di lingkungan pratinjau untuk tujuan pengujian. Cuplikan ini disimpan di `results` peta tindakan, sama seperti respons konektor untuk aplikasi yang diterbitkan di lingkungan langsung.
Dengan bidang ini, Anda dapat menguji berbagai skenario dan dampaknya terhadap tindakan lain dalam otomatisasi seperti mensimulasikan nilai hasil yang berbeda, skenario kesalahan, kasus tepi, atau jalur yang tidak menyenangkan tanpa berkomunikasi dengan layanan eksternal melalui konektor.
## Amazon S3: Hapus objek
Menggunakan `Amazon S3 DeleteObject` operasi untuk menghapus objek yang diidentifikasi oleh kunci (jalur file) dari bucket Amazon S3 yang ditentukan.
### Sifat-sifat
#### Konektor
Konektor yang akan digunakan untuk operasi yang dijalankan oleh tindakan ini. Konektor yang dikonfigurasi harus diatur dengan kredensional yang tepat untuk menjalankan operasi, dan informasi konfigurasi lainnya, seperti AWS wilayah yang berisi sumber daya apa pun yang direferensikan dalam operasi.
#### Konfigurasi
Opsi yang diperlukan untuk digunakan dalam `DeleteObject` perintah. Opsinya adalah sebagai berikut:
**catatan**
Untuk informasi selengkapnya tentang `Amazon S3 DeleteObject` operasi, lihat [DeleteObject](https://docs.aws.amazon.com/AmazonS3/latest/API/API_DeleteObject.html)di *Referensi API Amazon Simple Storage Service*.
+ **Bucket:** Nama bucket Amazon S3 untuk menghapus objek.
+ **Kunci:** Nama unik objek yang akan dihapus dari bucket Amazon S3.
#### Output yang diejek
Tindakan tidak berinteraksi dengan layanan atau sumber daya eksternal di lingkungan pratinjau. Bidang **keluaran Mocked** digunakan untuk menyediakan ekspresi JSON yang mensimulasikan perilaku konektor di lingkungan pratinjau untuk tujuan pengujian. Cuplikan ini disimpan di `results` peta tindakan, sama seperti respons konektor untuk aplikasi yang diterbitkan di lingkungan langsung.
Dengan bidang ini, Anda dapat menguji berbagai skenario dan dampaknya terhadap tindakan lain dalam otomatisasi seperti mensimulasikan nilai hasil yang berbeda, skenario kesalahan, kasus tepi, atau jalur yang tidak menyenangkan tanpa berkomunikasi dengan layanan eksternal melalui konektor.
## Amazon S3: Dapatkan objek
Menggunakan `Amazon S3 GetObject` operasi untuk mengambil objek yang diidentifikasi oleh kunci (jalur file) dari bucket Amazon S3 yang ditentukan.
### Sifat-sifat
#### Konektor
Konektor yang akan digunakan untuk operasi yang dijalankan oleh tindakan ini. Konektor yang dikonfigurasi harus diatur dengan kredensional yang tepat untuk menjalankan operasi, dan informasi konfigurasi lainnya, seperti AWS wilayah yang berisi sumber daya apa pun yang direferensikan dalam operasi.
#### Konfigurasi
Opsi yang diperlukan untuk digunakan dalam `GetObject` perintah. Opsinya adalah sebagai berikut:
**catatan**
Untuk informasi selengkapnya tentang `Amazon S3 GetObject` operasi, lihat [GetObject](https://docs.aws.amazon.com/AmazonS3/latest/API/API_GetObject.html)di *Referensi API Amazon Simple Storage Service*.
+ **Bucket:** Nama bucket Amazon S3 untuk mengambil objek.
+ **Kunci:** Nama unik objek yang akan diambil dari bucket Amazon S3.
#### Output yang diejek
Tindakan tidak berinteraksi dengan layanan atau sumber daya eksternal di lingkungan pratinjau. Bidang **keluaran Mocked** digunakan untuk menyediakan ekspresi JSON yang mensimulasikan perilaku konektor di lingkungan pratinjau untuk tujuan pengujian. Cuplikan ini disimpan di `results` peta tindakan, sama seperti respons konektor untuk aplikasi yang diterbitkan di lingkungan langsung.
Dengan bidang ini, Anda dapat menguji berbagai skenario dan dampaknya terhadap tindakan lain dalam otomatisasi seperti mensimulasikan nilai hasil yang berbeda, skenario kesalahan, kasus tepi, atau jalur yang tidak menyenangkan tanpa berkomunikasi dengan layanan eksternal melalui konektor.
## Amazon S3: Daftar objek
Menggunakan `Amazon S3 ListObjects` operasi untuk mencantumkan objek dalam bucket Amazon S3 yang ditentukan.
### Sifat-sifat
#### Konektor
Konektor yang akan digunakan untuk operasi yang dijalankan oleh tindakan ini. Konektor yang dikonfigurasi harus diatur dengan kredensional yang tepat untuk menjalankan operasi, dan informasi konfigurasi lainnya, seperti AWS wilayah yang berisi sumber daya apa pun yang direferensikan dalam operasi.
#### Konfigurasi
Opsi yang diperlukan untuk digunakan dalam `ListObjects` perintah. Opsinya adalah sebagai berikut:
**catatan**
Untuk informasi selengkapnya tentang `Amazon S3 ListObjects` operasi, lihat [ListObjects](https://docs.aws.amazon.com/AmazonS3/latest/API/API_ListObjects.html)di *Referensi API Amazon Simple Storage Service*.
+ **Bucket:** Nama bucket Amazon S3 untuk mencantumkan objek.
#### Output yang diejek
Tindakan tidak berinteraksi dengan layanan atau sumber daya eksternal di lingkungan pratinjau. Bidang **keluaran Mocked** digunakan untuk menyediakan ekspresi JSON yang mensimulasikan perilaku konektor di lingkungan pratinjau untuk tujuan pengujian. Cuplikan ini disimpan di `results` peta tindakan, sama seperti respons konektor untuk aplikasi yang diterbitkan di lingkungan langsung.
Dengan bidang ini, Anda dapat menguji berbagai skenario dan dampaknya terhadap tindakan lain dalam otomatisasi seperti mensimulasikan nilai hasil yang berbeda, skenario kesalahan, kasus tepi, atau jalur yang tidak menyenangkan tanpa berkomunikasi dengan layanan eksternal melalui konektor.
## Amazon Texttract: Analisis dokumen
Menggunakan `Amazon Textract AnalyzeDocument` operasi untuk menganalisis dokumen masukan untuk hubungan antara item yang terdeteksi.
### Sifat-sifat
#### Konektor
Konektor yang akan digunakan untuk operasi yang dijalankan oleh tindakan ini. Konektor yang dikonfigurasi harus diatur dengan kredensional yang tepat untuk menjalankan operasi, dan informasi konfigurasi lainnya, seperti AWS wilayah yang berisi sumber daya apa pun yang direferensikan dalam operasi.
#### Konfigurasi
Isi permintaan yang akan digunakan dalam `AnalyzeDocument` perintah. Opsinya adalah sebagai berikut:
**catatan**
Untuk informasi selengkapnya tentang `Amazon Textract AnalyzeDocument` operasi, lihat [AnalyzeDocument](https://docs.aws.amazon.com/textract/latest/dg/API_AnalyzeDocument.html)di Panduan *Pengembang Amazon Texttract*.
+ **Document/S3Object/Bucket:** Nama bucket Amazon S3. Parameter ini dapat dibiarkan kosong jika file diteruskan ke tindakan dengan komponen **unggah S3**.
+ **Document/S3Object/Name:** Nama file dari dokumen input. Parameter ini dapat dibiarkan kosong jika file diteruskan ke tindakan dengan komponen **unggah S3**.
+ **Document/S3Object/Version:** Jika bucket Amazon S3 mengaktifkan versi, Anda dapat menentukan versi objek. Parameter ini dapat dibiarkan kosong jika file diteruskan ke tindakan dengan komponen **unggah S3**.
+ **FeatureTypes:** Daftar jenis analisis yang harus dilakukan. Nilai yang valid adalah: `TABLES`, `FORMS`, `QUERIES`, `SIGNATURES`, dan `LAYOUT`.
#### Output yang diejek
Tindakan tidak berinteraksi dengan layanan atau sumber daya eksternal di lingkungan pratinjau. Bidang **keluaran Mocked** digunakan untuk menyediakan ekspresi JSON yang mensimulasikan perilaku konektor di lingkungan pratinjau untuk tujuan pengujian. Cuplikan ini disimpan di `results` peta tindakan, sama seperti respons konektor untuk aplikasi yang diterbitkan di lingkungan langsung.
Dengan bidang ini, Anda dapat menguji berbagai skenario dan dampaknya terhadap tindakan lain dalam otomatisasi seperti mensimulasikan nilai hasil yang berbeda, skenario kesalahan, kasus tepi, atau jalur yang tidak menyenangkan tanpa berkomunikasi dengan layanan eksternal melalui konektor.
## Amazon Texttract: Analisis biaya
Menggunakan `Amazon Textract AnalyzeExpense` operasi untuk menganalisis dokumen masukan untuk hubungan terkait keuangan antar teks.
### Sifat-sifat
#### Konektor
Konektor yang akan digunakan untuk operasi yang dijalankan oleh tindakan ini. Konektor yang dikonfigurasi harus diatur dengan kredensional yang tepat untuk menjalankan operasi, dan informasi konfigurasi lainnya, seperti AWS wilayah yang berisi sumber daya apa pun yang direferensikan dalam operasi.
#### Konfigurasi
Isi permintaan yang akan digunakan dalam `AnalyzeExpense` perintah. Opsinya adalah sebagai berikut:
**catatan**
Untuk informasi selengkapnya tentang `Amazon Textract AnalyzeExpense` operasi, lihat [AnalyzeExpense](https://docs.aws.amazon.com/textract/latest/dg/API_AnalyzeExpense.html)di Panduan *Pengembang Amazon Texttract*.
+ **Document/S3Object/Bucket:** Nama bucket Amazon S3. Parameter ini dapat dibiarkan kosong jika file diteruskan ke tindakan dengan komponen **unggah S3**.
+ **Document/S3Object/Name:** Nama file dari dokumen input. Parameter ini dapat dibiarkan kosong jika file diteruskan ke tindakan dengan komponen **unggah S3**.
+ **Document/S3Object/Version:** Jika bucket Amazon S3 mengaktifkan versi, Anda dapat menentukan versi objek. Parameter ini dapat dibiarkan kosong jika file diteruskan ke tindakan dengan komponen **unggah S3**.
#### Output yang diejek
Tindakan tidak berinteraksi dengan layanan atau sumber daya eksternal di lingkungan pratinjau. Bidang **keluaran Mocked** digunakan untuk menyediakan ekspresi JSON yang mensimulasikan perilaku konektor di lingkungan pratinjau untuk tujuan pengujian. Cuplikan ini disimpan di `results` peta tindakan, sama seperti respons konektor untuk aplikasi yang diterbitkan di lingkungan langsung.
Dengan bidang ini, Anda dapat menguji berbagai skenario dan dampaknya terhadap tindakan lain dalam otomatisasi seperti mensimulasikan nilai hasil yang berbeda, skenario kesalahan, kasus tepi, atau jalur yang tidak menyenangkan tanpa berkomunikasi dengan layanan eksternal melalui konektor.
## Amazon Ttract: Analisis ID
Menggunakan `Amazon Textract AnalyzeID` operasi untuk menganalisis dokumen identitas untuk informasi yang relevan.
### Sifat-sifat
#### Konektor
Konektor yang akan digunakan untuk operasi yang dijalankan oleh tindakan ini. Konektor yang dikonfigurasi harus diatur dengan kredensional yang tepat untuk menjalankan operasi, dan informasi konfigurasi lainnya, seperti AWS wilayah yang berisi sumber daya apa pun yang direferensikan dalam operasi.
#### Konfigurasi
Isi permintaan yang akan digunakan dalam `AnalyzeID` perintah. Opsinya adalah sebagai berikut:
**catatan**
Untuk informasi selengkapnya tentang `Amazon Textract AnalyzeID` operasi, lihat [AnalyzeID di Panduan](https://docs.aws.amazon.com/textract/latest/dg/API_AnalyzeID.html) Pengembang *Amazon Texttract*.
+ **Document/S3Object/Bucket:** Nama bucket Amazon S3. Parameter ini dapat dibiarkan kosong jika file diteruskan ke tindakan dengan komponen **unggah S3**.
+ **Document/S3Object/Name:** Nama file dari dokumen input. Parameter ini dapat dibiarkan kosong jika file diteruskan ke tindakan dengan komponen **unggah S3**.
+ **Document/S3Object/Version:** Jika bucket Amazon S3 mengaktifkan versi, Anda dapat menentukan versi objek. Parameter ini dapat dibiarkan kosong jika file diteruskan ke tindakan dengan komponen **unggah S3**.
#### Output yang diejek
Tindakan tidak berinteraksi dengan layanan atau sumber daya eksternal di lingkungan pratinjau. Bidang **keluaran Mocked** digunakan untuk menyediakan ekspresi JSON yang mensimulasikan perilaku konektor di lingkungan pratinjau untuk tujuan pengujian. Cuplikan ini disimpan di `results` peta tindakan, sama seperti respons konektor untuk aplikasi yang diterbitkan di lingkungan langsung.
Dengan bidang ini, Anda dapat menguji berbagai skenario dan dampaknya terhadap tindakan lain dalam otomatisasi seperti mensimulasikan nilai hasil yang berbeda, skenario kesalahan, kasus tepi, atau jalur yang tidak menyenangkan tanpa berkomunikasi dengan layanan eksternal melalui konektor.
## Amazon Textract: Mendeteksi teks dokumen
Menggunakan `Amazon Textract DetectDocumentText` operasi untuk mendeteksi baris teks dan kata-kata yang membentuk baris teks dalam dokumen input.
### Sifat-sifat
#### Konektor
Konektor yang akan digunakan untuk operasi yang dijalankan oleh tindakan ini. Konektor yang dikonfigurasi harus diatur dengan kredensional yang tepat untuk menjalankan operasi, dan informasi konfigurasi lainnya, seperti AWS wilayah yang berisi sumber daya apa pun yang direferensikan dalam operasi.
#### Konfigurasi
Isi permintaan yang akan digunakan dalam `DetectDocumentText` perintah. Opsinya adalah sebagai berikut:
**catatan**
Untuk informasi selengkapnya tentang `Amazon Textract DetectDocumentText` operasi, lihat [DetectDocumentText](https://docs.aws.amazon.com/textract/latest/dg/API_DetectDocumentText.html)di Panduan *Pengembang Amazon Texttract*.
+ **Document/S3Object/Bucket:** Nama bucket Amazon S3. Parameter ini dapat dibiarkan kosong jika file diteruskan ke tindakan dengan komponen **unggah S3**.
+ **Document/S3Object/Name:** Nama file dari dokumen input. Parameter ini dapat dibiarkan kosong jika file diteruskan ke tindakan dengan komponen **unggah S3**.
+ **Document/S3Object/Version:** Jika bucket Amazon S3 mengaktifkan versi, Anda dapat menentukan versi objek. Parameter ini dapat dibiarkan kosong jika file diteruskan ke tindakan dengan komponen **unggah S3**.
#### Output yang diejek
Tindakan tidak berinteraksi dengan layanan atau sumber daya eksternal di lingkungan pratinjau. Bidang **keluaran Mocked** digunakan untuk menyediakan ekspresi JSON yang mensimulasikan perilaku konektor di lingkungan pratinjau untuk tujuan pengujian. Cuplikan ini disimpan di `results` peta tindakan, sama seperti respons konektor untuk aplikasi yang diterbitkan di lingkungan langsung.
Dengan bidang ini, Anda dapat menguji berbagai skenario dan dampaknya terhadap tindakan lain dalam otomatisasi seperti mensimulasikan nilai hasil yang berbeda, skenario kesalahan, kasus tepi, atau jalur yang tidak menyenangkan tanpa berkomunikasi dengan layanan eksternal melalui konektor.
## Batuan Dasar Amazon: GenAI Prompt
Menggunakan InvokeModel operasi [Amazon Bedrock](https://docs.aws.amazon.com/bedrock/latest/APIReference/API_runtime_InvokeModel.html) untuk menjalankan inferensi menggunakan parameter prompt dan inferensi yang disediakan dalam properti tindakan. Tindakan ini dapat menghasilkan teks, gambar, dan penyematan.
### Sifat-sifat
#### Konektor
Konektor yang akan digunakan untuk operasi yang dijalankan oleh tindakan ini. Agar berhasil menggunakan tindakan ini, konektor harus dikonfigurasi dengan **Amazon Bedrock Runtime** sebagai layanan. Konektor yang dikonfigurasi harus diatur dengan kredensional yang tepat untuk menjalankan operasi, dan informasi konfigurasi lainnya, seperti AWS wilayah yang berisi sumber daya apa pun yang direferensikan dalam operasi.
#### Model
Model dasar yang akan digunakan oleh Amazon Bedrock untuk memproses permintaan. Untuk informasi selengkapnya tentang model di Amazon Bedrock, lihat [informasi model fondasi Amazon Bedrock](https://docs.aws.amazon.com/bedrock/latest/userguide/foundation-models-reference.html) di Panduan Pengguna *Amazon Bedrock*.
#### Jenis masukan
Jenis input dari input yang dikirim ke model Amazon Bedrock. Nilai yang mungkin adalah **Teks**, **Dokumen**, dan **Gambar**. Jika jenis input tidak tersedia untuk dipilih, kemungkinan besar tidak didukung oleh model yang dikonfigurasi.
#### Prompt pengguna
Prompt yang akan dikirim ke model Amazon Bedrock untuk diproses untuk menghasilkan respons. Anda dapat memasukkan teks statis, atau meneruskan input dari bagian lain aplikasi Anda, seperti dari komponen menggunakan parameter, tindakan sebelumnya dalam otomatisasi, atau otomatisasi lain. Contoh berikut menunjukkan cara meneruskan nilai dari komponen atau tindakan sebelumnya:
+ Untuk meneruskan nilai dari komponen menggunakan parameter: `{{params.paramName}}`
+ Untuk meneruskan nilai dari tindakan sebelumnya: `{{results.actionName}}`
#### Prompt sistem (model Claude)
Prompt sistem yang akan digunakan oleh model Amazon Bedrock saat memproses permintaan. Prompt sistem digunakan untuk memberikan konteks, instruksi, atau pedoman untuk model Claude.
#### Permintaan pengaturan
Konfigurasikan berbagai pengaturan permintaan dan parameter inferensi model. Anda dapat mengonfigurasi pengaturan berikut:
+ **Suhu**: Suhu yang akan digunakan oleh model Amazon Bedrock saat memproses permintaan. Suhu menentukan keacakan atau kreativitas keluaran model Bedrock. Semakin tinggi suhunya, semakin kreatif dan kurang analitis responsnya. Nilai yang mungkin adalah`[0-10]`.
+ **Token Maks**: Batasi panjang output model Amazon Bedrock.
+ **TopP****: Dalam pengambilan sampel nukleus, model menghitung distribusi kumulatif atas semua opsi untuk setiap token berikutnya dalam urutan probabilitas yang menurun dan memotongnya setelah mencapai probabilitas tertentu yang ditentukan oleh TopP.** Anda harus mengubah **suhu** atau **TopP**, tetapi tidak keduanya
+ **Stop Sequences**: Urutan yang menyebabkan model berhenti memproses permintaan dan menghasilkan output.
Untuk informasi selengkapnya, lihat [Parameter permintaan inferensi dan bidang respons untuk model foundation](https://docs.aws.amazon.com/bedrock/latest/userguide/model-parameters.html) di *Panduan Pengguna Amazon Bedrock*.
#### Hentikan Urutan
**Masukkan **ID** dan Versi Amazon Bedrock Guardrail.** Pagar pembatas digunakan untuk menerapkan perlindungan berdasarkan kasus penggunaan Anda dan kebijakan AI yang bertanggung jawab. Untuk informasi selengkapnya, lihat [Menghentikan konten berbahaya dalam model yang menggunakan Amazon Bedrock Guide di Panduan](https://docs.aws.amazon.com/bedrock/latest/userguide/guardrails.html) Pengguna *Amazon Bedrock*.
#### Output yang diejek
Tindakan tidak berinteraksi dengan layanan atau sumber daya eksternal di lingkungan pratinjau. Bidang **keluaran Mocked** digunakan untuk menyediakan ekspresi JSON yang mensimulasikan perilaku konektor di lingkungan pratinjau untuk tujuan pengujian. Cuplikan ini disimpan di `results` peta tindakan, sama seperti respons konektor untuk aplikasi yang diterbitkan di lingkungan langsung.
Dengan bidang ini, Anda dapat menguji berbagai skenario dan dampaknya terhadap tindakan lain dalam otomatisasi seperti mensimulasikan nilai hasil yang berbeda, skenario kesalahan, kasus tepi, atau jalur yang tidak menyenangkan tanpa berkomunikasi dengan layanan eksternal melalui konektor.
## Amazon Bedrock: Memanggil model
Menggunakan InvokeModel operasi [Amazon Bedrock](https://docs.aws.amazon.com/bedrock/latest/APIReference/API_runtime_InvokeModel.html) untuk menjalankan inferensi menggunakan parameter prompt dan inferensi yang disediakan di badan permintaan. Anda menggunakan inferensi model untuk menghasilkan teks, gambar, dan embeddings.
### Sifat-sifat
#### Konektor
Konektor yang akan digunakan untuk operasi yang dijalankan oleh tindakan ini. Agar berhasil menggunakan tindakan ini, konektor harus dikonfigurasi dengan **Amazon Bedrock Runtime** sebagai layanan. Konektor yang dikonfigurasi harus diatur dengan kredensional yang tepat untuk menjalankan operasi, dan informasi konfigurasi lainnya, seperti AWS wilayah yang berisi sumber daya apa pun yang direferensikan dalam operasi.
#### Konfigurasi
Isi permintaan yang akan digunakan dalam `InvokeModel` perintah.
**catatan**
Untuk informasi selengkapnya tentang `Amazon Bedrock InvokeModel` operasi, termasuk perintah contoh, lihat [InvokeModel](https://docs.aws.amazon.com/textract/latest/dg/API_DetectDocumentText.html)di *Referensi Amazon Bedrock API*.
#### Output yang diejek
Tindakan tidak berinteraksi dengan layanan atau sumber daya eksternal di lingkungan pratinjau. Bidang **keluaran Mocked** digunakan untuk menyediakan ekspresi JSON yang mensimulasikan perilaku konektor di lingkungan pratinjau untuk tujuan pengujian. Cuplikan ini disimpan di `results` peta tindakan, sama seperti respons konektor untuk aplikasi yang diterbitkan di lingkungan langsung.
Dengan bidang ini, Anda dapat menguji berbagai skenario dan dampaknya terhadap tindakan lain dalam otomatisasi seperti mensimulasikan nilai hasil yang berbeda, skenario kesalahan, kasus tepi, atau jalur yang tidak menyenangkan tanpa berkomunikasi dengan layanan eksternal melalui konektor.
## JavaScript
Menjalankan JavaScript fungsi kustom untuk mengembalikan nilai tertentu.
**penting**
App Studio tidak mendukung penggunaan JavaScript pustaka pihak ketiga atau kustom.
### Sifat-sifat
#### Kode sumber
Cuplikan JavaScript kode yang akan dijalankan oleh tindakan.
**Tip**
Anda dapat menggunakan AI untuk membantu menghasilkan JavaScript untuk Anda dengan melakukan langkah-langkah berikut:
Pilih ikon perluas untuk membuka JavaScript editor yang diperluas.
(Opsional): Aktifkan sakelar **Ubah kode** untuk memodifikasi yang ada. JavaScript Jika tidak, AI akan menggantikan yang ada JavaScript.
Di **Generate JavaScript**, jelaskan apa yang ingin Anda lakukan JavaScript, misalnya:**Add two numbers**.
Pilih ikon kirim untuk menghasilkan ikon Anda JavaScript.
## Memanggil otomatisasi
Menjalankan otomatisasi tertentu.
### Sifat-sifat
#### Memohon Otomasi
Otomatisasi yang akan dijalankan oleh tindakan.
## Kirim email
Menggunakan `Amazon SES SendEmail` operasi untuk mengirim email.
### Sifat-sifat
#### Konektor
Konektor yang akan digunakan untuk operasi yang dijalankan oleh tindakan ini. Konektor yang dikonfigurasi harus diatur dengan kredensional yang tepat untuk menjalankan operasi, dan informasi konfigurasi lainnya, seperti AWS wilayah yang berisi sumber daya apa pun yang direferensikan dalam operasi.
#### Konfigurasi
Isi permintaan yang akan digunakan dalam `SendEmail` perintah. Opsinya adalah sebagai berikut:
**catatan**
Untuk informasi selengkapnya tentang `Amazon SES SendEmail` operasi, lihat [SendEmail](https://docs.aws.amazon.com/ses/latest/APIReference-V2/API_SendEmail.html)di *Referensi API Amazon Simple Email Service*.
#### Output yang diejek
Tindakan tidak berinteraksi dengan layanan atau sumber daya eksternal di lingkungan pratinjau. Bidang **keluaran Mocked** digunakan untuk menyediakan ekspresi JSON yang mensimulasikan perilaku konektor di lingkungan pratinjau untuk tujuan pengujian. Cuplikan ini disimpan di `results` peta tindakan, sama seperti respons konektor untuk aplikasi yang diterbitkan di lingkungan langsung.
Dengan bidang ini, Anda dapat menguji berbagai skenario dan dampaknya terhadap tindakan lain dalam otomatisasi seperti mensimulasikan nilai hasil yang berbeda, skenario kesalahan, kasus tepi, atau jalur yang tidak menyenangkan tanpa berkomunikasi dengan layanan eksternal melalui konektor.
# Entitas dan tindakan data: Mengonfigurasi model data aplikasi Anda
**Entitas** adalah tabel data di App Studio. Entitas berinteraksi langsung dengan tabel di sumber data. Entitas mencakup bidang untuk mendeskripsikan data di dalamnya, kueri untuk mencari dan mengembalikan data, dan pemetaan untuk menghubungkan bidang entitas ke kolom sumber data.
**Topics**
+ [Praktik terbaik saat merancang model data](data-model-best-practices.md)
+ [Membuat entitas di aplikasi App Studio](data-entities-create.md)
+ [Mengonfigurasi atau mengedit entitas di aplikasi App Studio](data-entities-edit.md)
+ [Menghapus entitas](data-entities-delete.md)
+ [Entitas data terkelola di AWS App Studio](managed-data-entities.md)
# Praktik terbaik saat merancang model data
Gunakan praktik terbaik berikut untuk membuat model data relasional yang kuat, dapat diskalakan, dan aman AWS untuk digunakan dalam aplikasi App Studio Anda yang memenuhi persyaratan aplikasi Anda dan memastikan keandalan dan kinerja jangka panjang infrastruktur data Anda.
+ **Pilih layanan AWS data yang tepat:** Tergantung pada kebutuhan Anda, pilih layanan AWS data yang sesuai. Misalnya, untuk aplikasi Online Transaction Processing (OLTP), Anda dapat mempertimbangkan database (DB) seperti Amazon Aurora yang merupakan layanan database cloud-native, relasional, dan dikelola sepenuhnya yang mendukung berbagai mesin database seperti MySQL dan PostgreSQL. Untuk daftar lengkap versi Aurora yang didukung oleh App Studio, lihat. [Connect ke Amazon Aurora](connectors-aurora.md) Di sisi lain, untuk kasus penggunaan Online Analytical Processing (OLAP), pertimbangkan untuk menggunakan Amazon Redshift, yang merupakan gudang data cloud yang memungkinkan Anda menjalankan kueri kompleks terhadap kumpulan data yang sangat besar. Kueri ini seringkali membutuhkan waktu (beberapa detik) untuk diselesaikan, membuat Amazon Redshift kurang cocok untuk aplikasi OLTP yang memerlukan akses data latensi rendah.
+ **Desain untuk skalabilitas:** Rencanakan model data Anda dengan mempertimbangkan pertumbuhan dan skalabilitas di masa depan. Pertimbangkan faktor-faktor seperti volume data yang diharapkan, pola akses, dan persyaratan kinerja saat memilih layanan data yang sesuai dan jenis dan konfigurasi instans database (seperti kapasitas yang disediakan).
+ Untuk informasi selengkapnya tentang penskalaan dengan Aurora tanpa server, [lihat Kinerja dan penskalaan](https://docs.aws.amazon.com/AmazonRDS/latest/AuroraUserGuide/aurora-serverless-v2.setting-capacity.html) untuk Aurora Tanpa Server V2.
+ **Menormalkan data Anda:** Ikuti prinsip normalisasi database untuk meminimalkan redundansi data dan meningkatkan integritas data. Ini termasuk membuat tabel yang sesuai, mendefinisikan kunci primer dan asing, dan membangun hubungan antar entitas. Di App Studio, saat menanyakan data dari satu entitas, Anda dapat mengambil data terkait dari entitas lain dengan menentukan `join` klausa pada kueri.
+ **Menerapkan pengindeksan yang sesuai:** Identifikasi kueri dan pola akses yang paling penting, dan buat indeks yang sesuai untuk mengoptimalkan kinerja.
+ **Manfaatkan fitur layanan AWS data:** Manfaatkan fitur yang ditawarkan oleh layanan AWS data yang Anda pilih, seperti pencadangan otomatis, penerapan multi-AZ, dan pembaruan perangkat lunak otomatis.
+ **Amankan data Anda:** Menerapkan langkah-langkah keamanan yang kuat, seperti kebijakan IAM (AWS Identity and Access Management), pembuatan pengguna database dengan izin terbatas ke tabel dan skema, dan menerapkan enkripsi saat istirahat dan dalam perjalanan.
+ **Memantau dan mengoptimalkan kinerja:** Terus memantau kinerja database Anda dan membuat penyesuaian sesuai kebutuhan, seperti penskalaan sumber daya, mengoptimalkan kueri, atau menyetel konfigurasi database.
+ **Mengotomatiskan manajemen database: Manfaatkan** AWS layanan seperti Aurora Autoscaling, Performance Insights for Aurora, dan AWS Database Migration Service untuk mengotomatiskan tugas manajemen database dan mengurangi overhead operasional.
+ **Menerapkan strategi pemulihan dan pencadangan bencana:** Pastikan Anda memiliki rencana pencadangan dan pemulihan yang terdefinisi dengan baik, memanfaatkan fitur seperti Pencadangan Otomatis Aurora, point-in-time pemulihan, dan konfigurasi replika lintas wilayah.
+ **Ikuti praktik dan dokumentasi AWS terbaik:** Ikuti up-to-date praktik, panduan, dan dokumentasi AWS terbaik terbaru untuk layanan data pilihan Anda guna memastikan bahwa model dan implementasi data Anda selaras dengan AWS rekomendasi.
Untuk panduan lebih rinci dari setiap layanan AWS data, lihat topik berikut:
+ [Praktik terbaik dengan Amazon Aurora](https://docs.aws.amazon.com/AmazonRDS/latest/AuroraUserGuide/Aurora.BestPractices.html)
+ [Praktik terbaik dengan Amazon Aurora MySQL](https://docs.aws.amazon.com/AmazonRDS/latest/AuroraUserGuide/AuroraMySQL.BestPractices.html)
+ [Penyetelan kinerja kueri Amazon Redshift](https://docs.aws.amazon.com/redshift/latest/dg/c-optimizing-query-performance.html)
+ [Praktik terbaik untuk kueri dan pemindaian data di Amazon DynamoDB](https://docs.aws.amazon.com/amazondynamodb/latest/developerguide/bp-query-scan.html)
# Membuat entitas di aplikasi App Studio
Ada empat metode untuk membuat entitas di aplikasi App Studio. Daftar berikut berisi setiap metode, manfaatnya, dan tautan ke instruksi untuk menggunakan metode tersebut untuk membuat dan kemudian mengkonfigurasi entitas.
+ [Membuat entitas dari sumber data yang ada](#data-entities-create-existing-data-source): Secara otomatis membuat entitas dan bidangnya dari tabel sumber data yang ada dan memetakan bidang ke kolom tabel sumber data. Opsi ini lebih disukai jika Anda memiliki sumber data yang sudah ada yang ingin Anda gunakan di aplikasi App Studio.
+ [Membuat entitas dengan sumber data terkelola App Studio](#data-entities-create-managed-data-source): Buat entitas dan tabel DynamoDB yang dikelola App Studio untuk Anda. Tabel DynamoDB diperbarui secara otomatis saat Anda memperbarui entitas Anda. Dengan opsi ini, Anda tidak perlu membuat, mengelola, atau menghubungkan sumber data pihak ketiga secara manual, atau menetapkan pemetaan dari bidang entitas ke kolom tabel. Semua pemodelan dan konfigurasi data aplikasi Anda dilakukan di App Studio. Opsi ini lebih disukai jika Anda tidak ingin mengelola sumber data Anda sendiri dan tabel DynamoDB dan fungsinya cukup untuk aplikasi Anda.
+ [Membuat entitas kosong](#data-entities-create-empty): Buat entitas kosong seluruhnya dari awal. Opsi ini lebih disukai jika Anda tidak memiliki sumber data atau konektor yang dibuat oleh admin, dan Anda ingin mendesain model data aplikasi secara fleksibel tanpa dibatasi oleh sumber data eksternal. Anda dapat menghubungkan entitas ke sumber data setelah pembuatan.
+ [Membuat entitas dengan AI](#data-entities-create-with-ai): Menghasilkan entitas, bidang, tindakan data, dan data sampel berdasarkan nama entitas yang ditentukan. Opsi ini lebih disukai jika Anda memiliki gagasan tentang model data untuk aplikasi Anda, tetapi Anda ingin bantuan menerjemahkannya ke dalam entitas.
## Membuat entitas dari sumber data yang ada
Gunakan tabel dari sumber data untuk secara otomatis membuat entitas dan bidangnya, dan petakan bidang entitas ke kolom tabel. Opsi ini lebih disukai jika Anda memiliki sumber data yang sudah ada yang ingin Anda gunakan di aplikasi App Studio.
1. Jika perlu, navigasikan ke aplikasi Anda.
1. Pilih tab **Data** di bagian atas kanvas.
1. Jika tidak ada entitas di aplikasi Anda, pilih **\$1 Buat entitas**. Jika tidak, di menu **Entitas** sisi kiri, pilih **\$1** Tambah.
1. Pilih **Gunakan tabel dari sumber data yang ada**.
1. Di **Connector**, pilih konektor yang berisi tabel yang ingin Anda gunakan untuk membuat entitas Anda.
1. Dalam **Tabel**, pilih tabel yang ingin Anda gunakan untuk membuat entitas Anda.
1. Pilih kotak centang **Buat tindakan data** untuk membuat tindakan data.
1. Pilih **Buat entitas**. Entitas Anda sekarang dibuat, dan Anda dapat melihatnya di panel **Entitas** sebelah kiri.
1. Konfigurasikan entitas baru Anda dengan mengikuti prosedur di[Mengonfigurasi atau mengedit entitas di aplikasi App Studio](data-entities-edit.md). Perhatikan bahwa karena entitas Anda dibuat dengan sumber data yang ada, beberapa properti atau sumber daya telah dibuat, seperti bidang, sumber data yang terhubung, dan pemetaan bidang. Selain itu, entitas Anda akan berisi tindakan data jika Anda memilih kotak centang **Buat tindakan data** selama pembuatan.
## Membuat entitas dengan sumber data terkelola App Studio
Buat entitas terkelola dan tabel DynamoDB terkait yang dikelola oleh App Studio. Meskipun tabel DynamoDB ada di akun AWS terkait, saat perubahan dilakukan pada entitas di aplikasi App Studio, tabel DynamoDB akan diperbarui secara otomatis. Dengan opsi ini, Anda tidak perlu membuat, mengelola, atau menghubungkan sumber data pihak ketiga secara manual, atau menetapkan pemetaan dari bidang entitas ke kolom tabel. Opsi ini lebih disukai jika Anda tidak ingin mengelola sumber data Anda sendiri dan tabel DynamoDB dan fungsinya cukup untuk aplikasi Anda. Untuk informasi selengkapnya tentang entitas terkelola, lihat[Entitas data terkelola di AWS App Studio](managed-data-entities.md).
Anda dapat menggunakan entitas terkelola yang sama di beberapa aplikasi. Untuk petunjuk, lihat [Membuat entitas dari sumber data yang ada](#data-entities-create-existing-data-source).
1. Jika perlu, navigasikan ke aplikasi Anda.
1. Pilih tab **Data** di bagian atas kanvas.
1. Jika tidak ada entitas di aplikasi Anda, pilih **\$1 Buat entitas**. Jika tidak, di menu **Entitas** sisi kiri, pilih **\$1** Tambah.
1. Pilih **Buat entitas terkelola App Studio**.
1. Dalam **nama Entitas**, berikan nama untuk entitas Anda.
1. Dalam **kunci Primer**, berikan nama untuk kunci utama entitas Anda. Kunci utama adalah pengidentifikasi unik entitas dan tidak dapat diubah setelah entitas dibuat.
1. Di **tipe data kunci primer**, pilih tipe data kunci primer entitas Anda. Tipe data tidak dapat diubah setelah entitas dibuat.
1. Pilih **Buat entitas**. Entitas Anda sekarang dibuat, dan Anda dapat melihatnya di panel **Entitas** sebelah kiri.
1. Konfigurasikan entitas baru Anda dengan mengikuti prosedur di[Mengonfigurasi atau mengedit entitas di aplikasi App Studio](data-entities-edit.md). Perhatikan bahwa karena entitas Anda dibuat dengan data terkelola, beberapa properti atau sumber daya telah dibuat, seperti bidang kunci utama, dan sumber data yang terhubung.
## Membuat entitas kosong
Buat entitas kosong seluruhnya dari awal. Opsi ini lebih disukai jika Anda tidak memiliki sumber data atau konektor yang dibuat oleh admin. Membuat entitas kosong menawarkan fleksibilitas, karena Anda dapat mendesain entitas dalam aplikasi App Studio tanpa dibatasi oleh sumber data eksternal. Setelah mendesain model data aplikasi, dan mengonfigurasi entitas sesuai dengan itu, Anda masih dapat menghubungkannya ke sumber data eksternal nanti.
1. Jika perlu, navigasikan ke aplikasi Anda.
1. Pilih tab **Data** di bagian atas kanvas.
1. Jika tidak ada entitas di aplikasi Anda, pilih **\$1 Buat entitas**. Jika tidak, di menu **Entitas** sisi kiri, pilih **\$1** Tambah.
1. Pilih **Buat entitas**.
1. Pilih **Buat entitas**. Entitas Anda sekarang dibuat, dan Anda dapat melihatnya di panel **Entitas** sebelah kiri.
1. Konfigurasikan entitas baru Anda dengan mengikuti prosedur di[Mengonfigurasi atau mengedit entitas di aplikasi App Studio](data-entities-edit.md).
## Membuat entitas dengan AI
Hasilkan entitas, bidang, tindakan data, dan data sampel berdasarkan nama entitas yang ditentukan. Opsi ini lebih disukai jika Anda memiliki gagasan tentang model data untuk aplikasi Anda, tetapi Anda ingin bantuan menerjemahkannya ke dalam entitas.
1. Jika perlu, navigasikan ke aplikasi Anda.
1. Pilih tab **Data** di bagian atas kanvas.
1. Jika tidak ada entitas di aplikasi Anda, pilih **\$1 Buat entitas**. Jika tidak, di menu **Entitas** sisi kiri, pilih **\$1** Tambah.
1. Pilih **Buat entitas dengan AI**.
1. Dalam **nama Entitas**, berikan nama untuk entitas Anda. Nama ini digunakan untuk menghasilkan bidang, tindakan data, dan data sampel entitas Anda.
1. Pilih kotak centang **Buat tindakan data** untuk membuat tindakan data.
1. Pilih **Menghasilkan entitas**. Entitas Anda sekarang dibuat, dan Anda dapat melihatnya di panel **Entitas** sebelah kiri.
1. Konfigurasikan entitas baru Anda dengan mengikuti prosedur di[Mengonfigurasi atau mengedit entitas di aplikasi App Studio](data-entities-edit.md). Perhatikan bahwa karena entitas Anda dibuat dengan AI, entitas Anda akan sudah berisi bidang yang dihasilkan. Selain itu, entitas Anda akan berisi tindakan data jika Anda memilih kotak centang **Buat tindakan data** selama pembuatan.
# Mengonfigurasi atau mengedit entitas di aplikasi App Studio
Gunakan topik berikut untuk mengonfigurasi entitas dalam aplikasi App Studio.
**Topics**
+ [Mengedit nama entitas](data-entities-edit-name.md)
+ [Menambahkan, mengedit, atau menghapus bidang entitas](data-entities-edit-fields.md)
+ [Membuat, mengedit, atau menghapus tindakan data](data-entities-edit-data-actions.md)
+ [Menambahkan atau menghapus data sampel](data-entities-edit-sample-data.md)
+ [Menambahkan atau mengedit sumber data yang terhubung dan bidang peta](data-entities-edit-connection.md)
# Mengedit nama entitas
1. Jika perlu, navigasikan ke entitas yang ingin Anda edit.
1. Di tab **Konfigurasi**, di **nama Entitas**, perbarui nama entitas dan pilih di luar kotak teks untuk menyimpan perubahan Anda.
# Menambahkan, mengedit, atau menghapus bidang entitas
**Tip**
Anda dapat menekan CTRL\$1Z untuk membatalkan perubahan terbaru pada entitas Anda.
1. Jika perlu, navigasikan ke entitas yang ingin Anda edit.
1. Di tab **Konfigurasi**, di **Bidang**, Anda melihat tabel bidang entitas Anda. Bidang entitas memiliki kolom berikut:
+ **Nama tampilan:** Nama tampilan mirip dengan header tabel atau bidang formulir dan dapat dilihat oleh pengguna aplikasi. Ini dapat berisi spasi dan karakter khusus tetapi harus unik dalam suatu entitas.
+ **Nama sistem:** Nama sistem adalah pengidentifikasi unik yang digunakan dalam kode untuk referensi bidang. Saat memetakan ke kolom dalam tabel Amazon Redshift, itu harus cocok dengan nama kolom tabel Amazon Redshift.
+ **Tipe data:** Jenis data yang akan disimpan dalam bidang ini, seperti`Integer`,`Boolean`, atau`String`.
1. Untuk menambahkan bidang:
1. Untuk menggunakan AI untuk menghasilkan bidang berdasarkan nama entitas dan sumber data yang terhubung, pilih **Hasilkan lebih banyak bidang**.
1. Untuk menambahkan satu bidang, pilih **\$1 Tambah bidang**.
1. Untuk mengedit bidang:
1. Untuk mengedit nama tampilan, masukkan nilai yang diinginkan di kotak teks **Nama tampilan**. Jika nama sistem bidang belum diedit, itu akan diperbarui ke nilai baru dari nama tampilan.
1. Untuk mengedit nama sistem, masukkan nilai yang diinginkan di kotak teks **Nama sistem**.
1. Untuk mengedit tipe data, pilih menu tarik-turun **tipe data** dan pilih jenis yang diinginkan dari daftar.
1. Untuk mengedit properti bidang, pilih ikon roda gigi bidang. Daftar berikut merinci properti bidang:
+ **Wajib**: Aktifkan opsi ini jika bidang diperlukan oleh sumber data Anda.
+ **Kunci utama**: Aktifkan opsi ini jika bidang dipetakan ke kunci utama di sumber data Anda.
+ **Unik**: Aktifkan opsi ini jika nilai bidang ini harus unik.
+ **Gunakan sumber data default**: Aktifkan opsi ini jika nilai bidang disediakan oleh sumber data, seperti menggunakan kenaikan otomatis, atau stempel waktu acara.
+ **Opsi tipe data**: Bidang tipe data tertentu dapat dikonfigurasi dengan opsi tipe data seperti nilai minimum atau maksimum.
1. Untuk menghapus bidang, pilih ikon sampah dari bidang yang ingin Anda hapus.
# Membuat, mengedit, atau menghapus tindakan data
Tindakan data digunakan dalam aplikasi untuk menjalankan tindakan pada data entitas, seperti mengambil semua catatan, atau mengambil catatan berdasarkan ID. Tindakan data dapat digunakan untuk menemukan dan mengembalikan data yang cocok dengan kondisi tertentu untuk dilihat dalam komponen seperti tabel atau tampilan detail.
**Contents**
+ [Membuat tindakan data](#data-entities-data-action-add)
+ [Mengedit atau mengonfigurasi tindakan data](#data-entities-data-action-edit)
+ [Operator dan contoh kondisi tindakan data](#data-entities-data-action-operators)
+ [Kondisi dukungan operator oleh database](#data-entities-data-action-operators-support)
+ [Contoh kondisi tindakan data](#data-entities-data-action-operators-examples)
+ [Menghapus tindakan data](#data-entities-data-action-delete)
## Membuat tindakan data
**Tip**
Anda dapat menekan CTRL\$1Z untuk membatalkan perubahan terbaru pada entitas Anda.
1. Jika perlu, navigasikan ke entitas yang ingin Anda buat tindakan datanya.
1. Pilih tab **Tindakan data**.
1. Ada dua metode untuk membuat tindakan data:
+ (Disarankan) Untuk menggunakan AI untuk menghasilkan tindakan data untuk Anda, berdasarkan nama entitas, bidang, dan sumber data yang terhubung, pilih **Hasilkan tindakan data**. Tindakan berikut akan dihasilkan:
1. `getAll`: Mengambil semua catatan dari entitas. Tindakan ini berguna ketika Anda perlu menampilkan daftar catatan atau melakukan operasi pada beberapa catatan sekaligus.
1. `getByID`: Mengambil satu catatan dari entitas berdasarkan pengenal uniknya (ID atau kunci utama). Tindakan ini berguna ketika Anda perlu menampilkan atau melakukan operasi pada catatan tertentu.
+ Untuk menambahkan tindakan data tunggal, pilih **\$1 Tambahkan tindakan data**.
1. Untuk melihat atau mengonfigurasi tindakan data baru, lihat bagian berikut,[Mengedit atau mengonfigurasi tindakan data](#data-entities-data-action-edit).
## Mengedit atau mengonfigurasi tindakan data
1. Jika perlu, navigasikan ke entitas yang ingin Anda buat tindakan datanya.
1. Pilih tab **Tindakan data**.
1. Di **Bidang**, konfigurasikan bidang yang akan dikembalikan oleh kueri. Secara default, semua bidang yang dikonfigurasi dalam entitas dipilih.
Anda juga dapat menambahkan **Gabungan** ke tindakan data dengan melakukan langkah-langkah berikut:
1. Pilih **\$1 Tambahkan Gabung** untuk membuka kotak dialog.
1. Di **Entitas terkait**, pilih entitas yang ingin Anda gabungkan dengan entitas saat ini.
1. Di **Alias**, secara opsional masukkan nama alias sementara untuk entitas terkait.
1. Di **Jenis Gabung**, pilih jenis gabungan yang diinginkan.
1. Tentukan klausa gabungan dengan memilih bidang dari setiap entitas.
1. Pilih **Tambah** untuk membuat bergabung.
**Setelah dibuat, gabungan akan ditampilkan di bagian Gabung, membuat bidang tambahan tersedia di dropdown **Fields to Return**.** Anda dapat menambahkan beberapa gabungan, termasuk gabungan berantai di seluruh entitas. Anda juga dapat memfilter dan mengurutkan berdasarkan bidang dari entitas yang bergabung.
Untuk menghapus gabungan, pilih ikon sampah di sebelahnya. Ini akan menghapus bidang apa pun dari gabungan itu dan mematahkan gabungan atau batasan dependen apa pun menggunakan bidang tersebut.
1. Dalam **Kondisi**, tambahkan, edit, atau hapus aturan yang memfilter output kueri. Anda dapat mengatur aturan ke dalam grup, dan Anda dapat menggabungkan beberapa aturan dengan `AND` atau `OR` pernyataan. Untuk informasi selengkapnya tentang operator yang dapat Anda gunakan, lihat[Operator dan contoh kondisi tindakan data](#data-entities-data-action-operators).
1. Di **Sorting**, konfigurasikan bagaimana hasil kueri diurutkan dengan memilih atribut dan memilih urutan naik atau turun. Anda dapat menghapus konfigurasi penyortiran dengan memilih ikon sampah di sebelah aturan penyortiran.
1. Di **hasil Transform**, Anda dapat memasukkan kustom JavaScript untuk memodifikasi atau memformat hasil sebelum ditampilkan atau dikirim ke otomatisasi.
1. Di **Pratinjau keluaran**, lihat tabel pratinjau output kueri berdasarkan bidang yang dikonfigurasi, filter, pengurutan, dan JavaScript.
## Operator dan contoh kondisi tindakan data
Anda dapat menggunakan operator kondisi untuk membandingkan nilai ekspresi yang dikonfigurasi dengan kolom entitas untuk mengembalikan subset objek database. Operator yang dapat Anda gunakan bergantung pada tipe data kolom, dan jenis database yang terhubung dengan entitas, seperti Amazon Redshift, Amazon Aurora, atau Amazon DynamoDB.
Operator kondisi berikut dapat digunakan dengan semua layanan database:
+ `=`dan`!=`: Tersedia untuk semua tipe data (tidak termasuk kolom kunci primer).
+ `<=`,`>=`,`<`, dan`>=`: Hanya tersedia untuk kolom numerik.
+ `IS NULL`dan`IS NOT NULL`: Digunakan untuk mencocokkan kolom yang memiliki nilai nol atau kosong. Nilai nol sering ditafsirkan secara berbeda di setiap database, namun di App Studio, `NULL` operator mencocokkan dan mengembalikan catatan yang memiliki nilai nol dalam tabel database yang terhubung.
Operator kondisi berikut hanya dapat digunakan dalam entitas yang terhubung ke layanan database yang mendukungnya:
+ `LIKE`dan `NOT LIKE` (Redshift, Aurora): Digunakan untuk melakukan kueri berbasis pola di database yang terhubung. `LIKE`Operator menyediakan fleksibilitas dalam fungsionalitas pencarian karena menemukan dan mengembalikan catatan yang sesuai dengan pola yang ditentukan. Anda menentukan pola menggunakan karakter wildcard yang cocok dengan karakter atau urutan karakter apa pun dalam pola. Setiap sistem manajemen database memiliki satu set karakter wildcard yang unik, tetapi dua yang paling populer adalah `%` untuk mewakili sejumlah karakter (termasuk 0), dan `_` untuk mewakili satu karakter.
+ `Contains`dan `Not Contains` (DynamoDB): Digunakan untuk melakukan pencarian peka huruf besar/kecil untuk menentukan apakah teks yang diberikan ditemukan dalam nilai kolom.
+ `Starts With`dan `Not Starts With` (DynamoDB): Digunakan untuk melakukan pencarian peka huruf besar/kecil untuk menentukan apakah teks yang diberikan ditemukan di awal nilai kolom.
### Kondisi dukungan operator oleh database
Tabel berikut menunjukkan operator kondisi tindakan data yang didukung oleh setiap database yang dapat terhubung ke App Studio.
| | =, \$1=, <, >, <=, >= | SEPERTI, TIDAK SUKA | Berisi, Tidak Berisi | Dimulai dengan, bukan dimulai dengan | ADALAH NULL, BUKAN NULL |
| --- | --- | --- | --- | --- | --- |
| **DynamoDB** | Ya | Tidak | Ya | Ya | Ya |
| **Aurora** | Ya | Ya | Tidak | Tidak | Ya |
| **Pergeseran Merah** | Ya | Ya | Tidak | Tidak | Ya |
### Contoh kondisi tindakan data
Pertimbangkan tabel database berikut, yang mencakup beberapa item dengan`name`,`city`, dan `hireDate` bidang.
| name | kota | HireDate |
| --- | --- | --- |
| Adam | Seattle | 2025-03-01 |
| Adrienne | Boston | 2025-03-05 |
| Bob | Albuquerque | 2025-03-06 |
| Carlos | Chicago | 2025-03-10 |
| Caroline | NULL | 2025-03-12 |
| Rita | Miami | 2025-03-15 |
Sekarang, pertimbangkan untuk membuat tindakan data di App Studio yang menampilkan `name` bidang untuk item yang cocok dengan kondisi tertentu. Daftar berikut berisi contoh kondisi dan nilai-nilai yang dikembalikan tabel untuk masing-masing.
**catatan**
Contoh diformat sebagai contoh SQL — mereka mungkin tidak muncul seperti yang mereka lakukan di App Studio, tetapi digunakan untuk menggambarkan perilaku operator.
+ `WHERE name LIKE 'Adam'`: Pengembalian`Adam`.
+ `WHERE name LIKE 'A%'`: Pengembalian `Adam` dan`Adrienne`.
+ `WHERE name NOT LIKE 'B_B'`: Pengembalian `Adam``Adrienne`,,`Carlos`,`Caroline`, dan`Rita`.
+ `WHERE contains(name, 'ita')`: Pengembalian`Rita`.
+ `WHERE begins_with(name, 'Car')`: Pengembalian `Carlos` dan`Caroline`.
+ `WHERE city IS NULL`: Pengembalian`Caroline`.
+ `WHERE hireDate < "2025-03-06"`: Pengembalian `Adam` dan`Adrienne`.
+ `WHERE hireDate >= DateTime.now().toISODate()`: Perhatikan bahwa `DateTime.now().toISODate()` mengembalikan tanggal saat ini. Dalam skenario di mana tanggal saat ini adalah 2025-03-10, ekspresi kembali`Carlos`,, dan. `Caroline` `Rita`
**Tip**
Untuk informasi selengkapnya tentang membandingkan tanggal dan waktu dalam ekspresi, lihat[Tanggal dan waktu](expressions.md#expressions-date-time).
## Menghapus tindakan data
Gunakan prosedur berikut untuk menghapus tindakan data dari entitas App Studio.
1. Jika perlu, navigasikan ke entitas yang ingin Anda hapus tindakan datanya.
1. Pilih tab **Tindakan data**.
1. **Untuk setiap tindakan data yang ingin Anda hapus, pilih menu tarik-turun di sebelah **Edit** dan pilih Hapus.**
1. Pilih **Konfirmasi** di kotak dialog.
# Menambahkan atau menghapus data sampel
Anda dapat menambahkan data sampel ke entitas dalam aplikasi App Studio. Karena aplikasi tidak berkomunikasi dengan layanan eksternal hingga dipublikasikan, data sampel dapat digunakan untuk menguji aplikasi dan entitas Anda di lingkungan pratinjau.
1. Jika perlu, navigasikan ke entitas yang ingin Anda edit.
1. Pilih tab **Data sampel**.
1. Untuk menghasilkan data sampel, pilih **Hasilkan lebih banyak data sampel**.
1. Untuk menghapus data sampel, pilih kotak centang data yang ingin Anda hapus, lalu tekan tombol Hapus atau Backspace. Pilih **Simpan** untuk menyimpan perubahan.
# Menambahkan atau mengedit sumber data yang terhubung dan bidang peta
**Tip**
Anda dapat menekan CTRL\$1Z untuk membatalkan perubahan terbaru pada entitas Anda.
1. Jika perlu, navigasikan ke entitas yang ingin Anda edit.
1. Pilih tab **Connection** untuk melihat atau mengelola koneksi antara entitas dan tabel sumber data tempat data disimpan saat aplikasi Anda dipublikasikan. Setelah tabel sumber data terhubung, Anda dapat memetakan bidang entitas ke kolom tabel.
1. Di **Connector**, pilih konektor yang berisi koneksi ke tabel sumber data yang diinginkan. Untuk informasi lebih lanjut tentang konektor, lihat[Connect App Studio ke layanan lain dengan konektor](connectors.md).
1. Dalam **Tabel**, pilih tabel yang ingin Anda gunakan sebagai sumber data untuk entitas.
1. Tabel menunjukkan bidang entitas, dan kolom sumber data yang dipetakan. Pilih **Peta otomatis** untuk secara otomatis memetakan bidang entitas Anda dengan kolom sumber data Anda. Anda juga dapat memetakan bidang secara manual dalam tabel dengan memilih kolom sumber data di dropdown untuk setiap bidang entitas.
# Menghapus entitas
Gunakan prosedur berikut untuk menghapus entitas dari aplikasi App Studio.
**catatan**
Menghapus entitas dari aplikasi App Studio tidak akan menghapus tabel sumber data yang terhubung, termasuk tabel DynamoDB terkait entitas terkelola. Tabel sumber data akan tetap berada di AWS akun terkait dan perlu dihapus dari layanan yang sesuai jika diinginkan.
**Untuk menghapus entitas**
1. Jika perlu, navigasikan ke aplikasi Anda.
1. Pilih tab **Data**.
1. **Di menu **Entitas** sebelah kiri, pilih menu elips di sebelah entitas yang ingin Anda hapus dan pilih Hapus.**
1. Tinjau informasi di kotak dialog, masukkan **confirm** dan pilih **Hapus** untuk menghapus entitas.
# Entitas data terkelola di AWS App Studio
Biasanya, Anda mengonfigurasi entitas di App Studio dengan sambungan ke tabel database eksternal, dan Anda harus membuat dan memetakan setiap bidang entitas dengan kolom di tabel database yang terhubung. Saat Anda membuat perubahan pada model data, tabel database eksternal dan entitas harus diperbarui, dan bidang yang diubah harus dipetakan ulang. Meskipun metode ini fleksibel dan memungkinkan penggunaan berbagai jenis sumber data, dibutuhkan lebih banyak perencanaan awal dan pemeliharaan berkelanjutan.
*Entitas terkelola* adalah jenis entitas yang App Studio mengelola seluruh proses penyimpanan dan konfigurasi data untuk Anda. Saat Anda membuat entitas terkelola, tabel DynamoDB yang sesuai dibuat di akun terkait. AWS Ini memastikan manajemen data yang aman dan transparan di dalamnya AWS. Dengan entitas terkelola, Anda mengonfigurasi skema entitas di App Studio, dan tabel DynamoDB terkait juga diperbarui secara otomatis.
## Menggunakan entitas terkelola dalam beberapa aplikasi
Setelah Anda membuat entitas terkelola di aplikasi App Studio, entitas tersebut dapat digunakan di aplikasi App Studio lainnya. Ini berguna untuk mengonfigurasi penyimpanan data untuk aplikasi dengan model dan skema data yang identik dengan menyediakan satu sumber daya dasar untuk dipelihara.
Saat menggunakan entitas terkelola dalam beberapa aplikasi, semua pembaruan skema ke tabel DynamoDB yang sesuai harus dibuat menggunakan aplikasi asli tempat entitas terkelola dibuat. Setiap perubahan skema yang dibuat untuk entitas dalam aplikasi lain tidak akan memperbarui tabel DynamoDB yang sesuai.
## Batasan entitas yang dikelola
**Pembatasan pembaruan kunci primer**: Anda tidak dapat mengubah nama atau jenis kunci utama entitas setelah dibuat, karena ini adalah perubahan destruktif di DynamoDB, dan akan mengakibatkan hilangnya data yang ada.
**Mengganti nama kolom**: Ketika Anda mengganti nama kolom di DynamoDB, Anda benar-benar membuat kolom baru sementara kolom asli tetap dengan data asli. Data asli tidak secara otomatis disalin ke kolom baru atau dihapus dari kolom asli. Anda dapat mengganti nama bidang entitas terkelola, yang dikenal sebagai *nama sistem*, tetapi Anda akan kehilangan akses ke kolom asli dan datanya. Tidak ada batasan dengan mengganti nama nama tampilan.
**Mengubah tipe data**: Meskipun DynamoDB memungkinkan fleksibilitas untuk memodifikasi tipe data kolom setelah pembuatan tabel, perubahan tersebut dapat sangat memengaruhi data yang ada serta logika dan akurasi kueri. Perubahan tipe data memerlukan transformasi semua data yang ada agar sesuai dengan format baru, yang kompleks untuk tabel besar dan aktif. Selain itu, tindakan data dapat mengembalikan hasil yang tidak terduga hingga migrasi data selesai. Anda dapat mengganti tipe data bidang, tetapi data yang ada tidak akan dimigrasikan ke tipe data baru.
**Sorting Kolom**: DynamoDB memungkinkan pengambilan data yang diurutkan melalui Sort Keys. Sort Keys harus didefinisikan sebagai bagian dari Composite Primary Keys bersama dengan Partition Key. Batasan termasuk Kunci Sortir wajib, pengurutan terbatas dalam satu partisi, dan tidak ada penyortiran global di seluruh partisi. Pemodelan data yang cermat dari Sort Keys diperlukan untuk menghindari partisi panas. Kami tidak akan mendukung Sorting for Preview milestone.
**Bergabung: Gabungan** tidak didukung di DynamoDB. Tabel didenormalisasi dengan desain untuk menghindari operasi gabungan yang mahal. Untuk memodelkan one-to-many hubungan, tabel anak berisi atribut yang mereferensikan kunci utama tabel induk. Kueri data multi-tabel melibatkan mencari item dari tabel induk untuk mengambil detail. Kami tidak akan mendukung Gabungan asli untuk entitas Terkelola sebagai bagian dari tonggak Pratinjau. Sebagai solusinya, kami akan memperkenalkan langkah otomatisasi yang dapat melakukan penggabungan data dari 2 entitas. Ini akan sangat mirip dengan pencarian satu tingkat. Kami tidak akan mendukung Sorting for Preview milestone.
**Env Stage**: Kami akan mengizinkan penerbitan untuk menguji tetapi menggunakan toko terkelola yang sama di kedua lingkungan
# Parameter halaman dan otomatisasi
Parameter adalah fitur canggih di AWS App Studio yang digunakan untuk meneruskan nilai dinamis antara berbagai komponen, halaman, dan otomatisasi dalam aplikasi Anda. Dengan menggunakan parameter, Anda dapat membuat pengalaman yang fleksibel dan sadar konteks, membuat aplikasi Anda lebih responsif dan dipersonalisasi. Artikel ini mencakup dua jenis parameter: parameter halaman dan parameter otomatisasi.
**Topics**
+ [Parameter halaman](parameters-page.md)
+ [Parameter otomatisasi](parameters-automation.md)
# Parameter halaman
Parameter halaman adalah cara untuk mengirim informasi antar halaman dan sering digunakan saat menavigasi dari satu halaman ke halaman lain dalam aplikasi App Studio untuk mempertahankan konteks atau meneruskan data. Parameter halaman biasanya terdiri dari nama dan nilai.
## Kasus penggunaan parameter halaman
Parameter halaman digunakan untuk meneruskan data antara halaman dan komponen yang berbeda dalam aplikasi App Studio Anda. Mereka sangat membantu untuk kasus penggunaan berikut:
1. **Pencarian dan pemfilteran**: Saat pengguna menelusuri di beranda aplikasi Anda, istilah penelusuran dapat diteruskan sebagai parameter ke halaman hasil, sehingga hanya menampilkan item yang difilter yang relevan. Misalnya, jika pengguna mencari*noise-cancelling headphones*, parameter dengan nilai *noise-cancelling headphones* dapat diteruskan ke halaman daftar produk.
1. **Melihat detail item**: Jika pengguna mengklik daftar, seperti produk, pengenal unik item tersebut dapat diteruskan sebagai parameter ke halaman detail. Ini memungkinkan halaman detail untuk menampilkan semua informasi tentang item tertentu. Misalnya, ketika pengguna mengklik produk headphone, ID unik produk diteruskan sebagai parameter ke halaman detail produk.
1. **Melewati konteks pengguna dalam navigasi halaman**: Saat pengguna menavigasi antar halaman, parameter dapat meneruskan konteks penting, seperti lokasi pengguna, kategori produk pilihan, konten keranjang belanja, dan pengaturan lainnya. Misalnya, saat pengguna menelusuri kategori produk yang berbeda di aplikasi Anda, lokasi dan kategori pilihan mereka dipertahankan sebagai parameter, memberikan pengalaman yang dipersonalisasi dan konsisten.
1. **Tautan dalam**: Gunakan parameter halaman untuk membagikan atau menandai tautan ke halaman tertentu di dalam aplikasi.
1. **Tindakan data**: Anda dapat membuat tindakan data yang menerima nilai parameter untuk memfilter dan menanyakan sumber data Anda berdasarkan parameter yang diteruskan. Misalnya, pada halaman daftar produk, Anda dapat membuat tindakan data yang menerima `category` parameter untuk mengambil produk yang relevan.
## Pertimbangan keamanan parameter halaman
Meskipun parameter halaman menyediakan cara yang ampuh untuk meneruskan data antar halaman, Anda harus menggunakannya dengan hati-hati, karena mereka berpotensi mengekspos informasi sensitif jika tidak digunakan dengan benar. Berikut adalah pertimbangan keamanan penting yang perlu diingat:
1. **Hindari mengekspos data sensitif di URLs**
1. **Risiko**: URLs, termasuk parameter tindakan data, sering terlihat di log server, riwayat browser, dan tempat lain. Karena itu, penting untuk menghindari mengekspos data sensitif, seperti kredensi pengguna, informasi identitas pribadi (PII), atau data rahasia lainnya, dalam nilai parameter halaman.
1. **Mitigasi**: Pertimbangkan untuk menggunakan pengidentifikasi yang dapat dipetakan dengan aman ke data sensitif. Misalnya, alih-alih meneruskan nama pengguna atau alamat email sebagai parameter, Anda dapat meneruskan pengenal unik acak yang dapat digunakan untuk mengambil nama atau email pengguna.
# Parameter otomatisasi
Parameter otomatisasi adalah fitur canggih di App Studio yang dapat digunakan untuk membuat otomatisasi yang fleksibel dan dapat digunakan kembali dengan meneruskan nilai dinamis dari berbagai sumber, seperti UI, otomatisasi lain, atau tindakan data. Mereka bertindak sebagai placeholder yang diganti dengan nilai aktual ketika otomatisasi dijalankan, memungkinkan Anda untuk menggunakan otomatisasi yang sama dengan input yang berbeda setiap kali.
Dalam otomatisasi, parameter memiliki nama unik, dan Anda dapat mereferensikan nilai parameter menggunakan variabel params diikuti dengan nama parameter, misalnya,`{{params.customerId}}`.
Artikel ini memberikan pemahaman mendalam tentang parameter otomatisasi, termasuk konsep dasar, penggunaan, dan praktik terbaiknya.
## Manfaat parameter otomatisasi
Parameter otomatisasi memberikan beberapa manfaat, termasuk daftar berikut:
1. **Reusability**: Dengan menggunakan parameter, Anda dapat membuat otomatisasi yang dapat digunakan kembali yang dapat disesuaikan dengan nilai input yang berbeda, memungkinkan Anda untuk menggunakan kembali logika otomatisasi yang sama dengan input yang berbeda.
1. **Fleksibilitas**: Alih-alih nilai hard-coding ke dalam otomatisasi, Anda dapat menentukan parameter dan memberikan nilai yang berbeda bila diperlukan, membuat otomatisasi Anda lebih dinamis dan mudah beradaptasi.
1. **Pemisahan kekhawatiran**: Parameter membantu memisahkan logika otomatisasi dari nilai-nilai spesifik yang digunakan, mempromosikan organisasi kode dan pemeliharaan.
1. **Validasi**: Setiap parameter memiliki tipe data, seperti string, nomor, atau boolean, yang divalidasi saat runtime. Ini memastikan bahwa permintaan dengan tipe data yang salah ditolak tanpa perlu kode validasi kustom.
1. **Parameter opsional dan wajib**: Anda dapat menetapkan parameter otomatisasi sebagai opsional atau wajib. Parameter yang diperlukan harus disediakan saat menjalankan otomatisasi, sedangkan parameter opsional dapat memiliki nilai default atau dihilangkan. Fleksibilitas ini memungkinkan Anda membuat otomatisasi yang lebih serbaguna yang dapat menangani skenario berbeda berdasarkan parameter yang disediakan.
## Skenario dan kasus penggunaan
### Skenario: Mengambil detail produk
Bayangkan Anda memiliki otomatisasi yang mengambil detail produk dari database berdasarkan ID produk. Otomatisasi ini dapat memiliki parameter yang disebut`productId`.
`productId`Parameter bertindak sebagai placeholder yang dapat Anda isi dengan nilai ID produk aktual saat menjalankan otomatisasi. Alih-alih hard-coding ID produk tertentu ke dalam otomatisasi, Anda dapat menentukan `productId` parameter dan meneruskan nilai ID produk yang berbeda setiap kali Anda menjalankan otomatisasi.
Anda dapat memanggil otomatisasi ini dari sumber data komponen, meneruskan ID produk yang dipilih sebagai `productId` parameter menggunakan sintaks braket kurawal ganda:. `{{ui.productsTable.selectedRow.id}}` Dengan cara ini, ketika pengguna memilih produk dari tabel (`ui.productsTable`), otomatisasi akan mengambil detail untuk produk yang dipilih dengan meneruskan id dari baris yang dipilih sebagai parameter. `productId`
Atau, Anda dapat menjalankan otomatisasi ini dari otomatisasi lain yang mengulang daftar produk dan mengambil detail untuk setiap produk dengan meneruskan id produk sebagai parameter. `productId` Dalam skenario ini, nilai `productId` parameter akan diberikan secara dinamis dari `{{product.id}}` ekspresi di setiap iterasi loop.
Dengan menggunakan `productId` parameter dan sintaks braket keriting ganda, Anda dapat membuat otomatisasi ini lebih fleksibel dan dapat digunakan kembali. Alih-alih membuat otomatisasi terpisah untuk setiap produk, Anda dapat memiliki otomatisasi tunggal yang dapat mengambil detail untuk produk apa pun hanya dengan memberikan ID produk yang sesuai sebagai nilai parameter dari sumber yang berbeda, seperti komponen UI atau otomatisasi lainnya.
### Skenario: Menangani parameter opsional dengan nilai fallback
Mari pertimbangkan skenario di mana Anda memiliki entitas “Tugas” dengan kolom “Pemilik” yang diperlukan, tetapi Anda ingin bidang ini menjadi opsional dalam otomatisasi dan memberikan nilai fallback jika pemilik tidak dipilih.
1. Buat otomatisasi dengan parameter bernama `Owner` yang memetakan ke `Owner` bidang `Task` entitas.
1. Karena `Owner` bidang diperlukan dalam entitas, `Owner` parameter akan disinkronkan dengan pengaturan yang diperlukan.
1. Untuk membuat `Owner` parameter opsional dalam otomatisasi, matikan `required` pengaturan untuk parameter ini.
1. Dalam logika otomatisasi Anda, Anda dapat menggunakan ekspresi seperti`{{params.Owner || currentUser.userId}}`. Ekspresi ini memeriksa apakah `Owner` parameter disediakan. Jika tidak disediakan, itu akan mundur ke ID pengguna saat ini sebagai pemilik.
1. Dengan cara ini, jika pengguna tidak memilih pemilik dalam bentuk atau komponen, otomatisasi akan secara otomatis menetapkan pengguna saat ini sebagai pemilik untuk tugas tersebut.
Dengan mengaktifkan `required` pengaturan untuk `Owner` parameter dan menggunakan ekspresi fallback, Anda dapat memisahkannya dari persyaratan bidang entitas, menjadikannya opsional dalam otomatisasi, dan memberikan nilai default saat parameter tidak disediakan.
## Mendefinisikan jenis parameter otomatisasi
Dengan menggunakan tipe parameter untuk menentukan tipe data dan menetapkan persyaratan, Anda dapat mengontrol input untuk otomatisasi Anda. Ini membantu memastikan otomatisasi Anda berjalan dengan andal dengan input yang diharapkan.
### Menyinkronkan tipe dari entitas
Menyinkronkan tipe dan persyaratan parameter secara dinamis dari definisi bidang entitas menyederhanakan otomatisasi bangunan yang berinteraksi dengan data entitas, memastikan bahwa parameter selalu mencerminkan jenis dan persyaratan bidang entitas terbaru.
Prosedur berikut merinci langkah-langkah umum untuk menyinkronkan tipe parameter dari entitas:
1. Buat entitas dengan bidang yang diketik (misalnya Boolean, Number, dll.) Dan tandai bidang sesuai kebutuhan.
1. Buat otomatisasi baru.
1. Tambahkan parameter ke otomatisasi, dan saat memilih **Jenis**, pilih bidang entitas yang ingin Anda sinkronkan. Tipe data dan pengaturan yang diperlukan akan secara otomatis menyinkronkan dari bidang entitas yang dipetakan
1. Jika diperlukan, Anda dapat mengganti pengaturan “wajib” dengan mengaktifkannya on/off untuk setiap parameter. Ini berarti status yang diperlukan tidak akan disinkronkan dengan bidang entitas, tetapi jika tidak, status tersebut akan tetap disinkronkan.
### Mendefinisikan tipe secara manual
Anda juga dapat menentukan jenis parameter secara manual tanpa menyinkronkan dari entitas
Dengan mendefinisikan jenis parameter kustom, Anda dapat membuat otomatisasi yang menerima jenis input tertentu dan menangani parameter opsional atau wajib sesuai kebutuhan, tanpa bergantung pada pemetaan bidang entitas.
1. Buat entitas dengan bidang yang diketik (misalnya Boolean, Number, dll.) Dan tandai bidang sesuai kebutuhan.
1. Buat otomatisasi baru.
1. Tambahkan parameter ke otomatisasi, dan saat memilih **Jenis**, pilih jenis yang diinginkan.
## Mengkonfigurasi nilai dinamis untuk diteruskan ke parameter otomatisasi
Setelah Anda menentukan parameter untuk otomatisasi, Anda dapat meneruskan nilai kepada mereka saat menjalankan otomatisasi. Anda dapat meneruskan nilai parameter dengan dua cara:
1. **Pemicu komponen**: Jika Anda menjalankan otomatisasi dari pemicu komponen, seperti klik tombol, Anda dapat menggunakan JavaScript ekspresi untuk meneruskan nilai dari konteks komponen. Misalnya, jika Anda memiliki kolom input teks bernama`emailInput`, Anda dapat meneruskan nilainya ke parameter email dengan ekspresi berikut:`ui.emailInput.value`.
1. **Otomatisasi lain**: Jika Anda menjalankan otomatisasi dari otomatisasi lain, Anda dapat menggunakan JavaScript ekspresi untuk meneruskan nilai dari konteks otomatisasi. Misalnya, Anda dapat melewatkan nilai parameter lain atau hasil dari langkah tindakan sebelumnya.
## Jenis keamanan
Dengan mendefinisikan parameter dengan tipe data tertentu, seperti String, Number, atau Boolean, Anda dapat memastikan bahwa nilai yang diteruskan ke otomatisasi Anda adalah tipe yang diharapkan.
**catatan**
Di App Studio, tanggal adalah tanggal string ISO, dan tanggal tersebut akan divalidasi juga.
Keamanan tipe ini membantu mencegah ketidakcocokan tipe, yang dapat menyebabkan kesalahan atau perilaku tak terduga dalam logika otomatisasi Anda. Misalnya, jika Anda mendefinisikan parameter sebagai a`Number`, Anda dapat yakin bahwa nilai apa pun yang diteruskan ke parameter itu akan menjadi angka, dan Anda tidak perlu melakukan pemeriksaan atau konversi tipe tambahan dalam otomatisasi Anda.
## Validasi
Anda dapat menambahkan aturan validasi ke parameter Anda, memastikan bahwa nilai yang diteruskan ke otomatisasi Anda memenuhi kriteria tertentu.
Meskipun App Studio tidak menyediakan setelan validasi bawaan untuk parameter, Anda dapat menerapkan validasi kustom dengan menambahkan JavaScript tindakan ke otomatisasi yang menimbulkan kesalahan jika batasan tertentu dilanggar.
Untuk bidang entitas, subset aturan validasi, seperti minimum/maximum nilai, didukung. Namun, itu tidak divalidasi pada tingkat otomatisasi, hanya pada lapisan data, saat menjalankan tindakan Create/Update/Delete Rekam.
## Praktik terbaik untuk parameter otomatisasi
Untuk memastikan bahwa parameter otomatisasi Anda dirancang dengan baik, dapat dipelihara, dan mudah digunakan, ikuti praktik terbaik berikut:
1. **Gunakan nama parameter deskriptif**: Pilih nama parameter yang dengan jelas menggambarkan tujuan atau konteks parameter.
1. **Berikan deskripsi parameter**: Manfaatkan bidang **Deskripsi** saat menentukan parameter untuk menjelaskan tujuan, kendala, dan harapannya. Deskripsi ini akan muncul di JSDoc komentar saat mereferensikan parameter, serta di antarmuka pengguna mana pun di mana pengguna perlu memberikan nilai untuk parameter saat menjalankan otomatisasi.
1. **Gunakan tipe data yang sesuai**: Pertimbangkan dengan cermat tipe data setiap parameter berdasarkan nilai input yang diharapkan, misalnya: String, Number, Boolean, Object.
1. **Validasi nilai parameter**: Terapkan pemeriksaan validasi yang sesuai dalam otomatisasi Anda untuk memastikan bahwa nilai parameter memenuhi persyaratan tertentu sebelum melanjutkan dengan tindakan lebih lanjut.
1. **Gunakan nilai fallback atau default**: Meskipun App Studio saat ini tidak mendukung pengaturan nilai default untuk parameter, Anda dapat menerapkan nilai fallback atau default saat menggunakan parameter dalam logika otomatisasi Anda. Misalnya, Anda dapat menggunakan ekspresi seperti `{{ params.param1 || "default value" }}` untuk memberikan nilai default jika `param1` parameter tidak disediakan atau memiliki nilai palsu.
1. **Pertahankan konsistensi parameter**: Jika Anda memiliki beberapa otomatisasi yang memerlukan parameter serupa, cobalah untuk menjaga konsistensi dalam nama parameter dan tipe data di seluruh otomatisasi tersebut.
1. **Penggunaan parameter dokumen**: Pertahankan dokumentasi yang jelas untuk otomatisasi Anda, termasuk deskripsi setiap parameter, tujuannya, nilai yang diharapkan, dan contoh atau kasus tepi yang relevan.
1. **Tinjau dan refactor sesering mungkin**: Tinjau otomatisasi dan parameternya secara berkala, refactoring atau konsolidasi parameter sesuai kebutuhan untuk meningkatkan kejelasan, pemeliharaan, dan penggunaan kembali.
1. **Batasi jumlah parameter**: Meskipun parameter memberikan fleksibilitas, terlalu banyak parameter dapat membuat otomatisasi menjadi rumit dan sulit digunakan. Bertujuan untuk mencapai keseimbangan antara fleksibilitas dan kesederhanaan dengan membatasi jumlah parameter hanya untuk apa yang diperlukan.
1. **Pertimbangkan pengelompokan parameter**: Jika Anda menemukan diri Anda mendefinisikan beberapa parameter terkait, pertimbangkan untuk mengelompokkannya menjadi satu parameter. *Object*
1. **Kekhawatiran terpisah**: Hindari menggunakan satu parameter untuk berbagai tujuan atau menggabungkan nilai yang tidak terkait menjadi satu parameter. Setiap parameter harus mewakili perhatian atau potongan data yang berbeda.
1. **Gunakan alias parameter**: Jika Anda memiliki parameter dengan nama panjang atau kompleks, pertimbangkan untuk menggunakan alias atau versi singkatan dalam logika otomatisasi untuk keterbacaan dan pemeliharaan yang lebih baik.
Dengan mengikuti praktik terbaik ini, Anda dapat memastikan bahwa parameter otomatisasi Anda dirancang dengan baik, dapat dipelihara, dan mudah digunakan, yang pada akhirnya meningkatkan kualitas dan efisiensi otomatisasi Anda secara keseluruhan.
# Menggunakan JavaScript untuk menulis ekspresi di App Studio
Di AWS App Studio, Anda dapat menggunakan JavaScript ekspresi untuk mengontrol perilaku dan tampilan aplikasi secara dinamis. JavaScript Ekspresi baris tunggal ditulis dalam kurung kurawal ganda`{{ }}`, dan dapat digunakan dalam berbagai konteks seperti otomatisasi, komponen UI, dan kueri data. Ekspresi ini dievaluasi saat runtime dan dapat digunakan untuk melakukan perhitungan, memanipulasi data, dan mengontrol logika aplikasi.
App Studio menyediakan dukungan native untuk tiga library JavaScript open source: Luxon, UUID, Lodash, serta integrasi SDK untuk mendeteksi kesalahan JavaScript sintaks dan pengecekan tipe dalam konfigurasi aplikasi Anda.
**penting**
App Studio tidak mendukung penggunaan JavaScript pustaka pihak ketiga atau kustom.
## Sintaks dasar
JavaScript ekspresi dapat mencakup variabel, literal, operator, dan panggilan fungsi. Ekspresi biasanya digunakan untuk melakukan perhitungan atau mengevaluasi kondisi.
Lihat contoh berikut:
+ `{{ 2 + 3 }}`akan mengevaluasi ke 5.
+ `{{ "Hello, " + "World!" }}`akan mengevaluasi untuk “Halo, Dunia\$1”.
+ `{{ Math.max(5, 10) }}`akan mengevaluasi hingga 10.
+ `{{ Math.random() * 10 }}`mengembalikan angka acak (dengan desimal) antara [0-10).
## Interpolasi
Anda juga dapat menggunakan JavaScript untuk menginterpolasi nilai dinamis dalam teks statis. Ini dicapai dengan melampirkan JavaScript ekspresi dalam kurung kurawal ganda, seperti contoh berikut:
```
Hello {{ currentUser.firstName }}, welcome to App Studio!
```
Dalam contoh ini, `currentUser.firstName` adalah JavaScript ekspresi yang mengambil nama depan pengguna saat ini, yang kemudian secara dinamis dimasukkan ke dalam pesan ucapan.
## Rangkaian
Anda dapat menggabungkan string dan variabel menggunakan `+` operator di JavaScript, seperti pada contoh berikut.
```
{{ currentRow.FirstName + " " + currentRow.LastName }}
```
Ekspresi ini menggabungkan nilai-nilai `currentRow.FirstName` dan `currentRow.LastName` dengan spasi di antaranya, menghasilkan nama lengkap dari baris saat ini. Misalnya, jika `currentRow.FirstName` is`John`, and `currentRow.LastName` is`Doe`, maka ekspresi akan memutuskan untuk`John Doe`.
## Tanggal dan waktu
JavaScript menyediakan berbagai fungsi dan objek untuk bekerja dengan tanggal dan waktu. Contoh:
+ `{{ new Date().toLocaleDateString() }}`: Mengembalikan tanggal saat ini dalam format lokal.
+ `{{ DateTime.now().toISODate() }}`: Mengembalikan tanggal saat ini dalam YYYY-MM-DD format, untuk digunakan dalam komponen Tanggal.
### Perbandingan tanggal dan waktu
Gunakan operator seperti`=`,,`>`,`<`,`>=`, atau `<=` untuk membandingkan nilai tanggal atau waktu. Contoh:
+ `{{ui.timeInput.value > "10:00 AM"}}`: Memeriksa apakah waktunya setelah pukul 10:00 pagi.
+ `{{ui.timeInput.value <= "5:00 PM"}}`: Memeriksa apakah waktunya pada atau sebelum pukul 17:00.
+ `{{ui.timeInput.value > DateTime.now().toISOTime()}}`: Memeriksa apakah waktunya setelah waktu saat ini.
+ `{{ui.dateInput.value > DateTime.now().toISODate()}}`: Memeriksa apakah tanggal sebelum tanggal saat ini.
+ `{{ DateTime.fromISO(ui.dateInput.value).diff(DateTime.now(), "days").days >= 5 }}`: Memeriksa apakah tanggalnya setidaknya 5 hari dari tanggal saat ini.
## Blok kode
Selain ekspresi, Anda juga dapat menulis blok JavaScript kode multi-baris. Tidak seperti ekspresi, blok kode tidak memerlukan kurawal kurawal. Sebagai gantinya, Anda dapat menulis JavaScript kode Anda langsung di dalam editor blok kode.
**catatan**
Sementara ekspresi dievaluasi dan nilainya ditampilkan, blok kode dijalankan, dan outputnya (jika ada) ditampilkan.
## Variabel dan fungsi global
App Studio menyediakan akses ke variabel dan fungsi global tertentu yang dapat digunakan dalam JavaScript ekspresi dan blok kode Anda. Misalnya, `currentUser` adalah variabel global yang mewakili pengguna yang saat ini masuk, dan Anda dapat mengakses properti seperti `currentUser.role` mengambil peran pengguna.
## Merujuk atau memperbarui nilai komponen UI
Anda dapat menggunakan ekspresi dalam komponen dan tindakan otomatisasi untuk mereferensikan dan memperbarui nilai komponen UI. Dengan mereferensikan dan memperbarui nilai komponen secara terprogram, Anda dapat membuat antarmuka pengguna dinamis dan interaktif yang merespons input pengguna dan perubahan data.
### Merujuk nilai komponen UI
Anda dapat membuat aplikasi interaktif dan berbasis data dengan menerapkan perilaku dinamis dengan mengakses nilai dari komponen UI.
Anda dapat mengakses nilai dan properti komponen UI pada halaman yang sama dengan menggunakan `ui` namespace dalam ekspresi. Dengan mereferensikan nama komponen, Anda dapat mengambil nilainya atau melakukan operasi berdasarkan statusnya.
**catatan**
`ui`Namespace hanya akan menampilkan komponen pada halaman saat ini, karena komponen dicakup ke halaman masing-masing.
Sintaks dasar untuk merujuk ke komponen dalam aplikasi App Studio adalah:`{{ui.componentName}}`.
Daftar berikut berisi contoh penggunaan `ui` namespace untuk mengakses nilai komponen UI:
+ `{{ui.textInputName.value}}`: Merupakan nilai komponen input teks bernama*textInputName*.
+ `{{ui.formName.isValid}}`: Periksa apakah semua bidang dalam formulir bernama *formName* valid berdasarkan kriteria validasi yang Anda berikan.
+ `{{ui.tableName.currentRow.columnName}}`: Merupakan nilai kolom tertentu di baris saat ini dari komponen tabel bernama*tableName*.
+ `{{ui.tableName.selectedRowData.fieldName}}`: Merupakan nilai bidang tertentu dari baris yang dipilih dalam komponen tabel bernama*tableName*. Anda kemudian dapat menambahkan nama bidang seperti `ID` (`{{ui.tableName.selectedRowData.ID}}`) untuk mereferensikan nilai bidang itu dari baris yang dipilih.
Daftar berikut berisi contoh yang lebih spesifik dari referensi nilai komponen:
+ `{{ui.inputText1.value.trim().length > 0}}`: Periksa apakah nilai *inputText1* komponen, setelah memotong spasi putih depan atau belakang, memiliki string yang tidak kosong. Ini dapat berguna untuk memvalidasi input pengguna atau komponen enabling/disabling lain berdasarkan nilai bidang teks input.
+ `{{ui.multiSelect1.value.join(", ")}}`: Untuk komponen multi-pilih bernama*multiSelect1*, ekspresi ini mengubah array nilai opsi yang dipilih menjadi string yang dipisahkan koma. Ini dapat membantu untuk menampilkan opsi yang dipilih dalam format yang mudah digunakan atau meneruskan pilihan ke komponen atau otomatisasi lain.
+ `{{ui.multiSelect1.value.includes("option1")}}`: Ekspresi ini memeriksa *option1* apakah nilai disertakan dalam array opsi yang dipilih untuk *multiSelect1* komponen. Ia mengembalikan true jika *option1* dipilih, dan false sebaliknya. Ini dapat berguna untuk merender komponen secara kondisional atau mengambil tindakan berdasarkan pilihan opsi tertentu.
+ `{{ui.s3Upload1.files.length > 0}}`: Untuk komponen unggahan file Amazon S3 bernama*s3Upload1*, ekspresi ini memeriksa apakah ada file yang telah diunggah dengan memeriksa panjang array file. Ini dapat berguna untuk komponen atau tindakan enabling/disabling lain berdasarkan apakah file telah diunggah.
+ `{{ui.s3Upload1.files.filter(file => file.type === "image/png").length}}`: Ekspresi ini menyaring daftar file yang diunggah dalam *s3Upload1* komponen untuk hanya menyertakan file gambar PNG, dan mengembalikan jumlah file tersebut. Ini dapat membantu untuk memvalidasi atau menampilkan informasi tentang jenis file yang diunggah.
### Memperbarui nilai komponen UI
Untuk memperbarui atau memanipulasi nilai komponen, gunakan `RunComponentAction` dalam otomatisasi. Berikut adalah contoh sintaks yang dapat Anda gunakan untuk memperbarui nilai komponen input teks bernama *myInput* menggunakan `RunComponentAction` tindakan:
```
RunComponentAction(ui.myInput, "setValue", "New Value")
```
Dalam contoh ini, `RunComponentAction` langkah memanggil `setValue` tindakan pada *myInput* komponen, meneruskan nilai baru,*New Value*.
## Bekerja dengan data tabel
Anda dapat mengakses data tabel dan nilai untuk melakukan operasi. Anda dapat menggunakan ekspresi berikut untuk mengakses data tabel:
+ `currentRow`: Digunakan untuk mengakses data tabel dari baris saat ini dalam tabel. Misalnya, menyetel nama tindakan tabel, mengirimkan nilai dari baris ke otomatisasi yang dimulai dari tindakan, atau menggunakan nilai dari kolom yang ada dalam tabel untuk membuat kolom baru.
+ `ui.tableName.selectedRow`dan `ui.tableName.selectedRowData` keduanya digunakan untuk mengakses data tabel dari komponen lain pada halaman. Misalnya, mengatur nama tombol di luar tabel berdasarkan baris yang dipilih. Nilai yang dikembalikan adalah sama, tetapi perbedaan antara `selectedRow` dan `selectedRowData` adalah sebagai berikut:
+ `selectedRow`: Namespace ini menyertakan nama yang ditampilkan di header kolom untuk setiap bidang. Anda harus menggunakan `selectedRow` saat mereferensikan nilai dari kolom yang terlihat di tabel. Misalnya, jika Anda memiliki kolom kustom atau dihitung dalam tabel yang tidak ada sebagai bidang dalam entitas.
+ `selectedRowData`: Namespace ini mencakup bidang dalam entitas yang digunakan sebagai sumber untuk tabel. Anda harus menggunakan `selectedRowData` untuk mereferensikan nilai dari entitas yang tidak terlihat dalam tabel, tetapi berguna untuk komponen atau otomatisasi lain di aplikasi Anda.
Daftar berikut berisi contoh mengakses data tabel dalam ekspresi:
+ `{{ui.tableName.selectedRow.columnNameWithNoSpace}}`: Mengembalikan nilai *columnNameWithNoSpace* kolom dari baris yang dipilih dalam tabel.
+ `{{ui.tableName.selectedRow.['Column Name With Space']}}`: Mengembalikan nilai *Column Name With Space* kolom dari baris yang dipilih dalam tabel.
+ `{{ui.tableName.selectedRowData.fieldName}}`: Mengembalikan nilai bidang *fieldName* entitas dari baris yang dipilih dalam tabel.
+ `{{ui.tableName.selectedRows[0].columnMappingName}}`: Referensi nama kolom baris yang dipilih dari komponen atau ekspresi lain pada halaman yang sama.
+ `{{currentRow.firstName + ' ' + currentRow.lastNamecolumnMapping}}`: Menggabungkan nilai dari beberapa kolom untuk membuat kolom baru dalam tabel.
+ `{{ { "Blocked": "🔴", "Delayed": "🟡", "On track": "🟢" }[currentRow.statuscolumnMapping] + " " + currentRow.statuscolumnMapping}}`: Sesuaikan nilai tampilan bidang dalam tabel berdasarkan nilai status yang disimpan.
+ `{{currentRow.colName}}`,`{{currentRow["First Name"]}}`,`{{currentRow}}`, atau`{{ui.tableName.selectedRows[0]}}`: Lewati konteks baris yang direferensikan dalam tindakan baris.
## Mengakses otomatisasi
Anda dapat menggunakan otomatisasi untuk menjalankan logika dan operasi sisi server di App Studio. Dalam tindakan otomatisasi, Anda dapat menggunakan ekspresi untuk memproses data, menghasilkan nilai dinamis, dan menggabungkan hasil dari tindakan sebelumnya.
### Mengakses parameter otomatisasi
Anda dapat meneruskan nilai dinamis dari komponen UI dan otomatisasi lainnya ke dalam otomatisasi, membuatnya dapat digunakan kembali dan fleksibel. Ini dilakukan dengan menggunakan parameter otomatisasi dengan `params` namespace sebagai berikut:
`{{params.parameterName}}`: Referensi nilai yang diteruskan ke otomatisasi dari komponen UI atau sumber lain. Misalnya, `{{params.ID}}` akan mereferensikan parameter bernama*ID*.
#### Memanipulasi parameter otomatisasi
Anda dapat menggunakan JavaScript untuk memanipulasi parameter otomatisasi. Lihat contoh berikut:
+ `{{params.firstName}} {{params.lastName}}`: Menggabungkan nilai yang diteruskan sebagai parameter.
+ `{{params.numberParam1 + params.numberParam2}}`: Tambahkan dua parameter angka.
+ `{{params.valueProvided?.length > 0 ? params.valueProvided : 'Default'}}`: Periksa apakah parameter tidak nol atau tidak terdefinisi, dan memiliki panjang bukan nol. Jika benar, gunakan nilai yang disediakan; jika tidak, tetapkan nilai default.
+ `{{params.rootCause || "No root cause provided"}}`: Jika `params.rootCause` parameternya salah (null, undefined, atau string kosong), gunakan nilai default yang disediakan.
+ `{{Math.min(params.numberOfProducts, 100)}}`: Batasi nilai parameter ke nilai maksimum (dalam hal ini,`100`).
+ `{{ DateTime.fromISO(params.startDate).plus({ days: 7 }).toISO() }}`: Jika `params.startDate` parameternya`"2023-06-15T10:30:00.000Z"`, ekspresi ini akan dievaluasi`"2023-06-22T10:30:00.000Z"`, yang merupakan tanggal satu minggu setelah tanggal mulai.
### Mengakses hasil otomatisasi dari tindakan sebelumnya
Otomatisasi memungkinkan aplikasi untuk menjalankan logika sisi server dan operasi, seperti query database, berinteraksi dengan, atau melakukan transformasi data. APIs `results`Namespace menyediakan akses ke output dan data yang dikembalikan oleh tindakan sebelumnya dalam otomatisasi yang sama. Perhatikan poin-poin berikut tentang mengakses hasil otomatisasi:
1. Anda hanya dapat mengakses hasil dari langkah-langkah otomatisasi sebelumnya dalam otomatisasi yang sama.
1. Jika Anda memiliki tindakan bernama *action1* dan *action2* dalam urutan itu, *action1* tidak dapat mereferensikan hasil apa pun, dan hanya *action2* dapat mengakses`results.action1`.
1. Ini juga berfungsi dalam tindakan sisi klien. Misalnya, jika Anda memiliki tombol yang memicu otomatisasi menggunakan `InvokeAutomation` tindakan. Anda kemudian dapat memiliki langkah navigasi dengan `Run If` kondisi seperti menavigasi `results.myInvokeAutomation1.fileType === "pdf"` ke halaman dengan penampil PDF jika otomatisasi menunjukkan file tersebut adalah PDF.
Daftar berikut berisi sintaks untuk mengakses hasil otomatisasi dari tindakan sebelumnya menggunakan namespace. `results`
+ `{{results.stepName.data}}`: Ambil array data dari langkah otomatisasi bernama*stepName*.
+ `{{results.stepName.output}}`: Ambil output dari langkah otomatisasi bernama*stepName*.
Cara Anda mengakses hasil langkah otomatisasi tergantung pada jenis tindakan dan data yang dikembalikan. Tindakan yang berbeda dapat mengembalikan properti atau struktur data yang berbeda. Berikut adalah beberapa contoh umum:
+ Untuk tindakan data, Anda dapat mengakses array data yang dikembalikan menggunakan`results.stepName.data`.
+ Untuk tindakan panggilan API, Anda dapat mengakses badan respons menggunakan`results.stepName.body`.
+ Untuk tindakan Amazon S3, Anda dapat mengakses konten file menggunakan. `results.stepName.Body.transformToWebStream()`
Lihat dokumentasi untuk jenis tindakan tertentu yang Anda gunakan untuk memahami bentuk data yang mereka kembalikan dan cara mengaksesnya di dalam `results` namespace. Daftar berikut berisi beberapa contoh
+ `{{results.getDataStep.data.filter(row => row.status === "pending").length}}`: Dengan asumsi *getDataStep* adalah tindakan `Invoke Data Action` otomatisasi yang mengembalikan array baris data, ekspresi ini menyaring array data untuk memasukkan hanya baris di mana bidang status sama dengan`pending`, dan mengembalikan panjang (hitungan) dari array yang difilter. Hal ini dapat berguna untuk query atau pengolahan data berdasarkan kondisi tertentu.
+ `{{params.email.split("@")[0]}}`: Jika `params.email` parameter berisi alamat email, ekspresi ini membagi string pada simbol @ dan mengembalikan bagian sebelum simbol @, secara efektif mengekstrak bagian nama pengguna dari alamat email.
+ `{{new Date(params.timestamp * 1000)}}`: Ekspresi ini mengambil parameter timestamp Unix (`params.timestamp`) dan mengubahnya menjadi objek Date. JavaScript Ini mengasumsikan bahwa stempel waktu dalam hitungan detik, sehingga mengalikannya dengan 1000 untuk mengubahnya menjadi milidetik, yang merupakan format yang diharapkan oleh konstruktor. `Date` Ini dapat berguna untuk bekerja dengan nilai tanggal dan waktu dalam otomatisasi.
+ `{{results.stepName.Body}}`: Untuk tindakan `Amazon S3 GetObject` otomatisasi bernama*stepName*, ekspresi ini mengambil konten file, yang dapat dikonsumsi oleh komponen UI seperti **Image** atau **PDF Viewer** untuk menampilkan file yang diambil. Perhatikan bahwa ekspresi ini perlu dikonfigurasi dalam **keluaran Otomasi otomatisasi** untuk digunakan dalam komponen.
# Ketergantungan data dan pertimbangan waktu
Saat membuat aplikasi kompleks di App Studio, sangat penting untuk memahami dan mengelola dependensi data antara komponen data yang berbeda, seperti formulir, tampilan detail, dan komponen yang didukung otomatisasi. Komponen dan otomatisasi data mungkin tidak menyelesaikan pengambilan atau eksekusi data mereka pada saat yang sama, yang dapat menyebabkan masalah waktu, kesalahan, dan perilaku yang tidak terduga. Dengan mengetahui potensi masalah waktu dan mengikuti praktik terbaik, Anda dapat menciptakan pengalaman pengguna yang lebih andal dan konsisten di aplikasi App Studio.
Beberapa masalah potensial adalah sebagai berikut:
1. **Konflik waktu render:** Komponen data dapat dirender dalam urutan yang tidak selaras dengan dependensi datanya, berpotensi menyebabkan inkonsistensi atau kesalahan visual.
1. **Waktu pengoperasian otomatisasi:** Tugas otomatisasi dapat selesai sebelum komponen dimuat penuh, yang menyebabkan kesalahan eksekusi runtime.
1. **Komponen macet:** Komponen yang didukung oleh otomatisasi dapat mogok pada respons yang tidak valid atau ketika otomatisasi belum selesai berjalan.
## Contoh: Detail pesanan dan informasi pelanggan
Contoh ini menunjukkan bagaimana dependensi antara komponen data dapat menyebabkan masalah waktu dan potensi kesalahan dalam tampilan data.
Pertimbangkan aplikasi dengan dua komponen data berikut pada halaman yang sama:
+ Sebuah komponen Detail (`orderDetails`) yang mengambil data pesanan.
+ Komponen Detail (`customerDetails`) yang menampilkan detail pelanggan yang terkait dengan pesanan.
Dalam aplikasi ini, ada dua bidang dalam komponen `orderDetails` detail, dikonfigurasi dengan nilai-nilai berikut:
```
// 2 text fields within the orderDetails detail component
// Info from orderDetails Component
{{ui.orderDetails.data[0].name}}
// Info from customerDetails component
{{ui.customerDetails.data[0].name}} // Problematic reference
```
Dalam contoh ini, `orderDetails` komponen mencoba menampilkan nama pelanggan dengan mereferensikan data dari komponen. `customerDetails` Ini bermasalah, karena `orderDetails` komponen dapat dirender sebelum `customerDetails` komponen mengambil datanya. Jika pengambilan data `customerDetails` komponen tertunda atau gagal, `orderDetails` komponen akan menampilkan informasi yang tidak lengkap atau salah.
## Ketergantungan data dan praktik terbaik waktu
Gunakan praktik terbaik berikut untuk mengurangi masalah ketergantungan dan waktu data di aplikasi App Studio Anda:
1. **Gunakan rendering bersyarat:** Hanya merender komponen atau menampilkan data saat Anda mengonfirmasi bahwa itu tersedia. Gunakan pernyataan bersyarat untuk memeriksa keberadaan data sebelum menampilkannya. Cuplikan berikut menunjukkan contoh pernyataan bersyarat:
```
{{ui.someComponent.data ? ui.someComponent.data.fieldName : "Loading..."}}
```
1. **Kelola visibilitas komponen anak:** Untuk komponen seperti Stepflow, Formulir, atau Detail yang merender turunan sebelum datanya dimuat, setel visibilitas komponen turunan secara manual. Cuplikan berikut menunjukkan contoh pengaturan visibilitas berdasarkan ketersediaan data komponen induk:
```
{{ui.parentComponent.data ? true : false}}
```
1. **Gunakan kueri gabungan:** Jika memungkinkan, gunakan kueri gabungan untuk mengambil data terkait dalam satu kueri. Ini mengurangi jumlah pengambilan data terpisah dan meminimalkan masalah waktu antara komponen data.
1. **Terapkan penyerahan kesalahan dalam otomatisasi:** Terapkan penanganan kesalahan yang kuat di otomatisasi Anda untuk mengelola skenario dengan anggun di mana data yang diharapkan tidak tersedia atau respons yang tidak valid diterima.
1. **Gunakan rantai opsional:** Saat mengakses properti bersarang, gunakan rantai opsional untuk mencegah kesalahan jika properti induk tidak terdefinisi. Cuplikan berikut menunjukkan contoh rantai opsional:
```
{{ui.component.data?.[0]?.fieldSystemName}}
```
# Membangun aplikasi dengan banyak pengguna
Beberapa pengguna dapat bekerja pada satu aplikasi App Studio, namun hanya satu pengguna yang dapat mengedit aplikasi sekaligus. Lihat bagian berikut untuk informasi tentang mengundang pengguna lain untuk mengedit aplikasi, dan perilaku saat beberapa pengguna mencoba mengedit aplikasi secara bersamaan.
## Mengundang pembangun untuk mengedit aplikasi
Gunakan petunjuk berikut untuk mengundang pembangun lain untuk mengedit aplikasi App Studio.
**Untuk mengundang pembangun lain untuk mengedit aplikasi**
1. Jika perlu, navigasikan ke studio aplikasi aplikasi Anda.
1. Pilih **Bagikan**.
1. Di tab **Pengembangan**, gunakan kotak teks untuk mencari dan memilih grup atau pengguna individual yang ingin Anda undang untuk mengedit aplikasi.
1. Untuk setiap pengguna atau grup, pilih dropdown dan pilih izin yang akan diberikan kepada pengguna atau grup tersebut.
+ **Pemilik bersama: Pemilik** bersama memiliki izin yang sama dengan pemilik aplikasi.
+ **Hanya mengedit**: Pengguna dengan peran **Edit saja** memiliki izin yang sama dengan pemilik dan pemilik bersama, kecuali yang berikut ini:
+ Mereka tidak dapat mengundang pengguna lain untuk mengedit aplikasi.
+ Mereka tidak dapat mempublikasikan aplikasi ke lingkungan Pengujian atau Produksi.
+ Mereka tidak dapat menambahkan sumber data ke aplikasi.
+ Mereka tidak dapat menghapus atau menduplikasi aplikasi.
## Mencoba mengedit aplikasi yang sedang diedit oleh pengguna lain
Satu aplikasi App Studio hanya dapat diedit oleh satu pengguna pada satu waktu. Lihat contoh berikut untuk memahami apa yang terjadi ketika beberapa pengguna mencoba mengedit aplikasi secara bersamaan.
Dalam contoh ini, saat ini `User A` sedang mengedit aplikasi, dan telah membagikannya`User B`. `User B`kemudian mencoba mengedit aplikasi yang sedang diedit oleh`User A`.
Saat `User B` mencoba mengedit aplikasi, kotak dialog akan muncul memberi tahu mereka yang `User A` sedang mengedit aplikasi, dan bahwa melanjutkan akan `User A` keluar dari studio aplikasi, dan semua perubahan akan disimpan. `User B`dapat memilih untuk membatalkan dan membiarkan `User A` melanjutkan, atau melanjutkan dan masuk ke studio aplikasi untuk mengedit aplikasi. Dalam contoh ini, mereka memilih untuk mengedit aplikasi.
Ketika `User B` memilih untuk mengedit aplikasi, `User A` menerima pemberitahuan yang `User B` telah mulai mengedit aplikasi, dan sesi mereka telah berakhir. Perhatikan `User A` bahwa jika aplikasi terbuka di tab browser yang tidak aktif, mereka mungkin tidak menerima notifikasi. Dalam hal ini, jika mereka mencoba kembali ke aplikasi dan mencoba mengedit, mereka akan menerima pesan kesalahan dan dipandu untuk menyegarkan halaman, yang akan mengembalikannya ke daftar aplikasi.
# Melihat atau memperbarui setelan keamanan konten aplikasi Anda
Setiap aplikasi di App Studio memiliki pengaturan keamanan konten yang dapat digunakan untuk membatasi media eksternal atau sumber daya seperti gambar, iFrames, dan PDFs agar tidak dimuat, atau hanya diizinkan dari domain tertentu atau URLs (termasuk bucket Amazon S3). Anda juga dapat menentukan domain tempat aplikasi Anda dapat mengunggah objek ke Amazon S3.
Pengaturan keamanan konten default untuk semua aplikasi adalah memblokir pemuatan semua media dari sumber eksternal, termasuk bucket Amazon S3, dan memblokir pengunggahan objek ke Amazon S3. Oleh karena itu, untuk memuat gambar, iFrame PDFs, atau media serupa, Anda harus mengedit pengaturan untuk memungkinkan sumber media. Selain itu, untuk memungkinkan mengunggah objek ke Amazon S3, Anda harus mengedit pengaturan untuk mengizinkan domain yang dapat diunggah.
**catatan**
Pengaturan keamanan konten digunakan untuk mengonfigurasi header Kebijakan Keamanan Konten (CSP) di aplikasi Anda. CSP adalah standar keamanan yang membantu mengamankan aplikasi Anda dari cross-site scripting (XSS), clickjacking, dan serangan injeksi kode lainnya. Untuk informasi selengkapnya tentang CSP, lihat [Kebijakan Keamanan Konten (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) di Dokumen Web MDN.
**Untuk memperbarui setelan keamanan konten aplikasi**
1. Jika perlu, navigasikan ke studio aplikasi aplikasi Anda dengan memilih untuk mengeditnya dari daftar aplikasi.
1. Pilih **Pengaturan aplikasi**.
1. Pilih tab **Pengaturan Keamanan Konten** untuk melihat pengaturan berikut:
+ **Sumber bingkai**: Digunakan untuk mengelola domain tempat aplikasi Anda dapat memuat frame dan iframe (seperti konten interaktif atau PDFs). Setelan ini memengaruhi komponen atau sumber daya aplikasi berikut:
+ Komponen embed iFrame
+ Komponen penampil PDF
+ **Sumber gambar**: Digunakan untuk mengelola domain tempat aplikasi Anda dapat memuat gambar. Setelan ini memengaruhi komponen atau sumber daya aplikasi berikut:
+ Logo dan spanduk aplikasi
+ Komponen penampil gambar
+ **Connect source**: Digunakan untuk mengelola domain tempat aplikasi Anda dapat mengunggah objek Amazon S3.
1. Untuk setiap pengaturan, pilih pengaturan yang diinginkan dari dropdown:
+ **Blokir semua frames/images/connections**: Jangan izinkan media apa pun (gambar, bingkai, PDFs) dimuat, atau objek apa pun untuk diunggah ke Amazon S3.
+ **Izinkan semua frames/images/connections**: Izinkan semua media (gambar, bingkai, PDFs) dari semua domain dimuat, atau izinkan pengunggahan objek ke Amazon S3 untuk semua domain.
+ **Izinkan domain tertentu**: Izinkan memuat media dari atau mengunggah media ke domain tertentu. Domain atau URLs ditentukan sebagai daftar ekspresi yang dipisahkan spasi, di mana wildcard (`*`) dapat digunakan untuk subdomain, alamat host, atau nomor port untuk menunjukkan bahwa semua nilai hukum masing-masing valid. Menentukan `http` juga cocok`https`. Daftar berikut berisi contoh entri yang valid:
+ `blob:`: Cocokkan semua gumpalan, yang mencakup data file yang dikembalikan oleh tindakan otomatisasi, seperti `GetObject` mengembalikan item dari bucket Amazon S3, atau gambar yang dihasilkan oleh Amazon Bedrock.
**penting**
Anda harus menyertakan `blob:` ekspresi yang Anda berikan untuk mengizinkan data file yang dikembalikan oleh tindakan, meskipun ekspresi Anda`*`, Anda harus memperbaruinya `* blob:`
+ `http://*.example.com`: Cocokkan semua upaya untuk memuat dari subdomain mana pun dari. `example.com` Juga cocok dengan `https` sumber daya.
+ `https://source1.example.com https//source2.example.com`: Cocokkan semua upaya untuk memuat dari keduanya `https://source1.example.com` dan `https://source2.example.com`
+ `https://example.com/subdirectory/`: Cocokkan semua upaya untuk memuat file di bawah direktori subdirektori. Misalnya, `https://example.com/subdirectory/path/to/file.jpeg`. Itu tidak cocok`https://example.com/path/to/file.jpeg`.
1. Pilih **Simpan** untuk menyimpan perubahan Anda.