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 pencarian API yang digunakan. Untuk melihat apakah fitur ini didukung untuk jenis indeks dan pencarian yang API Anda gunakan, lihat Jenis indeks.
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 MIT lisensi 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 titik akhir URL ke halaman pencarian Anda dengan kontrol akses, lihat Pembuat Amazon Kendra Pengalaman.
Contoh kode berikut menambahkan Amazon Kendra pencarian ke aplikasi web React yang ada:
-
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-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.
Topik
Gambaran Umum
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, FAQ hasil, 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
. Diperlukan Node.js versi 19 atau yang lebih lama. -
SDK for Javaatau AWS SDK for JavaScriptuntuk melakukan API panggilan 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
. -
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
sassdiperlukan, seperti yangnode-sasssudah usang. Jika sebelumnya Anda menginstalnode-sass, hapus instalan ini dan instalsass.
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
-
Pastikan Anda telah menyelesaikanPrasyarat, termasuk mengunduh dan menginstal Node.js dan npm.
-
kendrasamples-react-appUnduh.zip dan unzip.
-
Buka terminal Anda dan pergi ke
aws-kendra-example-react-app/src/services/. Bukalocal-dev-credentials.jsondan berikan kredensialnya. Jangan menambahkan file ini ke repositori publik apa pun. -
Pergi ke
aws-kendra-example-react-appdan instal dependensi di.package.jsonJalankannpm install. -
Luncurkan versi demo aplikasi Anda di server lokal Anda. Jalankan
npm start. Anda dapat menghentikan server lokal dengan memasukkan pada keyboard AndaCmd/Ctrl + C. -
Anda dapat mengubah port atau host (misalnya, alamat IP) dengan membuka
package.jsondan 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". -
Jika Anda memiliki domain situs web terdaftar, Anda dapat menentukan ini
package.jsonsetelah nama aplikasi Anda. Misalnya,"homepage": "https://mywebsite.com". Anda harus menjalankannpm installlagi untuk memperbarui dependensi baru, dan kemudian menjalankannya.npm start -
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 termasuk komponen bilah pencarian untuk output, komponen hasil untuk menampilkan respons dari QueryAPI, dan komponen pagination untuk paging melalui respons.
Komponen pencarian
Komponen pencarian menyediakan kotak teks untuk memasukkan teks kueri. onSearchFungsi ini adalah hook yang memanggil fungsi utama Search.tsx untuk membuat API panggilan Amazon Kendra
Query.
Komponen hasil
Komponen hasil menunjukkan respons dari QueryAPI. Hasilnya ditunjukkan di tiga area terpisah.
-
Jawaban yang disarankan — ini adalah hasil teratas yang dikembalikan oleh.
QueryAPI Ini berisi hingga tiga jawaban yang disarankan. Dalam respon, mereka mempunyai jenis hasilANSWER. -
FAQJawaban—ini adalah hasil pertanyaan yang sering diajukan yang dikembalikan oleh tanggapan. FAQsditambahkan ke indeks secara terpisah. Dalam respon, mereka mempunyai jenis hasil
QUESTION_ANSWER. Untuk informasi lebih lanjut, lihat Pertanyaan dan jawaban. -
Dokumen yang direkomendasikan—Ini adalah dokumen tambahan yang Amazon Kendra kembali dalam respons. Dalam tanggapan dari
QueryAPI, mereka memiliki tipeDOCUMENT.
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 dalam beberapa halaman. Ini memanggil Query API dengan PageSize dan PageNumber parameter untuk mendapatkan halaman hasil tertentu.
