步驟 1 - 使用 .NET 將搜尋新增至網站的概觀
本教學課程會建置網站來搜尋書籍目錄,然後將網站部署至 Azure 靜態 Web 應用程式。
此範例有何用途?
此範例網站提供 10,000 本書目錄的存取權。 用戶可以在搜尋列中輸入文字來搜尋目錄。 當使用者輸入文字時,網站會使用搜尋索引的建議功能來完成文字。 查詢完成後,書籍清單會顯示一部分詳細數據。 用戶可以選取書籍,以查看書籍的搜尋索引中儲存的所有詳細數據。
搜尋體驗包括:
- 搜尋 – 提供應用程式的搜尋功能。
- 建議 – 當使用者在搜尋列中輸入時,提供建議。
- Facet 和篩選 - 提供多面向導覽結構,可依作者或語言進行篩選。
- 編頁結果 - 提供分頁控件來捲動結果。
- 檔查閱 – 依標識符查閱檔,以擷取詳細數據頁面的所有內容。
範例如何組織?
範例程式 代碼 包含下列資料夾:
App | 目的 | GitHub 存放庫 Location |
---|---|---|
用戶端 | 使用搜尋來顯示書籍的 React 應用程式(呈現層)。 它會呼叫 Azure 函式應用程式。 | /search-website-functions-v4/client |
伺服器 | Azure .NET 函式應用程式 (商務層) - 使用 .NET SDK 呼叫 Azure AI 搜尋 API | /search-website-functions-v4/api |
大量插入 | .NET 檔案可建立索引,並將檔新增至其中。 | /search-website-functions-v4/bulk-insert |
設定開發環境
為您的本機開發環境安裝下列軟體。
- .NET 6 或更新版本
- Git
- Visual Studio Code 和下列延伸模組
- Azure 靜態 Web 應用程式
- 使用整合式終端機進行命令行作業。
- 選用:
- 本教學課程不會在本機執行 Azure 函式 API,但如果您想要在本機執行,則需要安裝 azure-functions-core-tools。
使用 git 分叉和複製搜尋範例
分支範例存放庫對於能夠部署靜態 Web 應用程式至關重要。 Web 應用程式會根據您自己的 GitHub 分支位置來判斷組建動作和部署內容。 靜態 Web 應用程式中的程式代碼執行是遠端的,Azure Static Web Apps 會從分支範例中的程式碼讀取。
在 GitHub 上,分支範例存放 庫。
使用您的 GitHub 帳戶,在網頁瀏覽器中完成分叉程式。 本教學課程會使用分支作為部署至 Azure 靜態 Web 應用程式的一部分。
在Bash終端機中,將分支範例應用程式下載到本機電腦。
將取代
YOUR-GITHUB-ALIAS
為您的 GitHub 別名。git clone https://github.com/YOUR-GITHUB-ALIAS/azure-search-dotnet-samples
在同一個 Bash 終端機中,移至此網站搜尋範例的分支存放庫:
cd azure-search-dotnet-samples
使用 Visual Studio Code 命令,
code .
開啟分支存放庫。 除非指定,否則會從 Visual Studio Code 完成其餘工作。code .
為您的 Azure 資源建立資源群組
在 Visual Studio Code 中,開啟 [ 活動] 列,然後選取 Azure 圖示。
如果您尚未登入,請登入 Azure。
在 [資源] 區段中,選取 [新增] (+),然後選取 [建立資源群組]。
輸入資源群組名稱,例如
cognitive-search-demo-rg
。輸入區域:
- 針對 [Node.js],選取
West US 2
。 這是 Azure 函式程式設計模型 (PM) v4 預覽版的建議區域。 - 針對 C# 和 Python,我們建議在撰寫本文時支援的 Azure Static Web Apps 支援下列區域:
West US 2
、、East US 2
、West Europe
、Central US
East Asia
- 針對 [Node.js],選取
將此資源群組用於本教學課程期間建立的所有資源。 資源群組提供一個邏輯單元來管理資源,包括完成時加以刪除。
下一步
意見反應
https://aka.ms/ContentUserFeedback。
即將登場:在 2024 年,我們將逐步淘汰 GitHub 問題作為內容的意見反應機制,並將它取代為新的意見反應系統。 如需詳細資訊,請參閱:提交並檢視相關的意見反應