Bagikan melalui


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.

Screenshot of the sample app in a browser window.

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.

  • Node.js LTS

    • 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.
  • Git

  • Visual Studio Code, dengan ekstensi berikut:

  • 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.

  1. 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.

  2. Di terminal bash, unduh aplikasi sampel fork Anda ke komputer lokal Anda.

    Ganti YOUR-GITHUB-ALIAS dengan alias GitHub Anda.

    git clone https://github.com/YOUR-GITHUB-ALIAS/azure-search-javascript-samples
    
  3. Di terminal bash yang sama, masuk ke repositori fork Anda untuk contoh pencarian situs web ini:

    cd azure-search-javascript-samples
    
  4. Gunakan 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

  1. Di Visual Studio Code, buka bilah Aktivitas, dan pilih ikon Azure.

  2. Masuk ke Azure, jika Anda belum masuk.

  3. Di bagian Sumber Daya , pilih Tambahkan (+), lalu pilih Buat Grup Sumber Daya.

    Screenshot of Visual Studio Code, in Azure explorer, showing **Create Resource Group** option.

  4. Masukkan nama grup sumber daya, seperti cognitive-search-demo-rg.

  5. 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

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.

Langkah berikutnya

Membuat Indeks Pencarian dan memuat dengan dokumen