Bagikan melalui

Langkah 1 - Gambaran umum menambahkan pencarian ke aplikasi web statis dengan .NET

  • Artikel

Tutorial ini membangun situs web untuk mencari melalui katalog buku lalu menyebarkan situs web ke aplikasi web statis Azure.

Apa yang dilakukan sampel?

Contoh situs web ini menyediakan akses ke katalog 10.000 buku. Anda dapat mencari katalog dengan memasukkan teks di bilah pencarian. Saat Anda memasukkan teks, situs web menggunakan fitur saran indeks pencarian untuk melengkapi teks secara otomatis. Setelah kueri selesai, daftar buku ditampilkan dengan sebagian detail. Anda dapat memilih buku untuk melihat semua detail, yang disimpan dalam indeks pencarian, buku.

Cuplikan layar aplikasi sampel di jendela browser.

Pengalaman pencarian meliputi:

  • Pencarian – menyediakan fungsionalitas pencarian untuk aplikasi.
  • Sarankan – berikan 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 menurut 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. /azure-search-static-web-app/client
api Aplikasi Fungsi Azure .NET (lapisan bisnis) - memanggil Azure AI Search API menggunakan .NET SDK /azure-search-static-web-app/api
penyisipan massal Proyek .NET untuk membuat indeks dan menambahkan dokumen ke dalamnya. /azure-search-static-web-app/bulk-insert

Menyiapkan lingkungan pengembangan Anda

Buat layanan dan instal perangkat lunak berikut untuk lingkungan pengembangan lokal Anda.

Tutorial ini tidak menjalankan Azure Function API secara lokal tetapi jika Anda ingin menjalankannya secara lokal, instal azure-functions-core-tools.

Fork dan klon sampel pencarian dengan git

Forking repositori sampel sangat penting untuk dapat menggunakan Aplikasi Web Statis. Aplikasi web menentukan tindakan build dan penyebaran konten berdasarkan lokasi garpu GitHub Anda sendiri. Eksekusi kode di Static Web App jarak jauh, dengan Azure Static Web Apps membaca dari kode dalam sampel fork Anda.

  1. Di GitHub, fork repositori azure-search-static-web-app.

    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-static-web-app.git

  3. Di terminal Bash yang sama, buka repositori fork Anda untuk contoh pencarian situs web ini:

    cd azure-search-static-web-app

  4. Gunakan perintah Visual Studio Code, code . untuk membuka repositori fork Anda. Tugas yang tersisa diselesaikan dari Visual Studio Code, kecuali ditentukan.

    code .

Langkah berikutnya