Creación de su primera SPA de Angular en AEM
Creado para:
- Principiante
- Desarrollador
Para publicar desde AEM Sites usando Edge Delivery Services, haga clic aquí.
Bienvenido a un tutorial de varias partes diseñado para desarrolladores que utilicen la función Editor de SPA en Adobe Experience Manager (AEM). Este tutorial explora la implementación de una aplicación de Angular para una marca ficticia de estilo de vida, WKND. La aplicación de Angular se ha desarrollado y diseñado para implementarse con el Editor de SPA de AEM, que asigna componentes de Angular a componentes de AEM. La SPA completada, implementada en AEM, se puede crear dinámicamente con las herramientas tradicionales de edición en línea de AEM.
Implementación de SPA de WKND
Acerca de
El objetivo de este tutorial de varias partes es enseñar a un desarrollador cómo implementar una aplicación de Angular para trabajar con la función Editor de SPA de AEM. En un escenario real, las actividades de desarrollo se desglosan por persona, a menudo involucrando a un desarrollador front-end y a un desarrollador back-end. Creemos que es beneficioso para cualquier desarrollador involucrado en un proyecto de Editor de SPA de AEM completar este tutorial.
El tutorial está diseñado para funcionar con AEM as a Cloud Service y es compatible con AEM 6.5.4+ y AEM 6.4.8+. La SPA se implementa mediante:
Calcular de 1 a 2 horas para completar cada parte del tutorial.
Último código
Todo el código del tutorial se encuentra en GitHub.
La base de código más reciente está disponible como paquetes descargables de AEM.
Requisitos previos
Antes de iniciar este tutorial, necesita lo siguiente:
- Conocimientos básicos de HTML, CSS y JavaScript
- Familiaridad básica con Angular
- AEM as a Cloud Service SDK, AEM 6.5.4+ o AEM 6.4.8+
- Java
- Apache Maven (3.3.9 o posterior)
- Node.js y npm
Aunque no es necesario, es beneficioso tener una comprensión básica del desarrollo de componentes tradicionales de AEM Sites.
Entorno de desarrollo local
Se necesita un entorno de desarrollo local para completar este tutorial. Las capturas de pantalla y los vídeos se capturan con AEM as a Cloud Service SDK, que se ejecuta en un entorno de sistema operativo Mac con Visual Studio Code como IDE. Los comandos y el código deben ser independientes del sistema operativo local, a menos que se indique lo contrario.
NOTESiguientes pasos
¿Qué estás esperando?! Inicie el tutorial navegando hasta el capítulo Proyecto de editor de SPA y aprenda a generar un proyecto habilitado para el editor de SPA mediante el arquetipo de proyecto de AEM.
Compatibilidad con versiones anteriores
El código de proyecto de este tutorial se ha creado para AEM as a Cloud Service. Para que el código del proyecto sea compatible con versiones anteriores para 6.5.4+ y 6.4.8+, se han realizado varias modificaciones.
UberJar v6.4.4 se ha incluido como dependencia:
<!-- 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>
Se ha agregado un perfil Maven adicional, denominado classic, para modificar la compilación y dirigirla a los entornos de AEM 6.x de destino:
<!-- AEM 6.x Profile to include Core Components-->
<profile>
<id>classic</id>
<activation>
<activeByDefault>false</activeByDefault>
</activation>
<build>
...
</profile>
El perfil classic está deshabilitado de manera predeterminada. Si sigue el tutorial con AEM 6.x, agregue el perfil classic cada vez que se le indique que realice una compilación de Maven:
$ mvn clean install -PautoInstallSinglePackage -Pclassic
Al generar un nuevo proyecto para una implementación de AEM, use siempre la última versión del tipo de archivo del proyecto AEM y actualice aemVersion para que se adapte a la versión de AEM deseada.