App Builder アプリの開発
GenStudio for Performance Marketingのネイティブ機能を拡張する開発者は、Adobe App Builderを使用して、拡張可能なアプリまたはアドオンを作成、送信、デプロイします。
前提条件:
-
Node.js （バージョン 20.x以降）
-
npm （Node.jsとパッケージ化）
-
Adobe Developer コマンドラインインターフェイス（CLI）。 npmでインストールするには、次を実行します：
npm install -g @adobe/aio-cli
アプリ構造
GenStudio for Performance Marketing アドオンはApp Builder アプリケーションであり、他のApp Builder アプリケーションと同じ基本コンポーネントを含んでいます。
ビルドと設定ファイル
App Builder アプリケーションの主要なコンポーネントには、以下のビルドファイルと設定ファイルが含まれます。 このリストには、すべてのビルドファイルと設定ファイルが含まれていません。
-
README.md: アプリに関する一般的な情報が含まれます。 -
TS アプリファイル：
package.jsonpackage-lock.jsoneslinttsconfigjest test up
-
App Builder設定ファイル：
app.config.yamlext.config.yaml: アドオンの設定ファイル。app.config.yaml: アドオンの設定ファイル （アプリをGenStudio for Performance Marketing アドオンとして定義することを含む）。.aio.env:.envファイルをソース管理にコミットしないでください。
ソースコード
- src/
- genstudiopem/
- web-src/
- src/
- components/
- utils/
- Constants.ts
- index.tsx
- index.css
- utils.ts
- index.html
Sourceのコードコンポーネント
-
ExtensionRegistration.tsx: ホストアプリ （GenStudio for Performance Marketing）がアドオンを読み込んで表示するために必要なAPIを定義します。 -
App.tsx：他のコンポーネントへのルーティングを定義するメイン アプリ コンポーネント。 -
AdditionalContextDialog.tsx：追加のコンテキスト アドオンを表示するためのダイアログ コンポーネント。 -
RightPanel.tsx：検証アドオンのダイアログコンポーネント。 -
Helperコンポーネント：ClaimsCheckerが含まれます。
既存のアプリからApp Builder アプリを作成する
サンプルアプリを使えば、アドオン作成をすぐに始められます。
既存のアプリからApp Builder アプリを作成するには:
-
GenStudio UIX Examples リポジトリからサンプルアプリをダウンロードします。
-
Adobe Developer ConsoleのApp Builder プロジェクト ワークスペースから、「すべてをダウンロード 」を選択して、プロジェクトの詳細をダウンロードします。
-
使用する統合開発環境（IDE）でサンプルアプリをローカルに開きます。
-
Adobe Developer コマンドラインインターフェイスを使用して認証します。
code language-bash aio login -
JSON ファイルをダウンロードし、アプリを作成します。
code language-bash aio app use '/path/to/your/downloaded/app-builder/project/details/config.json'
アドオンにカスタムコードを追加しましょう
AdditionalContextDialog.tsxとRightPanel.tsx ファイルでアドオンコードを定義してください。 これら2つのファイルは、ユーザーがアドオンにアクセスした際のポップアップの外観と動作を定義します。
-
AdditionalContextDialog.tsx: Add Context アドオンを使用する場合は、このコンポーネントを定義します。 ユーザーは、Createのプロンプトドロワーで アドオン をクリックすると、このコンポーネントを操作できます。 -
RightPanel.tsx: 右パネル アドオンを使用する場合は、このコンポーネントを定義します（エクスペリエンス検証）。 ユーザーは、Create エクスペリエンスドラフトの右側のパネルにある検証アドオンをクリックすると、このコンポーネントを操作できます。
アプリ開発のベストプラクティス
開発環境を維持することで、アプリの開発とデプロイメントエラーを回避できます。
-
古いバージョンのサンプルアプリを使用している場合は、依存関係を再インストールしてアップグレードします。
code language-bash rm -rf node_modules package-lock.json && npm i -
GenStudio UIX SDKをアップグレードします。 最新バージョンのGenStudio UIX SDKを使用していることを確認してください。 最新のSDKの変更点の使用方法については、GenStudio UIX サンプルリポジトリ を参照してください。