Introducción a AEM Sites: Tutorial de WKND

Bienvenido a un tutorial de varias partes diseñado para desarrolladores nuevos en Adobe Experience Manager (AEM). Este tutorial explora la implementación de un sitio AEM para un estilo de vida ficticio de la marca WKND. El tutorial trata temas fundamentales como la configuración del proyecto, los componentes principales, las plantillas editables, las bibliotecas del lado del cliente y el desarrollo de componentes con Adobe Experience Manager Sites.

Información general

El objetivo de este tutorial en varias partes es enseñar a los desarrolladores cómo implementar un sitio web con los estándares y tecnologías más recientes en Adobe Experience Manager (AEM). Después de completar este tutorial, un desarrollador debe comprender los fundamentos básicos de la plataforma y conocer los patrones de diseño comunes en AEM.

El tutorial está diseñado para funcionar con AEM como Cloud Service y es compatible con AEM 6.5+ y AEM 6.4.2+. El sitio se implementa mediante:

Calcule entre 1 y 2 horas para ver cada parte del tutorial.

Acerca del tutorial

WKND es una revista y blog ficticio en línea que se centra en la vida nocturna, actividades y eventos en varias ciudades internacionales.

Adobe XD UI Kit

Para hacer que este tutorial se acerque más a un escenario real de los talentosos diseñadores UX de un Adobe han creado las maquetas para el sitio con Adobe XD. En el curso del tutorial se implementan varias partes de los diseños en un sitio de AEM totalmente creativo. Agradecimiento especial a Lorenzo Buosi y Kilian Amendola que crearon el hermoso diseño para el sitio WKND.

Descargue los kits de IU de XD:

El nombre WKND es adecuado porque esperamos que un desarrollador tome la mejor parte de un fin de semana para completar el tutorial.

Github

Todo el código del proyecto se puede encontrar en Github en la repo de la Guía de AEM:

GitHub: Proyecto de sitios WKND

Además, cada parte del tutorial tiene su propia rama en GitHub. Un usuario puede comenzar el tutorial en cualquier momento simplemente desprotegiendo la rama que corresponde a la parte anterior.

NOTA

Si estaba trabajando con la versión anterior de este tutorial, aún puede encontrar los paquetes de soluciones y código en GitHub.

Entorno de desarrollo local

Se necesita un entorno de desarrollo local para completar este tutorial. Las capturas de pantalla y el vídeo se capturan utilizando el AEM como SDK de Cloud Service que se ejecuta en un entorno de Mac OS. Los comandos y el código deben ser independientes del sistema operativo local, a menos que se indique lo contrario.

¿Es novato en el uso de AEM as a Cloud Service? Consulte la siguiente guía para configurar un entorno de desarrollo local con el SDK de AEM as a Cloud Service.

¿Es nuevo en AEM 6.5? Consulte la siguiente guía para configurar un entorno de desarrollo local.

Software necesario

Lo siguiente debe instalarse de manera local:

Entorno de Desarrollo Integrado (IDE)

Este tutorial utiliza Eclipse con el AEM Developer Tool Plugin como IDE, pero se puede utilizar cualquier IDE que admita proyectos Java y Maven. La dependencia de las características específicas de IDE en este tutorial es mínima.

Para ver los pasos detallados para usar Eclipse u otros IDE como Código de Visual Studio o IntelliJ, consulte la siguiente guía.

Sitio de referencia

Una versión terminada del sitio WKND también está disponible como referencia: https://wknd.site/

El tutorial cubre las principales habilidades de desarrollo necesarias para un desarrollador AEM, pero no generará todo el sitio de extremo a extremo. El sitio de referencia terminado es otro recurso bueno para explorar y ver más AEM de las funciones integradas.

Para probar el código más reciente antes de pasar al tutorial, descargue e instale la última versión de GitHub.

Equipado con Adobe Stock

Muchas de las imágenes del sitio web de referencia de WKND son de Adobe Stock y son Material de terceros, tal como se define en los términos adicionales de Demo Asset en https://www.adobe.com/legal/terms.html. Si desea utilizar una imagen de Adobe Stock para otros fines además de ver este sitio web de demostración, como publicarla en un sitio web o en materiales de marketing, puede adquirir una licencia en Adobe Stock.

Con Adobe Stock, usted tiene acceso a más de 140 millones de imágenes de alta calidad y sin derechos de autor, incluyendo fotos, gráficos, vídeos y plantillas para dar un salto a sus proyectos creativos.

Próximos pasos

¡¿Qué estás esperando?! Inicio el tutorial navegando al capítulo Configuración del proyecto y aprenda a generar un nuevo proyecto de Adobe Experience Manager usando el arquetipo del proyecto AEM.

En esta página