本頁面由 Cloud Translation API 翻譯而成。

設定使用者介面

本頁面的 Google Cloud Search 教學課程說明如何使用嵌入式搜尋小工具設定自訂搜尋應用程式。如要從頭開始，請參閱 Cloud Search 入門教學課程。

安裝依附元件

如果連接器仍在為存放區建立索引，請開啟新的殼層並繼續。
從指令列將目錄變更為 cloud-search-samples/end-to-end/search-interface。
如要下載執行網路伺服器所需的依附元件，請執行下列指令：

npm install

建立搜尋應用程式憑證

連接器需要服務帳戶憑證才能呼叫 Cloud Search API。如要建立憑證，請按照下列指示操作：

返回 Google Cloud 控制台。
在左側導覽列中，按一下「Credentials」。
在「Create credentials」(建立憑證) 下拉式清單中，選取 [OAuth client ID] (OAuth 用戶端 ID)。「建立 OAuth 用戶端 ID」頁面隨即顯示。
(選用) 如果您尚未設定同意畫面，請按一下「設定同意畫面」。「OAuth 同意」畫面會隨即顯示。
1. 按一下「內部」，然後點選「建立」。系統隨即會顯示另一個「OAuth 同意」畫面。
2. 填寫必填欄位。如需詳細操作說明，請參閱設定 OAuth 2.0 的使用者同意聲明一節。
按一下「應用程式類型」下拉式清單，然後選取「網頁應用程式」。
在「Name」欄位中輸入「tutorial」。
在「已授權的 JavaScript 來源」欄位中，按一下「新增 URI」。系統隨即會顯示空白的「URI」欄位。
在「URI」欄位中輸入 http://localhost:8080。
按一下「建立」。「已建立 OAuth 用戶端」畫面會隨即顯示。
記下用戶端 ID。此值用於透過 OAuth2 要求使用者授權時識別應用程式。這項實作不需要用戶端密鑰。
點選「OK」。

建立搜尋應用程式

接著請在管理控制台中建立搜尋應用程式，搜尋應用程式是搜尋介面及其預設設定的虛擬表示法。

返回 Google 管理控制台。
按一下「應用程式」圖示。「Apps 管理」頁面隨即顯示。
點按「Google Workspace」。系統隨即會顯示「Google Workspace 管理應用程式」頁面。
向下捲動，然後按一下「Cloud Search」。「Google Workspace 設定」頁面會隨即顯示。
按一下「搜尋應用程式」。「搜尋應用程式小工具」頁面會隨即顯示。
按一下黃色圓形的 +，畫面上隨即會顯示「建立新的搜尋應用程式」對話方塊。
在「Display name」(顯示名稱) 欄位中輸入「tutorial」。
點按「建立」。
按一下新建立的搜尋應用程式 (「編輯搜尋應用程式」) 旁邊的鉛筆圖示。系統隨即會顯示「搜尋應用程式詳細資料」頁面。
記下「Application ID」。
按一下「資料來源」右側的鉛筆圖示。
按一下「教學課程」旁的「啟用」切換按鈕。這個切換鈕可以為新建立的搜尋應用程式啟用教學課程資料來源。
在「教學課程」資料來源的右側，按一下「顯示選項」。
檢查所有 facet。
點選「儲存」。
點選「完成」。

設定網頁應用程式

建立憑證和搜尋應用程式後，請更新應用程式設定以加入這些值，如下所示：

從指令列將目錄變更為「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。
在搜尋框中輸入查詢 (例如「test」)，然後按下 Enter 鍵。這個頁面應顯示查詢結果，以及 facet 和分頁控制項，以便瀏覽結果。

查看程式碼

以下各節將說明使用者介面的建構方式。

正在載入小工具

小工具和相關程式庫分為兩階段載入。首先，載入 Bootstrap 指令碼：

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 就會處理應用程式的其餘初始化作業。

處理授權

使用者必須授權應用程式代為查詢。雖然小工具可以提示使用者授權，但您可以自行處理授權，打造更優質的使用者體驗。

針對搜尋介面，應用程式會根據使用者的登入狀態，顯示兩種不同的檢視畫面。

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>

小工具會在初始化期間初始化並繫結至輸入和容器元素：

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

恭喜，您已順利完成教學課程！請繼續閱讀，取得清除操作說明。

返回繼續