本頁面由 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」(OAuth 用戶端 ID)。畫面上會顯示「Create OAuth client ID」(建立 OAuth 用戶端 ID) 頁面。
(選用) 如果您尚未設定同意畫面，請按一下「設定同意畫面」。「OAuth 同意」畫面會隨即顯示。
1. 依序按一下「內部」和「建立」。系統隨即會顯示另一個「OAuth 同意」畫面。
2. 填寫必填欄位。如需進一步說明，請參閱「設定 OAuth 2.0」中的使用者同意聲明一節。
按一下「Application type」(應用程式類型) 下拉式清單，然後選取「Web application」(網頁應用程式)。
在「Name」欄位中輸入「tutorial」。
在「已授權的 JavaScript 來源」欄位中，按一下「新增 URI」。系統隨即會顯示空白的「URI」欄位。
在「URI」欄位中輸入 http://localhost:8080。
按一下「建立」。系統會顯示「已建立 OAuth 用戶端」畫面。
記下用戶端 ID。使用 OAuth2 要求使用者授權時，這個值可用於識別應用程式。此實作不需要用戶端密鑰。
按一下「確定」。

建立搜尋應用程式

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

返回 Google 管理控制台。
按一下「應用程式」圖示。系統會顯示「應用程式管理」頁面。
點按「Google Workspace」。系統會顯示「Google Workspace 管理應用程式」頁面。
向下捲動並點選「Cloud Search」。系統隨即會顯示「Google Workspace 的設定」頁面。
按一下「搜尋應用程式」。畫面上會顯示「搜尋應用程式」頁面。
按一下黃色圓形的 +，「Create a new search application」(建立新的搜尋應用程式) 對話方塊。
在「Display name」欄位中輸入「tutorial」。
點選「建立」。
按一下新建立的搜尋應用程式 (「編輯搜尋應用程式」) 旁的鉛筆圖示。畫面上會顯示「搜尋應用程式詳細資料」頁面。
記下「Application 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。
按一下「Sign in」，授權應用程式代表您查詢 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();

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

返回繼續