Guida introduttiva - Tutorial per sviluppatori

Questo tutorial ti mostrerà come essere subito operativo con un nuovo progetto di Adobe Experience Manager (AEM). In dieci o venti minuti, avrai realizzato 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 di AEM è quello di creare l’archivio utilizzando l’archivio GitHub standard come modello.

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

Fare clic sul pulsante Use this template e selezionare Create a new repository, quindi selezionare l'organizzazione utente proprietaria dell'archivio

È consigliabile impostare l'archivio su public.

L'unico passaggio rimanente in GitHub consiste nell'installare l'app GitHub AEM Code Sync nell'archivio visitando questo collegamento: https://github.com/apps/aem-code-sync/installations/new

Nelle impostazioni Repository access dell'app AEM Code Sync, assicurati di selezionare Only select Repositories (non All Repositories). Selezionare quindi il repository appena creato e fare clic su Save.

Nota: 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>.aem.page/ Nell'esempio precedente è https://main–mysite–aemtutorial.aem.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. Vedi questa cartella per alcuni contenuti di esempio.

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

Per creare contenuti personalizzati, creare una cartella nell'unità Google e condividerla con l'utente Adobe Experience Manager (helix@adobe.com).

Per iniziare a creare contenuti personalizzati, è consigliabile copiare index, nav e footer dal contenuto di esempio e acquisire familiarità con la struttura del contenuto. nav e footer non vengono modificati frequentemente in un progetto e hanno una struttura speciale. 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 scaricare singoli file. Ricordati tuttavia di convertire nuovamente i file scaricati di .docx in Google Docs nativo quando li carichi nella cartella nell'unità Google.

Ora che disponi del contenuto, devi connetterlo all’archivio GitHub. A tale scopo, modifica il riferimento in fstab.yaml nel repository GitHub nella cartella appena condivisa.
Copia/incolla l'URL della cartella dall'unità Google in fstab.yaml.

Tieni presente che dopo aver apportato la modifica, verranno visualizzati 404 not found errori poiché 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 più di index, nav e footer, tutti e tre questi sono documenti separati con i rispettivi 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.

Visualizzare in anteprima e pubblicare il contenuto

Dopo aver completato l'ultimo passaggio, la nuova origine di contenuto non è vuota, ma nessun contenuto è stato promosso allo stadio preview o live , il che significa che il sito Web serve 404 secondi.

Per visualizzare l’anteprima del contenuto, un autore deve installare l’estensione Sidekick Chrome. Trovare l'estensione Chrome nel Chrome Web Store.

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

Per configurare l'estensione Chrome, accedere alla cartella condivisa Google Drive e fare clic sull'icona dell'estensione nella barra degli strumenti del browser, quindi selezionare 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 AEM Sidekick facendo clic sull’estensione bloccata. Verrà visualizzata una nuova barra degli strumenti. Facendo clic sui pulsanti preview o publish verrà attivata l'operazione corrispondente.

Apri il documento index e apporta alcune modifiche. Attiva Sidekick facendo clic sull'estensione bloccata, quindi fai clic sul pulsante Preview che attiva l'operazione di anteprima e apre una nuova scheda con l'anteprima del contenuto.

Inizia a sviluppare stile e funzionalità

Per iniziare a sviluppare, è più semplice installare AEM Command Line Interface (CLI) e clonare l’archivio localmente tramite i seguenti elementi.

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 potrai apportare modifiche.
Un buon punto di partenza è la cartella blocks, dove risiedono la maggior parte dello stile e del codice di un progetto. È sufficiente apportare una modifica in un .css o in un .js per visualizzare immediatamente le modifiche nel browser.

Quando sei pronto a inviare le modifiche, è sufficiente utilizzare Git per aggiungere, eseguire il commit e inviare e il codice ai siti di anteprima (https://<branch>--<repo>--<owner>.aem.page/) e produzione (https://<branch>--<repo>--<owner>.aem.live/).

Tutto qui, ce l'hai fatta! Congratulazioni, il tuo primo sito è operativo. Se hai bisogno di aiuto nell'esercitazione, unisciti al nostro canale Discord o contatta.