设置界面

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 和相关库分两个阶段加载。首先,引导加载程序 脚本加载完毕:

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

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

处理授权

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

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

<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 事件:

/**
 * 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 标记进行搜索 并按住搜索结果:

<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 经过初始化,并绑定到输入和容器元素 会发生以下情况:

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

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

上一个 下一个