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

設定使用者介面

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

安裝依附元件

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

npm install

建立搜尋應用程式憑證

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

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

建立搜尋應用程式

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

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

設定網頁應用程式

建立憑證和搜尋應用程式後，請更新應用程式設定，加入下列值：

在指令列中，將目錄變更為 `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 鍵。頁面應顯示查詢結果，以及用於瀏覽結果的面向和分頁控制項。

查看程式碼

接下來幾個部分將探討如何建構使用者介面。

正在載入小工具

小工具和相關程式庫會分兩個階段載入。首先，載入 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();

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

返回繼續