Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.
# Menyebarkan Amazon Kendra
**catatan**
Dukungan fitur bervariasi menurut jenis indeks dan API pencarian yang digunakan. Untuk melihat apakah fitur ini didukung untuk jenis indeks dan API penelusuran yang Anda gunakan, lihat [Jenis indeks](https://docs.aws.amazon.com/kendra/latest/dg/hiw-index-types.html).
Ketika tiba saatnya untuk menyebarkan Amazon Kendra pencarian ke situs web Anda, kami menyediakan kode sumber yang dapat Anda gunakan dengan React untuk memulai aplikasi Anda. Kode sumber disediakan tanpa biaya di bawah lisensi MIT yang dimodifikasi. Anda dapat menggunakannya apa adanya atau mengubahnya untuk kebutuhan Anda sendiri. Aplikasi React yang disediakan adalah contoh untuk membantu Anda memulai. Ini bukan aplikasi siap produksi.
Untuk menerapkan aplikasi penelusuran tanpa kode dan menghasilkan URL titik akhir ke halaman pencarian Anda dengan kontrol akses, lihat Pembuat [Amazon Kendra Pengalaman](https://docs.aws.amazon.com/kendra/latest/dg/deploying-search-experience-no-code.html).
Contoh kode berikut menambahkan Amazon Kendra pencarian ke aplikasi web React yang ada:
+ [https://kendrasamples.s3.amazonaws.com/kendrasamples-react-app.zip](https://kendrasamples.s3.amazonaws.com/kendrasamples-react-app.zip) —Contoh file yang dapat digunakan pengembang untuk membangun pengalaman pencarian fungsional ke dalam aplikasi web React yang ada.
Contoh dimodelkan setelah halaman pencarian Amazon Kendra konsol. Mereka memiliki fitur yang sama untuk mencari dan menampilkan hasil pencarian. Anda dapat menggunakan seluruh contoh, atau Anda dapat memilih salah satu fitur untuk Anda gunakan sendiri.
Untuk melihat tiga komponen halaman pencarian di Amazon Kendra konsol, pilih ikon kode (****) dari menu kanan. Arahkan kursor ke setiap bagian untuk melihat deskripsi singkat komponen dan untuk mendapatkan URL sumber komponen.
**Topics**
+ [Ikhtisar](#example-overview)
+ [Prasyarat](#example-prereqs)
+ [Menyiapkan contoh](#example-install)
+ [Halaman pencarian utama](#main-component)
+ [Komponen pencarian](#search-component)
+ [Komponen hasil](#results-component)
+ [Komponen faset](#facets-component)
+ [Komponen paginasi](#pagination-component)
+ [Membangun pengalaman pencarian tanpa kode](deploying-search-experience-no-code.md)
## Ikhtisar
Anda menambahkan kode contoh ke aplikasi web React yang ada untuk mengaktifkan pencarian. Kode contoh menyertakan file Readme dengan langkah-langkah untuk menyiapkan lingkungan pengembangan React baru. Contoh data dalam contoh kode dapat digunakan untuk menunjukkan pencarian. File pencarian dan komponen dalam kode contoh disusun sebagai berikut:
+ Halaman pencarian utama (`Search.tsx`) —Ini adalah halaman utama yang berisi semua komponen. Di sinilah Anda mengintegrasikan aplikasi Anda dengan Amazon Kendra API.
+ Search Bar—ini adalah komponen di mana pengguna memasukkan istilah pencarian dan memanggil fungsi pencarian.
+ Hasil — Ini adalah komponen yang menampilkan hasil dari. Amazon Kendra Ini memiliki tiga komponen: jawaban yang disarankan, hasil FAQ, dan dokumen yang direkomendasikan.
+ Facet—Ini adalah komponen yang menunjukkan aspek dalam hasil pencarian dan memungkinkan Anda memilih aspek untuk mempersempit pencarian.
+ Paginasi—Ini adalah komponen yang memberi paginasi respons dari. Amazon Kendra
## Prasyarat
Sebelum memulai, Anda perlu melakukan hal berikut:
+ Node.js dan npm [diinstal](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm). Diperlukan Node.js versi 19 atau yang lebih lama.
+ [Python 3 atau Python 2 diunduh dan diinstal.](https://www.python.org/downloads/)
+ [SDK untuk Java](https://docs.aws.amazon.com/sdk-for-java/latest/developer-guide/setup.html)atau [AWS SDK untuk JavaScript](https://docs.aws.amazon.com/sdk-for-javascript/latest/developer-guide/welcome.html)untuk melakukan panggilan API ke Amazon Kendra.
+ Aplikasi web React yang ada. Kode contoh menyertakan file Readme dengan langkah-langkah tentang cara menyiapkan lingkungan pengembangan React baru, termasuk menggunakan kerangka kerja/pustaka yang diperlukan. Anda juga dapat mengikuti instruksi mulai cepat dalam [dokumentasi React tentang membuat aplikasi web React](https://create-react-app.dev/docs/getting-started).
+ Pustaka dan dependensi yang diperlukan dikonfigurasi di lingkungan pengembangan Anda. Kode contoh menyertakan file Readme yang mencantumkan pustaka dan dependensi paket yang diperlukan. Perhatikan bahwa `sass` diperlukan, seperti yang `node-sass` sudah usang. Jika sebelumnya Anda menginstal`node-sass`, hapus instalan ini dan instal`sass`.
## Menyiapkan contoh
Prosedur lengkap untuk menambahkan Amazon Kendra pencarian ke aplikasi React ada di file Readme yang disertakan dalam contoh kode.
**Untuk mulai kendrasamples-react-app menggunakan.zip**
1. Pastikan Anda telah menyelesaikan[Prasyarat](#example-prereqs), termasuk mengunduh dan menginstal Node.js dan npm.
1. kendrasamples-react-appUnduh.zip dan unzip.
1. Buka terminal Anda dan pergi ke`aws-kendra-example-react-app/src/services/`. Buka `local-dev-credentials.json` dan berikan kredensialnya. Jangan menambahkan file ini ke repositori publik apa pun.
1. Pergi ke `aws-kendra-example-react-app` dan instal dependensi di. `package.json` Jalankan `npm install`.
1. Luncurkan versi demo aplikasi Anda di server lokal Anda. Jalankan `npm start`. Anda dapat menghentikan server lokal dengan memasukkan pada keyboard Anda`Cmd/Ctrl + C`.
1. Anda dapat mengubah port atau host (misalnya, alamat IP) dengan membuka `package.json` dan memperbarui host dan port:`"start": "HOST=[host] PORT=[port] react-scripts start"`. Jika Anda menggunakan Windows:`"start": "set HOST=[host] && set PORT=[port] && react-scripts start"`.
1. Jika Anda memiliki domain situs web terdaftar, Anda dapat menentukan ini `package.json` setelah nama aplikasi Anda. Misalnya, `"homepage": "https://mywebsite.com"`. Anda harus menjalankan `npm install` lagi untuk memperbarui dependensi baru, dan kemudian menjalankannya. `npm start`
1. Untuk membangun aplikasi, jalankan`npm build`. Unggah konten direktori build ke penyedia hosting Anda.
**Awas**
Aplikasi React **belum** siap produksi. Ini adalah contoh penerapan aplikasi untuk Amazon Kendra pencarian.
## Halaman pencarian utama
Halaman pencarian utama (`Search.tsx`) berisi semua komponen pencarian contoh. Ini mencakup komponen bilah pencarian untuk output, komponen hasil untuk menampilkan respons dari [Query](https://docs.aws.amazon.com/kendra/latest/APIReference/API_Query.html) API, dan komponen pagination untuk paging melalui respons.
## Komponen pencarian
Komponen pencarian menyediakan kotak teks untuk memasukkan teks kueri. `onSearch`Fungsinya adalah hook yang memanggil fungsi utama `Search.tsx` untuk membuat panggilan Amazon Kendra [Query](https://docs.aws.amazon.com/kendra/latest/APIReference/API_Query.html) API.
## Komponen hasil
Komponen hasil menunjukkan respons dari `Query` API. Hasilnya ditunjukkan di tiga area terpisah.
+ Jawaban yang disarankan—Ini adalah hasil teratas yang dikembalikan oleh API. `Query` Ini berisi hingga tiga jawaban yang disarankan. Dalam respon, mereka mempunyai jenis hasil `ANSWER`.
+ Jawaban FAQ — Ini adalah hasil pertanyaan yang sering diajukan yang dikembalikan oleh tanggapan. FAQs ditambahkan ke indeks secara terpisah. Dalam respon, mereka mempunyai jenis hasil `QUESTION_ANSWER`. Untuk informasi lebih lanjut, lihat [Pertanyaan dan jawaban](https://docs.aws.amazon.com/kendra/latest/dg/in-creating-faq.html).
+ Dokumen yang direkomendasikan—Ini adalah dokumen tambahan yang Amazon Kendra kembali dalam respons. Dalam tanggapan dari `Query` API, mereka memiliki tipe`DOCUMENT`.
Komponen hasil berbagi satu set komponen untuk fitur seperti penyorotan, judul, tautan, dan banyak lagi. Komponen bersama harus hadir agar komponen hasil bisa bekerja.
## Komponen faset
Komponen faset mencantumkan faset yang tersedia di hasil pencarian. Setiap faset mengklasifikasikan respon di sepanjang dimensi tertentu, seperti penulis. Anda dapat memperbaiki pencarian ke faset tertentu dengan memilih salah satu dari daftar.
Setelah Anda memilih facet, komponen akan memanggil `Query` dengan filter atribut yang membatasi pencarian ke dokumen yang cocok dengan faset.
## Komponen paginasi
Komponen pagination memungkinkan Anda untuk menampilkan hasil pencarian dari `Query` API di beberapa halaman. Ini memanggil `Query` API dengan `PageNumber` parameter `PageSize` dan untuk mendapatkan halaman hasil tertentu.