22.3 EXPニュースのリアルタイムダッシュボードの構築

目標

  • Project FireflyがAEPからの情報を示すカスタムのリアルタイムダッシュボードをどのように提供できるかを理解します。
  • このサンプルダッシュボードを作成して実行する方法を説明します。

前提条件

この練習を開始する前に、NodeJSとAdobe I/OCLIがマシンにインストールされ、セットアップされていることを確認します。 詳しくは、演習21.1 -環境の設定を参照してください。

22.3.1ソースコードのダウンロード

このプロジェクトのソースコードは、https://git.corp.adobe.com/IODevEnablement/poc-aep-realtime-dashboardで社内で入手でき、Adobe I/OチームのDuy Guyen氏が開発しました。
ただし、全員がGitHubリポジトリからコードをコピーまたはダウンロードする方法を理解する必要をなくすため、この有効化モジュールから直接ZIPファイルとしてコードを使用できるようにしました。 githubの使用に慣れている場合は、そこからコードをコピーすることもできます。

この有効化モジュール内からソースコードを入手するには：

  • ここからダウンロードしてください。
  • ZIPファイルをコンピューター上の任意の場所に展開します。

22.3.2リアルタイムダッシュボードの構築

リアルタイムダッシュボードのFireflyアプリを作成するには：

演習22.3.1でZIPファイルを抽出したディレクトリに移動します。例：poc-aep-realtime-dashboard-master.

ディレクトリで、npm installを実行して、アプリケーションに必要なすべてのパッケージをインストールします。

npminstall

.env環境ファイル(Adobe I/Oランタイム環境のすべての設定を含む)を、演習22.2で作成しデプロイした[ldap]HelloWorldプロジェクトからコピーします。

例：Mac OSの場合cp <rmaurHelloWorld directory>/.env .
またはcopy <rmaurHellowWorld directory>\.env . （Windowsの場合）

環境ファイルは、隠しファイルと呼ばれ、Finder/Explorerでは表示されない場合があるので、コマンドラインを使用してファイルをコピーする方がよいことに注意してください。

cp

.env環境ファイルは、お気に入りのテキストエディターまたはコマンドを使用して検査できます。 これは、Adobe I/Oの名前空間と認証コードを定義する必要があります

more

aio app deployを使用してアプリをデプロイします。 繰り返しますが、表示される出力は下のスクリーンショットと異なるかもしれませんが、「Well done, your app is online ??」と表示されるまで待ちます。

デプロイ

これで、最終ダッシュボード版のアプリが、aio app deployコマンドの出力で最後に指定されたURLで使用できるようになります。例： https://experience.adobe.com/?devMode=true#/custom-apps/?localDevUrl=https://133309-rmaurexpnews-development.adobeio-static.net/index.html

  • URL をコピーする.
  • 新しい匿名のブラウザーウィンドウ​を開き、https://experience.adobe.comにログインします。
  • 正しい組織になっていることを確認します（右上隅にチェックを入れます）。--envName--.
  • URLを貼り付けます。 ダッシュボードアプリが利用可能になります。

aepダッシュボードアプリ

Project Firefly EXP News Realtimeダッシュボードアプリは、情報を受け取る場所を教えていないので、まだ情報を提供しません。 ここで、Adobe起動サーバー側転送での以前の有効化モジュールが、次の演習と同様に関連します。

これで、この練習は終わりました。

次の手順：22.4 EXP Newsデータ収集をEXP Newsリアルタイムダッシュボードに接続

モジュール22に戻る

すべてのモジュールに戻る

このページ