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

設定使用者介面

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

安裝依附元件

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

npm install

建立搜尋應用程式憑證

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

返回 Google Cloud 控制台。
在左側導覽列中，按一下「Credentials」。
在「Create credentials」(建立憑證) 下拉式清單中選取 OAuth 用戶端 ID。「Create OAuth client ID」(建立 OAuth 用戶端 ID)出現。
(選用) 如果您尚未設定同意畫面，請按一下 設定同意畫面。「OAuth 同意」畫面上會顯示提示訊息。
1. 按一下「內部」，然後點選「建立」。其他「OAuth 同意」螢幕出現。
2. 填寫必填欄位。如需進一步指示，請的「同意聲明」部分設定 OAuth 2.0。
按一下「應用程式類型」下拉式清單，然後選取「網頁應用程式」。
在「Name」欄位中輸入「tutorial」。
在「已授權的 JavaScript 來源」欄位中，按一下「新增 URI」。空白「URI」] 欄位。
在「URI」欄位中輸入 http://localhost:8080。
按一下「建立」。「已建立 OAuth 用戶端」畫面上會顯示提示訊息。
記下用戶端 ID。這個值會在以下情況中識別應用程式：透過 OAuth2 要求使用者授權。不需要用戶端密鑰瞭解這個實作方法
點選「OK」。

建立搜尋應用程式

接著請在管理控制台中建立搜尋應用程式，搜尋應用程式是搜尋介面的虛擬表示法此外還會從 0 自動調整資源配置您完全不必調整資源調度設定

返回 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] 替換為請參閱上一節的說明。
儲存檔案。

執行應用程式

執行下列指令來啟動應用程式：

npm run start

查詢索引

如要使用搜尋小工具查詢索引，請按照下列步驟操作：

開啟瀏覽器，然後前往 http://localhost:8080。
按一下「登入」即可授權應用程式查詢 Cloud Search 管理。
在搜尋框中輸入查詢，例如「test」並按下 Enter 鍵。網頁上應會顯示查詢結果，以及 facet 和用於瀏覽結果的分頁控制項。

查看程式碼

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

正在載入小工具

小工具和相關程式庫分為兩階段載入。首先是啟動已載入指令碼：

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

恭喜，您已順利完成教學課程！繼續行駛清除操作說明

返回繼續