Introducción: Tutorial para desarrolladores
- Temas:
- Edge Delivery Services
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 añadir nuevos bloques.
Requisitos previos:
- Tiene una cuenta de GitHub y comprende los conceptos básicos de Git.
- Tiene una cuenta de Google.
- Comprende los conceptos básicos de HTML, CSS y JavaScript.
- Ha instalado Node/
npmpara el desarrollo local.
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
La forma más rápida y sencilla de empezar a seguir las prácticas recomendadas de AEM es crear su repositorio con el repositorio de GitHub de plantillas.
https://github.com/adobe/aem-boilerplate
Haga clic en el botón Use this template, seleccione Create a new repository y seleccione la organización de usuarios propietaria del repositorio
Se recomienda configurar el repositorio en public.
El único paso que queda en GitHub es instalar la aplicación GitHub de sincronización de código de AEM en el repositorio mediante este vínculo: https://github.com/apps/aem-code-sync/installations/new
En la configuración de Repository access de la aplicación AEM Code Sync, asegúrese de seleccionar Only select Repositories (no All Repositories). Luego seleccione el repositorio recién creado y haga clic en Save.
Nota: Si usa Github Enterprise con filtrado de IP, puede agregar la siguiente IP a la lista de permitidos: 3.227.118.73
¡Enhorabuena! Tiene un nuevo sitio web en ejecución en https://<branch>--<repo>--<owner>.aem.page/ En el ejemplo anterior, se encuentra https://main–mysite–aemtutorial.aem.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. Ver esta carpeta para ver contenido 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 del contenido de ejemplo y familiarizarse 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 se parecen más 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 a través de Download All o descargar archivos individuales. No obstante, recuerde volver a convertir los .docx archivos descargados en Google Docs nativo al cargarlos en la carpeta de Google Drive.
Ahora que tiene el contenido, debe conectarlo a su repositorio de GitHub. Para ello, cambie la referencia de 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á 404 not found errores, ya que 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 más de 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 a las fases preview o live , lo que significa que el sitio web sirve 404 segundos.
Para obtener una vista previa del contenido, un autor debe instalar la extensión de Sidekick Chrome. Busque la extensión Chrome en Chrome Web Store.
Después de añadir la extensión a Chrome, no olvide fijarla, para 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 explorador 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 AEM Sidekick haciendo clic en la extensión anclada. Aparecerá una nueva barra de herramientas. Al hacer clic en los botones preview o publish, se almacenará en déclencheur la operación correspondiente.
Abra el documento index y realice algunos cambios. Active Sidekick haciendo clic en la extensión anclada y, a continuación, haga clic en el botón Preview que almacenará en déclencheur la operación de vista previa y abrirá una nueva pestaña con la representación de vista previa del contenido.
Empiece a desarrollar el estilo y la funcionalidad
Para empezar con el desarrollo, es más fácil instalar la Interfaz de línea de comandos (CLI) de AEM 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 la carpeta blocks, donde se encuentra la mayor parte del estilo y el código de un proyecto. Simplemente realice un cambio en un(a) .css o .js y debería ver los cambios en su explorador inmediatamente.
Una vez que esté listo para insertar los cambios, simplemente use Git para agregar, confirmar e insertar y el código en los sitios de vista previa (https://<branch>--<repo>--<owner>.aem.page/) y producción (https://<branch>--<repo>--<owner>.aem.live/).
¡Eso es todo, lo lograste! Enhorabuena, su primer sitio está funcionando. Si necesitas ayuda en el tutorial, únete a nuestro canal de Discord o ponte en contacto con nosotros.