Creare un progetto per l’estendibilità dell’interfaccia utente

Apri un terminale.

Nel terminale, sposta nella cartella in cui tieni i progetti.

Esegui:

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

• my-fusion-extension è il nome della cartella/app. È possibile selezionare questo nome, ma utilizzare lettere minuscole, trattini e non spazi.
• --standalone-app indica all’interfaccia della riga di comando di creare una ossatura semplice dell’applicazione invece di chiedere di scegliere un modello di prodotto. Questa è la chiave per evitare il modello AEM (o qualsiasi altro).

Quando richiesto, seleziona la tua organizzazione (se appartieni a più organizzazioni).

Quando richiesto, selezionare Crea nuovo progetto e accettare il nome suggerito oppure scegliere un progetto vuoto esistente.

Il comando imposta automaticamente le aree di lavoro Stage e Produzione.

Il comando genera anche file nella cartella my-fusion-extension ed esegue npm install.

Continua con Conferma creazione progetto.

Nel terminale, spostarsi nella cartella creata:

cd my-fusion-extension

Dovresti vedere una struttura simile a questa (alcuni file omessi):

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)

I due file più importanti sono:

• app.config.yaml: configurazione centrale. Successivamente verrà aggiunta una sezione extensions: che collega l’app a un punto di estensione di Fusion.
• package.json: elenca le librerie utilizzate dall’app. Aggiungere qui la libreria guest di estendibilità dell’interfaccia utente di Adobe.

Continua con Aggiungi librerie richieste.

Nel terminale, eseguire:

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

(Condizionale) Se il progetto generato non include già React, installalo anche:

npm install react react-dom react-router-dom

Continua con Conferma le build del progetto.

Nel terminale, eseguire:

aio app build

Se il completamento avviene senza errori, gli strumenti e il progetto vengono configurati correttamente. È ora possibile collegare il progetto a Fusion.

Continua con Configurare il progetto per Fusion.

Crea i file in modo che il progetto sia simile al seguente:

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

È consigliabile denominare la cartella dopo il punto di estensione (fusion-nav-organization-1). Il nome esatto dipende da te, ma deve corrispondere a quello a cui si fa riferimento in app.config.yaml.

Continuare a Dichiarare il punto di estensione in app.config.yaml.

Apri app.config.yaml e aggiornane il contenuto in:

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

Tali contenuti descrivono quanto segue:

• extensions:: questa app implementa uno o più punti di estensione.
• fusion/nav-organization/1: lo slot Fusion in cui ci si sta collegando. Il nome deve corrispondere esattamente, inclusa la versione 1.
• $include:: questo fa riferimento a un secondo file di configurazione (creato nel passaggio successivo) che descrive il contenuto di questa estensione. Mantenendolo in un file separato, app.config.yaml rimane pulito e consente di aggiungere altri punti di estensione in un secondo momento.

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. Continua con Descrizione dell’estensione in ext.config.yaml

Crea 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

Tali contenuti descrivono quanto segue:

• operations.view: dichiara che l’estensione fornisce una visualizzazione (interfaccia utente visibile), fornita da index.html. In questo modo l’estensione viene visualizzata una schermata anziché essere eseguita solo in background.
• web: web-src: cartella contenente i file front-end. App Builder crea tutto qui sotto e lo ospita sulla rete CDN (Content Delivery Network) di Adobe.
• hooks: piccoli comandi eseguiti automaticamente in fase di compilazione/esecuzione. Lo script generate-metadata.js viene fornito con @adobe/uix-guest e genera un file app-metadata.json necessario per il codice di registrazione (vedere il passaggio 4). Non si scrive questo script, ma si fa semplicemente riferimento ad esso.

Continua con Imposta un ID estensione stabile.

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

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

Utilizza lo stesso valore in tutti i casi in cui il codice fa riferimento all’ID estensione.

Continua con Registra widget.

Crea src/fusion-nav-organization-1/web-src/src/components/ExtensionRegistration.js.
La parte importante è la chiamata 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);

Punti chiave:

• title è l’etichetta inserita da Fusion sul pulsante di navigazione. Se hideWidgetHeader è false, Fusion mostrerà anche il titolo come intestazione sopra l’interfaccia utente.
• url è il percorso per l’interfaccia utente di visible all’interno della stessa app. Questa è una route hash (#/my-widget) gestita dal router front-end (configurato nella pagina successiva). Deve risolversi nel componente che esegue il rendering dello schermo.
• metadata proviene da app-metadata.json, che l’hook generate-metadata crea automaticamente in fase di compilazione. Importa come mostrato.
• Il nome del metodo dashboard.getWidget è il contratto concordato con le chiamate Fusion per l’individuazione del widget. Mantieni lo spazio dei nomi dashboard e il nome getWidget.