Creación de un proyecto para la extensibilidad de IU

Abra un terminal.

En el terminal, desplácese a la carpeta donde guarda los proyectos.

Ejecutar:

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

• my-fusion-extension es el nombre de la carpeta/aplicación. Puede seleccionar este nombre, pero puede usar letras minúsculas, guiones y sin espacios.
• --standalone-app indica a la CLI que cree un esqueleto de aplicación sin formato en lugar de pedirle que elija una plantilla de producto. Esta es la clave para evitar la plantilla de AEM (o cualquier otra).

Cuando se le solicite, seleccione su organización (si pertenece a más de una).

Cuando se le solicite, seleccione Crear nuevo proyecto y acepte el nombre sugerido, o elija un proyecto vacío existente.

El comando configura los espacios de trabajo Stage y Production automáticamente.

El comando también genera archivos en la carpeta my-fusion-extension y ejecuta npm install.

Continuar a Confirmar creación de proyecto.

En el terminal, desplácese a la carpeta creada:

cd my-fusion-extension

Debería ver una estructura similar a esta (se omiten algunos archivos):

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)

Los dos archivos que más le importan son:

• app.config.yaml: la configuración central. Más adelante en el proceso agregará aquí una sección extensions: que conecta su aplicación a un punto de extensión de Fusion.
• package.json: enumera las bibliotecas que usa su aplicación. Aquí agregará la biblioteca de invitados de extensibilidad de la IU de Adobe.

Continuar a Agregar bibliotecas requeridas.

En el terminal, ejecute:

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

(Condicional) Si el proyecto generado no incluye ya React, instálelo también:

npm install react react-dom react-router-dom

Continuar a Confirmar las compilaciones del proyecto.

En el terminal, ejecute:

aio app build

Si esto termina sin errores, las herramientas y el proyecto se configuran correctamente. Está listo para conectar el proyecto a Fusion.

Continúe con Configurar el proyecto para Fusion.

Cree los archivos para que el proyecto tenga este aspecto:

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

Se recomienda nombrar la carpeta después del punto de extensión (fusion-nav-organization-1). El nombre exacto depende de usted, pero debe coincidir con lo que hace referencia en app.config.yaml.

Continuar a Declarar el punto de extensión en app.config.yaml.

Abra app.config.yaml y actualice su contenido a:

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

Estos contenidos describen lo siguiente:

• extensions:: esta aplicación implementa uno o más puntos de extensión.
• fusion/nav-organization/1: la ranura Fusion en la que se está conectando. El nombre debe coincidir exactamente con, incluida la versión 1.
• $include:: esto apunta a un segundo archivo de configuración (creado en el siguiente paso) que describe el contenido de esta extensión. Si lo mantiene en un archivo independiente, app.config.yaml se mantendrá limpio y le permitirá agregar más puntos de extensión más adelante.

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. Continuar a Describir la extensión en ext.config.yaml

Crear src/fusion-nav-organization-1/ext.config.yaml con:

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

Estos contenidos describen lo siguiente:

• operations.view: declara que su extensión proporciona una vista (una interfaz de usuario visible), ofrecida desde index.html. Esto es lo que hace que la extensión muestre una pantalla en lugar de ejecutarse solo en segundo plano.
• web: web-src: la carpeta que contiene los archivos front-end. App Builder crea todo lo que hay debajo de aquí y lo aloja en la red de distribución de contenido (CDN) de Adobe.
• hooks: comandos pequeños que se ejecutan automáticamente en tiempo de compilación/ejecución. El script generate-metadata.js se enviará con @adobe/uix-guest y producirá un archivo de app-metadata.json que su código de registro necesita (consulte el paso 4). No se escribe esta secuencia de comandos; simplemente se hace referencia a ella.

Continuar a Establecer un Id. de extensión estable.

Crear src/fusion-nav-organization-1/web-src/src/components/Constants.js:

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

Utilice el mismo valor en cualquier lugar donde el código haga referencia al ID de extensión.

Continuar a Registrar tu widget.

Crear src/fusion-nav-organization-1/web-src/src/components/ExtensionRegistration.js.
La parte importante es la llamada a 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);

Puntos clave:

• title es la etiqueta que Fusion pone en el botón de navegación. Si hideWidgetHeader es false, Fusion también muestra el título como un encabezado sobre la interfaz de usuario.
• url es la ruta a la interfaz de usuario visible dentro de esta misma aplicación. Aquí hay una ruta hash (#/my-widget) que administra su enrutador front-end (configurada en la página siguiente). Debe resolverse en el componente que procesa la pantalla.
• metadata proviene de app-metadata.json, que el vínculo generate-metadata crea para usted en el momento de la compilación. Importe como se muestra.
• El nombre de método dashboard.getWidget son las llamadas de Fusion de contrato acordadas para descubrir su widget. Conservar el espacio de nombres dashboard y el nombre getWidget.