設定使用者介面

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

安裝依附元件

  1. 如果連接器仍在為存放區建立索引，請開啟新的殼層並繼續操作。

  2. 在指令列中，將目錄變更為 cloud-search-samples/end-to-end/search-interface。

  3. 如要下載執行網路伺服器所需的依附元件，請執行下列指令：

npm install

建立搜尋應用程式憑證

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

  1. 返回 Google Cloud 控制台。

  2. 在左側導覽列中，按一下「憑證」。

  3. 在「Create credentials」(建立憑證) 下拉式清單中，選取「OAuth client ID」(OAuth 用戶端 ID)。系統會顯示「建立 OAuth 用戶端 ID」頁面。

  4. (選用) 如果您尚未設定同意畫面，請按一下「設定同意畫面」。系統會顯示「OAuth 同意」畫面。

    1. 按一下「內部」，然後按一下「建立」。系統會顯示另一個「OAuth 同意」畫面。

    2. 填寫必填欄位。如需進一步的操作說明，請參閱設定 OAuth 2.0 的使用者同意聲明一節。

  5. 按一下「應用程式類型」下拉式清單，然後選取「網頁應用程式」。

  6. 在「Name」欄位中輸入「tutorial」。

  7. 在「已授權的 JavaScript 來源」欄位中，按一下「新增 URI」。畫面上會顯示空白的「URI」欄位。

  8. 在「URIs」(URI) 欄位中輸入 http://localhost:8080。

  9. 按一下「建立」。系統會顯示「已建立 OAuth 用戶端」畫面。

  10. 記下用戶端 ID。使用 OAuth2 要求使用者授權時，這個值會用於識別應用程式。這項實作作業不需要用戶端密鑰。

  11. 按一下「確定」。

建立搜尋應用程式

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

  1. 返回 Google 管理控制台。
  2. 按一下「應用程式」圖示。畫面上會顯示「應用程式管理」頁面。
  3. 按一下「Google Workspace」。系統會顯示「應用程式 Google Workspace 管理」頁面。
  4. 向下捲動並按一下「Cloud Search」。系統會顯示「Google Workspace 設定」頁面。
  5. 按一下「搜尋應用程式」。畫面上會顯示「Search Appplications」頁面。
  6. 按一下黃色圓圈中的 +，隨即會顯示「建立新的搜尋應用程式」對話方塊。
  7. 在「顯示名稱」欄位中，輸入「tutorial」。
  8. 點選「建立」。
  9. 按一下新建立搜尋應用程式旁邊的鉛筆圖示 (「編輯搜尋應用程式」)。「Search application details」(搜尋應用程式詳細資料) 頁面隨即顯示。
  10. 記下「應用程式 ID」。
  11. 按一下「資料來源」右側的鉛筆圖示。
  12. 按一下「教學課程」旁的「啟用」切換鈕。這個切換鈕會為新建立的搜尋應用程式啟用教學課程資料來源。
  13. 按一下「教學課程」資料來源右側的「顯示選項」。
  14. 檢查所有層面。
  15. 按一下 [儲存]。
  16. 按一下 [完成]。

設定網頁應用程式

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

  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. 在搜尋框中輸入查詢內容，例如「測試」一詞，然後按下 Enter 鍵。頁面應顯示查詢結果，以及用於瀏覽結果的資料類型和分頁控制項。

檢查程式碼

其餘章節會探討如何建構使用者介面。

正在載入小工具

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

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

恭喜，您已順利完成本教學課程！請繼續閱讀清理指示。

返回 繼續