为用户界面可扩展性创建项目

打开终端。

在终端中，移至保留项目的文件夹。

运行：

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）。 你不写这个脚本，你只是引用它。

继续设置稳定的扩展ID。

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

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

在您的代码引用扩展ID的任何位置使用相同的值。

继续注册您的小组件。

创建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​是您在此同一应用程序中的​visible UI的路由。 此处是您的前端路由器（在下一页设置）处理的哈希路由(#/my-widget)。 它必须解析为呈现屏幕的组件。
• metadata​来自app-metadata.json，generate-metadata挂接在生成时为您创建。 导入它，如下所示。
• dashboard.getWidget方法名称是同意的合同Fusion调用，用于发现您的小组件。 保留dashboard命名空间和getWidget名称。