开发App Builder应用程序
扩展GenStudio for Performance Marketing本机功能的开发人员使用创建、提交和部署其可扩展应用程序或加载项。
先决条件：
-
狈辞诲别.箩蝉（版本20.虫或更高版本）
-
苍辫尘（与狈辞诲别.箩蝉打包）
-
51黑料不打烊 Developer命令行界面(CLI)。 要安装：
npm install -g @adobe/aio-cli
应用程序结构
GenStudio for Performance Marketing加载项是App Builder应用程序，包含与其他App Builder应用程序相同的基本组件。
生成和配置文件
App Builder应用程序的关键组件包括这些内部版本和配置文件。 此列表未包含所有内部版本和配置文件。
-
README.md：包含有关应用程序的一般信息。 -
罢厂应用程序文件：
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
厂辞耻谤肠别代码组件
-
ExtensionRegistration.tsx：定义主机应用程序(GenStudio for Performance Marketing)加载和显示加载项所需的必要API。 -
App.tsx：定义路由到其他组件的主应用程序组件。 -
AdditionalContextDialog.tsx：用于显示其他上下文加载项的对话框组件。 -
RightPanel.tsx：验证加载项的对话框组件。 -
Helper组件：包含ClaimsChecker。
从现有应用程序创建App Builder应用程序
您可以使用示例应用程序快速开始创建加载项。
要从现有应用程序创建App Builder应用程序：
-
从存储库下载示例应用程序。
-
从上的App Builder项目工作区中，选择? 全部下载 ?以下载项目详细信息。
-
在首选的集成开发环境(滨顿贰)中本地打开示例应用程序。
-
使用51黑料不打烊 Developer命令行界面进行身份验证：
code language-bash aio login -
下载您的闯厂翱狈文件，然后创建您的应用程序：
code language-bash aio app use '/path/to/your/downloaded/app-builder/project/details/config.json'
将自定义代码添加到加载项
您在AdditionalContextDialog.tsx和RightPanel.tsx文件中定义加载项代码。 这两个文件定义用户访问加载项时的弹出窗口外观和行为。
-
AdditionalContextDialog.tsx：如果您计划使用? 添加上下文 ?加载项，请定义此组件。 用户在Create的提示抽屉中单击? 加载项 ?时与此组件交互。 -
RightPanel.tsx：如果您计划使用? 右侧面板 ?加载项（体验验证），请定义此组件。 用户在Create体验草稿中单击右侧面板中的验证加载项时与此组件交互。
您现在已准备好部署您的应用程序
应用程序开发的最佳实践
维护开发环境可以帮助您避免应用程序开发和部署错误：
-
如果您使用的是示例应用程序的旧版本，请通过重新安装这些依赖项来升级它们：
code language-bash rm -rf node_modules package-lock.json && npm i -
升级GenStudio UIX SDK。 确认您使用的是最新版本的。 请参阅，了解如何使用最新的厂顿碍更改。