AEM Configuración de un entorno de desarrollo de Local

Guía para configurar un desarrollo local para Adobe Experience Manager AEM,. Abarca temas importantes como la instalación local, Apache Maven, los entornos de desarrollo integrados y la depuración/solución de problemas. Desarrollo con Eclipse IDE, CRXDE Lite, Visual Studio Code e IntelliJ son objeto de debate.

Información general

La configuración de un entorno de desarrollo local es el primer paso al desarrollar para Adobe Experience Manager AEM o. Tómese el tiempo necesario para configurar un entorno de desarrollo de calidad para aumentar la productividad y escribir código mejor y más rápido. AEM Podemos dividir un entorno de desarrollo local en cuatro áreas:

AEM Instalar instancias locales de la

AEM Cuando nos referimos a una instancia local de, estamos hablando de una copia de Adobe Experience Manager que se ejecuta en el equipo personal de un desarrollador. Todo AEM AEM El desarrollo de la aplicación debería comenzar escribiendo y ejecutando código en una instancia de local.

AEM Si es nuevo en la instalación de, puede instalar dos modos de ejecución básicos: Autor y Publish. El Autor modo de ejecución es el entorno que utilizan los especialistas en marketing digital para crear y administrar contenido. Al desarrollar la mayor parte del tiempo, implementa un código en una instancia de autor. Esto le permite crear páginas y añadir y configurar componentes. AEM Sites es un CMS de creación WYSIWYG y, por lo tanto, la mayoría de CSS y JavaScript se pueden probar con una instancia de creación.

También lo es crítico prueba de código con un local Publish ejemplo. El Publish AEM La instancia de es el entorno en el que interactúan los visitantes del sitio web. Mientras que el Publish La instancia de es la misma pila tecnológica que la Autor Por ejemplo, hay algunas distinciones importantes con configuraciones y permisos. El código debe probarse con un local Publish antes de promocionarse a entornos de nivel superior.

Etapas

~/aem-sdk
    /author
    /publish

~/aem-sdk
    /author
        + aem-author-p4502.jar
        + license.properties
    /publish
        + aem-publish-p4503.jar
        + license.properties

Haga doble clic en aem-publish-p4503.jar para instalar el Publish ejemplo. Esto inicia la instancia de publicación, que se ejecuta en el puerto 4503 en el equipo local.

Uso de la línea de comandos

AEM Una alternativa a hacer doble clic en el archivo JAR es iniciar la aplicación desde la línea de comandos o crear una secuencia de comandos (.bat o .sh) según el tipo de sistema operativo local. A continuación se muestra un ejemplo del comando de ejemplo:

$ java -Xmx2048M -Xdebug -Xnoagent -Djava.compiler=NONE -Xrunjdwp:transport=dt_socket,server=y,suspend=n,address=30303 -jar aem-author-p4502.jar -gui -r"author,localdev"

Aquí, el -X son opciones de JVM y -D son propiedades de marco de trabajo adicionales. Para obtener más información, consulte AEM Implementación y mantenimiento de una instancia de y Más opciones disponibles en el archivo de inicio rápido.

Instalar Apache Maven

Apache Maven es una herramienta para administrar el procedimiento de generación e implementación para proyectos basados en Java. AEM es una plataforma basada en Java y Maven AEM es la forma estándar de administrar el código de un proyecto de. Cuando decimos AEM Proyecto de Maven o solo su AEM Proyecto de, nos referimos a un proyecto Maven que incluye todas las personalizado código del sitio.

AEM Todos los proyectos de deben crearse a partir de la versión más reciente de AEM Project Archetype: https://github.com/adobe/aem-project-archetype. El AEM Project Archetype AEM proporciona un bootstrap de un proyecto de con algunos ejemplos de código y contenido. El AEM Project Archetype también incluye AEM WCM Core Components configurado para utilizarse en el proyecto.

Etapas

$ mvn --version
Apache Maven 3.3.9
Maven home: /Library/apache-maven-3.3.9
Java version: 1.8.0_111, vendor: Oracle Corporation
Java home: /Library/Java/JavaVirtualMachines/jdk1.8.0_111.jdk/Contents/Home/jre
Default locale: en_US, platform encoding: UTF-8

Configurar un entorno de desarrollo integrado

Un entorno de desarrollo integrado o IDE es una aplicación que combina un editor de texto, compatibilidad con sintaxis y herramientas de generación. Dependiendo del tipo de desarrollo que esté realizando, es posible que un IDE sea preferible sobre otro. Independientemente del IDE, es importante poder realizar actualizaciones periódicamente push AEM codifique en una instancia local de para probarla. Es importante que a veces extraer AEM AEM Configuraciones de una instancia de local en el proyecto de para persistir en un sistema de administración de control de código fuente como Git.

AEM AEM A continuación, se muestran algunos de los IDE más populares que se utilizan con el desarrollo de recursos con vídeos correspondientes que muestran la integración con una instancia de local.

$ mvn clean install -PautoInstallSinglePackage -Pclassic

Cuando utilice un IDE, asegúrese de comprobar lo siguiente classic en la pestaña Perfil de Maven.

Perfil de IntelliJ Maven

Eclipse IDE

El Eclipse IDE es uno de los IDE más populares para el desarrollo de Java™, en gran parte porque es de código abierto y gratuito! El Adobe proporciona un complemento, AEM Developer Tools, para Eclipse AEM para permitir un desarrollo más sencillo con una buena interfaz gráfica de usuario para sincronizar el código con una instancia local de la. El Eclipse AEM Se recomienda IDE para desarrolladores nuevos en el mundo de la computación, debido en gran parte a la compatibilidad con la interfaz gráfica de usuario que ofrece el usuario. AEM Developer Tools.

Instalación y configuración

IntelliJ IDEA

El IntelliJ IDEA es un potente IDE para el desarrollo profesional de Java™. IntelliJ IDEA viene en dos sabores, un gratuito Community edición y anuncio (de pago) Ultimate versión. La libertad Community versión de IntellIJ IDEA AEM es suficiente para un desarrollo más, sin embargo, la Ultimate amplía su conjunto de capacidades.

Installation and Setup

Visual Studio Code

Código de Visual Studio se ha convertido rápidamente en una herramienta favorita para desarrolladores front-end con compatibilidad mejorada con JavaScript, Intellisensey compatibilidad con la depuración del explorador. Visual Studio Code es de código abierto, gratuito, con muchas extensiones potentes. Visual Studio Code AEM se puede configurar para integrarse con la ayuda de una herramienta de Adobe de, con la que se puede crear una interfaz de usuario de. repo. AEM También hay varias extensiones compatibles con la comunidad que se pueden instalar para integrarse con el servicio de integración de.

Visual Studio Code AEM es una excelente opción para desarrolladores de front-end que principalmente escriben código CSS/LESS y JavaScript para crear bibliotecas de cliente de la aplicación de forma. AEM Esta herramienta puede no ser la mejor opción para los nuevos desarrolladores de, ya que las definiciones de nodo (cuadros de diálogo, componentes) deben editarse en XML sin procesar. Hay varias extensiones Java™ disponibles para Visual Studio Code, sin embargo, si se realiza principalmente el desarrollo de Java™ Eclipse IDE o IntelliJ puede ser preferible.

Vínculos importantes

CRXDE Lite

CRXDE Lite AEM es una vista basada en explorador del repositorio de. CRXDE Lite AEM está incrustado en el entorno de trabajo y permite a un desarrollador realizar tareas de desarrollo estándar como editar archivos, definir componentes, cuadros de diálogo y plantillas. CRXDE Lite es no pretende ser un entorno de desarrollo completo, pero es eficaz como herramienta de depuración. CRXDE Lite es útil cuando se amplía o simplemente se comprende el código de producto fuera de la base de código. CRXDE Lite proporciona una vista completa del repositorio y una forma de probar y administrar permisos de forma eficaz.

CRXDE Lite debe utilizarse con otros IDE para probar y depurar código, pero nunca como herramienta de desarrollo principal. Tiene compatibilidad con sintaxis limitada, no tiene capacidades de autocompletar e integración limitada con sistemas de administración de control de código fuente.

Solución de problemas

¡Ayuda! ¡Mi código no funciona! Al igual que con todo el desarrollo, hay momentos (probablemente muchos) en que el código no funciona como se espera. AEM Es una plataforma potente, pero con gran poder… viene una gran complejidad. A continuación se presentan algunos puntos de partida de alto nivel para la resolución de problemas y el seguimiento de problemas (pero lejos de una lista exhaustiva de cosas que pueden salir mal):

Verificar implementación de código

AEM Un buen primer paso, cuando se produce un problema, es verificar que el código se haya implementado e instalado correctamente en el servidor de correo de OSGiOSs de AEMs de AEMs.

Comprobación de los registros

AEM es una plataforma de chat y registra información útil en el error.log. El error.log AEM se puede encontrar donde se ha instalado la: < aem-installation-folder>/crx-quickstart/logs/error.log.

Una técnica útil para rastrear problemas es agregar instrucciones de registro en el código Java™:

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
...

public class MyClass {
    private final Logger log = LoggerFactory.getLogger(getClass());

    ...

    String myVariable = "My Variable";

    log.debug("Debug statement of myVariable {}", myVariable);

    log.info("Info statement of myVariable {}", myVariable);
}

De forma predeterminada, la variable error.log está configurado para registrar INFO extractos. Si desea cambiar el nivel de registro, puede hacerlo accediendo a Compatibilidad con registros: http://localhost:4502/system/console/slinglog. También puede encontrar que la variable error.log es demasiado hablador. Puede usar el complemento Compatibilidad con registros para configurar sentencias de registro solo para un paquete Java™ especificado. AEM Se trata de una práctica recomendada para los proyectos con el fin de separar fácilmente los problemas de código personalizado de los problemas de la plataforma de la aplicación de código personalizado de los problemas de la plataforma de la de OOTB.

El paquete está en estado Instalado bundle-active

Todos los paquetes (excepto los fragmentos) deben estar en un Activo estado. Si ve su paquete de código en un Instalado estado, entonces hay un problema que debe resolverse. La mayoría de las veces se trata de un problema de dependencia:

En la captura de pantalla anterior, la variable WKND Core bundle es un Instalado estado. Esto se debe a que el paquete espera una versión diferente de com.adobe.cq.wcm.core.components.models AEM de lo que está disponible en la instancia de.

Una herramienta útil que se puede utilizar es la Buscador de dependencias: http://localhost:4502/system/console/depfinder. AEM Añada el nombre del paquete Java™ para inspeccionar qué versión está disponible en la instancia de:

AEM Siguiendo con el ejemplo anterior, podemos ver que la versión instalada en la instancia de la instancia de la instancia de la aplicación es la siguiente: 12,2 vs 12,6 que el paquete estaba esperando. A partir de ahí, puede trabajar hacia atrás y ver si la variable Maven AEM dependencias en la coincidencia de la Maven AEM dependencias en el proyecto de la. En, en el ejemplo anterior Core Components Versión 2.2.0 AEM se instala en la instancia de la instancia de la, pero el paquete de código se creó con una dependencia de Versión 2.2.2, de ahí el motivo del problema de dependencia.

Verificar el registro de modelos Sling osgi-component-sling-models

AEM Los componentes de la deben estar respaldados por un Sling Model para encapsular cualquier lógica empresarial y asegurarse de que el script de procesamiento HTL permanece limpio. Si tiene problemas en los que no se encuentra el modelo Sling, puede resultar útil comprobar la Sling Models desde la consola: http://localhost:4502/system/console/status-slingmodels. Esto le indica si el modelo Sling se ha registrado y a qué tipo de recurso (la ruta del componente) está vinculado.

Muestra el registro de un Sling Model, BylineImpl que está vinculado a un tipo de recurso de componente de wknd/components/content/byline.

Problemas de CSS o JavaScript

Para la mayoría de los problemas de CSS y JavaScript, el uso de las herramientas de desarrollo del explorador es la forma más eficaz de solucionar. AEM Para reducir el problema al desarrollar con una instancia de autor de, resulta útil ver la página "tal y como aparece publicado".

Abra el Propiedades de página y haga clic en Ver como aparece publicado. AEM Esto abre la página sin el Editor de y con un parámetro de consulta establecido en wcmmode=disabled. AEM Esto deshabilita de forma efectiva la IU de creación de la y facilita la solución de problemas y la depuración de problemas del front-end.

Otro problema que se suele encontrar al desarrollar código front-end es que se está cargando CSS/JS antiguo o obsoleto. Como primer paso, asegúrese de que se ha borrado el historial del explorador y, si es necesario, inicie una sesión nueva o unos exploradores de incógnito.

Depuración de bibliotecas de cliente

Con los diferentes métodos de categorías e incrustaciones para incluir varias bibliotecas de cliente, puede resultar engorroso solucionar problemas. AEM La expone varias herramientas para ayudarle con esto. Una de las herramientas más importantes es Reconstruir bibliotecas de cliente AEM que fuerza a los usuarios a volver a compilar cualquier archivo LESS y generar el CSS.