Google Cloud Search チュートリアルのこのページでは、カスタム 検索アプリケーションを作成できます。 このチュートリアルの初めから、 Cloud Search スタートガイドのチュートリアル
依存関係のインストール
コネクタによるリポジトリのインデックス登録がまだ完了していない場合は、新しいシェルを開き、 続行します
コマンドラインから、
cloud-search-samples/end-to-end/search-interface
。アプリケーションに必要な依存関係を 次のコマンドを実行します。
npm install
検索アプリケーションの認証情報を作成する
コネクタには、Cloud Search を呼び出すためのサービス アカウントの認証情報が必要です。 API認証情報を作成するには:
Google Cloud コンソールに戻ります。
左側のナビゲーションで [認証情報] をクリックします。
[認証情報の作成] プルダウン リストから、 OAuth クライアント ID。[Create OAuth client ID]ページが表示されます。
(省略可)同意画面を設定していない場合は、 同意画面を構成します。「OAuth 同意」画面が表示されます。
[内部] をクリックし、[作成] をクリックします。別の「OAuth 同意」スクリーン 表示されます。
必須項目に入力します。詳細については、お客様をご案内する の同意セクション OAuth 2.0 の設定
[アプリケーションの種類] プルダウン リストをクリックして、[ウェブ アプリケーション] を選択します。
[名前] フィールドに「tutorial」と入力します。
[承認済みの JavaScript 生成元] フィールドで、[URI を追加] をクリックします。空の "URI"フィールドが表示されます。
[URI] フィールドに「
http://localhost:8080
」と入力します。[作成] をクリックします。「OAuth クライアントの作成」画面が表示されます。
クライアント ID をメモします。この値は、アプリケーションを特定する際に OAuth2 でユーザー認証をリクエストします。クライアント シークレットは不要です 使用します。
[OK] をクリックします。
検索アプリケーションを作成する
次に、管理コンソールで検索アプリケーションを作成します。検索アプリケーション 検索インターフェースを仮想的に表現したもので、デフォルトの できます。
- Google 管理コンソールに戻ります。
- アプリアイコンをクリックします。「Apps Administration」ページが表示されます。
- [Google Workspace] をクリックします。「Apps Google Workspace Administration」ページが表示されます。
- 下にスクロールして [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
に移動します。 - [sign in] をクリックして、アプリが Cloud Search にクエリを実行することを承認します。 自動的に作成されます。
- 検索ボックスに「test」などのクエリを入力します。を押して Enter キーを押します。このページには、クエリの結果に加えて、ファセットと 結果間を移動できます。
コードの確認
以降のセクションでは、ユーザー インターフェースの構築方法について説明します。
ウィジェットを読み込む
ウィジェットと関連ライブラリは、2 つのフェーズで読み込まれます。まず ブートストラップは スクリプトが読み込まれます。
次に、スクリプトの準備が整うと onLoad
コールバックが呼び出されます。その後、
Google API クライアント、Google ログイン、Cloud Search のウィジェット ライブラリです。
アプリの残りの初期化は、initializeApp
によって処理されます。
呼び出すことができます。
認可の処理
ユーザーは、ユーザーに代わってクエリをアプリに許可する必要があります。ウィジェットは ユーザーに承認を求めることができるため、ユーザー エクスペリエンスが向上します。 認可を処理する方法です。
検索インターフェースについては、入力に応じて 2 つの異なるビューが表示されます。 ユーザーのログイン状態に応じて異なります。
初期化中、正しいビューが有効になり、 ログイン イベントとログアウト イベントが構成されています。
検索インターフェースの作成
検索ウィジェットでは、検索用に少量の HTML マークアップが必要です 検索結果を保持するには、次のようにします。
ウィジェットが初期化され、入力要素とコンテナ要素にバインドされている 次の処理が行われます。
これでチュートリアルは完了です。そのまま続行 クリーンアップ手順を実行します