Creare la prima applicazione a pagina singola Angular in AEM introduction

Questo tutorial in più parti è progettato per gli sviluppatori che non hanno mai utilizzato la funzione Editor di SPA in Adobe Experience Manager (AEM). Questo tutorial illustra l’implementazione di un’applicazione Angular per un brand di lifestyle fittizio, WKND. L’app Angular è sviluppata e progettata per essere implementata con l’Editor di SPA di AEM, che mappa i componenti Angular ai componenti di AEM. L’applicazione a pagina singola completata, implementata in AEM, può essere creata dinamicamente con i tradizionali strumenti di modifica in linea di AEM.

Implementazione dell’applicazione a pagina singola WKND

Informazioni

L’obiettivo di questo tutorial in più parti è insegnare a uno sviluppatore come implementare un’applicazione Angular per funzionare con la funzione Editor di SPA di AEM. In uno scenario reale le attività di sviluppo vengono suddivise per utente tipo, spesso coinvolgendo uno sviluppatore front-end e uno sviluppatore back-end. Questo tutorial è molto utile per gli sviluppatori coinvolti in un progetto con l’editor di applicazioni a pagina singola di AEM.

Il tutorial è progettato per funzionare con AEM as a Cloud Service ed è compatibile con le versioni precedenti di AEM 6.5.4+ e AEM 6.4.8+. L’applicazione a pagina singola viene implementata utilizzando:

Il completamento di ogni parte del tutorial dovrebbe richiedere 1-2 ore.

Codice più recente

Tutto il codice utilizzato nel tutorial si trova su GitHub.

La base del codice più recente è disponibile come pacchetto AEM scaricabile.

Prerequisiti

Prima di iniziare questo tutorial, è necessario disporre dei seguenti elementi:

Anche se non obbligatorio, è utile avere una conoscenza di base di sviluppo di componenti AEM Sites tradizionali.

Ambiente di sviluppo locale local-dev-environment

Per completare questo tutorial è necessario un ambiente di sviluppo locale. Le schermate e i video sono stati acquisiti utilizzando AEM as a Cloud Service SDK in esecuzione in un ambiente Mac OS con Visual Studio Code come IDE. I comandi e il codice devono essere indipendenti dal sistema operativo locale, salvo diversa indicazione.

Passaggi successivi next-steps

Per iniziare il tutorial, passa al capitolo Progetto Editor di SPA e scopri come generare un progetto abilitato per l’editor di applicazioni a pagine singole utilizzando l’archetipo di progetto AEM.

Compatibilità con le versioni precedenti compatibility

Il codice del progetto per questo tutorial è stato creato per AEM as a Cloud Service. Per rendere il codice del progetto compatibile con le versioni precedenti 6.5.4+ e 6.4.8+ sono state apportate diverse modifiche.

UberJar v6.4.4 è stato incluso come dipendenza:

<!-- Adobe AEM 6.x Dependencies -->
<dependency>
    <groupId>com.adobe.aem</groupId>
    <artifactId>uber-jar</artifactId>
    <version>6.4.4</version>
    <classifier>apis</classifier>
    <scope>provided</scope>
</dependency>

È stato aggiunto un ulteriore profilo Maven, denominato classic, per modificare la build per gli ambienti AEM 6.x:

  <!-- AEM 6.x Profile to include Core Components-->
    <profile>
        <id>classic</id>
        <activation>
            <activeByDefault>false</activeByDefault>
        </activation>
        <build>
        ...
    </profile>

Il profilo classic è disabilitato per impostazione predefinita. Se segui il tutorial con AEM 6.x, aggiungi il profilo classic ogni volta che ti viene richiesto di eseguire una build Maven:

$ mvn clean install -PautoInstallSinglePackage -Pclassic

Durante la generazione di un nuovo progetto per un’implementazione AEM utilizza sempre la versione più recente dell’archetipo di progetto AEM e aggiorna aemVersion per la versione desiderata di AEM.