共用方式為


快速入門:在 Azure 入口網站 中建立示範搜尋應用程式

在本適用於 Azure AI 搜尋的快速入門中,瞭解如何使用 Azure 入口網站 的建立示範應用程式精靈來產生可在瀏覽器中執行的可下載的“localhost”樣式 Web 應用程式。 視您設定的方式而定,產生的應用程式會在初次使用時運作,且具有搜尋服務上索引的即時只讀連線。 預設應用程式可包含搜尋列、結果區域、提要欄位篩選和自動提示支援。

示範應用程式可協助您在用戶端應用程式中視覺化索引的運作方式,但不適合用於生產環境。 生產應用程式應包含示範應用程式未提供的安全性、錯誤處理和裝載邏輯。

必要條件

開始之前,必須先具備下列必要條件:

  • 具有有效訂用帳戶的 Azure 帳戶。 免費建立帳戶

  • Azure AI 搜尋服務。 在目前的訂閱下,建立服務尋找現有的服務。 您可以使用本快速入門的免費服務。

  • Microsoft Edge (最新版本) 或 Google Chrome。

  • 搜尋索引可作為所產生應用程式的基礎。

    本快速入門使用內建旅館範例數據集。 若要建立此練習中使用的索引,請執行匯 入數據 精靈,選擇 hotels-sample 來源並接受所有預設值。

    範例數據的數據源頁面螢幕快照。

當索引已可供使用時,請繼續進行下一個步驟。

啟動精靈

  1. 使用您的 Azure 帳戶登入 Azure 入口網站,然後找出您的搜尋服務

  2. 在 [搜尋管理索引]>底下

  3. 選取 hotels-sample-index

  4. 在索引頁面頂端,選取 [建立示範應用程式] 以啟動精靈。

  5. 在第一個精靈頁面上,選取 [啟用跨原始來源資源共用 (CORS)] 以將 CORS 支援新增至索引定義。 這是選擇性步驟,但如果沒有此支援,本機 Web 應用程式就不會連線至遠端索引。

    啟用 CORS 動作的螢幕快照。

設定搜尋結果

此精靈會為所呈現的搜尋結果提供基本的版面配置,其中會有空間可容納縮圖影像、標題和描述。 在這些元素背後是會提供資料的索引欄位。

  1. 略過 縮圖 ,因為此索引沒有影像,但如果您有索引字段,其已填入可解析為公開可用影像的 URL,您應該為縮圖區域指定該字段。 如果您的索引沒有影像 URL,請將此欄位保留空白。

  2. 在 [標題] 中,選擇可傳達每份文件唯一性的欄位。 在此範例中,旅館名稱是合理的選擇。

  3. 在 [描述] 中,選擇提供詳細數據的欄位,可協助某人決定是否向下切入至該特定檔。 在此範例中,描述是很好的候選專案。

    搜尋結果組態頁面的螢幕快照。

新增提要欄位

搜尋服務可支援多面向導覽,這通常會以提要欄位的形式來呈現。 Facet 會以可篩選和可 Facet 的欄位為基礎,如索引結構描述所表示。

在 Azure AI 搜尋中,多面向導覽是一種累積的篩選體驗。 在單一類別內,選取多個篩選條件會擴大結果 (例如,在 [城市] 內選取 [西雅圖] 和 [貝爾維尤])。 跨多個類別時,選取多個篩選條件則會縮小結果範圍。

提示

您可以在 Azure 入口網站 中索引的 [字段] 索引標籤上檢視欄位屬性。 標示為可篩選且可多面向的欄位可用於提要字段

  1. 在精靈中,選取頁面頂端的 [提要欄] 索引標籤。 您應該會在索引中看到所有屬性為可篩選和可 Facet 的欄位清單。

  2. 拿掉一些欄位以縮短提要字段,讓您在完成的應用程式中沒有捲動。

新增建議

建議是指附加至搜尋方塊的自動化查詢提示。 示範應用程式支持 根據部分文字輸入提供潛在比對檔的下拉式清單的建議

在此頁面中,選取提供建議查詢的欄位。 您應該選擇較短的字串字段。 避免詳細資訊欄位,例如描述。

下列螢幕快照顯示與應用程式中轉譯頁面並列的建議頁面。 您可以看到欄位選取項目的使用方式,以及「顯示欄位名稱」如何用來在建議內包含或排除標籤。

建議組態頁面的螢幕快照。

建立、下載和執行

  1. 選取頁面底部的 [建立示範應用程式] 以產生 HTML 檔案。

  2. 出現提示時,選取 [下載應用程式] 來下載檔案。

  3. 開啟檔案,然後選取 [搜尋] 按鈕。 此動作會執行查詢,它可以是傳回任意結果集的空白查詢 (*)。 該頁面應該會看起來如下列螢幕擷取畫面所示。

  4. 輸入一個詞並使用篩選條件來縮小結果範圍。 如果您沒有看到建議的查詢,請檢查瀏覽器設定,或嘗試不同的瀏覽器。

瀏覽器視窗中搜尋應用程式的螢幕快照。

清除資源

如果您是在自己的訂用帳戶中進行,建議您在專案結束時判斷自己是否仍需要先前所建立的資源。 資源若繼續執行,將需付費。 您可以個別刪除資源,或刪除資源群組以刪除整組資源。

您可以使用左側瀏覽窗格中的 [所有資源] 或 [資源群組] 連結,在 Azure 入口網站 中找到和管理資源。

請記住,免費服務僅限於三個索引、索引子和資料來源。 您可以在 Azure 入口網站中刪除個別項目,以避免超出限制。

下一步

示範應用程式對於原型設計很實用,因為您可以模擬使用者體驗,而不需要撰寫 JavaScript 或前端程式碼,但當您在自己的專案中更接近概念證明時,請檢閱最接近真實文字應用程式的其中一個端對端程式碼範例: