DocumentaciónAEMTutoriales de AEMTutoriales de WKND de AEM Sites

Configuración del proyecto project-setup

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Creado para:

  • Principiante
  • Desarrollador

Este tutorial cubre la creación de un proyecto de módulo múltiple de Maven para administrar el código y las configuraciones de un sitio de Adobe Experience Manager.

Requisitos previos prerequisites

Revise las herramientas y las instrucciones necesarias para configurar un entorno de desarrollo local. Asegúrese de que tiene una nueva instancia de Adobe Experience Manager disponible localmente y de que no se han instalado paquetes de muestra/demostración adicionales (que no sean paquetes de servicio obligatorios).

Objetivo objective

  1. AEM Obtenga información sobre cómo generar un nuevo proyecto de con un arquetipo de Maven.
  2. AEM Comprenda los diferentes módulos generados por el tipo de archivo del proyecto de y cómo funcionan juntos.
  3. AEM AEM Comprender cómo se incluyen los componentes principales de la en un proyecto de.

Lo que va a generar what-build

https://video.tv.adobe.com/v/35883?quality=12&learn=on&captions=spa

En este capítulo, se genera un nuevo proyecto de Adobe Experience Manager AEM con el Arquetipo de proyecto de la seriede . AEM El proyecto de contiene código, contenido y configuraciones completos utilizados para una implementación de Sites. El proyecto generado en este capítulo sirve de base para una implementación del sitio WKND y se basa en capítulos futuros.

¿Qué es un proyecto Maven? - Apache Maven es una herramienta de administración de software para generar proyectos. Todas las implementaciones de Adobe Experience Manager AEM utilizan proyectos de Maven para generar, administrar e implementar código personalizado sobre los recursos de la aplicación

¿Qué es un arquetipo de Maven? - Un arquetipo de Maven es una plantilla o patrón para generar nuevos proyectos. AEM El arquetipo de proyecto de la ayuda a generar un nuevo proyecto con un área de nombres personalizada e incluir una estructura de proyecto que siga las prácticas recomendadas, lo que acelera en gran medida el desarrollo del proyecto.

Creación del proyecto create

AEM Hay un par de opciones para crear un proyecto de módulo múltiple de Maven para la creación de módulos de. AEM Este tutorial utiliza el tipo de archivo del proyecto Maven 35. Cloud Manager AEM también proporciona un asistente de interfaz de usuario para iniciar la creación de un proyecto de aplicación de la aplicación de la interfaz de usuario de la aplicación de la aplicación de la aplicación de. El proyecto subyacente generado por la interfaz de usuario de Cloud Manager tiene la misma estructura que el uso directo del tipo de archivo.

NOTE
Este tutorial utiliza la versión 35 del tipo de archivo. Se recomienda usar siempre la última versión del tipo de archivo para generar un nuevo proyecto.

La siguiente serie de pasos se realizará utilizando un terminal de línea de comandos basado en UNIX®, pero debe ser similar si utiliza un terminal de Windows.

  1. Abra un terminal de línea de comandos. Compruebe que Maven está instalado:

    code language-shell 
    $ mvn --version
Apache Maven 3.6.2
Maven home: /Library/apache-maven-3.6.2
Java version: 11.0.4, vendor: Oracle Corporation, runtime: /Library/Java/JavaVirtualMachines/jdk-11.0.4.jdk/Contents/Home

  2. AEM Desplácese hasta el directorio en el que desee generar el proyecto de. Puede ser cualquier directorio en el que desee mantener el código fuente del proyecto. Por ejemplo, un directorio con el nombre code debajo del directorio principal del usuario:

    code language-shell 
    $ cd ~/code

  3. Pegue lo siguiente en la línea de comandos para generar el proyecto en modo por lotes:

    code language-shell 
    mvn -B org.apache.maven.plugins:maven-archetype-plugin:3.2.1:generate \
    -D archetypeGroupId=com.adobe.aem \
    -D archetypeArtifactId=aem-project-archetype \
    -D archetypeVersion=39 \
    -D appTitle="WKND Sites Project" \
    -D appId="wknd" \
    -D groupId="com.adobe.aem.guides" \
    -D artifactId="aem-guides-wknd" \
    -D package="com.adobe.aem.guides.wknd" \
    -D version="0.0.1-SNAPSHOT" \
    -D aemVersion="cloud"
    note note
    NOTE
    AEM Para segmentar el destino 6.5.14+, reemplace aemVersion="cloud" por aemVersion="6.5.14".
    AEM Además, utilice siempre la última versión archetypeVersion haciendo referencia a Arquetipo de proyecto > Uso de la página de inicio del proyecto

    Encontrará una lista completa de las propiedades disponibles para configurar un proyecto aquí.

  4. El tipo de archivo Maven genera la siguiente estructura de carpetas y archivos en el sistema de archivos local:

    code language-plain 
     ~/code/
    |--- aem-guides-wknd/
        |--- all/
        |--- core/
        |--- ui.apps/
        |--- ui.apps.structure/
        |--- ui.config/
        |--- ui.content/
        |--- ui.frontend/
        |--- ui.tests /
        |--- it.tests/
        |--- dispatcher/
        |--- pom.xml
        |--- README.md
        |--- .gitignore

Implementación y compilación del proyecto build

AEM Genere e implemente el código del proyecto en una instancia local de, y luego, en un entorno de.

  1. AEM Asegúrese de que tiene una instancia de autor de la ejecución local en el puerto 4502.

  2. Desde la línea de comandos, vaya al directorio del proyecto aem-guides-wknd.

    code language-shell 
    $ cd aem-guides-wknd

  3. AEM Ejecute el siguiente comando para generar e implementar todo el proyecto en el que se va a realizar la ejecución del proyecto de forma:

    code language-shell 
    $ mvn clean install -PautoInstallSinglePackage

    La compilación tarda aproximadamente un minuto y debe finalizar con el siguiente mensaje:

    code language-none 
    ...
[INFO] ------------------------------------------------------------------------
[INFO] Reactor Summary for WKND Sites Project 0.0.1-SNAPSHOT:
[INFO]
[INFO] WKND Sites Project ................................. SUCCESS [  0.113 s]
[INFO] WKND Sites Project - Core .......................... SUCCESS [  3.136 s]
[INFO] WKND Sites Project - UI Frontend ................... SUCCESS [  4.461 s]
[INFO] WKND Sites Project - Repository Structure Package .. SUCCESS [  0.359 s]
[INFO] WKND Sites Project - UI apps ....................... SUCCESS [  1.732 s]
[INFO] WKND Sites Project - UI content .................... SUCCESS [  0.956 s]
[INFO] WKND Sites Project - UI config ..................... SUCCESS [  0.064 s]
[INFO] WKND Sites Project - All ........................... SUCCESS [  8.229 s]
[INFO] WKND Sites Project - Integration Tests ............. SUCCESS [  3.329 s]
[INFO] WKND Sites Project - Dispatcher .................... SUCCESS [  0.027 s]
[INFO] WKND Sites Project - UI Tests ...................... SUCCESS [  0.032 s]
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------
[INFO] Total time:  23.189 s
[INFO] Finished at: 2023-01-10T11:12:23-05:00
[INFO] ------------------------------------------------------------------------

    AEM El perfil de Maven autoInstallSinglePackage compila los módulos individuales del proyecto e implementa un solo paquete en la instancia de la instancia de la. AEM De forma predeterminada, este paquete se implementa en una instancia de la instancia de la instancia de la instancia de la instancia de la instancia de la instancia de la instancia de la instancia de la instancia de la instancia de la instancia de la instancia de 4502 y con las credenciales de admin:admin.

  4. AEM Vaya al Administrador de paquetes de la instancia de la aplicación local: http://localhost:4502/crx/packmgr/index.jsp. Debería ver los paquetes de aem-guides-wknd.ui.apps, aem-guides-wknd.ui.config, aem-guides-wknd.ui.content y aem-guides-wknd.all.

  5. Vaya a la consola Sitios: http://localhost:4502/sites.html/content. El sitio WKND es uno de los sitios. Incluye una estructura de sitio con una jerarquía de EE. UU. y maestros de idiomas. Esta jerarquía del sitio se basa en los valores de language_country y isSingleCountryWebsite al generar el proyecto mediante el arquetipo.

  6. Para abrir la página US > English, seleccione la página y haga clic en el botón Editar de la barra de menús:

    consola del sitio

  7. El contenido de inicio ya se ha creado y hay varios componentes disponibles para añadirlos a una página. Experimente con estos componentes para hacerse una idea de la funcionalidad. Aprenderá los conceptos básicos de un componente en el capítulo siguiente.

    Contenido de inicio inicial

    Contenido de muestra generado por el tipo de archivo

Inspect el proyecto project-structure

AEM El proyecto de la generado está formado por módulos Maven individuales, cada uno con una función diferente. Este tutorial y la mayoría de los desarrollos se centran en estos módulos:

  • core: código Java, principalmente desarrolladores back-end.

  • ui.frontend: contiene código fuente para CSS, JavaScript, Sass y TypeScript, principalmente para desarrolladores de front-end.

  • ui.apps: contiene definiciones de componentes y cuadros de diálogo, incrusta CSS compilado y JavaScript como bibliotecas de cliente.

  • ui.content: contiene contenido estructural y configuraciones como plantillas editables, esquemas de metadatos (https://experienceleague.adobe.com/content,%20/conf?lang=es).

  • AEM all: se trata de un módulo Maven vacío que combina los módulos anteriores en un único paquete que se puede implementar en un entorno de la red de la red de distribución de datos (Maven) que se encuentra en un entorno de la red de distribución de datos ().

Diagrama del proyecto Maven

AEM Consulte la Documentación del tipo de archivo del proyecto de para obtener más información sobre todos los módulos Maven.

Inclusión de componentes principales core-components

AEM AEM Los componentes principales de son un conjunto de componentes estandarizados de administración de contenido web (WCM) para los que se han de realizar tareas de administración de contenido web. Estos componentes proporcionan un conjunto de líneas de base de una funcionalidad y están diseñados, personalizados y ampliados para proyectos individuales.

El entorno de AEM as a Cloud Service AEM incluye la versión más reciente de Componentes principales de. Por lo tanto, los proyectos generados para AEM as a Cloud Service AEM no incluyen una incrustación de componentes principales de la.

AEM AEM Para los proyectos generados con la versión 6.5/6.4, el tipo de archivo incrusta automáticamente Componentes principales en el proyecto. AEM AEM Se recomienda incrustar los componentes principales en las versiones 6.5 y 6.4 de para garantizar que se implementa la versión más reciente con el proyecto. Encontrará más información sobre los componentes principales incluidos en el proyecto aquí.

Source Control Management source-control

Siempre es aconsejable utilizar algún tipo de control de código fuente para administrar el código en la aplicación. Este tutorial utiliza Git y GitHub. Existen varios archivos generados por Maven o por el IDE de su elección que el SCM debe ignorar.

Maven crea una carpeta de destino cada vez que crea e instala el paquete de código. La carpeta de destino y el contenido deben excluirse del SCM.

En, el módulo ui.apps observa que se han creado muchos archivos .content.xml. Estos archivos XML asignan los tipos de nodo y las propiedades del contenido instalado en el JCR. Estos archivos son esenciales y no se puede omitir.

AEM El tipo de archivo del proyecto de genera un archivo de muestra .gitignore que se puede utilizar como punto de partida para los archivos que se pueden omitir de forma segura. El archivo se genera en <src>/aem-guides-wknd/.gitignore.

Enhorabuena. congratulations

AEM ¡Enhorabuena, ha creado su primer proyecto de!

Siguientes pasos next-steps

Comprenda la tecnología subyacente de un componente de Adobe Experience Manager AEM () Sites mediante un ejemplo sencillo de HelloWorld con el tutorial Conceptos básicos del componente.

Comandos avanzados de Maven (bonus) advanced-maven-commands

Durante el desarrollo, es posible que esté trabajando con solo uno de los módulos y desee evitar crear todo el proyecto para ahorrar tiempo. AEM También es posible que desee implementarlo directamente en una instancia de Publish AEM de o quizás en una instancia de que no se esté ejecutando en el puerto 4502.

A continuación, vamos a revisar algunos perfiles y comandos de Maven adicionales que puede utilizar para obtener una mayor flexibilidad durante el desarrollo.

Módulo principal core-module

El módulo core contiene todo el código Java™ asociado con el proyecto. AEM La compilación del módulo core implementa un paquete OSGi para la creación de un grupo de módulos de. Para generar solo este módulo:

  1. Vaya a la carpeta core (debajo de aem-guides-wknd):

    code language-shell 
    $ cd core/

  2. Ejecute el siguiente comando:

    code language-shell 
    $ mvn clean install -PautoInstallBundle
...
[INFO] --- sling-maven-plugin:2.4.0:install (install-bundle) @ aem-guides-wknd.core ---
[INFO] Installing Bundle aem-guides-wknd.core(~/code/aem-guides-wknd/core/target/aem-guides-wknd.core-0.0.1-SNAPSHOT.jar) to http://localhost:4502/system/console via WebConsole
[INFO] Bundle installed
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------
[INFO] Total time:  8.558 s

  3. Vaya a http://localhost:4502/system/console/bundles. AEM Esta es la consola web de OSGi y contiene información sobre todos los paquetes instalados en la instancia de.

  4. Cambie la columna de ordenación Id para ver el paquete WKND instalado y activo.

    Paquete principal

  5. Puede ver la ubicación "física" del JAR en CRXDE-Lite:

    Ubicación de CRXDE de Jar

Módulos Ui.apps y Ui.content apps-content-module

El módulo ui.apps de maven contiene todo el código de procesamiento necesario para el sitio debajo de /apps. AEM Esto incluye CSS/JS que se almacena en un formato de denominado clientlibs. Esto también incluye scripts HTL para procesar el HTML dinámico. El módulo ui.apps se puede considerar como un mapa de la estructura del JCR pero en un formato que se puede almacenar en un sistema de archivos y comprometerse con el control de código fuente. El módulo ui.apps solo contiene código.

Para generar solo este módulo:

  1. Desde la línea de comandos. Vaya a la carpeta ui.apps (debajo de aem-guides-wknd):

    code language-shell 
    $ cd ../ui.apps

  2. Ejecute el siguiente comando:

    code language-shell 
    $ mvn clean install -PautoInstallPackage
...
Package installed in 70ms.
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------
[INFO] Total time:  2.987 s
[INFO] Finished at: 2023-01-10T11:35:28-05:00
[INFO] ------------------------------------------------------------------------

  3. Vaya a http://localhost:4502/crx/packmgr/index.jsp. Debería ver el paquete ui.apps como el primer paquete instalado y debería tener una marca de tiempo más reciente que cualquiera de los demás paquetes.

    Paquete Ui.apps instalado

  4. Vuelva a la línea de comandos y ejecute el siguiente comando (en la carpeta ui.apps):

    code language-shell 
    $ mvn -PautoInstallPackagePublish clean install
...
[INFO] --- content-package-maven-plugin:1.0.2:install (install-package-publish) @ aem-guides-wknd.ui.apps ---
[INFO] Installing aem-guides-wknd.ui.apps (/Users/sachinmali/Desktop/code/wknd-tutorial/aem-guides-wknd/ui.apps/target/aem-guides-wknd.ui.apps-0.0.1-SNAPSHOT.zip) to http://localhost:4503/crx/packmgr/service.jsp
[INFO] I/O exception (java.net.ConnectException) caught when processing request: Connection refused (Connection refused)
[INFO] Retrying request
[INFO] I/O exception (java.net.ConnectException) caught when processing request: Connection refused (Connection refused)
[INFO] Retrying request
[INFO] I/O exception (java.net.ConnectException) caught when processing request: Connection refused (Connection refused)
[INFO] Retrying request
[INFO] ------------------------------------------------------------------------
[INFO] BUILD FAILURE
[INFO] ------------------------------------------------------------------------
[INFO] Total time:  2.812 s
[INFO] Finished at: 2023-01-10T11:37:28-05:00
[INFO] ------------------------------------------------------------------------
[ERROR] Failed to execute goal com.day.jcr.vault:content-package-maven-plugin:1.0.2:install (install-package-publish) on project aem-guides-wknd.ui.apps: Connection refused (Connection refused) -> [Help 1]

    El perfil autoInstallPackagePublish está diseñado para implementar el paquete en un entorno Publish que se ejecute en el puerto 4503. AEM Se espera el error anterior si no se encuentra una instancia de que se ejecuta en http://localhost:4503.

  5. Finalmente, ejecute el siguiente comando para implementar el paquete ui.apps en el puerto 4504:

    code language-shell 
    $ mvn -PautoInstallPackage clean install -Daem.port=4504
...
[INFO] --- content-package-maven-plugin:1.0.2:install (install-package) @ aem-guides-wknd.ui.apps ---
[INFO] Installing aem-guides-wknd.ui.apps (/Users/dgordon/code/aem-guides-wknd/ui.apps/target/aem-guides-wknd.ui.apps-0.0.1-SNAPSHOT.zip) to http://localhost:4504/crx/packmgr/service.jsp
[INFO] I/O exception (java.net.ConnectException) caught when processing request: Connection refused (Connection refused)
[INFO] Retrying request
[INFO] I/O exception (java.net.ConnectException) caught when processing request: Connection refused (Connection refused)
[INFO] Retrying request
[INFO] I/O exception (java.net.ConnectException) caught when processing request: Connection refused (Connection refused)
[INFO] Retrying request
[INFO] ------------------------------------------------------------------------
[INFO] BUILD FAILURE
[INFO] --------------------------------------------------------------------

    AEM De nuevo, se espera que se produzca un error de compilación si no hay ninguna instancia de que se ejecute en el puerto 4504 disponible. El parámetro aem.port está definido en el archivo POM en aem-guides-wknd/pom.xml.

El módulo ui.content tiene la misma estructura que el módulo ui.apps. La única diferencia es que el módulo ui.content contiene lo que se conoce como contenido mutable. AEM El contenido Mutable hace referencia esencialmente a configuraciones que no son de código, como plantillas, directivas o estructuras de carpetas, que se almacenan en el control de código fuente pero que se pueden modificar directamente en una instancia de. Esto se analiza con más detalle en el capítulo sobre páginas y plantillas.

Los mismos comandos Maven usados para compilar el módulo ui.apps pueden usarse para compilar el módulo ui.content. No dude en repetir los pasos anteriores desde la carpeta ui.content.

Resolución de problemas

AEM Si hay algún problema al generar el proyecto usando el tipo de archivo del proyecto de la, consulte la lista de problemas conocidos y la lista de problemas abiertos.

¡Felicitaciones otra vez! congratulations-bonus

Felicitaciones, por revisar el material de la bonificación.

Siguientes pasos next-steps-bonus

Comprenda la tecnología subyacente de un componente de Adobe Experience Manager AEM () Sites mediante un ejemplo sencillo de HelloWorld con el tutorial Conceptos básicos del componente.

recommendation-more-help
b2a561c1-47c0-4182-b8c1-757a197484f9