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

在此 Azure AI 搜尋快速入門中,您將使用 Azure 入口網站 的建立示範應用程式精靈來產生可在瀏覽器中執行的可下載的「localhost」樣式 Web 應用程式。 視其組態而定,產生的應用程式會在第一次使用時運作,且具有搜尋服務上索引的即時只讀連線。 默認應用程式可以包含搜尋列、結果區域、提要欄篩選,以及具類型支援。

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

必要條件

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

當索引準備好使用時,請繼續進行下一個步驟。

啟動精靈

  1. 使用您的 Azure 帳戶登入 Azure 入口網站

  2. 從頁面中間的連結中,尋找您的搜尋服務 ,然後在 [概觀] 頁面上,選取 [索引]。

  3. 從現有索引清單中選擇 realestate-us-sample-index

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

  5. 在第一個精靈頁面上,選取 [ 啟用跨原始來源資源分享][CORS], 將 CORS 支援新增至您的索引定義。 此步驟是選擇性的,但您的本機 Web 應用程式不會在沒有遠端索引的情況下連線到遠端索引。

設定搜尋結果

精靈提供轉譯搜尋結果的基本配置,其中包含縮圖影像、標題和描述的空間。 支援每個元素都是索引中的欄位,可提供數據。

  1. 在 [縮圖] 中,選擇 realestate-us-sample 索引中的縮圖字段。 此範例會以 URL 尋址影像的形式包含影像縮圖,並儲存在稱為 縮圖的欄位中。 如果您的索引沒有影像,請將此字段保留空白。

  2. 在 [標題] 中,選擇一個字段來傳達每個檔的唯一性。 在此範例中,清單標識碼是合理的選擇。

  3. 在 [描述] 中,選擇提供詳細數據的欄位,可協助某人決定是否要按下該特定檔。

    configure results for sample data

新增提要欄位

搜尋服務支援多面向導覽,通常會轉譯為提要字段。 Facet 是以可篩選和可多面向字段為基礎,如索引架構中表示。

在 Azure AI 搜尋中,多面向導覽是累積篩選體驗。 在類別內,選取多個篩選會展開結果(例如,選取 City 內的 Seattle 和 Bellevue)。 跨類別選取多個篩選會縮小結果範圍。

提示

您可以在入口網站中檢視完整索引架構。 在每個索引的概觀頁面中尋找 索引定義 (JSON) 連結。 符合多面向導覽資格的字段具有「可篩選:true」和「可 Facet:true」屬性。

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

  2. 接受多面向欄位的目前選取範圍,並繼續下一頁。

新增 typeahead

Typeahead 功能以自動完成和查詢建議的形式提供。 精靈支持查詢建議。 根據使用者提供的擊鍵輸入,搜尋服務會傳回可選取為輸入的「已完成」查詢字串清單。

特定欄位定義會啟用建議。 精靈可讓您設定建議中包含多少信息的選項。

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

Query suggestion configuration

新增建議

建議是指附加至搜尋方塊的自動化查詢提示。 Azure AI 搜尋支援兩個: 自動完成 部分輸入的搜尋字詞,以及 根據潛在相符檔下拉式清單的建議

精靈支持建議,而且可以提供建議結果的欄位衍生自 Suggesters 索引中的建構:

  "suggesters": [
    {
      "name": "sg",
      "searchMode": "analyzingInfixMatching",
      "sourceFields": [
        "number",
        "street",
        "city",
        "region",
        "postCode",
        "tags"
      ]
    }
  ]
  1. 在精靈中,選取 頁面頂端的 [建議] 索引 卷標。 您會看到索引架構中指定為建議提供者的所有欄位清單。

  2. 接受目前的選取範圍,並繼續下一頁。

建立、下載和執行

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

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

  3. 開啟檔案,然後選取 [ 搜尋] 按鈕。 此動作會執行查詢,它可以是傳回任意結果集的空白查詢 (*)。 頁面看起來應該類似下列螢幕快照。 輸入字詞並使用篩選來縮小結果範圍。

基礎索引是由虛構的、產生的數據所組成,這些數據已跨檔重複,而且描述有時不符合影像。 當您根據自己的索引建立應用程式時,您可以預期會有更一致的體驗。

Run the app

清除資源

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

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

請記住,免費服務僅限於三個索引、索引器和數據源。 您可以刪除入口網站中的個別專案,以維持在限制之下。

下一步

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