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. Se describe el desarrollo con Eclipse IDE, CRXDE Lite, Visual Studio Code e IntelliJ.

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. AEM AEM Todo el desarrollo de la debe comenzar escribiendo y ejecutando código en una instancia de la instancia de la instancia local de la aplicación de la aplicación de código de la aplicación de código de la aplicación de código de la aplicación de código de.

AEM Si eres nuevo en el modo de ejecución, hay dos modos de ejecución básicos que se pueden instalar: Author y Publish. El autor modo de ejecución es el entorno que los especialistas en marketing digital utilizan 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 es crítico código de prueba contra una instancia local de Publish. La instancia de Publish AEM es el entorno de con el que interactúan los visitantes del sitio web. Aunque la instancia de Publish es la misma pila de tecnología que la instancia de Autor, hay algunas distinciones importantes con configuraciones y permisos. El código debe probarse en una instancia local de 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 el archivo aem-publish-p4503.jar para instalar la instancia de Publish. Esto inicia la instancia de Publish, que se ejecuta en el puerto 4503 del 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 un script (.bat o .sh) según el sabor del 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"

AEM Aquí, -X son opciones de JVM y -D son propiedades de marco de trabajo adicionales. Para obtener más información, consulte 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 de proyectos basados en Java. AEM AEM es una plataforma basada en Java y Maven es la forma estándar de administrar el código de un proyecto de. AEM AEM Cuando decimos Proyecto Maven o solo tu Proyecto Maven, nos referimos a un proyecto Maven que incluye todo el código personalizado para tu sitio.

AEM Todos los proyectos deben compilarse a partir de la versión más reciente de AEM Project Archetype: https://github.com/adobe/aem-project-archetype. AEM El AEM Project Archetype proporciona un bootstrap de un proyecto de con código y contenido de ejemplo. El AEM Project Archetype también incluye AEM WCM Core Components configurado para usarse 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. AEM Independientemente del IDE, es importante poder insertar código periódicamente en una instancia local de para probarlo. AEM AEM Es importante extraer configuraciones ocasionalmente de una instancia de local a su proyecto de para poder conservarlas 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 marcar classic en la pestaña de su perfil de Maven.

Perfil Maven de IntelliJ

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 AEM proporciona un complemento, AEM Developer Tools, para Eclipse con el fin de facilitar el desarrollo con una interfaz gráfica de usuario adecuada para sincronizar el código con una instancia local de la instancia de la. AEM El IDE Eclipse se recomienda para desarrolladores nuevos en la práctica de la interfaz de usuario debido en gran parte a la compatibilidad con la interfaz de usuario de AEM Developer Tools.

Instalación y configuración

IntelliJ IDEA

IntelliJ IDEA es un IDE potente para el desarrollo profesional de Java™. IntelliJ IDEA viene en dos versiones, una edición Community gratis y una versión Ultimate comercial (de pago). AEM La versión gratuita Community de IntellIJ IDEA es suficiente para un desarrollo más amplio, pero Ultimate amplía su conjunto de capacidades.

Installation and Setup

Visual Studio Code

Visual Studio Code se ha convertido rápidamente en una herramienta favorita para desarrolladores de front-end con compatibilidad mejorada con JavaScript, Intellisense y compatibilidad con depuración de exploradores. Visual Studio Code es de código abierto, gratuito, con muchas extensiones potentes. AEM Visual Studio Code se puede configurar para que se integre con los recursos de la herramienta de Adobe de trabajo, repo.AEM También hay varias extensiones admitidas por la comunidad que se pueden instalar para integrarse con el servicio de integración de.

Visual Studio Code es una buena opción para los desarrolladores de front-end que principalmente escriben código CSS/LESS y JavaScript AEM para crear bibliotecas de cliente de. 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 de Java™ disponibles para Visual Studio Code; sin embargo, si se usan principalmente las extensiones Java™, se puede preferir el desarrollo Eclipse IDE o IntelliJ.

Vínculos importantes

CRXDE Lite

CRXDE Lite AEM es una vista basada en explorador del repositorio de la. AEM CRXDE Lite está incrustado en el y permite a un desarrollador realizar tareas de desarrollo estándar como editar archivos, definir componentes, cuadros de diálogo y plantillas. CRXDE Lite no pretende ser un entorno de desarrollo completo, pero es una herramienta de depuración eficaz. CRXDE Lite resulta útil para ampliar o simplemente comprender 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 usarse 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.

Resolució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 conversación y registra información útil en error.log. AEM El archivo error.log se encuentra donde se ha instalado el archivo de registro de errores: < 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 manera predeterminada, error.log está configurado para registrar INFO instrucciones. Si desea cambiar el nivel de registro, vaya a Compatibilidad con registros: http://localhost:4502/system/console/slinglog. También es posible que descubra que error.log es demasiado parlanchín. Puede usar la compatibilidad con registros para configurar las instrucciones de registro 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.

AEM

El paquete está en estado Instalado bundle-active

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

AEM

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

Una herramienta útil que se puede usar es 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 es 12.2 frente a 12.6 que el paquete esperaba. AEM AEM A partir de ahí, puede trabajar hacia atrás y ver si las dependencias Maven en coinciden con las dependencias Maven en el proyecto de. AEM En, el ejemplo anterior Core Components v2.2.0 está instalado en la instancia de la instancia de la, pero el paquete de código se creó con una dependencia en v2.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 garantizar que el script de procesamiento HTL permanezca limpio. Si tiene problemas en los que no se encuentra el modelo Sling, puede resultar útil comprobar 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(a) Sling Model, BylineImpl que está enlazado(a) 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 menú Propiedades de la página y haga clic en Ver tal y como se publicó. AEM Esto abre la página sin el Editor de consultas 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. AEM Una de las herramientas más importantes es Reconstruir bibliotecas de cliente, lo que obliga a los usuarios a volver a compilar archivos LESS y generar el archivo CSS.