Catatan
Akses ke halaman ini memerlukan otorisasi. Anda dapat mencoba masuk atau mengubah direktori.
Akses ke halaman ini memerlukan otorisasi. Anda dapat mencoba mengubah direktori.
Tutorial ini membangun situs web yang mencari melalui katalog buku lalu menyebarkan situs web ke Azure Static Web App.
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, situs web menampilkan daftar buku dengan sebagian detail. Anda dapat memilih buku untuk melihat semua detail, yang disimpan dalam indeks pencarian, buku.
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.
- Pencarian Azure AI, wilayah atau tingkat apa pun
- .NET 9 atau versi terbaru
- Git
- Visual Studio Code
- Ekstensi C# Dev Tools untuk Visual Studio Code
- Ekstensi Azure Static Web App untuk Visual Studio Code
Tutorial ini tidak menjalankan Azure Function API secara lokal. Jika Anda ingin menjalankannya secara lokal, instal azure-functions-core-tools.
Fork dan klon sampel pencarian dengan git
Untuk menyebarkan Aplikasi Web Statis, Anda perlu membuat fork repositori sampel. Aplikasi web menggunakan lokasi fork GitHub Anda untuk memutuskan tindakan build dan konten penyebaran. Eksekusi kode di Static Web App terjadi dari jarak jauh, dengan Azure Static Web Apps membaca kode dari sampel fork Anda.
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.
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-static-web-app.gitDi terminal Bash yang sama, buka repositori fork Anda untuk contoh pencarian situs web ini:
cd azure-search-static-web-appGunakan perintah Visual Studio Code,
code .untuk membuka repositori fork Anda. Anda menyelesaikan tugas yang tersisa dari Visual Studio Code, kecuali jika ditentukan.code .