angular search experience

Angular の検索エクスペリエンス

搭載

免責事項

このリファレンス アプリケーションは、低レベルの Algolia 検索ライブラリを使用しています。同様のアプリケーションを構築している場合は、公式の Angular InstaSearch ライブラリを使用してください。

プロジェクトのセットアップ

ソースファイルのクローン作成

このプロジェクトをマシンにダウンロード (クローン) するには、 gitインストールされている必要があります。システムに Git をインストールする方法について詳しくは、こちらをご覧ください。

インストールしたら、ターミナル シェルを開き、次のコマンドを使用してこのリポジトリのクローンを作成します。

 > git clone https://github.com/manekinekko/angular-search-experience.git

依存関係のインストール

このプロジェクトの依存関係をインストールするには、 npm install必要です。次に、ターミナルを使用して、以前にこのプロジェクトを複製したフォルダーにディレクトリを変更する必要があります。デフォルトでは (上記のコマンドラインをコピーした場合)、これはangular-search-experienceになります。

 > cd angular-search-experience
> npm install

開発サーバー

私たちはクラウド機能を保護することにしました (これは良い習慣です)。したがって、 search API をリクエストするには、リクエストにAuthorizationヘッダーを追加する必要があります。必要なヘッダーAuthorization: SearchToken this-is-a-fake-token次のとおりです。以下の cURL コマンドの例を参照してください。

サーバーを起動する前に、 /functionsフォルダー内の .env ファイル内にいくつかの環境変数を追加する必要があります。この env テンプレート ファイルを例として使用し (gitignored である .env に名前を変更します)、次のように設定できます。

• algolia_applicationid= YOUR_ALGOLIA_APPLICATION_ID
• algolia_apikey= YOUR_ALGOLIA_API_KEY

アプリケーション ID と API キーは、https://www.algolia.com/apps の「API キー」セクションで確認できます。 API キーを取得するにはアカウントを作成する必要があります。

オプション 1 (推奨): エクスプレス

ローカル マシンでサーバーを試すには、次のコマンドを実行します: npm run start:backend

オプション 2 (上級):バックエンド (クラウド機能)

このオプションを使用するには、firebase アカウントにログインし、このプロジェクト (firebase 上) にアクセスできる必要があります。 firebase プロジェクトにアクセスできるのは管理者だけです。

バックエンドの別のバージョンは、Cloud Functions for Firebase を使用して実装されたサーバーレス アーキテクチャに依存しています。

このプロジェクトには、ローカル依存関係としてfirebase-toolsが付属しています。このツールは、Firebase プロジェクトを生成、実行、デプロイできる Firebase コマンド ライン インターフェイス (CLI) ツールのセットです。通常、この依存関係はグローバルにインストールされることに注意してください。

また、Firebase ランタイムは Node.js の古いバージョンv6.11.5を使用しています。 /functionsの下に.nvmrcフォルダーを追加しました。この特別なファイルは、特定のフォルダー内の必要なバージョンの Node.js に簡単に切り替えるためにNVMによって使用される構成ファイルです。 NVMまだインストールしていない場合は、インストール ガイドをお読みください。

NVM使用して必要な Node.js バージョンをインストールし、それを使用します ( /functionsフォルダー内のみ)。

 > nvm install 6.11.5
> nvm use

Node.js v6.11.5使用しているので、 search Cloud Function をローカルで実行 (エミュレート) する準備が整いました。そのためには、 npm run start:backend:firebase実行します。このコマンドは次の 2 つのことを行います。

1. ディレクトリを/functionsフォルダー (プロジェクトのルートにあります) に変更します。このフォルダーにはすべてのバックエンド コードが含まれています。
2. http://localhost:5000/angular-search-experience/us-central1/searchでsearchクラウド関数をローカルに提供します。

重要: search関数は、エンティティの追加と削除を可能にするPOSTおよびDELETE HTTP メソッドのみを実装しているため、Cloud Function をリクエストできるようにするには、 cURLやPostmanなどの HTTP クライアントが必要であることに注意してください。

フロントエンドアプリケーション

プロジェクトのルートでnpm start実行して、フロントエンド開発サーバーを起動します。 http://localhost:4200/に移動します。ソース ファイルを変更すると、アプリは自動的にリロードされます。

フロントエンド アプリケーションは、Angular CLI バージョン 6.1.2 で生成されました。

建てる

npm run build実行してプロジェクトをビルドします。ビルド アーティファクトはdist/angular-search-experience/ディレクトリに保存されます。運用ビルドにはnpm run build:prodスクリプトを使用します。

展開する

Firebase ホスティングを使用してフロントエンド アプリケーションを公開します。新しいバージョンをデプロイする前に、次のコマンドを使用して実稼働パッケージをビルドする必要があります。

 > npm run build

次に、新しいビルドを Firebase にデプロイできます。

 > npm run deploy

重要: Firebase へのデプロイには、(Firebase プロジェクトへの) アクセス権限が必要です。

実稼働環境

バックエンド

本番エンドポイント (クラウド機能) は以下で利用できます。

1. POST: /api/1/apps
2. 削除: /api/1/apps/:id

本番環境の Cloud Function をリクエストするには、次の cURL コマンドを使用できます。

Algolia のインデックスに新しいエントリを追加する

 > curl -H "Authorization: SearchToken this-is-a-fake-token" -H "Content-Type: application/json" -X POST -d '{}' https://example.com/api/1/apps

{"createdAt":"2018-04-19T13:17:10.343Z","taskID":29343382,"objectID":"10788302"}

注: applicationオブジェクトは意図的に検証しません。

Algolia のインデックスからエントリを削除する

 > curl -H "Authorization: SearchToken this-is-a-fake-token" -X DELETE https://example.com/api/1/apps/10788302

{"deletedAt":"2018-04-19T13:30:42.190Z","taskID":29353102,"objectID":"10788302"}

フロントエンド

アーキテクチャと利用可能な機能 (UI)

コンポーネントのアーキテクチャ

1. コンポーネント: <app-search></app-search>
2. コンポーネント: <app-search-input></app-search-input>
3. コンポーネント: <app-category></app-category>
4. コンポーネント: <app-search-result></app-search-result>
5. コンポーネント: <mat-nav-list></mat-nav-list>
6. ディレクティブ: [appRating]
7. パイプ: freePriceLabel

API ドキュメントの詳細については、こちらをご覧ください: https://manekinekko.github.io/angular-search- experience/index.html

特徴

検索ボックス

ハイライト付きの検索結果

並べ替えオプション

ファセットのオプション

遅延読み込み

ディープリンク

デンジャーゾーン: イースターエッグは目前!

中にはイースターエッグ！！

このアプリケーションにはチャットボットが含まれています。音声を使用してアプリケーションを検索するのに役立ちます。天気予報アプリの検索やゲームの検索を手伝ってもらうだけです。

ボットを有効にするには、マイクとスピーカーをオンにする必要があります。アプリケーションのロゴ (ヘッダー) を 6 回クリックするだけです。

注: このボットの実装は実験的 (そして楽しみのため!) であり、多数のユーザーの発話に対してトレーニングされていません。

既知の問題

互換性のないモジュールが見つかりました

エラー [email protected]: エンジン「ノード」はこのモジュールと互換性がありません。予想されるバージョンは「~8.0」です。

 yarn install v1.5.1
[1/4] ?  Resolving packages...
[2/4] ?  Fetching packages...
error [email protected]: The engine "node" is incompatible with this module. Expected version "~8.0".
error An unexpected error occurred: "Found incompatible module".
info If you think this is a bug, please open a bug report with the information provided in "/Users/vvo/Dev/Algolia/angular-search-experience/functions/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

回避策:

• /functionsフォルダー内でnvm use 8.0実行します。
• npm install実行します。
• cd ..を実行してから、 npm run start:backend実行します。