设置界面

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. 点击应用类型 下拉列表，然后选择 Web 应用 。

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

  7. 在已获授权的 JavaScript 来源 字段中，点击添加 URI 。 系统随即会显示一个空的“URI”字段。

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

  9. 点击创建 。系统随即会显示“OAuth 客户端已创建”页面。

  10. 记下客户端 ID。在通过 OAuth2 请求用户授权时，此值用于标识应用。此实现不需要客户端密钥。

  11. 点击确定 。

创建搜索应用

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

  1. 返回 Google 管理控制台。
  2. 点击“应用”图标。系统随即会显示“应用管理”页面。
  3. 点击 Google Workspace 。系统随即会显示“应用 Google Workspace 管理”页面。
  4. 向下滚动，然后点击 Cloud Search 。系统随即会显示“Google Workspace 设置”页面。
  5. 点击搜索应用 。系统随即会显示“搜索应用”页面。
  6. 点击圆形的黄色 + 。系统随即会显示“创建新的搜索应用”对话框。
  7. 在显示名称 字段中，输入“tutorial”。
  8. 点击创建 。
  9. 点击新创建的搜索应用旁边的铅笔图标（“修改搜索应用”）。系统随即会显示“搜索应用详情”页面。
  10. 记下应用 ID 。
  11. 在数据源右侧，点击铅笔图标。
  12. 在“tutorial”旁边，点击启用 切换开关。此切换开关会为新创建的搜索应用启用 tutorial 数据源。
  13. 在“tutorial”数据源的右侧，点击显示选项 。
  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] 替换为上一部分中记下的搜索应用 ID。
  6. 保存文件。

运行应用

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

npm run start

查询索引

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

  1. 打开浏览器并访问 http://localhost:8080。
  2. 点击登录 ，以授权应用代表您查询 Cloud Search。
  3. 在搜索框中，输入查询内容（例如字词“test”），然后按 Enter 键。页面应显示查询结果，以及用于浏览结果的构面和分页控件。

查看代码

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

加载微件

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

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>

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

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>

在初始化期间，微件会初始化并绑定到输入和容器元素：

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

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

上一个 下一个