快速入門:在 Azure 入口網站 中建立示範搜尋應用程式
在本適用於 Azure AI 搜尋的快速入門中,瞭解如何使用 Azure 入口網站 的建立示範應用程式精靈來產生可在瀏覽器中執行的可下載的“localhost”樣式 Web 應用程式。 視您設定的方式而定,產生的應用程式會在初次使用時運作,且具有搜尋服務上索引的即時只讀連線。 預設應用程式可包含搜尋列、結果區域、提要欄位篩選和自動提示支援。
示範應用程式可協助您在用戶端應用程式中視覺化索引的運作方式,但不適合用於生產環境。 生產應用程式應包含示範應用程式未提供的安全性、錯誤處理和裝載邏輯。
必要條件
開始之前,必須先具備下列必要條件:
具有有效訂用帳戶的 Azure 帳戶。 免費建立帳戶。
Microsoft Edge (最新版本) 或 Google Chrome。
搜尋索引可作為所產生應用程式的基礎。
本快速入門使用內建旅館範例數據集。 若要建立此練習中使用的索引,請執行匯 入數據 精靈,選擇 hotels-sample 來源並接受所有預設值。
當索引已可供使用時,請繼續進行下一個步驟。
啟動精靈
使用您的 Azure 帳戶登入 Azure 入口網站,然後找出您的搜尋服務。
在 [搜尋管理索引]>底下
選取 hotels-sample-index。
在索引頁面頂端,選取 [建立示範應用程式] 以啟動精靈。
在第一個精靈頁面上,選取 [啟用跨原始來源資源共用 (CORS)] 以將 CORS 支援新增至索引定義。 這是選擇性步驟,但如果沒有此支援,本機 Web 應用程式就不會連線至遠端索引。
設定搜尋結果
此精靈會為所呈現的搜尋結果提供基本的版面配置,其中會有空間可容納縮圖影像、標題和描述。 在這些元素背後是會提供資料的索引欄位。
略過 縮圖 ,因為此索引沒有影像,但如果您有索引字段,其已填入可解析為公開可用影像的 URL,您應該為縮圖區域指定該字段。 如果您的索引沒有影像 URL,請將此欄位保留空白。
在 [標題] 中,選擇可傳達每份文件唯一性的欄位。 在此範例中,旅館名稱是合理的選擇。
在 [描述] 中,選擇提供詳細數據的欄位,可協助某人決定是否向下切入至該特定檔。 在此範例中,描述是很好的候選專案。
新增提要欄位
搜尋服務可支援多面向導覽,這通常會以提要欄位的形式來呈現。 Facet 會以可篩選和可 Facet 的欄位為基礎,如索引結構描述所表示。
在 Azure AI 搜尋中,多面向導覽是一種累積的篩選體驗。 在單一類別內,選取多個篩選條件會擴大結果 (例如,在 [城市] 內選取 [西雅圖] 和 [貝爾維尤])。 跨多個類別時,選取多個篩選條件則會縮小結果範圍。
提示
您可以在 Azure 入口網站 中索引的 [字段] 索引標籤上檢視欄位屬性。 標示為可篩選且可多面向的欄位可用於提要字段
在精靈中,選取頁面頂端的 [提要欄] 索引標籤。 您應該會在索引中看到所有屬性為可篩選和可 Facet 的欄位清單。
拿掉一些欄位以縮短提要字段,讓您在完成的應用程式中沒有捲動。
新增建議
建議是指附加至搜尋方塊的自動化查詢提示。 示範應用程式支持 根據部分文字輸入提供潛在比對檔的下拉式清單的建議 。
在此頁面中,選取提供建議查詢的欄位。 您應該選擇較短的字串字段。 避免詳細資訊欄位,例如描述。
下列螢幕快照顯示與應用程式中轉譯頁面並列的建議頁面。 您可以看到欄位選取項目的使用方式,以及「顯示欄位名稱」如何用來在建議內包含或排除標籤。
建立、下載和執行
選取頁面底部的 [建立示範應用程式] 以產生 HTML 檔案。
出現提示時,選取 [下載應用程式] 來下載檔案。
開啟檔案,然後選取 [搜尋] 按鈕。 此動作會執行查詢,它可以是傳回任意結果集的空白查詢 (
*
)。 該頁面應該會看起來如下列螢幕擷取畫面所示。輸入一個詞並使用篩選條件來縮小結果範圍。 如果您沒有看到建議的查詢,請檢查瀏覽器設定,或嘗試不同的瀏覽器。
清除資源
如果您是在自己的訂用帳戶中進行,建議您在專案結束時判斷自己是否仍需要先前所建立的資源。 資源若繼續執行,將需付費。 您可以個別刪除資源,或刪除資源群組以刪除整組資源。
您可以使用左側瀏覽窗格中的 [所有資源] 或 [資源群組] 連結,在 Azure 入口網站 中找到和管理資源。
請記住,免費服務僅限於三個索引、索引子和資料來源。 您可以在 Azure 入口網站中刪除個別項目,以避免超出限制。
下一步
示範應用程式對於原型設計很實用,因為您可以模擬使用者體驗,而不需要撰寫 JavaScript 或前端程式碼,但當您在自己的專案中更接近概念證明時,請檢閱最接近真實文字應用程式的其中一個端對端程式碼範例: