建立UI擴充性的專案

開啟終端機。

在終端機中，移至您保留專案的資料夾。

執行：

aio app init my-fusion-extension --standalone-app

• my-fusion-extension是資料夾/應用程式名稱。 您可以選取此名稱，但請使用小寫字母、連字型大小且不含空格。
• --standalone-app通知CLI建立​純應用程式架構，而不是要求您挑選產品範本。 這是避免AEM （或任何其他）範本的關鍵。

出現提示時，選取您的組織 （如果您屬於多個組織）。

出現提示時，請選取​ 建立新專案 ​並接受建議的名稱，或選取現有的空白專案。

命令會自動設定​ 階段 ​和​ 生產 ​工作區。

命令也會產生檔案至my-fusion-extension資料夾並執行npm install。

繼續確認專案建立。

在終端機中，移至已建立的資料夾：

cd my-fusion-extension

您應該會看到類似以下的結構（省略了一些檔案）：

my-fusion-extension/
|--- app.config.yaml   // main configuration (you will edit this)
|---  package.json   //dependencies and scripts
|---  src/    // your source code
|---  web-src/  or  src/.../web-src/  // front-end files (HTML/JS)

您最關心的兩個檔案是：

• app.config.yaml：中央組態。 在程式後面的步驟中，您將在此新增extensions:區段，以將您的應用程式連線到Fusion擴充點。
• package.json：列出您的應用程式所使用的資料庫。 您將在此處新增Adobe UI擴充性來賓程式庫。

繼續新增必要的資料庫。

在終端機中，執行：

npm install @adobe/uix-guest @adobe/react-spectrum

（視條件而定）如果您產生的專案尚未包含React，請一併安裝：

npm install react react-dom react-router-dom

繼續確認專案組建。

在終端機中，執行：

aio app build

如果順利完成，且沒有錯誤，表示您的工具和專案已正確設定。 您已準備好將專案連線到Fusion。

繼續設定Fusion的專案。

建立您的檔案，讓專案看起來像這樣：

my-fusion-extension/
|-- app.config.yaml
|-- src/
       |-- fusion-nav-organization-1/          // one folder per extension point
          |-- ext.config.yaml
          |-- web-src/
             |-- src/
                |-- components/
                   |-- App.js
                   |-- ExtensionRegistration.js
                   |-- DashboardWidget.js
                   |-- Constants.js

我們建議在延伸點(fusion-nav-organization-1)之後命名資料夾。 確切的名稱由您決定，但必須符合您在app.config.yaml中參照的名稱。

繼續在app.config.yaml🔗中宣告擴充點。

開啟app.config.yaml並將其內容更新至：

extensions:
  fusion/nav-organization/1:
    $include: src/fusion-nav-organization-1/ext.config.yaml

以下內容說明如下：

• extensions:：此應用程式實作一或多個擴充點。
• fusion/nav-organization/1：您插入的Fusion插槽。 名稱必須完全符合，包括版本1。
• $include:：這指向描述此擴充功能內容的第二個設定檔（在下一步中建立）。 將其保留在個別檔案中，可保持app.config.yaml整潔狀態，並可讓您稍後新增更多擴充點。

extensions:
        fusion/nav-organization/1:
            $include: src/fusion-nav-organization-1/ext.config.yaml
        fusion/nav-team/1:
            $include: src/fusion-nav-team-1/ext.config.yaml

1. 繼續在ext.config.yaml中描述擴充功能

建立src/fusion-nav-organization-1/ext.config.yaml，使用：

operations:
   view:
    - type: web
      impl: index.html
web: web-src
hooks:
  pre-app-build: node node_modules/@adobe/uix-guest/scripts/generate-metadata.js
   pre-app-run: node node_modules/@adobe/uix-guest/scripts/generate-metadata.js

以下內容說明如下：

• operations.view：宣告您的擴充功能提供從index.html提供的​檢視 （可見UI）。 這就是讓您的擴充功能在熒幕顯示的理由，而不只會在背景執行。
• web: web-src：儲存您前端檔案的資料夾。 App Builder會建置這裡底下的所有內容，並在Adobe的內容傳遞網路(CDN)上代管這些內容。
• hooks：在建置/執行階段自動執行的小型命令。 generate-metadata.js指令碼隨附於@adobe/uix-guest，並產生您的註冊代碼所需的app-metadata.json檔案（請參閱步驟4）。 您不需要撰寫此指令碼，只需參考它即可。

繼續設定穩定的擴充功能識別碼。

建立src/fusion-nav-organization-1/web-src/src/components/Constants.js：

module.exports = {
  extensionId: 'my-fusion-extension'
};

在您的程式碼參考擴充功能ID的所有位置使用相同的值。

繼續註冊您的Widget。

建立src/fusion-nav-organization-1/web-src/src/components/ExtensionRegistration.js。
重要部分為register(...)呼叫：

import { register } from "@adobe/uix-guest";
import metadata from "../../../../app-metadata.json";
import { extensionId } from "./Constants";

async function init() {
  await register({
    id: extensionId,
    metadata,
    methods: {
      dashboard: {
        getWidget() {
          return {
            id: extensionId,
            title: "My Fusion tool",        // shown on the Fusion nav button
            description: "What this tool does",
            url: "/index.html#/my-widget",  // route to your visible UI
            hideWidgetHeader: false          // false = Fusion shows the title
          };
        }
      }
    }
   });
}

init().catch(console.error);

要點：

• title​是Fusion放在導覽按鈕上的標籤。 如果hideWidgetHeader是false，Fusion也會將標題顯示為您UI上方的標題。
• url​是您​可見 UI在此相同應用程式中的路由。 這是由您的前端路由器（設定於下一頁）處理的雜湊路由(#/my-widget)。 它必須解析為轉譯您熒幕的元件。
• metadata​來自app-metadata.json，generate-metadata鉤點會在建置時為您建立。 將其匯入，如下所示。
• dashboard.getWidget方法名稱是用來探索您的Widget的協定合約Fusion呼叫。 保留dashboard名稱空間和getWidget名稱。