本頁面的 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 同意」畫面會隨即顯示。
按一下「內部」,然後點選「建立」。系統隨即會顯示另一個「OAuth 同意」畫面。
填寫必填欄位。如需詳細操作說明,請參閱設定 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 指令碼:
第二,指令碼準備就緒後,系統就會呼叫 onLoad
回呼。然後載入 Google API 用戶端、Google 登入和 Cloud Search 小工具程式庫。
一旦載入所有必要的程式庫,initializeApp
就會處理應用程式的其餘初始化作業。
處理授權
使用者必須授權應用程式代為查詢。雖然小工具可以提示使用者授權,但您可以自行處理授權,打造更優質的使用者體驗。
針對搜尋介面,應用程式會根據使用者的登入狀態,顯示兩種不同的檢視畫面。
在初始化期間,系統會啟用正確的檢視畫面,並設定登入和登出事件的處理常式:
建立搜尋介面
搜尋小工具需要少量的 HTML 標記才能用於搜尋輸入,並保留搜尋結果:
小工具會在初始化期間初始化並繫結至輸入和容器元素:
恭喜,您已順利完成教學課程!請繼續閱讀,取得清除操作說明。