開發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檔案認可到原始檔控制。
Source程式碼
- 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範例存放庫下載範例應用程式。
-
從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檔案中定義您的附加元件程式碼。 這兩個檔案定義使用者存取附加元件時的快顯視窗外觀和行為。
-
AdditionalContextDialog.tsx：如果您打算使用 新增內容 附加元件，請定義此元件。 使用者在 的提示抽屜中按一下 附加元件Create時，與此元件互動。 -
RightPanel.tsx：如果您打算使用 Right Panel 附加元件（體驗驗證），請定義此元件。 使用者在Create體驗草稿中按一下右側面板中的驗證附加元件，與此元件互動。
應用程式開發的最佳作法
維護開發環境有助於避免應用程式開發和部署錯誤：
-
如果您使用舊版範例應用程式，請重新安裝以升級相依性：
code language-bash rm -rf node_modules package-lock.json && npm i -
升級GenStudio UIX SDK。 確認您使用的是最新版的GenStudio UIX SDK。 請參閱GenStudio UIX範例存放庫以瞭解如何使用最新的SDK變更。
現在您已準備好部署您的應用程式