E se un flusso di lavoro che oggi richiede quasi un’ora potesse diventare un processo regolamentato e ripetibile all’interno di Experience Cloud, con un solo clic? Questa guida illustra come Adobe App Builder trasformi le attività operative manuali in un’automazione scalabile e descrive i passaggi esatti per passare dal concetto a un’app enterprise pubblicata.“

Non molto tempo fa, stavo aiutando una delle principali organizzazioni fintech a semplificare i propri flussi di lavoro in Adobe Target. Il loro team impiegava quasi 45 minuti per configurare la logica di limitazione delle impression per ciascuna attività: una danza meticolosa tra di impostazioni, tipi di pubblico, regole e convalide. Osservando la situazione, continuavo a pensare che dovesse esserci un modo migliore. E se tutto questo potesse accadere in pochi minuti o addirittura con un solo click?

Questo mi ha portato dritto ad Adobe App Builder.

Negli ambienti enterprise di grandi dimensioni, i team spesso si affidano a una combinazione di strumenti, script e conoscenze non documentate per svolgere il lavoro di routine. Non c’è nulla di veramente “rotto”, ma si ha la sensazione che tutto richieda più passaggi del necessario. App Builder offre un percorso diverso: invece di aggirare la piattaforma, crei il flusso di lavoro direttamente al suo interno.

Un’interfaccia personalizzata. All’interno di Adobe Experience Cloud. Basata sulla logica, le API e l’automazione.

È esattamente quello che ho creato: un’app interna leggera che gestisce automaticamente l’intera configurazione del limite di impression. Quello che prima richiedeva decine di azioni manuali è diventato una dashboard pulita, integrata direttamente nell’interfaccia utente di Adobe.

In questo articolo, spiegherò come funziona App Builder, perché è uno strumento così prezioso per i team enterprise e illustrerò i comandi e la configurazione necessari per rendere operativa la tua app. Questa guida ti fornirà un solido punto di partenza sia per automatizzare un flusso di lavoro di nicchia o creando un intero prodotto interno.

Che cos’è Adobe App Builder?

Adobe App Builder è un framework applicativo e di runtime completo per la creazione di applicazioni personalizzate native cloud eseguite sull’infrastruttura Adobe. Consente agli sviluppatori di estendere le funzionalità di Adobe Experience Cloud, Adobe Experience Platform e di altri prodotti Adobe. Con App Builder, i team possono creare integrazioni personalizzate tra Adobe e sistemi di terze parti per semplificare le operazioni e migliorare l’efficienza del flusso di lavoro.

App Builder fornisce diversi modelli che fungono da punti di partenza per diversi tipi di integrazioni. In questo articolo, mi concentro sull’estensione excshell, che consente alla tua applicazione di essere eseguita direttamente all’interno della shell di Adobe Experience Cloud.

Ciascuna app è:

• Autenticata con Adobe IMS

• Implementata in modalità serverless utilizzando Adobe I/O Runtime

• Integrata con l’ambiente Adobe Experience Cloud della tua organizzazione

• Gestita con una console per sviluppatori unificata e un modello di area di lavoro per i progetti

In breve: è il framework di estensione personalizzato per Adobe Experience Cloud.

Dal punto di vista della consulenza

In qualità di consulente, incontro spesso team enterprise che desiderano:

• Semplificare flussi di lavoro interni di marketing o di revisione dei contenuti

• Fornire visibilità controllata su configurazioni complesse di Target o AEM

• Automatizzare le attività API ripetitive, come la sincronizzazione delle campagne o la creazione di un pubblico

App Builder offre una soluzione elegante a questi problemi. Combina azioni di runtime sicure, componenti dell’interfaccia utente basati su Spectrum e controllo degli accessi gestito, consentendo uno sviluppo rapido senza dover gestire l’infrastruttura o le credenziali.

Panoramica di un esempio reale

Uno dei miei clienti si trovava ad affrontare una complessa configurazione di attività in Adobe Target che richiedeva più passaggi di tecnici e comportava un notevole dispendio di tempo. Ho proposto di realizzare un’app in grado di trasformare una configurazione complessa da 45 minuti in un semplice clic. Questa app sarebbe integrata con Adobe Target Admin API per gestire attività, offerte e tipi di pubblico. Funzioni chiave:

• Elenco ordinabile e ricercabile delle attività di Target

• Filtro area di lavoro che mantiene la selezione dell’utente

• Finestra modale di dettagli con azioni per singola esperienza

• Aggiornamento dell’offerta con un solo clic (con inserimento di metadati)

• Creazione di pubblico facoltativa con valori configurabili

• Interfaccia utente in stile Spectrum (Spectrum CSS) per un aspetto nativo Adobe

Avvio rapido (nuovo ambiente)

1) Prerequisiti

• Accesso ad Adobe Developer Console (progetto con App Builder)

• Node.js 18+ e npm

• Adobe I/O CLI: npm install -g @adobe/aio-cli

• Accesso ad Adobe: aio login

2) Inizializzazione

Partendo da zero:

3) Configura app.config.yaml

Il file app.config.yaml definisce le modalità di integrazione della tua app con Adobe Experience Cloud. Indica ad App Builder il tipo di estensione che stai creando, la posizione dei file front-end e quali azioni back-end devono essere eseguite in Adobe I/O Runtime.

In sintesi, specificherai:

• Tipo di estensione: in questo caso, l’estensione Experience Cloud Shell (dx/excshell/1), che consente all’app di apparire direttamente all’interno dell’interfaccia Adobe Experience Cloud.

• Implementazione front-end: un riferimento al punto di ingresso HTML principale (ad esempio, index.html) insieme a metadati quali nome, descrizione e icona dell’app.

• Cartella risorse Web: in genere una directory web-src contenente il front-end in stile Spectrum.

• Azioni di runtime: un insieme di funzioni Node.js (ad esempio, “getTargetActivities”, “updateOffer” ecc.) che vengono distribuite sull’infrastruttura serverless di Adobe. Ciascuna azione include dettagli quali:

  • il percorso del file della funzione JavaScript

  • Se è accessibile via web

  • Versione del runtime di Node.js

  • Eventuali annotazioni (ad esempio, come la richiesta di autenticazione Adobe)

In breve, questa configurazione collega l’interfaccia utente alla logica di back-end e rende l’app individuabile all’interno di Experience Cloud una volta implementata.

4) Sviluppo locale

L’app è disponibile all’indirizzo http://localhost:9080 con ricaricamento in tempo reale e autenticazione IMS (se avviata all’interno della shell di Experience Cloud).

5) Implementazione in un’area di lavoro

Cambia l’area di lavoro quando necessario (ad esempio, staging, produzione):

6) Pubblicazione nel catalogo (Produzione)

Dopo l’approvazione di Exchange, l’app viene visualizzata nel catalogo App Builder della tua organizzazione.

Azioni (API serverless)

Esempi utilizzati in questa app (Node.js, @adobe/aio-sdk + node-fetch):

• getTargetActivities: elenca le attività di Target per l’organizzazione o il tenant

• getActivity: recupera i dettagli di un’attività specifica (/target/activities/{type}/{id})

• getOffer: legge un’offerta JSON (/target/offers/json/{offerId})

• updateOffer: aggiorna un’offerta (PUT /target/offers/content/{offerId})

• createAudience: crea un pubblico di Target con logica a regole

Ciascuna azione recupera un token di accesso IMS dall’archivio Stato memorizzato in cache (compilato dall’azione getAccessToken) e chiama le API di Adobe Target includendo le intestazioni Authorization: Bearer <token> e X-Api-Key: <clientId>.

Front-end (interfaccia utente Spectrum)

L’interfaccia utente è in semplice HTML/JS che utilizza Spectrum CSS:

• Input di ricerca con pulsante di cancellazione

• Selettore area di lavoro (selettore silenzioso)

• Tabella con chip di stato e marche temporali formattati

• Finestra di dialogo modale con Aggiorna offerta e controlli facoltativi per Crea pubblico

L’interfaccia utente memorizza l’area di lavoro selezionata in localStorage in modo che il filtro persista tra le sessioni.

Riferimento ai comandi

Best practice e note

• Utilizza runtime.done() (tramite il runtime @adobe/exc-app)quando l’app è in esecuzione all’interno della shell di Experience Cloud per evitare il timeout dell’interfaccia utente (per le configurazioni delle applicazioni a pagina singola).

• Evita azioni a lunga esecuzione; restituisci una risposta rapida e, se necessario, utilizza lo streaming o il polling.

• Prediligi i componenti Spectrum silenziosi per garantire la coerenza con la shell.

• Mantieni la logica di autenticazione nelle azioni; il front-end chiama le azioni, non direttamente le API Adobe.

• Mantieni i filtri utente (ad esempio, area di lavoro) in localStorage per migliorare l’esperienza utente.

• Per la pubblicazione su Exchange, verifica che i metadati (nome, icona) siano corretti e includi il blocco dell’estensione nel file app.config.yaml.

Documentazione

• Adobe App Builder - Guida introduttiva

• Developer Console