设置界面

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

安装依赖项

  1. 如果连接器仍在将代码库编入索引，请打开一个新的 shell，并 请继续

  2. 在命令行中，将目录更改为 cloud-search-samples/end-to-end/search-interface。

  3. 要下载所需的依赖项，请执行以下操作： 运行 Web 服务器，请运行以下命令：

npm install

创建搜索应用凭据

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

  1. 返回 Google Cloud 控制台。

  2. 在左侧导航栏中，点击凭据。

  3. 从创建凭据下拉列表中选择 OAuth 客户端 ID。“创建 OAuth 客户端 ID”页面。

  4. （可选）如果您尚未配置同意屏幕，请点击 配置同意屏幕。“OAuth 同意声明”屏幕。

    1. 点击内部，然后点击创建。其他“OAuth 同意声明”屏幕 。

    2. 填写必填字段。如需进一步的说明，请参阅 同意部分 设置 OAuth 2.0。

  5. 点击应用类型下拉列表，然后选择网页应用。

  6. 在名称字段中，输入“tutorials”。

  7. 在已获授权的 JavaScript 来源字段中，点击添加 URI。空 “URI”字段。

  8. 在 URIs 字段中，输入 http://localhost:8080。

  9. 点击创建。“已创建 OAuth 客户端”屏幕。

  10. 记下客户端 ID。该值用于在发生以下情况时标识应用： 通过 OAuth2 请求用户授权。客户端密钥不是必需的 。

  11. 点击确定。

创建搜索应用

接下来，在管理控制台中创建搜索应用。搜索应用 是搜索界面及其默认 配置。

  1. 返回 Google 管理控制台。
  2. 点击“应用”图标。“Google Apps 管理”页面。
  3. 点击 Google Workspace。“Google Workspace 中的 Apps 管理”页面页面。
  4. 向下滚动，然后点击 Cloud Search。“Google Workspace 设置”页 。
  5. 点击搜索应用。“搜索应用”页面。
  6. 点击黄色圆形 +。“创建新的搜索应用”对话框。
  7. 在显示名称字段中，输入“tutorials”。
  8. 点击创建。
  9. 点击新创建的搜索应用旁边的铅笔图标 （“修改搜索应用”）。“搜索应用详细信息”页面。
  10. 记下应用 ID。
  11. 点击数据源右侧的铅笔图标。
  12. 在“教程”旁边点击启用切换开关。此切换开关可启用 新创建的搜索应用的教程数据源。
  13. 在“教程”右侧数据源，请点击显示选项。
  14. 请检查所有方面。
  15. 点击保存。
  16. 点击完成。

配置 Web 应用

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

  1. 在命令行中，将目录更改为 `cloud-search-samples/end-to-end/search-interface/public.'
  2. 使用文本编辑器打开 app.js 文件。
  3. 在文件顶部找到 searchConfig 变量。
  4. 将 [client-id] 替换为之前创建的 OAuth 客户端 ID。
  5. 将 [application-id] 替换为 上一节。
  6. 保存文件。

运行应用

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

npm run start

查询索引

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

  1. 打开浏览器并导航到 http://localhost:8080。
  2. 点击 sign in（登录）以授权该应用查询 Cloud Search 。
  3. 在搜索框中输入查询内容，例如“test”然后按 Enter 键。该页面应显示查询结果以及分面和 分页控件以浏览结果。

查看代码

其余部分将介绍如何构建界面。

加载 widget

widget 和相关库分两个阶段加载。首先，引导加载程序 脚本加载完毕：

index.html
<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
/**
 * 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 处理 所有必需的库加载完成后

处理授权

用户必须授权应用代表他们进行查询。而微件 可以提示用户进行授权，从而提供更好的用户体验 自行处理授权事宜

对于搜索界面，应用会根据不同的指标提供两种不同的视图： 监控用户的登录状态

index.html
<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>

在初始化期间，会启用正确的视图， 已配置 sign-in 和 sign-out 事件：

app.js
/**
 * 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
<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
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();

恭喜，您已成功学完教程！沿 继续前行 清理说明。

上一个 下一个