1 - 將搜尋新增至網站的概觀

發行項
11/15/2023

在此 Azure AI 搜尋教學課程中，建立 Web 應用程式以搜尋書籍目錄，然後將網站部署至 Azure Static Web Apps 資源。

本教學課程適用於想要建立前端用戶端應用程式的 JavaScript 開發人員，其中包含多面向導覽、typeahead 和分頁等搜尋互動。它也示範 Azure SDK for JavaScript 中的連結 @azure/search-documents 庫，以呼叫 Azure AI 搜尋，以在後端編製索引和查詢工作流程。

此範例有何用途？

此範例網站提供 10,000 本書目錄的存取權。用戶可以在搜尋列中輸入文字來搜尋目錄。當使用者輸入文字時，網站會使用搜尋索引的建議功能來完成文字。查詢完成後，書籍清單會顯示一部分詳細數據。用戶可以選取書籍，以查看書籍的搜尋索引中儲存的所有詳細數據。

搜尋體驗包括：

搜尋 – 提供應用程式的搜尋功能。
建議 – 當使用者在搜尋列中輸入時，提供建議。
Facet 和篩選 - 提供多面向導覽結構，可依作者或語言進行篩選。
編頁結果 - 提供分頁控件來捲動結果。
檔查閱 – 依標識符查閱檔，以擷取詳細數據頁面的所有內容。

範例如何組織？

範例程式代碼包含下列元件：

App	目的	GitHub 存放庫 Location
用戶端	使用搜尋來顯示書籍的 React 應用程式（呈現層）。它會呼叫 Azure 函式應用程式。	/search-website-functions-v4/client
伺服器	Azure 函式應用程式（商務層） - 使用 JavaScript SDK 呼叫 Azure AI 搜尋 API	/search-website-functions-v4/api
大量插入	用來建立索引的 JavaScript 檔案，並將檔新增至其中。	/search-website-functions-v4/bulk-insert

設定開發環境

在您的本機開發環境中安裝下列軟體。

Node.js LTS
- 從此支援的語言版本清單中選取最新的運行時和版本。
- 如果您在本機計算機上安裝了不同版本的 Node.js，請考慮使用節點版本管理員（nvm）或 Docker 容器。
Git
Visual Studio Code 和下列延伸模組
- Azure 靜態 Web 應用程式
- 使用整合式終端機進行命令行作業。
選擇性：
- 本教學課程不會在本機執行 Azure 函式 API。如果您想要在本機執行，您必須使用下列 bash 命令全域安裝 azure-functions-core-tools ：
```
npm install -g azure-functions-core-tools@4
```

使用 git 分叉和複製搜尋範例

分支範例存放庫對於能夠部署靜態 Web 應用程式至關重要。靜態 Web 應用程式會根據您自己的 GitHub 分支位置來判斷組建動作和部署內容。靜態 Web 應用程式中的程式代碼執行是遠端的，靜態 Web 應用程式會從分岔範例中的程式碼讀取。

在 GitHub 上，分支範例存放庫。

使用您的 GitHub 帳戶，在網頁瀏覽器中完成分叉程式。本教學課程會使用分支作為部署至 Azure 靜態 Web 應用程式的一部分。
在bash終端機中，將分支範例應用程式下載到本機電腦。

將取代 YOUR-GITHUB-ALIAS 為您的 GitHub 別名。
```
git clone https://github.com/YOUR-GITHUB-ALIAS/azure-search-javascript-samples
```
在同一個bash終端機中，移至此網站搜尋範例的分支存放庫：
```
cd azure-search-javascript-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 USEast Asia

將此資源群組用於本教學課程期間建立的所有資源。資源群組提供一個邏輯單元來管理資源，包括完成時加以刪除。

下一步

建立搜尋索引並使用檔載入