Guida introduttiva a Edge Delivery Services per moduli AEM utilizzando l’editor universale

1. Accedi al modello standard di moduli AEM

   • Passa a https://github.com/adobe-rnd/aem-boilerplate-forms

   
   Figura: archivio standard di moduli AEM con blocco di moduli adattivi preconfigurato

2. Creare l’archivio

   • Fai clic su Utilizza questo modello > Crea un nuovo archivio

   
   Figura: utilizzo del modello per creare un nuovo archivio

3. Configurare le impostazioni dell’archivio

   • Proprietario: seleziona l’account GitHub o l’organizzazione
   • Nome archivio: scegli un nome descrittivo (ad esempio, my-forms-project)
   • Visibilità: seleziona Pubblico (consigliato per Edge Delivery Services)
   • Fai clic su Crea archivio

   
   Figura: configurazione del nuovo archivio con visibilità pubblica

Convalida: conferma di disporre di un nuovo archivio GitHub basato sul modello standard di moduli AEM.

La sincronizzazione del codice AEM sincronizza automaticamente le modifiche apportate al contenuto tra l’ambiente di authoring AEM e l’archivio GitHub.

1. Installare l’app GitHub

   • Passa a https://github.com/apps/aem-code-sync/installations/new

2. Configurare le autorizzazioni di accesso

   • Seleziona Seleziona solo archivi
   • Scegli il nuovo archivio creato
   • Fai clic su Salva

   
   Figura: installazione di sincronizzazione del codice AEM con autorizzazioni specifiche per l’archivio

Punti di controllo: la sincronizzazione del codice AEM è ora installata e ha accesso al tuo archivio.

Il file fstab.yaml connette l’archivio GitHub all’ambiente di authoring AEM per la sincronizzazione del contenuto.

1. Passa al tuo archivio

   • Passa all’archivio GitHub appena creato
   • Dovresti visualizzare i file standard dei moduli AEM

2. Creare il file fstab.yaml

   • Fai clic su Aggiungi file > Crea nuovo file nella directory principale
   • Denominare il file fstab.yaml

   
   Figura: creazione del file di configurazione fstab.yaml

3. Aggiungere i dettagli della connessione AEM

   Copia e incolla la seguente configurazione, sostituendo i segnaposto:

   code language-yaml
   mountpoints: /: url: https://<aem-author>/bin/franklin.delivery/<owner>/<repository>/main type: "markup" suffix: ".html"

   Sostituisci:

   • <aem-author>: URL di authoring di AEM as a Cloud Service (ad esempio, author-p12345-e67890.adobeaemcloud.com)
   • <owner>: nome utente o organizzazione GitHub
   • <repository>: nome dell’archivio

   Esempio:

   code language-yaml
   mountpoints: /: https://author-p12345-e67890.adobeaemcloud.com/bin/franklin.delivery/mycompany/my-forms-project/main

   
   Figura: configurazione del punto di montaggio per l’integrazione di AEM

4. Impegna la configurazione

   • Aggiungi un messaggio di impegno: “Aggiungi configurazione integrazione di AEM”
   • Fai clic su Impegna nuovo file

   
   Figura: impegno della configurazione fstab.yaml

Convalida: conferma la connessione tra l’archivio GitHub e AEM.

1. Accedi alla console AEM Sites

   • Accedi all’istanza di authoring di AEM as a Cloud Service
   • Passa a Sites

   
   Figura: accesso alla console AEM Sites

2. Inizia la creazione del sito

   • Fai clic su Crea > Sito da modello.

   
   Figura: creazione di un nuovo sito da modello

3. Seleziona il modello di Edge Delivery Services

   • Scegli il modello Sito di Edge Delivery Services
   • Fai clic su Avanti

   
   Figura: selezione del modello per siti di Edge Delivery Services

   note note
   NOTE
   Modello non disponibile? Se non visualizzi il modello di Edge Delivery Services:
   Fai clic su Importa per caricare il modello Scaricare modelli dalle versioni GitHub

4. Configurare il sito

   Immetti le seguenti informazioni:

   table 0-row-3 1-row-3 2-row-3 3-row-3
   Campo	Valore	Esempio
   Titolo del sito	Nome descrittivo per il sito	“Il mio progetto di moduli”
   Nome del sito	Nome dell’URL descrittivo	“my-forms-project”
   URL GitHub	L’URL dell’archivio	https://github.com/mycompany/my-forms-project

   
   Figura: configurazione del nuovo sito AEM con l’integrazione GitHub

5. Completare la creazione del sito

   • Rivedi le impostazioni
   • Fai clic su Crea.

   
   Figura: conferma creazione sito

   Completato correttamente Il sito AEM ora è stato creato e connesso a GitHub.

6. Apri nell’editor universale

   • Nella console Sites, individua il nuovo sito
   • Seleziona la pagina index
   • Fai clic su Modifica

   
   Figura: apertura del sito per la modifica

   L’editor universale si apre in una nuova scheda, che fornisce funzionalità di authoring WYSIWYG.

   
   Figura: il sito aperto nell’editor universale per la modifica in WYSIWYG

Convalida: conferma che il sito AEM sia pronto per l’authoring del modulo.

La pubblicazione rende il tuo sito disponibile su Edge Delivery Services per l’accesso globale.

1. Pubblicazione rapida dalla console Sites

   • Torna alla console AEM Sites
   • Seleziona le pagine del sito (o seleziona tutto con Ctrl+A)
   • Fai clic su Pubblicazione rapida

   
   Figura: selezione delle pagine per la pubblicazione rapida

2. Conferma pubblicazione

   • Nella finestra di dialogo di conferma, fai clic su Pubblica

   
   Figura: conferma dell’azione di pubblicazione

   Alternativa: puoi anche pubblicare direttamente dell’editor universale utilizzando il pulsante Pubblica.

   
   Figura: pubblicazione diretta dall’editor universale

3. Accedi al tuo sito attivo

   Il tuo sito è ora attivo all’indirizzo:

   code language-none
   https://<branch>--<repo>--<owner>.aem.page/content/<site-name>/

   Spiegazione struttura URL:

   • <branch>: ramo GitHub (in genere main)
   • <repo>: nome dell’archivio
   • <owner>: nome utente o organizzazione GitHub
   • <site-name>: nome del sito AEM

   Esempio:

   code language-none
   https://main--my-forms-project--mycompany.aem.page/content/my-forms-project/

Convalida: conferma che il sito sia attivo su Edge Delivery Services.

Avanti: crea il primo modulo

1. Passa al progetto locale

   code language-bash
   cd /path/to/your/aem-project

2. Scarica i file richiesti dai moduli standard di AEM

   Copia questi file dall’archivio di moduli standard di AEM:

   table 0-row-3 1-row-3 2-row-3 3-row-3
   Origine	Destinazione	Scopo
   blocks/form/	blocks/form/	Funzionalità modulo core
   scripts/form-editor-support.js	scripts/form-editor-support.js	Integrazione editor universale
   scripts/form-editor-support.css	scripts/form-editor-support.css	Stile dell’editor

3. Aggiornare il supporto dell’editor

   • Sostituisci il file /scripts/editor-support.js con quello editor-support.js dello standard di moduli di AEM

Convalida: conferma che i file del blocco del modulo siano presenti nel progetto.

1. Aggiornare il modello della sezione

   Apri /models/_section.json e aggiungi i componenti del modulo ai filtri:

   code language-json
   { "filters": [ { "id": "section", "components": [ "text", "image", "button", "form", "embed-adaptive-form" ] } ] }

   Come funziona: abilita i componenti del modulo nel selettore di componenti dell’editor universale.

Convalida: conferma i componenti del modulo che vengono visualizzati nell’editor universale.

Perché questo passaggio: impedisce gli errori di stampa da file specifici del modulo e configura le regole di convalida appropriate.

1. Aggiornare .eslintignore

   Aggiungi queste righe a /.eslintignore:

   code language-bash
   # Form block rule engine files blocks/form/rules/formula/* blocks/form/rules/model/* blocks/form/rules/functions.js scripts/editor-support.js scripts/editor-support-rte.js

2. Aggiornare .eslintrc.js

   Aggiungi queste regole all’oggetto rules in /.eslintrc.js:

   code language-javascript

   { "rules": { // Existing rules... // Form component cell limits 'xwalk/max-cells': ['error', { '*': 4, // default limit form: 15, wizard: 12, 'form-button': 7, 'checkbox-group': 20, checkbox: 19, 'date-input': 21, 'drop-down': 19, email: 22, 'file-input': 20, 'form-fragment': 15, 'form-image': 7, 'multiline-input': 23, 'number-input': 22, panel: 17, 'radio-group': 20, 'form-reset-button': 7, 'form-submit-button': 7, 'telephone-input': 20, 'text-input': 23, accordion: 14, modal: 11, rating: 18, password: 20, tnc: 12 }], // Disable this rule for forms 'xwalk/no-orphan-collapsible-fields': 'off' } }

Convalida: conferma che ESLint funzioni con i componenti del modulo.

1. Installare le dipendenze e generare

   code language-bash
   # Install any new dependencies npm install # Build component definitions npm run build:json

   Come funziona:

   • Aggiorna component-definition.json con i componenti del modulo
   • Genera component-models.json con i modelli del modulo
   • Crea component-filters.json con regole di filtro

2. Verifica dei file generati

   Verifica che questi file nella directory principale del progetto contengano oggetti correlati a un modulo:

   • component-definition.json
   • component-models.json
   • component-filters.json

3. Impegnare e inviare delle modifiche

   code language-bash
   git add . git commit -m "Add Adaptive Forms Block integration" git push origin main

Convalida: conferma che il progetto includa funzionalità del modulo.

1. Apri il modulo nell’editor universale

   • Passa alla console Sites in AEM
   • Seleziona la pagina in cui desideri aggiungere un modulo (ad esempio, index)
   • Fai clic su Modifica

   La pagina viene aperta nell’editor universale per la modifica in WYSIWYG.

2. Aggiungere il componente del modulo adattivo

   • Apri il pannello Struttura contenuto (barra laterale a sinistra)
   • Passa a una sezione in cui desideri aggiungere il modulo
   • Fai clic sull’icona Aggiungi (+)
   • Seleziona Modulo adattivo dall’elenco dei componenti

   Seleziona
   Figura: aggiunta di un blocco di modulo adattivo alla pagina

Convalida: conferma di disporre di un contenitore di modulo vuoto.

1. Passa al blocco modulo

   • Nella struttura contenuto, individua la sezione Modulo adattivo appena aggiunta

   
   Figura: blocco modulo adattivo nella struttura contenuto

2. Aggiungere i componenti del modulo

   Puoi aggiungere i componenti in due modi:

   Metodo A: fai clic per aggiungere

   • Fai clic sull’icona Aggiungi (+) nella sezione del modulo
   • Seleziona i componenti dall’elenco Componenti del modulo adattivo.

   Metodo B: trascinamento

   • Trascina i componenti direttamente dal pannello dei componenti al modulo

   
   Figura: aggiunta di componenti al modulo

   Componenti consigliati per iniziare

   • Input di testo (per nome, e-mail)
   • Area di testo (per messaggi)
   • Pulsante Invia

3. Configurare le proprietà del componente

   • Seleziona un componente del modulo

   • Utilizza il pannello Proprietà (barra laterale a destra) per configurare:

     • Etichette e segnaposto
     • Regole di convalida
     • Impostazioni di campo obbligatorie

   
   Figura: configurazione delle proprietà del componente

4. Anteprima del modulo

   Il modulo avrà un aspetto simile a questo:

   
   Figura: modulo di esempio creato con l’editor universale

Convalida: conferma che il modulo sia pronto per la pubblicazione.

1. Pubblicare dall’editor universale

   • Fai clic sul pulsante Pubblica nell’editor universale

   
   Figura: pubblicazione del modulo dall’editor universale

2. Confermare la pubblicazione

   • Nella finestra di dialogo di conferma, fai clic su Pubblica

   
   Figura: conferma dell’azione di pubblicazione

   Visualizzerai un messaggio di avvenuta conferma della pubblicazione.

   
   Figura: conferma pubblicazione avvenuta correttamente

3. Visualizzare il modulo attivo

   Il modulo è ora attivo all’indirizzo:

   code language-none
   https://<branch>--<repo>--<owner>.aem.live/content/<site-name>/

   URL di esempio:

   code language-none
   https://main--my-forms-project--mycompany.aem.live/content/my-forms-project/

   
   Figura: hai pubblicato la pagina del modulo in Edge Delivery Services

Congratulazioni. Il modulo è ora attivo e pronto per raccogliere gli invii.

1. Installare AEM CLI

   AEM CLI semplifica le attività di sviluppo locale:

   code language-bash
   npm install -g @adobe/aem-cli

2. Clonare l’archivio

   code language-bash
   git clone https://github.com/<owner>/<repo> cd <repo>

   Sostituisci <owner> e <repo> con i tuoi dettagli GitHub effettivi.

3. Avviare il server di sviluppo locale

   code language-bash
   aem up

   Verrà avviato un server locale con funzionalità di hot-reloading.

4. Eseguire le personalizzazioni

   • Modifica i file nella directory blocks/form/ per lo stile e il comportamento dei moduli
   • Modifica form.css per lo stile
   • Aggiorna form.js per il comportamento

   Visualizza le modifiche immediatamente nel browser all’indirizzo http://localhost:3000

5. Implementare le modifiche

   code language-bash
   git add . git commit -m "Custom form styling" git push origin main

   Le modifiche saranno disponibili all’indirizzo:

   • Anteprima: https://<branch>--<repo>--<owner>.aem.page/content/<site-name>
   • Produzione: https://<branch>--<repo>--<owner>.aem.live/content/<site-name>

Problema: errori di creazione o di linting

Soluzione 1: gestire gli errori di linting

Se si verificano errori di linting:

1. Apri package.json nella directory principale del progetto

2. Trova lo script lint:

   code language-json
   "scripts": { "lint": "npm run lint:js && npm run lint:css" }

3. Disabilita temporaneamente il linter:

   code language-json
   "scripts": { "lint": "echo 'skipping linting for now'" }

4. impegna e invia le modifiche

Soluzione 2: errori di percorso del modulo

Se visualizzi “Impossibile risolvere il percorso al modulo '/scripts/lib-franklin.js'”:

1. Passa a blocks/form/form.js

2. Aggiorna l’istruzione di importazione:

   code language-javascript
   // Change this: import { ... } from '/scripts/lib-franklin.js'; // To this: import { ... } from '/scripts/aem.js';

Problema: gli invii del modulo non funzionano

Soluzioni:

• Assicurati di disporre di un componente pulsante Invia
• Verifica la configurazione dell’URL di azione del modulo
• Verifica le regole di convalida del modulo
• Testa prima in modalità anteprima

Problema: problemi di stile

Soluzioni:

• Verifica i percorsi del file CSS in blocks/form/
• Cancella la cache del browser
• Verifica la sintassi CSS
• Testa nell’ambiente di sviluppo locale

Problema: i componenti del modulo non vengono visualizzati nell’editor universale

Soluzioni:

• Verifica che la sincronizzazione del codice AEM sia installata e in esecuzione
• Verifica che fstab.yaml disponga dell’URL di authoring AEM corretto
• Assicurati che l’istanza di AEM disponga dell’accesso anticipato abilitato
• Conferma che component-definition.json includa i componenti del modulo

Problema: modifiche non visibili dopo la pubblicazione

Soluzioni:

• Attendi l’aggiornamento della cache CDN
• Controlla la cache del browser (prova la modalità in incognito/privata)
• Verifica che sia utilizzato il formato URL corretto