App Builder アプリの開発

Last update: Mon May 05 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

トピック：
拡張性

作成対象：

開発者

GenStudio for Performance Marketingのネイティブ機能を拡張する開発者は、Adobe App Builder を使用して、拡張可能なアプリやアドオンを作成、送信、デプロイします。

recommendation-more-help

前提条件:

Node.js （バージョン 20.x 以降）
npm （Node.js とともにパッケージ化）
Adobe Developer コマンドラインインターフェイス（CLI）。インストール手順：npm install -g @adobe/aio-cli

style

shade-box

アプリの構造

GenStudio for Performance Marketing アドオンはApp Builderのアプリであり、他のApp Builder アプリと同じ基本コンポーネントが含まれています。

ビルドおよび設定ファイル

App Builder アプリケーションの主要なコンポーネントには、これらのビルドファイルおよび設定ファイルが含まれます。このリストには、すべてのビルドファイルと設定ファイルが含まれるわけではありません。

README.md: アプリに関する一般情報が含まれます。
TS アプリケーションファイル：
- package.json
- package-lock.json
- eslint
- tsconfig
- jest test up
App Builder設定ファイル：
- app.config.yaml
- ext.config.yaml：アドオンの設定ファイル
- app.config.yaml：アドオンの設定ファイル（アプリを as a 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: コンテキストを追加 アドオンを使用する予定がある場合は、このコンポーネントを定義します。ユーザーは、Create のプロンプトドロワーで アドオン をクリックすると、このコンポーネントを操作します。
RightPanel.tsx：右側のパネル アドオン エクスペリエンスの検証）を使用する予定がある場合は、このコンポーネントを定義します。ユーザーは、エクスペリエンスドラフトの右側のパネルで検証アドオンをクリックすると、このコンポーネン Create を操作します。

これで、アプリをデプロイする準備が整いました

アプリ開発のベストプラクティス

開発環境を維持すると、アプリの開発およびデプロイメントエラーを回避できます。

古いバージョンのサンプルアプリを使用している場合は、依存関係を再インストールしてアップグレードします。

code language-bash
`rm -rf node_modules package-lock.json && npm i`

GenStudio UIX SDKをアップグレードします。最新バージョンの GenStudio UIX SDK を使用していることを確認してください。最新のGenStudioの変更内容の使用方法については 🔗SDK UIX のサンプルリポジトリを参照してください。

9e880c58-9ef6-4284-b91d-d4c2117410c7