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

  • 项目

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

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

先决条件

开始之前，必须具备以下先决条件：

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

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

  • Microsoft Edge（最新版本）。

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

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

    data source page for sample data

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

启动向导

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

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

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

  4. 在索引页的顶部，选择“创建演示应用(预览版)”以启动向导。

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

配置搜索结果

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

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

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

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

    configure results for sample data

添加边栏

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

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

提示

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

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

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

添加自动提示功能

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

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

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

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 或前端代码的情况下模拟最终用户体验，但当你在自己的项目中将要进行概念证明时，请查看其中一个反映实际应用的端到端代码示例：

向 Web 应用添加搜索