DocumentazioneAEM as a Cloud ServiceGuida utente

App di esempio SecurBank per l’editor universale securbank

Last update: Tue Sep 16 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Si applica a:
  • Experience Manager as a Cloud Service

Creato per:

  • Amministratore
  • Sviluppatore

Scopri l’editor universale tramite un’esperienza pratica utilizzando l’app SecurBank, progettata per mostrare la potenza, la flessibilità e l’usabilità dell’editor universale per accelerare la creazione dei contenuti.

Prerequisiti prerequisites

  • Per installare l’app SecurBank, devi farti assegnare al profilo prodotto amministratore AEM
  • Per lo sviluppo locale devi avere installato Node.js versione 20 o successiva.

Installazione di SecurBank installation

L’installazione dell’app SecurBank è immediata, ma poiché interessa molte aree di AEM as a Cloud Service sono necessari diversi passaggi. Di seguito è riportata una panoramica dei passaggi principali.

  1. Crea un programma sandbox in Cloud Manager.
  2. Clona l’archivio Git del programma e aggiornalo con il contenuto del progetto SecurBank AEM.
  3. Esegui la pipeline per distribuire il progetto SecurBank AEM.
  4. Recupera le credenziali di Cloud Manager per lo sviluppo di app web locali.
  5. Scarica e configura l’app web SecurBank.
  6. Esegui l’app web SecurBank.

Le sezioni seguenti descrivono in dettaglio le singole attività richieste.

Crea un programma sandbox in Cloud Manager. create-sandbox-program

Sarà necessario un nuovo programma Cloud Manager in cui installare SecurBank.

  1. Accedi a Cloud Manager all’indirizzo my.cloudmanager.adobe.com e seleziona l’organizzazione appropriata.

  2. Crea un nuovo programma sandbox per l’app SecurBank.

    • Utilizza le opzioni predefinite per selezionare Soluzioni e componenti aggiuntivi.
    • Per informazioni dettagliate su come creare un programma sandbox, consulta il documento Creazione di programmi sandbox.

Clona l’archivio Git del programma e aggiornalo con il contenuto del progetto SecurBank AEM. clone-and-update

  1. Una volta creato il programma, aprilo e nella scheda Archivi tocca o fai clic sul pulsante Accedi a dati archivio per aprire la finestra di dialogo Informazioni archivio e visualizzare le credenziali necessarie per accedere all’archivio Git per l’ambiente sandbox.

    • Per informazioni dettagliate su come accedere alle informazioni dell’archivio, consulta il documento Accesso agli archivi.

  2. Utilizzando le credenziali nella finestra di dialogo Informazioni archivio, clona l’archivio nel computer locale.

  3. Individuare la cartella del clone locale, aprirla ed eliminare tutto il contenuto ad eccezione dei file nascosti/punti.

  4. Recupera il codice del progetto SecurBank AEM più recente da GitHub all’indirizzo https://github.com/Adobe-Marketing-Cloud/summit-2024-l425-securbank facendo clic su Codice e quindi su Scarica ZIP nel menu a discesa.

  5. Decomprimi il contenuto del file zip sul file system locale e spostalo nella cartella del clone locale del programma sandbox che hai provveduto a vuotare.

  6. Utilizzando il terminale, passa alla cartella del progetto clonato, esegui il commit di tutti i contenuti e inviali a Git.

    1. git add --all
    2. git commit -m "Adding SecurBank app code"
    3. git push

Esegui la pipeline per distribuire il progetto SecurBank AEM. run-pipeline

Dopo aver eseguito il commit del progetto AEM per SecurBank nell’archivio sandbox, è possibile distribuirlo con una pipeline.

  1. Torna alla scheda Panoramica del programma sandbox in Cloud Manager ed esegui la pipeline non di produzione full stack.

    • Deseleziona tutte le opzioni per l’esecuzione della pipeline.
    • Per ulteriori informazioni sull’esecuzione delle pipeline, consulta il documento Gestione delle pipeline.

Recupera le credenziali di Cloud Manager per lo sviluppo di app web locali. retrieve-credentials

Prima di poter eseguire l’app SecurBank, devi avere le credenziali di Cloud Manager per collegarvi l’app.

  1. Mentre la pipeline è in esecuzione, torna alla scheda Panoramica in Cloud Manager, tocca o fai clic sul pulsante con i puntini di sospensione accanto al nome dell’ambiente e seleziona Developer Console.

  2. In Developer Console, seleziona la scheda Integrazioni, quindi la scheda Token locale e tocca o fai clic su Ottieni token di sviluppo locale.

  3. Con il token di accesso viene prodotto un file JSON. Copia solo il token stesso (il JSON rimanente non è necessario) in una posizione sicura per utilizzarlo in un passaggio futuro prima di chiudere Developer Console e tornare a Cloud Manager.

  4. In Cloud Manager, nella scheda Panoramica, fai clic con il pulsante destro del mouse sull’URL dell’ambiente per copiarlo e salvarlo in un percorso sicuro per l’utilizzo in un passaggio futuro.

Scarica e configura l’app web SecurBank. download-web-app

Ora puoi scaricare e configurare l’app web SecurBank.

  1. Recupera il codice app SecurBank più recente da GitHub alle https://github.com/Adobe-Marketing-Cloud/summit-2024-l425/tree/ue-z-final-with-events facendo clic sull’indirizzo Codice e quindi su Scarica ZIP nel menu a discesa.

  2. Decomprimi il contenuto del file zip sul file system locale.

  3. Avvia l’editor di codice che preferisci e apri il file dell’ambiente nascosto nel progetto dell’app SecurBank all’indirizzo summit-2024-l425-ue-z-final-with-events/react-app/.env.

  4. Apportare le modifiche seguenti al file .env e salvarle.

    • Per REACT_APP_HOST_URI incolla il valore dell’URL dell’ambiente copiato in precedenza.
    • Per REACT_APP_DEV_TOKEN incolla il valore del token di sviluppo locale copiato in precedenza.

Esegui l’app web SecurBank. run-web-app

Quanto hai configurato tutto, sia in Cloud Manager che in locale, puoi eseguire l’app web SecurBank.

  1. Nella riga di comando del computer locale, passare alla cartella react-app del progetto di app SecurBank scaricato e decompresso.

  2. Nella cartella react-app installare l’app SecurBank con il comando node -i.

  3. Una volta installata, avviare l’app SecurBank con il comando npm start.

  4. Se l’installazione e l’avvio sono stati completati correttamente, vedrai:

  • La seguente uscita nel terminale

    code language-text 
    Compiled successfully!

You can now view securbank in the browser.

  Local:            https://localhost:3000
  On Your Network:  https://192.168.1.15:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully

    • e una finestra del browser aperta per l’URL https://localhost:3000.

      • Tieni presente che ciò è a scopo di sviluppo e, in quanto tale, non viene fornito alcun certificato valido. Pertanto, potrebbe essere necessario informare il browser per consentirgli di accedere alla pagina.

Congratulazioni. Ora l’app SecurBank è in esecuzione correttamente nel browser.

Se il contenuto non viene ancora visualizzato, verifica che la pipeline Distribuzione a Dev già eseguita sia stata completata correttamente.

App SecurBank nel browser

NOTE
Se utilizzi l’editor universale in un caso d’uso headless, l’app headless deve gestire la propria autenticazione.
recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab