设置界面

Google Cloud Search 教程的这一页介绍了如何使用可嵌入的搜索 widget 设置自定义搜索应用。如需从本教程的开头开始学习，请参阅 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. 在名称字段中，输入“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. 点击“教程”旁边的启用切换开关。此切换开关可为新创建的搜索应用启用教程数据源。
  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] 替换为上一部分中记下的搜索应用 ID。
  6. 保存文件。

运行应用

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

npm run start

查询索引

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

  1. 打开浏览器，然后前往 http://localhost:8080。
  2. 点击登录，以授权该应用代表您查询 Cloud Search。
  3. 在搜索框中输入查询内容（例如字词“测试”），然后按 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 widget 库。

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 处理。

处理授权

用户必须授权应用代表其进行查询。虽然 widget 可以提示用户进行授权，但您可以通过自行处理授权来获得更好的用户体验。

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

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

  // ...

}

创建搜索界面

搜索 widget 需要少量 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();

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

上一个 下一个