此页面由 Cloud Translation API 翻译。

设置界面

Google Cloud Search 教程的这一部分介绍了如何使用可嵌入的搜索 widget 设置自定义搜索应用。如需从本教程开头开始，请参阅 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 的“用户许可”部分。
点击应用类型下拉列表，然后选择网络应用。
在 Name 字段中，输入“tutorial”。
在已获授权的 JavaScript 来源字段中，点击添加 URI。系统会显示一个空的“URI”字段。
在 URI 字段中，输入 http://localhost:8080。
点击创建。系统会显示“已创建 OAuth 客户端”屏幕。
记下客户端 ID。此值用于在通过 OAuth2 请求用户授权时标识应用。此实现不需要客户端密钥。
点击确定。

创建搜索应用

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

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

配置 Web 应用

创建凭据和搜索应用后，请更新应用配置以添加以下值，如下所示：

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

运行应用

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

npm run start

查询索引

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

打开浏览器并导航到 http://localhost:8080。
点击登录，授权该应用代表您查询 Cloud Search。
在搜索框中输入查询（例如“测试”一词），然后按 Enter 键。该页面应显示查询结果以及分面和分页控件，以便浏览结果。

查看代码

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

加载微件

微件和相关库分两个阶段加载。首先，系统会加载引导脚本：

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 微件库。

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();

恭喜，您已成功完成本教程！请继续阅读，了解清理说明。

上一个下一个