快速入门:在 Azure 门户中创建演示应用

在本 Azure AI 搜索快速入门中,将使用 Azure 门户的“创建演示应用”向导来生成可下载的“localhost”样式的 Web 应用,该应用在浏览器中运行。 根据其配置,生成的应用在首次使用时就能正常运行,并与搜索服务上的索引建立实时只读连接。 默认应用可以包含搜索栏、结果区域、边栏筛选器和自动提示支持。

演示应用有助于你直观地了解索引在客户端应用中的工作方式,但其不适用于生产场景。 生产应用应包括演示应用所不具备的安全性、错误处理和托管逻辑。

先决条件

开始之前,必须具备以下先决条件:

  • 具有活动订阅的 Azure 帐户。 创建试用版订阅

  • Azure AI 搜索服务。 创建服务或在当前订阅下查找现有服务。 可以使用本快速入门的免费服务。

  • Microsoft Edge(最新版本)

  • 要用作所生成应用程序的基础的搜索索引

    本快速入门使用内置的“房地产”示例数据和索引,因为该示例包含缩略图(向导支持将图像添加到结果页)。 若要创建本练习中使用的索引,请运行“导入数据”向导,并选择“realestate-us-sample”数据源。

    示例数据的数据源页

索引可供使用后,转到下一步。

启动向导

  1. 使用 Azure 帐户登录到 Azure 门户

  2. 查找搜索服务,然后在“概述”页中间的链接中,选择“索引”。

  3. 从现有索引的列表中选择“realestate-us-sample-index”。

  4. 在索引页的顶部,选择“创建演示应用”启动向导

  5. 在第一个向导页上,选择“启用跨源资源共享(CORS)”以将 CORS 支持添加到索引定义。 此步骤是可选的,但如果不执行此步骤,本地 Web 应用无法连接到远程索引。

配置搜索结果

向导将为呈现的搜索结果提供一个基本布局,其中包含缩略图、标题和说明的空间。 其中的每个元素由索引中一个提供数据的字段赋值。

  1. 在“缩略图”中,选择“realestate-us-sample”索引中的“thumbnail”字段。 此示例正好包含 URL 定址图像形式的缩略图,这些缩略图存储在名为 thumbnail 的字段中。 如果索引中没有图像,请将此字段留空。

  2. 在“标题”中,选择能够表达每个文档的唯一性的字段。 在此示例中,列表 ID 是合理的选择。

  3. 在“说明”中,选择一个提供详细信息的字段,这些信息可以帮助用户确定是否要单击进入特定的文档。

    配置示例数据的结果

添加边栏

搜索服务支持分面导航(通常以边栏的形式呈现)。 分面基于可筛选且可分面的字段,在索引架构中表示。

在 Azure AI 搜索中,分面导航是一种累积筛选体验。 在一个类别中选择多个筛选器会展开结果(例如,在“城市”中选择“西雅图”和“贝尔维尤”)。 跨类别选择多个筛选器会缩小结果范围。

提示

可以在门户中查看整个索引架构。 在每个索引的概述页中,找到“索引定义(JSON)”链接。 符合分面导航要求的字段具有“filterable: true”和“facetable: true”属性。

  1. 在向导中,选择页面顶部的“边栏”选项卡。 你将看到一个列表,其中所有字段在索引中被归为可筛选和可分面的。

  2. 接受当前选择分面字段,然后转到下一页。

添加自动提示功能

自动提示功能以自动完成和查询建议的形式提供。 向导支持查询建议。 根据用户提供的击键输入,搜索服务将返回可选作输入的“已完成”查询字符串列表。

在特定的字段定义中启用建议。 向导提供相应的选项用于配置要在建议中包含的信息量。

以下屏幕截图显示了向导中的选项,同时显示了应用中呈现的页面。 其中展示了如何使用字段选项,以及如何使用“显示字段名称”在建议中包含或排除标签。

查询建议配置

添加建议

建议是指附加到搜索框的自动查询提示。 Azure AI 搜索支持两种建议:自动补全部分输入的搜索词,以及根据可能的匹配文档建议一个下拉列表

向导支持建议,可提供建议结果的字段派生自索引中的 Suggesters 构造:

  "suggesters": [
    {
      "name": "sg",
      "searchMode": "analyzingInfixMatching",
      "sourceFields": [
        "number",
        "street",
        "city",
        "region",
        "postCode",
        "tags"
      ]
    }
  ]
  1. 在向导中,选择页面顶部的“建议”选项卡。 你将看到一个列表,其中有在索引架构中指定为建议提供程序的所有字段。

  2. 接受当前所做的选择,然后转到下一页。

创建、下载和执行

  1. 选择页面底部的“创建演示应用”,生成 HTML 文件。

  2. 出现提示时,请选择“下载应用”以下载文件。

  3. 打开该文件,然后选择“搜索”按钮。 此操作会执行一个查询,它可以是返回任意结果集的空查询 (*)。 页面应类似于以下屏幕截图。 输入一个搜索词,然后使用筛选器来缩小结果范围。

基础索引由虚构生成的、已在不同文档中复制的数据构成,说明有时与图像不符。 如果基于自己的索引创建应用,则预期会获得更有整体性的体验。

运行应用

清理资源

在自己的订阅中操作时,最好在项目结束时确定是否仍需要已创建的资源。 持续运行资源可能会产生费用。 可以逐个删除资源,也可以删除资源组以删除整个资源集。

可以使用左侧导航窗格中的“所有资源”或“资源组”链接 ,在门户中查找和管理资源。

请记住,免费服务仅限于三个索引、索引器和数据源。 可以在门户中删除单个项目,以不超出此限制。

后续步骤

演示程序可用于原型制作,因为你可以在无需编写 JavaScript 或前端代码的情况下模拟最终用户体验,但当你在自己的项目中将要进行概念证明时,请查看其中一个反映实际应用的端到端代码示例: