此页面由 Cloud Translation API 翻译。

设置界面

Google Cloud Search 教程的这一页面介绍了如何使用嵌入式搜索微件设置自定义搜索应用。要从头开始学习本教程，请参阅 Cloud Search 使用入门教程。

安装依赖项

如果连接器仍在为代码库编制索引，请打开新的 shell 并继续操作。
在命令行中，将目录更改为 cloud-search-samples/end-to-end/search-interface。
如需下载运行 Web 服务器所需的依赖项，请运行以下命令：

npm install

创建搜索应用凭据

连接器需要服务帐号凭据才能调用 Cloud Search API。如需创建凭据，请执行以下操作：

返回 Google Cloud 控制台。
在左侧导航栏中，点击凭据。
从创建凭据下拉列表中选择 OAuth 客户端 ID。系统会显示“创建 OAuth 客户端 ID”页面。
（可选）。如果您尚未配置同意屏幕，请点击配置同意屏幕。系统会显示“OAuth 同意”屏幕。
1. 点击内部，然后点击创建。系统随即会显示另一个“OAuth 同意”屏幕。
2. 填写必填字段。如需了解详细说明，请参阅设置 OAuth 2.0 的“用户同意”部分。
点击应用类型下拉列表，然后选择 Web 应用。
在名称字段中，输入“tutorial”。
在已获授权的 JavaScript 来源字段中，点击添加 URI。系统会显示一个空的“URI”字段。
在 URI 字段中，输入 http://localhost:8080。
点击创建。系统会显示“OAuth 客户端已创建”屏幕。
记下客户端 ID。此值用于在使用 OAuth2 请求用户授权时用于标识应用。此实现不需要客户端密钥。
点击确定。

创建搜索应用

接下来，在管理控制台中创建搜索应用。搜索应用是搜索界面及其默认配置的虚拟表示形式。

返回 Google 管理控制台。
点击“应用”图标。系统会显示“Google Apps 管理”页面。
点击 Google Workspace。系统随即会显示“Google Workspace 管理应用”页面。
向下滚动，然后点击 Cloud Search。系统会显示“Google Workspace 设置”页面。
点击搜索应用。系统会显示“Search Appplications”页面。
点击圆角黄色 +。此时会显示“创建新的搜索应用”对话框。
在显示名称字段中，输入“tutorial”。
点击创建。
点击新创建的搜索应用旁边的铅笔图标（“修改搜索应用”）。系统会显示“搜索应用详细信息”页面。
记下应用 ID。
在数据源右侧，点击铅笔图标。
点击“教程”旁边的启用切换开关。此切换开关可为新创建的搜索应用启用教程数据源。
在“教程”数据源的右侧，点击显示选项。
检查所有方面。
点击保存。
点击完成。

配置 Web 应用

创建凭据和搜索应用后，请更新应用配置以包含这些值，如下所示：

在命令行中，将目录更改为“cloud-search-samples/end-to-end/search-interface/public”。
使用文本编辑器打开 app.js 文件。
在文件顶部找到 searchConfig 变量。
将 [client-id] 替换为之前创建的 OAuth 客户端 ID。
将 [application-id] 替换为上一部分中所述的搜索应用 ID。
保存文件。

运行应用

通过运行以下命令启动应用：

npm run start

查询索引

如需使用搜索 widget 查询索引，请执行以下操作：

打开浏览器并前往 http://localhost:8080。
点击登录，授权该应用代表您查询 Cloud Search。
在搜索框中输入查询，如单词“test”，然后按 Enter。该页面应显示查询结果以及用于浏览结果的分面和分页控件。

查看代码

其余部分将介绍界面的构建方式。

加载 widget

该 widget 和相关库分两个阶段加载。首先，系统会加载引导加载程序脚本：

index.html

在 GitHub 上查看

<script src="https://apis.google.com/js/api.js?mods=enable_cloud_search_widget&onload=onLoad" async defer></script>

其次，在脚本准备就绪后，系统会调用 onLoad 回调。然后加载 Google API 客户端、Google 登录和 Cloud Search widget 库。

app.js

在 GitHub 上查看

/**
 * Load the cloud search widget & auth libraries. Runs after
 * the initial gapi bootstrap library is ready.
 */
function onLoad() {
  gapi.load('client:auth2:cloudsearch-widget', initializeApp)
}

加载完所有必需的库后，应用的其余初始化任务将由 initializeApp 处理。

处理授权

用户必须授权应用代表他们执行查询。虽然该 widget 可以提示用户授权，但您可以通过自行处理授权实现更好的用户体验。

对于搜索界面，应用会根据用户的登录状态显示两种不同的视图。

index.html

在 GitHub 上查看

<div class="content">
  <div id="app" hidden>
    <div id="header">
      <button id="sign-out">Sign-out</button>
    </div>
    <!-- Markup for widget...-->
  </div>
  <div id="welcome" hidden>
    <h1>Cloud Search Tutorial</h1>
    <p>Sign in with your Google account to search.</p>
    <button id="sign-in">Sign-in</button>
  </div>
</div>

在初始化期间，会启用正确的视图，并配置登录和退出帐号的处理程序：

app.js

在 GitHub 上查看

/**
 * Initialize the app after loading the Google API client &
 * Cloud Search widget.
 */
async function initializeApp() {
  await gapi.auth2.init({
      'clientId': searchConfig.clientId,
      'scope': 'https://www.googleapis.com/auth/cloud_search.query'
  });

  let auth = gapi.auth2.getAuthInstance();

  // Watch for sign in status changes to update the UI appropriately
  let onSignInChanged = (isSignedIn) => {
    document.getElementById("app").hidden = !isSignedIn;
    document.getElementById("welcome").hidden = isSignedIn;
    if (resultsContainer) {
      resultsContainer.clear();
    }
  }
  auth.isSignedIn.listen(onSignInChanged);
  onSignInChanged(auth.isSignedIn.get()); // Trigger with current status

  // Connect sign-in/sign-out buttons
  document.getElementById("sign-in").onclick = (e) =>  auth.signIn();
  document.getElementById("sign-out").onclick = (e) => auth.signOut();

  // ...

}

创建搜索界面

搜索微件需要少量的 HTML 标记以用于搜索输入并保留搜索结果：

index.html

在 GitHub 上查看

<div id="search_bar">
  <div>
    <div id="suggestions_anchor">
      <input type="text" id="search_input" placeholder="Search for...">
    </div>
  </div>
</div>
<div id="facet_results" ></div>
<div id="search_results" ></div>

该 widget 在初始化期间会初始化并绑定到输入和容器元素：

app.js

在 GitHub 上查看

gapi.config.update('cloudsearch.config/apiVersion', 'v1');
resultsContainer = new gapi.cloudsearch.widget.resultscontainer.Builder()
  .setSearchApplicationId(searchConfig.searchAppId)
  .setSearchResultsContainerElement(document.getElementById('search_results'))
  .setFacetResultsContainerElement(document.getElementById('facet_results'))
  .build();

const searchBox = new gapi.cloudsearch.widget.searchbox.Builder()
  .setSearchApplicationId(searchConfig.searchAppId)
  .setInput(document.getElementById('search_input'))
  .setAnchor(document.getElementById('suggestions_anchor'))
  .setResultsContainer(resultsContainer)
  .build();

恭喜，您已成功学完教程！请继续查看清理说明。

上一个下一个