DocumentazioneAEM as a Cloud ServiceGuida utente

Guida introduttiva: tutorial per sviluppatori

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Argomenti:

Creato per:

  • Amministratore
  • Sviluppatore

Nell’era digitale di oggi, la creazione di moduli facili da usare è essenziale per qualsiasi organizzazione. Edge Delivery Services (EDS) di AEM Forms consente di creare moduli utilizzando strumenti familiari come Google Docs e Microsoft Office.

Questi moduli inviano i dati direttamente a un file Microsoft Excel o Fogli Google, consentendo di utilizzare un ecosistema dinamico e API affidabili di Fogli Google, Microsoft Excel e Microsoft SharePoint per elaborare facilmente i dati inviati o avviare un flusso di lavoro aziendale esistente.

AEM Forms fornisce un blocco, noto come blocco di moduli adattivi, per facilitare la creazione di moduli per l’acquisizione e l’archiviazione dei dati acquisiti. È possibile creare un nuovo progetto AEM preconfigurato con Blocco moduli adattivi o aggiungere il Blocco moduli adattivi a un progetto AEM esistente.

Questa esercitazione di AEM Forms ti guida attraverso la creazione, l’anteprima e la pubblicazione di un modulo personalizzato con un nuovo progetto Adobe Experience Manager (AEM) Forms.

Prerequisiti

  • Hai un account GitHub e conosci le nozioni di base su Git.
  • Hai un account Google o Microsoft SharePoint.
  • Comprendi le nozioni di base di HTML, CSS e JavaScript.
  • Hai Node/npm installato per lo sviluppo locale.

Attenzione! Questo tutorial utilizza macOS, Chrome e Visual Studio Code. Anche se i passaggi possono essere adattati per altre impostazioni, le schermate e gli elementi specifici dell’interfaccia utente potrebbero variare in base al sistema operativo, al browser e all’editor di codice scelti.

Crea un nuovo progetto AEM preconfigurato con Blocco moduli adattivi

Il modello standard di AEM Forms consente di iniziare rapidamente un progetto AEM preconfigurato con il Blocco moduli adattivi. È il modo più rapido e semplice per seguire le best practice di AEM e passare direttamente alla creazione dei moduli.

Introduzione al modello di archivio standard di AEM Forms

  1. Crea un archivio GitHub per il progetto AEM. Per creare l’archivio:

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

      AEM Forms standard

    2. Fai clic su Usa questo modello e seleziona l’opzione Crea un nuovo archivio. Viene visualizzata la schermata Crea nuovo archivio.

      Creare un nuovo archivio con AEM Forms standard

    3. Nella schermata Crea nuovo archivio, seleziona proprietario e specifica Nome archivio. Adobe consiglia di impostare l’archivio su Pubblico. Quindi, seleziona l’opzione pubblico e fai clic su Crea archivio.

    Impostare l’archivio su pubblico

  2. Installa l’app GitHub della sincronizzazione del codice AEM nell’archivio. Per installare:

    1. Passa a https://github.com/apps/aem-code-sync/installations/new.
    2. Nella schermata Installa sincronizzazione codice AEM, seleziona Seleziona solo archivi e seleziona quello appena creato. Fai clic su Salva.

    Impostare l’archivio su pubblico

    note note
    NOTE
    Se utilizzi GitHub Enterprise con filtro IP, puoi aggiungere il seguente IP all’elenco Consentiti: 3.227.118.73

    Congratulazioni Hai un nuovo sito web in esecuzione su https://<branch>--<repo>--<owner>.hlx.page/.

    • <branch> fa riferimento al ramo dell’archivio GitHub.
    • <repository> denota l’archivio GitHub.
    • <owner> fa riferimento al nome utente dell’account GitHub che ospita l’archivio GitHub.

    Ad esempio, se il nome del ramo è main, l’archivio è wefinance e il proprietario è wkndforms, il sito web sarà operativo e funzionante all’indirizzo https://main–wefinance–wkndforms.hlx.page/.

Collegare l’origine del proprio contenuto

L’archivio GitHub appena creato punta a contenuti di esempio di archiviati in una cartella di Google Drive. Questo contenuto di sola lettura fornisce un ottimo punto di partenza per i moduli. Puoi copiarlo in Google Drive e personalizzarlo in base alle esigenze.

Contenuto di esempio su Google Drive

Per copiare il contenuto di esempio nella cartella del contenuto e indirizzarvi l’archivio GitHub:

  1. crea una nuova cartella specifica per il contenuto AEM in Google Drive o Microsoft SharePoint. Questo documento utilizza una cartella creata in Microsoft SharePoint.

  2. Condividi la cartella con l’utente di Adobe Experience Manager (helix@adobe.com).

    Utilizza l’opzione Gestisci accesso per condividere la cartella con l’utente AEM - SharePoint

    Utilizza l’opzione Gestisci accesso per condividere la cartella con l’utente AEM - Google Drive

    Assicurati di aver fornito all’utente di Adobe Experience Manager le autorizzazioni di modifica per la cartella.

    Condividi la cartella con l’utente AEM e fornisci le autorizzazioni di modifica-SharePoint

    Condividi la cartella con l’utente AEM e fornisci le autorizzazioni di modifica - Google Drive

  3. Copia nella cartella il contenuto di esempio archiviato nella cartella Google Drive. Per copiare:

    1. scarica i file insieme o singolarmente.

      Scarica contenuto di esempio

      I file nav e footer definiscono il layout di base delle pagine e cambiano raramente durante un progetto. Inoltre, dispongono di una struttura specifica diversa dalla maggior parte degli altri file di contenuto. Esaminando questi file capirai come il contenuto viene organizzato nei progetti AEM.

    2. Carica questi file nella cartella Microsoft SharePoint o Google Drive.

      Contenuto di esempio su Google Drive

      Assicurati di copiare il foglio enquiry dal contenuto di esempio nella cartella su Google Drive o Microsoft SharePoint. Questo contiene la struttura per un modulo di esempio.

  4. Ora che hai configurato la cartella dei contenuti, puoi collegarla al progetto su GitHub che hai creato utilizzando precedentemente moduli AEM ricorrenti. Per connettersi:

    1. vai all’archivio GitHub che hai creato in precedenza utilizzando moduli AEM ricorrenti.

    2. Apri fstab.yaml per la modifica.

    3. Sostituisci il riferimento esistente con il percorso della cartella condivisa con l’utente AEM (helix@adobe.com).

      Contenuto di esempio su Google Drive

      Se utilizzi Microsoft SharePoint, il percorso della cartella utilizza il formato seguente:

      code language-html 
      https://<tenant>.SharePoint.com/sites/<sp-site>/Shared%20Documents/<folder-name>

      Ad esempio:

      code language-html 
      https://adobe.SharePoint.com/sites/wkndforms/Shared%20Documents/wefinance

      Per ulteriori informazioni sulla gestione dei file con Microsoft SharePoint, consulta Come usare Adobe SharePoint.

    4. Conferma l’aggiornamento del file fsatb.yaml dopo aver aggiornato il riferimento e tutto sembra a posto. Se riscontri problemi di build, consulta Risoluzione dei problemi di build di GitHub.

      Conferma l’aggiornamento del file fsatab.yaml

      Questo consente di collegare la cartella dei contenuti al sito web. Dopo aver aggiornato il riferimento, potresti riscontrare inizialmente gli errori “404 non trovato”. Questo perché il contenuto non è ancora stato visualizzato in anteprima. Nella sezione successiva viene illustrato come iniziare a creare e visualizzare in anteprima i contenuti.

Visualizzare in anteprima e pubblicare il contenuto

Dopo aver completato l’ultimo passaggio, la nuova origine di contenuto non è vuota, ma non sarà visibile sul sito web finché non viene promossa nell’anteprima o nelle fasi live. Attualmente, ciò potrebbe causare errori 404.

Per visualizzare in anteprima il contenuto non pubblicato:

  1. installa l’estensione Chrome denominata AEM Sidekick.

    Installare AEM Sidekick

    Dopo aver installato l’estensione su Chrome, non dimenticare di fissarla, per facilitarne la ricerca.

    Fissare AEM Sidekick

  2. Per impostare l’estensione Sidekick per Chrome, passa alla cartella di Google Drive o Microsoft SharePoint precedentemente condivisa e fai clic con il pulsante destro del mouse sull’icona dell’estensione nella barra degli strumenti del browser, quindi seleziona Add this project.

    AEM Sidekick: aggiungere un progetto

    Una volta installata l’estensione e aggiunto il progetto, puoi visualizzare in anteprima e pubblicare il contenuto da Google Drive.

  3. Seleziona tutti i documenti nella cartella Microsoft SharePoint o Google Drive. È possibile scegliere più documenti tenendo premuto il tasto Ctrl (Windows/Linux) o Comando (Mac) mentre fai clic.

    Selezionare tutti i file

  4. Fai clic sull’icona AEM Sidekick fissata nella barra delle estensioni di Chrome. Viene visualizzata una barra degli strumenti sulla schermata. Puoi scegliere di visualizzare in anteprima o pubblicare il contenuto.

    Se hai copiato i file index, nav, footer e enquiry, questi sono tutti documenti separati con i rispettivi cicli di anteprima e pubblicazione, quindi assicurati di visualizzare in anteprima (e pubblicare) ognuno di questi.

    Quando si visualizzano i file in anteprima, i documenti vengono visualizzati in nuove schede del browser. Per visualizzare in anteprima il modulo di esempio, passa al seguente URL:

    code language-html 
    https://<branch>--<repository>--<owner>.hlx.live
    • <branch> fa riferimento al ramo dell’archivio GitHub.
    • <repository> denota l’archivio GitHub.
    • <owner> fa riferimento al nome utente dell’account GitHub che ospita l’archivio GitHub.

    URL https://<branch>--<repo>--<owner>.hlx.page/enquiry

    Ad esempio, se l’archivio del progetto è denominato “wefinance”, si trova sotto il proprietario dell’account “wkndforms” e stai utilizzando il ramo “main”, l’URL è:

    https://main–wefinance–wkndforms.hlx.page.

Creare un modulo

Il contenuto di esempio include un foglio “enquiry” che funge da modello per il modulo “enquiry”. Ogni riga del foglio rappresenta un campo modulo e le intestazioni della colonna definiscono le proprietà del campo. Questo modulo di esempio offre un punto di partenza per iniziare a creare il modulo.

Modulo di richiesta

Iniziamo con l’aggiornamento dell’etichetta di un campo. Apri il foglio “enquiry” per la modifica, cambia l’etichetta del pulsante Invia in Let's Chat e utilizza AEM Sidekick per visualizzare in anteprima e pubblicare il file.

Modulo di richiesta

Quando visualizzi in anteprima o pubblichi il file, una versione JSON del file viene visualizzata in una nuova scheda. Copia l’URL di anteprima (.hlx.page) o di pubblicazione (.hlx.live) del file.

JSON del foglio di calcolo del modulo

Apri il file enquiry e sostituisci l’URL nel blocco del modulo con l’URL del file copiato nel passaggio precedente. Assicurati che l’URL sia un collegamento ipertestuale.

File di richiesta con l’URL .json dell’URL del foglio di calcolo

Utilizza AEM Sidekick per visualizzare in anteprima e pubblicare il documento di richiesta.

File di richiesta con l’URL .json dell’URL del foglio di calcolo

Per visualizzare in anteprima il modulo di richiesta aggiornato, passa al seguente URL:

    https://<branch>--<repository>--<owner>.hlx.page/enquiry

L’etichetta del pulsante Invia viene aggiornata in Let's Chat.

Modulo di richiesta

Per informazioni dettagliate sulla creazione e la pubblicazione di un nuovo modulo, consulta la guida creare un modulo.

Inizia a sviluppare stile e funzionalità

Per essere operativi con un ambiente di sviluppo AEM locale in tempi brevi:

  1. installa AEM CLI: AEM CLI semplifica le attività di sviluppo. Installalo a livello globale utilizzando npm:

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

  2. Clona il progetto GitHub: clona l’archivio del progetto da GitHub utilizzando il seguente comando, sostituendolo con il proprietario dell’archivio e con il nome dell’archivio:

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

  3. Avvia l’ambiente locale: passa alla directory del progetto e attiva l’istanza AEM locale con un singolo comando:

    code language-none 
    cd <repo>
aem up

La cartella blocks/form del blocco di moduli adattivi è un ambiente playground per lo stile e il codice dei moduli. Modifica qualsiasi file .css o .js all’interno di questa directory e vedrai le modifiche immediatamente applicate nel browser.

Vuoi mostrare la creazione? Utilizza Git per confermare e implementare le modifiche. Questo aggiorna gli ambienti di anteprima e di produzione accessibili tramite questi URL (sostituisci i segnaposto con i dettagli del progetto):

Anteprima:https://<branch>--<repo>--<owner>.hlx.page/
Produzione: https://<branch>--<repo>--<owner>.hlx.live/

Congratulazioni L’ambiente di sviluppo locale è stato configurato correttamente e le modifiche sono state distribuite.

Aggiungere un blocco di moduli adattivi al progetto AEM esistente

https://video.tv.adobe.com/v/3427789

Se disponi di un progetto AEM esistente, puoi integrare il blocco di moduli adattivi nel progetto corrente per iniziare a creare i moduli.

NOTE
Questo passaggio si applica ai progetti generati con AEM ricorrenti. Se hai creato il progetto AEM utilizzando moduli AEM ricorrenti, puoi saltare questo passaggio.

Per integrare:

  1. clona sul computer l’archivio del blocco di moduli adattivi: https://github.com/adobe-rnd/aem-boilerplate-forms.

  2. All’interno della cartella scaricata, individua la cartella blocks/form. Copia questa cartella. Ora è possibile passare alla cartella blocks locale del progetto AEM e incollare qui la cartella del modulo copiato.

  3. Conferma e implementa queste modifiche al progetto AEM su GitHub.

Tutto qui. Il blocco di moduli adattivi fa ora parte del progetto AEM. Puoi iniziare a creare e aggiungere moduli alle pagine AEM.

Risoluzione dei problemi di compilazione di GitHub

Assicurati un processo di compilazione di GitHub senza intoppi affrontando potenziali problemi:

  • Errore del percorso del modulo di risoluzione:
    Se riscontri l’errore “Impossibile risolvere il percorso del modulo ”‘…/…/scripts/lib-franklin.js’, passa al file [Progetto EDS]/blocks/forms/form.js. Aggiorna l’istruzione di importazione sostituendo il file lib-franklin.js con il file aem.js.

  • Gestire errori di stampa:
    in caso di errori di stampa, è possibile ignorarli. Apri il file [Progetto EDS]/package.json e modifica lo script “lint” da "lint": "npm run lint:js && npm run lint:css" a "lint": "echo 'skipping linting for now'". Salva il file e conferma le modifiche nel progetto GitHub.

Consulta anche

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab