Introducción: Tutorial para desarrolladores

Este tutorial le ayudará a ponerse en marcha con un nuevo proyecto de Adobe Experience Manager AEM (). En diez a veinte minutos, habrá creado su propio sitio y podrá crear, previsualizar y publicar su propio contenido, estilo y agregar nuevos bloques.

Requisitos previos:

Este tutorial utiliza macOS, Chrome y Visual Studio Code como entorno de desarrollo, y las capturas de pantalla y las instrucciones reflejan esa configuración. Puede utilizar un sistema operativo, un explorador y un editor de código diferentes, pero la interfaz de usuario que ve y los pasos que debe seguir pueden variar en consecuencia.

Introducción a la plantilla del repositorio de plantillas

AEM La forma más rápida y sencilla de empezar a aplicar las prácticas recomendadas siguientes es crear su repositorio con el repositorio de GitHub de plantillas.

https://github.com/adobe/aem-boilerplate

Simplemente haga clic en Use this template y seleccione Create a new repositoryy seleccione dónde desea crear este repositorio.

Se recomienda configurar el repositorio en public.

El único paso que queda en GitHub es instalar el AEM Aplicación GitHub de sincronización de código en el repositorio mediante este vínculo: https://github.com/apps/aem-code-sync/installations/new

En el Repository access AEM Configuración de la aplicación de sincronización de código de, asegúrese de seleccionar Only select Repositories (no All Repositories). Seleccione el repositorio recién creado y haga clic en Save.

Nota: Si utiliza Github Enterprise con filtrado de IP, puede agregar la siguiente IP a la lista de permitidos: 3.227.118.73

Felicitaciones. Tiene un nuevo sitio web en ejecución https://<branch>--<repo>--<owner>.hlx.page/ En el ejemplo anterior, es https://main--my-website--lighthouse100.hlx.page/

Vincular su propio origen de contenido con Google Drive

En la ramificación del repositorio de GitHub de plantillas, el sitio señala a un origen de contenido existente en Google Drive. Consulte esta carpeta para algunos contenidos de ejemplo.

Este contenido es de solo lectura, pero se puede copiar en la carpeta de Google Drive para servir como punto de partida.

Para crear su propio contenido, cree una carpeta en su propia unidad de Google y compártala con el usuario de Adobe Experience Manager (helix@adobe.com).

Una buena manera de empezar a crear su propio contenido es copiar index, nav y footer en el contenido de ejemplo y familiarícese con la estructura de contenido. nav y footer no cambian con frecuencia en un proyecto y tienen una estructura especial. La mayoría de los archivos de un proyecto son más similares a index.

Abra los archivos y copie/pegue todo el contenido en los archivos correspondientes de su propia unidad de Google. También puede descargar los archivos mediante Download All o descargar archivos individuales. Sin embargo, recuerde convertir el archivo descargado .docx Archivos de nuevo en Google Docs nativos, cuando los cargue en su carpeta en Google Drive.

Ahora que tiene el contenido, debe conectarlo a su repositorio de GitHub. Para ello, cambie la referencia en fstab.yaml en su repositorio de GitHub a la carpeta que acaba de compartir.
Copie o pegue la dirección URL de la carpeta desde la unidad de Google en fstab.yaml.

Tenga en cuenta que después de realizar ese cambio, verá lo siguiente 404 not found errores porque el contenido aún no se ha previsualizado. Consulte la siguiente sección para ver cómo empezar a crear y previsualizar el contenido. Si ha copiado index, nav y footer los tres son documentos independientes con sus propios ciclos de vista previa y publicación, por lo que debe asegurarse de previsualizar (y publicar) todos ellos si es necesario.

Confirme los cambios y habrá conectado su propio origen de contenido al sitio web.

Previsualización y publicación del contenido

Después de completar el último paso, el nuevo origen de contenido no está vacío, pero no se ha promocionado ningún contenido al preview o live , lo que significa que su sitio web sirve 404.

Para obtener una vista previa del contenido, un autor debe instalar la extensión de Sidekick Chrome. Busque el Extensión de Chrome aquí.

Después de añadir la extensión a Chrome, no olvide fijarla, esto facilitará su búsqueda.

Para configurar la extensión de Chrome, vaya a la carpeta previamente compartida de Google Drive, haga clic en el icono de extensión en la barra de herramientas del navegador y seleccione Add this project.

Tan pronto como se instale la extensión y se añada el proyecto, estará listo para obtener una vista previa y publicar el contenido de Google Drive.

Seleccione los tres documentos y active el AEM Sidekick haciendo clic en la extensión anclada. Aparecerá una nueva barra de herramientas. Haciendo clic en preview o publish Los botones almacenarán en déclencheur la operación correspondiente.

Abra el index doc y realice algunos cambios. Active el Sidekick haciendo clic en la extensión anclada y, a continuación, haga clic en Preview que almacena en déclencheur la operación de previsualización y abre una nueva pestaña con la representación de previsualización del contenido.

Empiece a desarrollar el estilo y la funcionalidad

AEM Para empezar con el desarrollo, es más fácil instalar la Interfaz de línea de comandos (CLI) de la y clonar el repositorio localmente mediante el uso de lo siguiente.

npm install -g @adobe/aem-cli
git clone https://github.com/<owner>/<repo>

A partir de ahí, cambie a la carpeta del proyecto e inicie su entorno de desarrollo local con lo siguiente.

cd <repo>
aem up

Se abre http://localhost:3000/ y está listo para realizar cambios.
Un buen punto de partida es el blocks carpeta, que es donde se aloja la mayor parte del estilo y el código de un proyecto. Simplemente realice un cambio en una .css o .js y debería ver los cambios en su navegador inmediatamente.

Una vez que esté listo para insertar los cambios, simplemente utilice Git para agregar, confirmar, insertar y actualizar el código en la vista previa (https://<branch>--<repo>--<owner>.hlx.page/) y producción (https://<branch>--<repo>--<owner>.hlx.live/) sitios.

¡Eso es todo, lo lograste! Enhorabuena, su primer sitio está funcionando. Si necesita ayuda en el tutorial, únete a nuestro canal de Discord o ponte en contacto con nosotros.