Criar um projeto para Extensibilidade da interface

Abra um terminal.

No terminal, mova para a pasta onde você mantém os projetos.

Executar:

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

• my-fusion-extension é o nome da pasta/aplicativo. Você pode selecionar esse nome, mas usar letras minúsculas, hifens e sem espaços.
• O --standalone-app instrui a CLI a criar um esqueleto de aplicativo simples, em vez de pedir que você escolha um modelo de produto. Essa é a chave para evitar o modelo AEM (ou qualquer outro).

Quando solicitado, selecione sua Organização (se você pertencer a mais de uma).

Quando solicitado, selecione Criar novo projeto e aceite o nome sugerido, ou escolha um projeto vazio existente.

O comando configura os espaços de trabalho Preparo e Produção automaticamente.

O comando também gera arquivos na pasta my-fusion-extension e executa npm install.

Prossiga para Confirmar criação do projeto.

No terminal, mova para a pasta criada:

cd my-fusion-extension

Você deve ver uma estrutura semelhante a esta (alguns arquivos omitidos):

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)

Os dois arquivos mais importantes para você são:

• app.config.yaml: A configuração central. Em uma parte posterior do processo, você adicionará uma seção extensions: aqui que conecta seu aplicativo a um ponto de extensão do Fusion.
• package.json: lista as bibliotecas que seu aplicativo usa. Você adicionará a biblioteca de convidados Extensibilidade da interface do usuário do Adobe aqui.

Continue em Adicionar bibliotecas necessárias.

No terminal, execute:

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

(Condicional) Se o projeto gerado ainda não incluir o React, instale-o também:

npm install react react-dom react-router-dom

Continue para Confirmar as compilações do projeto.

No terminal, execute:

aio app build

Se isso for concluído sem erros, as ferramentas e o projeto serão configurados corretamente. Você está pronto para conectar o projeto ao Fusion.

Continue em Configurar o projeto para Fusion.

Crie os arquivos para que o projeto tenha esta aparência:

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

Recomendamos nomear a pasta após o ponto de extensão (fusion-nav-organization-1). O nome exato depende de você, mas deve corresponder ao que você menciona em app.config.yaml.

Continuar para Declarar o ponto de extensão em app.config.yaml.

Abrir app.config.yaml e atualizar seu conteúdo para:

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

Esse conteúdo descreve o seguinte:

• extensions:: este aplicativo implementa um ou mais pontos de extensão.
• fusion/nav-organization/1: o slot Fusion ao qual você está se conectando. O nome deve corresponder exatamente, incluindo a versão 1.
• $include:: aponta para um segundo arquivo de configuração (criado na próxima etapa) que descreve o conteúdo dessa extensão. Manter em um arquivo separado mantém app.config.yaml limpo e permite que você adicione mais pontos de extensão posteriormente.

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 para Descrever a extensão em ext.config.yaml

Criar src/fusion-nav-organization-1/ext.config.yaml com:

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

Esse conteúdo descreve o seguinte:

• operations.view: Declara que sua extensão fornece uma visualização (uma interface visível), veiculada a partir de index.html. É isso que faz com que sua extensão mostre uma tela em vez de ser executada somente em segundo plano.
• web: web-src: a pasta que armazena seus arquivos front-end. O App Builder cria tudo aqui e o hospeda na Rede de entrega de conteúdo (CDN) da Adobe.
• hooks: pequenos comandos que são executados automaticamente em tempo de compilação/execução. O script generate-metadata.js vem com @adobe/uix-guest e produz um arquivo app-metadata.json de que seu código de registro precisa (consulte a Etapa 4). Você não escreve esse script; você só faz referência a ele.

Continue para Definir uma ID de extensão estável.

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

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

Use o mesmo valor em todos os locais em que o código se refere à id da extensão.

Continue em Registrar seu widget.

Criar src/fusion-nav-organization-1/web-src/src/components/ExtensionRegistration.js.
A parte importante é a chamada 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);

Pontos principais:

• title é o rótulo que o Fusion coloca no botão de navegação. Se hideWidgetHeader for false, o Fusion também mostrará o título como um cabeçalho acima da interface do usuário.
• url é a rota para sua interface do usuário visível dentro deste mesmo aplicativo. Aqui está uma rota de hash (#/my-widget) manipulada pelo seu roteador front-end (configurado na próxima página). Ele deve resolver para o componente que renderiza sua tela.
• metadata vem de app-metadata.json, que o gancho generate-metadata cria para você no momento da compilação. Importe-o como mostrado.
• O nome do método dashboard.getWidget é o contrato acordado que o Fusion chama para descobrir seu widget. Mantenha o namespace dashboard e o nome getWidget.