22.2 Project Fireflyの概要

目標

  • Project Fireflyについて
  • Project Fireflyを使用したサンプルプロジェクトの設定方法を説明します。

前提条件

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

22.2.1個人用プロジェクトの設定

Project Fireflyの使用を開始するには、Adobe I/Oのコンソールを使用して個人用プロジェクトを設定します。

Adobe IDを使用してAdobe開発者コンソールにログインします。

新しい​新しいAdobe開発者コンソールへようこそ​ウィザードが表示されたら、「スキップ」をクリックするか、「次へ」をクリックして手順を進めます。

ようこそウィザード

右上で正しい組織を選択していることを確認します。--envName--.

組織

テンプレートからプロジェクトを作成」をクリックします。

テンプレート​を参照ウィザード画面で、「Project Firefly」を選択します。

Template Firefly

テンプレート化されたプロジェクト​のセットアップウィザード画面で、次の詳細情報を入力します。

テンプレート1

  • プロジェクトタイトル: [ldapname] Realtime Dashboard for EXP News を独自の [ldapname] AdobeLDAP名(例: rmaur Realtime Dashboard for EXP News.
  • アプリ名: [ldapname]EXPNews を独自の [ldapname] AdobeLDAP名(例: rmaurEXPNews.
  • 各ワークスペースで「 Include Runtime with each workspace」が選択されていることを確認します。

+ワークスペースを追加」をクリックして、追加のワークスペースを追加します。

ワークスペースに次の詳細を指定します。

  • ワークスペース名: Development.

  • ワークスペースの説明: Development workspace for EXP News RT Dashboard.

テンプレート2

保存」をクリックして、新しいワークスペースを保存します。

保存」をクリックして、プロジェクトを保存します。

プロジェクトが作成され、しばらくすると概要画面に表示されます。

概要

開発タイルの「開発」をクリックして、Project Fireflyアプリケーション用に作成された特定のランタイム環境の詳細を表示します。

概要開発

アプリケーションの一部として作成されたランタイム名前空間環境を確認できます。例では133309-rmaurexpnews-developmentです。

これで、Project Fireflyアプリケーションに必要なAdobe I/Oランタイム環境の作成が完了しました。

22.2.2Adobe I/OCLIからのログイン

サンプルのProject Fireflyアプリケーションを作成するには、WindowsまたはMac OSのいずれかでコマンドラインを使用する必要があります。 以下に使用するスクリーンショットは、Mac OS Xに基づいていますが、実行されるコマンドは同じです。

Mac OSでターミナルを開くか、Windowsでコマンドプロンプトを開きます。

最初のプロジェクトを作成するドライブ上の特定の場所に移動します。 例:開発

% cd Development

ログイン、使用

% aio login

TerminalLogin

Adobe IDでログインするように求めるブラウザーウィンドウが開きます。 ウィンドウが自動的に開かなかった場合は、ブラウザーに印刷されたURLをコピーしてログインすることもできます。

% aio login
Visit this url to log in:
https://aio-login.adobeioruntime.net/api/v1/web/default/applogin?xxxxxxxx

BrowserLoggedIn

ログインしたら、ブラウザーウィンドウを閉じて、ターミナルに戻ることができます。 端末に文字列が表示されます。 これはユーザートークンです。 これは設定に自動的に保存され、Project Fireflyがトークンを使用してAdobe開発者コンソールと通信できるようになります。

TerminalLoggedIn

22.2.3Adobe I/OCLIからの新しいアプリのBootstrap

Mac OSのターミナルまたはWindowsのコマンドプロンプトで、新しいアプリを作成し始めます。[ldap]HelloWorldという名前を付けます。

例:

% aio app init rmaurHelloWorld

アプリのブートストラップおよび設定方法に関する質問がいくつか表示されます。

  • 組織を選択します。組織--envName--をすばやく検索するには、の後ろにある最初の文字を入力し、「Org」を選択します。 次に、表示されたリストから--envName--を選択します。

手順 1

  • プロジェクトを選択します。プロジェクトをすばやく検索するには、LDAP名を入力し、演習2.2.1で作成したプロジェクトを選択します。例えば、rmaurを検索し、結果のリストからrmaur Realtime Dashboard for EXP Newsを選択します。

手順 1

「ワークスペース」を選択します。演習22.2.1の一部として作成したDevelopmentワークスペースを選択します。

手順 1

このプロジェクトに対して有効にするAdobe I/Oアプリ機能を選択してください。

含めるコンポーネントを選択しますActions: Deploy Runtime actions を選択します。

手順 1

作成するサンプルアクションのタイプを選択してください。

生成するアクションのタイプを選択しますGeneric を選択します。

手順 1

プロジェクトに追加するUIのタイプを選択してください。

生成するテンプレートを選択しますReact Spectrum 3 を選択します。これは、アプリの構築にAdobeスペクトルを使うことを示しています。

手順 1

外部APIへのアクセス方法を示す新しいサンプルアクションを作成します。

このアクションの名前を指定してください。​に対する質問に回答します。Returnキーを押して、デフォルトの(generic)を受け入れます。

手順 1

クラウドイベント形式でメッセージを作成し、Adobe I/Oイベントに公開する新しいサンプルアクションを作成しようとしています。

このアクションの名前を指定してください。​に対する質問に回答します。Returnキーを押して、デフォルトの(publish-events)を受け入れます。

手順 1

これで、ウィザードによってアプリケーションに必要なコードが生成され、✔ App initialization finished!での正常な完了が示されます。

手順 1

新しく作成したアプリディレクトリ[ladp]HelloWorldに移動し、生成されたファイルをリストします。
% cd rmaurHelloWorld
% ls (Mac OS)または(
> dir Windows)

手順 1

21.2.4アプリの構築とデプロイ

アプリケーションのビルド/テスト/デプロイには多くの方法がありますが、この有効化のためには、Experience Cloudシェルを使用してアプリケーションをすぐにデプロイします。

アプリをビルドしてデプロイするには:

Mac OSのターミナルまたはWindowsのコマンドプロンプトで、アプリケーションの一部として作成されたディレクトリ([ldap]rmaurHelloWorld)に移動して、次のように入力します。
% aio app deploy

手順 1

出力は、ケースやProject Fireflyでの変更とは異なる場合がありますが、最初に「Build success, your app is ready to be deployed ??」というメッセージが表示され、しばらくして最終的なメッセージ「Weldone, your app is online ??

アプリがデプロイされると、最終的なアプリを表示するためのURLが2つあります。

が示すExperience Cloudシェルを使用するURLをコピーします。デプロイ済みのアプリケーションをExperience Cloudシェルで表示するには:…. URLでは、一意の識別子としてAdobe I/O開発ワークスペース名が使用されます。

新しい匿名ブラウザーを開き、 https://experience.adobe.comを参照します。 ログイン後、右上で適切な組織を選択していることを確認します。--envName--.

手順2のURLをブラウザーに貼り付けます。 すべて問題ない場合は、次の画面が表示されます。

手順 2

左側のレールから「アプリのアクション」を選択します。 アプリケーションのバックエンドアクション​を実行します。

  • アクション(必須)」ドロップダウンリストから「一般」を選択します。
  • 呼び出し」をクリックします。
  • この呼び出しの結果は、「results」ボックスに表示されます。 コンテンツを拡大して、さらに多くのコンテンツを表示できます。

手順 3

これで、最初のProject Fireflyアプリのデプロイが正常に完了し、この演習が完了しました。

次の手順:22.3 EXPニュースのリアルタイムダッシュボードを構築する

モジュール22に戻る

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

このページ