DocumentazioneAEMTutorial su AEMTutorial su AEM as a Cloud Service

Verificare un’estensione

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Creato per:

  • Principiante
  • Sviluppatore

Le estensioni dell’interfaccia utente AEM possono essere verificate in base a qualsiasi ambiente AEM as a Cloud Service nell’organizzazione di Adobe a cui appartiene l’estensione.

Il test di un’estensione viene eseguito tramite un URL appositamente creato che indica all’AEM di caricarla, solo per tale richiesta.

https://video.tv.adobe.com/v/3417481?quality=12&learn=on&captions=ita

IMPORTANT
Il video precedente illustra l’utilizzo di un’estensione della Console Frammenti di contenuto per illustrare l’anteprima e la verifica dell’app dell’estensione App Builder. Tuttavia, è importante notare che i concetti descritti possono essere applicati a tutte le estensioni dell’interfaccia utente dell’AEM.

URL interfaccia utente AEM

URL console Frammenti di contenuto AEM

Per creare un URL che monti l’estensione non di produzione in AEM, è necessario ottenere l’URL dell’interfaccia utente dell’AEM in cui viene inserita l’estensione. Passa all’ambiente AEM as a Cloud Service per verificare l’estensione su e apri l’interfaccia utente su cui deve essere visualizzata l’estensione.

Ad esempio, per visualizzare in anteprima un’estensione per la console Frammenti di contenuto:

  1. Accedi all’ambiente AEM as a Cloud Service desiderato.

  2. Seleziona l'icona Frammenti di contenuto.

  3. Attendi che la console Frammenti di contenuto AEM venga caricata nel browser.

  4. Copia l’URL della console Frammenti di contenuto AEM dalla barra degli indirizzi del browser; dovrebbe essere simile al seguente:

    code language-none 
    https://experience.adobe.com/?repo=author-p1234-e5678.adobeaemcloud.com#/@wknd/aem/cf/admin

Questo URL viene utilizzato di seguito per la creazione degli URL per lo sviluppo e la verifica dell’area di visualizzazione. Se verifichi l’estensione rispetto ad altre interfacce utente dell’AEM, ottieni tali URL e applica gli stessi passaggi indicati di seguito.

Verificare le build di sviluppo locali

  1. Apri una riga di comando nella directory principale del progetto di estensione.

  2. Eseguire l’estensione dell’interfaccia utente AEM come app App Builder locale

    code language-shell 
    $ aio app run
...
No change to package.json was detected. No package manager install will be executed.

To view your local application:
  -> https://localhost:9080
To view your deployed application in the Experience Cloud shell:
  -> https://experience.adobe.com/?devMode=true#/custom-apps/?localDevUrl=https://localhost:9080

Prendi nota dell'URL dell'applicazione locale, indicato sopra come -> https://localhost:9080

  1. Inizialmente (e ogni volta che viene visualizzato un errore di connessione) apri https://localhost:9080 (o qualsiasi URL dell'applicazione locale sia) nel browser Web e accetta manualmente il certificato HTTPS.

  2. Aggiungi i due parametri di query seguenti all'URL dell'interfaccia utente AEM

    • &devMode=true
    • &ext=<LOCAL APPLICATION URL>, in genere &ext=https://localhost:9080.

    Aggiungere i due parametri di query sopra indicati (devMode e ext) come primi parametri di query nell'URL. L'interfaccia utente estensibile dell'AEM utilizza route hash (#/@wknd/aem/...), pertanto non corregge correttamente la post-correzione dei parametri dopo che # non funziona.

    L’URL di anteprima deve essere simile al seguente:

    code language-none 
    https://experience.adobe.com/?devMode=true&ext=https://localhost:9080&repo=author-p1234-e5678.adobeaemcloud.com#/@wknd/aem/cf/admin

  3. Copia e incolla l’URL di anteprima nel browser.

    • Potrebbe essere necessario inizialmente e quindi periodicamente accettare il certificato HTTPS per l'host dell'applicazione locale (https://localhost:9080).

  4. L’interfaccia utente dell’AEM viene caricata con la versione locale dell’estensione inserita per la verifica.

IMPORTANT
Quando si utilizza questo approccio, l’estensione in fase di sviluppo influisce solo sull’esperienza e tutti gli altri utenti dell’interfaccia utente dell’AEM usufruiscono dell’interfaccia utente senza l’estensione inserita.

Verifica le build della fase

  1. Apri una riga di comando nella directory principale del progetto di estensione.

  2. Assicurati che l’area di lavoro Stage sia attiva (o qualsiasi ambiente Workspace venga utilizzato per la verifica).

    code language-shell 
    $ aio app use -w Stage

    Unisci le modifiche apportate a .env e .aio.

  3. Distribuisci l’estensione aggiornata dell’app App Builder. Se non si è connessi, eseguire prima aio login.

    code language-shell 
    $ aio app deploy
...
Your deployed actions:
web actions:
  -> https://98765-123aquarat.adobeio-static.net/api/v1/web/aem-cf-console-admin-1/generic
To view your deployed application:
  -> https://98765-123aquarat.adobeio-static.net/index.html
To view your deployed application in the Experience Cloud shell:
  -> https://experience.adobe.com/?devMode=true#/custom-apps/?localDevUrl=https://98765-123aquarat.adobeio-static.net/index.html
New Extension Point(s) in Workspace 'Production': 'aem/cf-console-admin/1'
Successful deployment 🏄

  4. Aggiungi i due parametri di query seguenti all'URL dell'interfaccia utente AEM

    • &devMode=true
    • &ext=<DEPLOYED APPLICATION URL>

    Aggiungere i due parametri di query sopra indicati (devMode e ext) come primi parametri di query nell'URL, poiché le interfacce utente AEM estensibili utilizzano una route hash (#/@wknd/aem/...), pertanto non è corretto postfissare i parametri dopo che # non funziona.

    L’URL di anteprima deve essere simile al seguente:

    code language-none 
    https://experience.adobe.com/?devMode=true&ext=https://98765-123aquarat.adobeio-static.net/index.html&repo=author-p1234-e5678.adobeaemcloud.com#/@wknd/aem/cf/admin

  5. Copia e incolla l’URL di anteprima nel browser.

  6. La console Frammenti di contenuto AEM inserisce la versione dell’estensione distribuita nell’area di lavoro Stage in. L’URL di questa fase può essere condiviso per il controllo qualità o per gli utenti aziendali per la verifica.

Quando si utilizza questo approccio, l’estensione Staged viene inserita solo nella console Frammenti di contenuto AEM quando si accede con l’URL della fase dell’mestiere.

  1. È possibile aggiornare le estensioni distribuite eseguendo nuovamente aio app deploy. Queste modifiche verranno applicate automaticamente quando si utilizza l'URL di anteprima.
  2. Per rimuovere un'estensione per la verifica, eseguire aio app undeploy.

Anteprima bookmarklet

Per semplificare la creazione degli URL di anteprima e anteprima descritti sopra, è possibile creare un bookmarklet JavaScript che carica l’estensione.

Il bookmarklet seguente visualizza in anteprima le build di sviluppo locali dell'estensione in https://localhost:9080. Per visualizzare in anteprima le build della fase, crea un bookmarklet con la variabile previewApp impostata sull'URL dell'app App Builder distribuita.

  1. Crea un segnalibro nel browser.

  2. Modifica il segnalibro.

  3. Assegnare a un segnalibro un nome significativo, ad esempio AEM UI Extension Preview (localhost:9080).

  4. Impostare l'URL del segnalibro sul codice seguente:

    code language-javascript 
    javascript: (() => {
    /* Change this to the URL of the local App Builder app if not using https://localhost:9080 */
    const previewApp = 'https://localhost:9080';

    const repo = new URL(window.location.href).searchParams.get('repo');

    if (window.location.href.match(/https:\/\/experience\.adobe\.com\/.*\/aem\/cf\/(editor|admin)\/.*/i)) {
        window.location = `https://experience.adobe.com/?devMode=true&ext=${previewApp}&repo=${repo}${window.location.hash}`;
    }
})();

  5. Passa a un’interfaccia utente AEM estensibile su cui caricare l’estensione di anteprima, quindi fai clic sul bookmarklet.

TIP
Se l'estensione App Builder non viene caricata, quando si utilizza, &ext=https://localhost:9080, aprire l'host e la porta direttamente in una scheda del browser e accettare il certificato autofirmato. Riprovare con il bookmarklet.
recommendation-more-help
4859a77c-7971-4ac9-8f5c-4260823c6f69