Guida introduttiva: tutorial per sviluppatori

Questo tutorial ti mostrerà come iniziare a lavorare con un nuovo progetto Adobe Experience Manager (AEM). Tra dieci o venti minuti, avrai creato il tuo sito e sarai in grado di creare, visualizzare in anteprima e pubblicare i tuoi contenuti, stili e aggiungere nuovi blocchi.

Prerequisiti:

In questo tutorial vengono utilizzati macOS, Chrome e Visual Studio Code come ambiente di sviluppo e le schermate e le istruzioni riflettono tale configurazione. Puoi utilizzare un sistema operativo, un browser e un editor di codice diversi, ma l’interfaccia utente visualizzata e i passaggi da intraprendere possono variare di conseguenza.

Introduzione al modello di archivio standard

Il modo più rapido e semplice per iniziare a seguire le best practice per l’AEM è creare l’archivio utilizzando l’archivio GitHub "boilerplate" come modello.

https://github.com/adobe/aem-boilerplate

Fai clic sul pulsante Use this template e seleziona Create a new repositorye selezionare la posizione in cui si desidera creare l'archivio.

È consigliabile impostare l’archivio su public.

L’unico passaggio rimanente in GitHub è installare App GitHub di sincronizzazione codice AEM nell’archivio visitando questo collegamento: https://github.com/apps/aem-code-sync/installations/new

In Repository access dell'app AEM Code Sync, assicurati di selezionare Only select Repositories (non All Repositories). Quindi seleziona il nuovo archivio creato e fai clic su Save.

Nota: se utilizzi Github Enterprise con il 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/ Nell’esempio precedente ciò è https://main--my-website--lighthouse100.hlx.page/

Collega la tua origine di contenuto tramite Google Drive

Nel fork dell’archivio GitHub Boilerplate, il sito punta a un’origine di contenuto esistente in Google Drive. Consulta questa cartella ad esempio il contenuto.

Questo contenuto è di sola lettura, ma può essere copiato nella cartella Google Drive per fungere da punto di partenza.

Per creare contenuti personalizzati, crea una cartella nella tua unità Google e condividila con l'utente di Adobe Experience Manager (helix@adobe.com).

Per iniziare a creare contenuti personalizzati, è consigliabile copiare index, nav e footer dal contenuto di esempio e acquisisci familiarità con la struttura del contenuto. nav e footer non vengono modificati frequentemente in un progetto e hanno una struttura particolare. La maggior parte dei file di un progetto è più simile a index.

Aprire i file e copiare/incollare l'intero contenuto nei file corrispondenti nell'unità Google. È inoltre possibile scaricare i file tramite Download All o scarica singoli file. Tuttavia, ricorda di convertire il .docx i file nei documenti Google nativi quando vengono caricati nella cartella dell'unità Google.

Ora che disponi del contenuto, devi connetterlo all’archivio GitHub. Per farlo, modificate il riferimento in fstab.yaml nell’archivio GitHub alla cartella appena condivisa.
Copia/incolla l'URL della cartella dall'unità Google in fstab.yaml.

Tieni presente che dopo aver apportato tale modifica, vedrai 404 not found errori, perché il contenuto non è ancora stato visualizzato in anteprima. Consulta la sezione successiva per scoprire come iniziare a creare e visualizzare in anteprima i contenuti. Se hai copiato index, nav e footer tutti e tre questi documenti sono documenti separati con i propri cicli di anteprima e pubblicazione, quindi assicurati di visualizzarli in anteprima (e pubblicarli) se necessario.

Apporta le modifiche e hai collegato la tua origine di contenuto al sito web.

Anteprima e pubblicazione dei contenuti

Dopo aver completato l’ultimo passaggio, la nuova origine di contenuto non è vuota, ma nessun contenuto è stato promosso a preview o live stadi, il che significa che il tuo sito web serve 404 s.

Per visualizzare l’anteprima del contenuto, un autore deve installare l’estensione Sidekick Chrome. Trova il Estensione Chrome qui.

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

Per configurare l’estensione Chrome, passa alla cartella Google Drive condivisa in precedenza e fai clic sull’icona dell’estensione nella barra degli strumenti del browser, quindi seleziona Add this project.

Una volta installata l’estensione e aggiunto il progetto, puoi visualizzare in anteprima e pubblicare i contenuti dall’unità Google.

Seleziona tutti e tre i documenti e attiva il AEM Sidekick facendo clic sull’estensione bloccata. Verrà visualizzata una nuova barra degli strumenti. Facendo clic su preview o publish attiverà l'operazione corrispondente.

Apri index e apportare alcune modifiche. Attiva il Sidekick facendo clic sull’estensione bloccata, quindi fai clic sul pulsante Preview che attiverà l’operazione di anteprima e aprirà una nuova scheda con l’anteprima del contenuto.

Inizia a sviluppare stile e funzionalità

Per iniziare a sviluppare, è più semplice installare l’interfaccia CLI (Command Line Interface) dell’AEM e clonare l’archivio a livello locale utilizzando quanto segue.

npm install -g @adobe/aem-cli
git clone https://github.com/<owner>/<repo>

Da qui, passa alla cartella del progetto e avvia l’ambiente di sviluppo locale utilizzando quanto segue.

cd <repo>
aem up

Verrà aperto http://localhost:3000/ e puoi apportare modifiche.
Un buon punto di partenza è il blocks cartella in cui risiedono la maggior parte dello stile e del codice di un progetto. È sufficiente apportare una modifica in un .css o .js e dovresti vedere immediatamente le modifiche nel browser.

Quando sei pronto a inviare le modifiche, utilizza semplicemente Git per aggiungere, confermare e inviare in anteprima e il codice (https://<branch>--<repo>--<owner>.hlx.page/) e produzione (https://<branch>--<repo>--<owner>.hlx.live/).

Tutto qui, ce l'hai fatta! Congratulazioni, il tuo primo sito è operativo. Se hai bisogno di aiuto nell’esercitazione, partecipa al nostro canale Discord o si metta in contatto con noi.