1 - Gambaran umum menambahkan pencarian ke situs web
Dalam tutorial Pencarian Azure AI ini, buat aplikasi web yang mencari melalui katalog buku, lalu sebarkan situs web ke sumber daya Azure Static Web Apps.
Tutorial ini untuk pengembang JavaScript yang ingin membuat aplikasi klien frontend yang mencakup interaksi pencarian seperti navigasi tersaring, typeahead, dan pagination. Ini juga menunjukkan @azure/search-documents pustaka di Azure SDK untuk JavaScript untuk panggilan ke Azure AI Search untuk mengindeks dan mengkueri alur kerja di backend.
Apa yang dilakukan sampel?
Contoh situs web ini menyediakan akses ke katalog 10.000 buku. Pengguna dapat mencari katalog dengan memasukkan teks di bilah pencarian. Saat pengguna memasukkan teks, situs web menggunakan fitur saran indeks pencarian untuk menyelesaikan teks. Setelah kueri selesai, daftar buku ditampilkan dengan sebagian detail. Pengguna dapat memilih buku untuk melihat semua detail, yang disimpan dalam indeks pencarian, buku.
Pengalaman pencarian meliputi:
- Pencarian – menyediakan fungsionalitas pencarian untuk aplikasi.
- Saran – memberikan saran saat pengguna mengetik di bilah pencarian.
- Faset dan filter - menyediakan struktur navigasi tersaring yang memfilter menurut penulis atau bahasa.
- Hasil yang dipaginasi - menyediakan kontrol penomoran halaman untuk menggulir hasil.
- Pencarian Dokumen – mencari dokumen berdasarkan ID untuk mengambil semua kontennya untuk halaman detail.
Bagaimana sampel diatur?
Kode sampel mencakup komponen berikut:
| App | Tujuan | GitHub Repositori Lokasi |
|---|---|---|
| Klien | React app (lapisan presentasi) untuk menampilkan buku, dengan pencarian. Membuat aplikasi fungsi Azure. | /search-website-functions-v4/client |
| Server | Aplikasi Fungsi Azure (lapisan bisnis) - memanggil Azure AI Search API menggunakan JavaScript SDK | /search-website-functions-v4/api |
| Sisipan Massal | File JavaScript untuk membuat indeks dan menambahkan dokumen ke dalamnya. | /search-website-functions-v4/bulk-insert |
Menyiapkan lingkungan pengembangan Anda
Instal perangkat lunak berikut di lingkungan pengembangan lokal Anda.
-
- Pilih runtime dan versi terbaru dari daftar versi bahasa yang didukung ini.
- Jika Anda memiliki versi Node.js yang berbeda yang terinstal di komputer lokal Anda, pertimbangkan untuk menggunakan Node Version Manager (
nvm) atau kontainer Docker.
Visual Studio Code, dengan ekstensi berikut:
- Azure Static Web App
- Gunakan terminal terintegrasi untuk operasi baris perintah.
Opsional:
- Tutorial ini tidak menjalankan Azure Function API secara lokal. Jika Anda ingin menjalankannya secara lokal, Anda perlu menginstal azure-functions-core-tools secara global dengan perintah bash berikut:
npm install -g azure-functions-core-tools@4
Fork dan klon sampel pencarian dengan git
Forking repositori sampel sangat penting untuk dapat menggunakan Aplikasi Web Statis. Aplikasi web statis menentukan tindakan build dan konten penyebaran berdasarkan lokasi fork GitHub Anda sendiri. Eksekusi kode di Static Web App bersifat jarak jauh, dengan aplikasi web statis membaca dari kode dalam sampel fork Anda.
Di GitHub, fork repositori sampel.
Selesaikan proses fork di browser web Anda dengan akun GitHub Anda. Tutorial ini menggunakan fork Anda sebagai bagian dari penyebaran ke Azure Static Web App.
Di terminal bash, unduh aplikasi sampel fork Anda ke komputer lokal Anda.
Ganti
YOUR-GITHUB-ALIASdengan alias GitHub Anda.git clone https://github.com/YOUR-GITHUB-ALIAS/azure-search-javascript-samplesDi terminal bash yang sama, masuk ke repositori fork Anda untuk contoh pencarian situs web ini:
cd azure-search-javascript-samplesGunakan perintah Visual Studio Code,
code .untuk membuka repositori fork Anda. Tugas yang tersisa diselesaikan dari Visual Studio Code, kecuali ditentukan.code .
Membuat grup sumber daya untuk sumber daya Azure Anda
Di Visual Studio Code, buka bilah Aktivitas, dan pilih ikon Azure.
Masuk ke Azure, jika Anda belum masuk.
Di bagian Sumber Daya , pilih Tambahkan (+), lalu pilih Buat Grup Sumber Daya.
Masukkan nama grup sumber daya, seperti
cognitive-search-demo-rg.Masukkan wilayah:
- Untuk Node.js, pilih
West US 2. Ini adalah wilayah yang direkomendasikan untuk pratinjau model pemrograman Azure Function (PM) v4. - Untuk C# dan Python, kami merekomendasikan wilayah berikut, didukung oleh Azure Static Web Apps pada tulisan ini:
West US 2, ,East US 2West Europe,Central US,East Asia
- Untuk Node.js, pilih
Gunakan grup sumber daya ini untuk semua sumber daya yang dibuat selama tutorial ini. Grup sumber daya memberi Anda unit logis untuk mengelola sumber daya, termasuk menghapusnya saat Anda selesai.