AEM Configuración rápida sin encabezado para AEM as a Cloud Service

Vaya a https://my.cloudmanager.adobe.com

Seleccione el programa de Cloud Manager que contiene el entorno de AEM as a Cloud Service que se utilizará para esta configuración rápida

Cree un repositorio Git para el proyecto del sitio WKND

1. Seleccione Repositorios en la barra de navegación superior
2. Seleccione Agregar repositorio en la barra de acciones superior
3. Asigne un nombre al nuevo repositorio Git: aem-headless-quick-setup-wknd
   • Los nombres de los repositorios de Git deben ser únicos para cada organización de Adobe,
4. Seleccione Guardar y espere a que se inicialice el repositorio Git

Desde la línea de comandos, clone el código fuente del proyecto WKND de muestra desde GitHub

$ mkdir -p ~/Code
$ cd ~/Code
$ git clone git@github.com:adobe/aem-guides-wknd.git

Añadir el repositorio Git de Cloud Manager como remoto

1. Seleccione Repositorios en la barra de navegación superior

2. Seleccione Acceder a la info del repositorio en la barra de acciones superior

3. Se encontró el comando Execute en Agregue un remoto a su repositorio Git desde la línea de comandos

   code language-shell
   $ cd aem-guides-wknd $ git remote add adobe https://git.cloudmanager.adobe.com/<YOUR ADOBE ORGANIZATION>/aem-headless-quick-setup-wknd/

Inserte el código fuente del proyecto de ejemplo desde el repositorio Git local al repositorio Git de Cloud Manager

$ git push adobe main:main

Cuando se le soliciten credenciales, proporcione Nombre de usuario y Contraseña del modal Información del repositorio de Cloud Manager.

Adjunte una canalización de implementación que no sea de producción al nuevo repositorio Git

1. Seleccione Canalizaciones en la navegación superior

2. Seleccione Agregar canalización en la barra de acciones superior

3. En la ficha Configuración

   1. Seleccionar la opción Canalización de implementación
   2. Establecer nombre de canalización que no sea de producción en Dev Deployment pipeline
   3. Seleccione Déclencheur de implementación > En cambios de Git
   4. Seleccione Comportamiento de errores de métricas importantes > Continuar inmediatamente
   5. Seleccionar Continuar

4. En la ficha Código Source

   1. Seleccione la opción Código de pila completa
   2. Seleccione el entorno de desarrollo de AEM as a Cloud Service del cuadro de diálogo Entornos de implementación aptos
   3. Seleccione aem-headless-quick-setup-wknd en el cuadro de selección Repositorio
   4. Seleccione main del cuadro de selección Rama de Git
   5. Seleccionar Guardar

Ejecutar la canalización de implementación de desarrolladores

1. Seleccione Información general en la barra de navegación superior
2. Busque la canalización de implementación de desarrolladores recién creada en la sección Canalizaciones
3. Seleccione … a la derecha de la entrada de la canalización
4. Seleccione Ejecutar y confirme en el modal
5. Seleccione … a la derecha de la canalización en ejecución
6. Seleccionar Ver detalles

Desde los detalles de ejecución de la canalización, monitorice el progreso hasta que se complete correctamente. La ejecución de la canalización debe tardar entre 30 y 40 minutos.

Desde la línea de comandos, clone el código fuente de la aplicación React desde GitHub.

$ cd ~/Code
$ git clone git@github.com:adobe/aem-guides-wknd-graphql.git

Abra la carpeta ~/Code/aem-guides-wknd-graphql/react-app en su IDE.

En el IDE, abra el archivo .env.development.

Elija el URI de host del servicio AEM as a Cloud Service Publish desde la propiedad REACT_APP_HOST_URI.

REACT_APP_HOST_URI=https://publish-pXXXX-eYYYY.adobeaemcloud.com
...

Para encontrar el URI de host del servicio AEM as a Cloud Service Publish:

1. En Cloud Manager, seleccione Entornos en la barra de navegación superior
2. Seleccione el entorno Development
3. Busque la tabla Servicio de Publish AEM (y Dispatcher) vínculo Segmentos de entorno
4. Copie la dirección del vínculo y utilícela como URI del servicio AEM as a Cloud Service Publish

En el IDE, guarde los cambios en .env.development

Desde la línea de comandos, ejecute la aplicación React

$ cd ~/Code/aem-guides-wknd-graphql/react-app
$ npm install
$ npm start

La aplicación React, que se ejecuta localmente, comienza en http://localhost:3000 y muestra un listado de aventuras, que provienen de AEM as a Cloud Service AEM usando API de GraphQL de sin encabezado.

Iniciar sesión en el servicio de AEM as a Cloud Service Author

Vaya a Assets > Archivos > WKND Compartido > Inglés > Aventuras

Abrir la carpeta Ciclismo en el sur de Utah

Seleccione el fragmento de contenido Ciclismo en el sur de Utah y seleccione Editar en la barra de acciones superior

Actualice algunos de los campos del fragmento de contenido, por ejemplo:

• Título: Cycling Utah's National Parks
• Duración del viaje: 6 Days
• Dificultad: Intermediate
• Precio: 3500
• Imagen principal: /content/dam/wknd-shared/en/activities/cycling/mountain-biking.jpg

Seleccione Guardar en la barra de acciones superior

Seleccione Quick Publish de la barra de acciones superior …

Actualice la aplicación React que se ejecuta en http://localhost:3000.

En la aplicación React, seleccione la aventura de ciclismo ahora actualizada y verifique los cambios de contenido realizados en el fragmento de contenido.

AEM Con el mismo enfoque, en el servicio de autor de:

1. Cancele la publicación de un fragmento de contenido de aventura existente y compruebe que se ha eliminado de la experiencia de la aplicación React
2. Cree y publique un nuevo fragmento de contenido de aventura y verifique que aparece en la experiencia de la aplicación React