Configuración rápida AEM sin encabezado mediante el SDK local

La configuración rápida AEM sin encabezado le permite trabajar con AEM sin encabezado mediante el contenido del proyecto de muestra del sitio WKND y una aplicación React (a SPA) de muestra que consume el contenido a través de AEM API de GraphQL sin encabezado. Esta guía utiliza la variable SDK as a Cloud Service AEM.

Requisitos previos

Las siguientes herramientas deben instalarse localmente:

1. Instalación del SDK de AEM

Esta configuración utiliza la variable SDK as a Cloud Service AEM para explorar AEM API de GraphQL. Esta sección proporciona una guía rápida para instalar el SDK de AEM y ejecutarlo en modo Autor. Una guía más detallada para configurar un entorno de desarrollo local se puede encontrar aquí.

NOTA

También es posible seguir el tutorial con un AEM entorno as a Cloud Service. Se incluyen notas adicionales sobre el uso de un entorno de Cloud en todo el tutorial.

  1. Vaya a la Portal de distribución de software > AEM as a Cloud Service y descargue la última versión de SDK AEM.

    Portal de distribución de software

    PRECAUCIÓN

    La función GraphQL solo está habilitada de forma predeterminada en el SDK de AEM de 2021-02-04 o posterior.

  2. Descomprima la descarga y copie el jar de inicio rápido (aem-sdk-quickstart-XXX.jar) a una carpeta dedicada, es decir, ~/aem-sdk/author.

  3. Cambie el nombre del archivo jar a aem-author-p4502.jar.

    La variable author name especifica que el jar de inicio rápido se iniciará en modo Autor. La variable p4502 especifica que el servidor de inicio rápido se ejecutará en el puerto 4502.

  4. Abra una nueva ventana de terminal y vaya a la carpeta que contiene el archivo jar. Ejecute el siguiente comando para instalar e iniciar la instancia de AEM:

    $ cd ~/aem-sdk/author
    $ java -jar aem-author-p4502.jar
    
  5. Proporcione una contraseña de administrador como admin. Cualquier contraseña de administrador es aceptable, pero se recomienda utilizar admin para el desarrollo local a fin de reducir la necesidad de reconfigurar.

  6. Después de unos minutos, la instancia de AEM terminará de instalarse y se abrirá una nueva ventana del explorador en http://localhost:4502.

  7. Inicie sesión con el nombre de usuario admin y la contraseña seleccionada durante AEM inicio inicial (normalmente admin).

2. Instale el contenido WKND de muestra

Contenido de muestra de Sitio de referencia WKND se instalará para acelerar el tutorial. El WKND es una marca ficticia de estilo de vida, que a menudo se utiliza junto con AEM formación.

El sitio de referencia WKND incluye configuraciones necesarias para exponer un Extremo de GraphQL. En una implementación del mundo real, siga los pasos documentados para incluir los extremos de GraphQL en su proyecto de cliente. A CORS también ha sido empaquetado como parte del sitio WKND. Se necesita una configuración CORS para conceder acceso a una aplicación externa, más información sobre CORS puede encontrarse más abajo.

  1. Descargue el paquete de AEM más reciente compilado para WKND Site: aem-guides-wknd.all-x.x.x.zip.

    NOTA

    Asegúrese de descargar la versión estándar compatible con AEM as a Cloud Service y not el classic versión.

  2. En el Inicio de AEM vaya a Herramientas > Implementación > Paquetes.

    Navegar a paquetes

  3. Haga clic en Cargar paquete y elija el paquete WKND descargado en el paso anterior. Haga clic en Instalar para instalar el paquete.

  4. En el Inicio de AEM vaya a Recursos > Archivos.

  5. Haga clic en las carpetas a las que desea navegar Sitio WKND > Inglés > Aventuras.

    Vista de carpeta de aventuras

    Esta es una carpeta de todos los recursos que comprenden las distintas aventuras promovidas por la marca WKND. Esto incluye tipos de medios tradicionales, como imágenes y vídeos, así como medios específicos de AEM como Fragmentos de contenido.

  6. Haga clic en Wyoming en descenso y haga clic en Fragmento de contenido de Wyoming en descenso tarjeta:

    Omisión incompleta de la tarjeta de fragmento de contenido

  7. La interfaz de usuario del editor de fragmentos de contenido se abrirá para la aventura de descenso en esquiar.

    Fragmento de contenido de descenso en el esquí

    Observe que varios campos como Título, Descripción y Actividad defina el fragmento.

    Fragmentos de contenido son una de las formas en que el contenido se puede administrar en AEM. Los fragmentos de contenido son contenido reutilizable, independiente de la presentación y compuesto por elementos de datos estructurados como texto, texto enriquecido, fechas o referencias a otros fragmentos de contenido. Los fragmentos de contenido se explorarán con buenos detalles más adelante en el tutorial.

  8. Haga clic en Cancelar para cerrar el fragmento. Siéntase libre de navegar por algunas de las otras carpetas y explorar el otro contenido de Aventura.

NOTA

Si utiliza un entorno de Cloud Service, consulte la documentación de cómo implementar una base de código como el sitio de referencia WKND en un entorno de Cloud Service.

3. Descargue y ejecute la aplicación WKND React

Uno de los objetivos de este tutorial es mostrar cómo utilizar AEM contenido de una aplicación externa mediante las API de GraphQL. Este tutorial utiliza un ejemplo de aplicación React que se ha completado parcialmente para acelerar el tutorial. Las mismas lecciones y conceptos se aplican a las aplicaciones creadas con iOS, Android o cualquier otra plataforma. La aplicación React es intencionalmente sencilla, para evitar complejidad innecesaria; no pretende ser una implementación de referencia.

  1. Abra una nueva ventana de terminal y clone la rama de inicio del tutorial utilizando Git:

    $ git clone --branch tutorial/react git@github.com:adobe/aem-guides-wknd-graphql.git
    
  2. En el IDE de su elección, abra el archivo .env.development at aem-guides-wknd-graphql/react-app/.env.development. Compruebe que la variable REACT_APP_AUTHORIZATION línea no tiene comentarios y el archivo tiene el siguiente aspecto:

    REACT_APP_HOST_URI=http://localhost:4502
    REACT_APP_GRAPHQL_ENDPOINT=/content/graphql/global/endpoint.json
    # Use Authorization when connecting to an AEM Author environment
    REACT_APP_AUTHORIZATION=admin:admin
    

    Asegúrese de que React_APP_HOST_URI coincide con la instancia de AEM local. En este capítulo conectaremos la aplicación React directamente a la AEM Autor entorno. Autor de forma predeterminada, los entornos requieren autenticación, por lo que la aplicación se conectará como el admin usuario. Esta es una práctica habitual durante el desarrollo, ya que nos permite realizar cambios rápidamente en el entorno de AEM y verlos reflejados inmediatamente en la aplicación.

    NOTA

    En un escenario de producción, la aplicación se conectará a un AEM Publicación entorno. Esto se explica con más detalle en la sección Implementación de producción capítulo.

  3. Vaya a aem-guides-wknd-graphql/react-app carpeta. Instale e inicie la aplicación:

    $ cd aem-guides-wknd-graphql/react-app
    $ npm install
    $ npm start
    
  4. Una nueva ventana del explorador debe iniciar automáticamente la aplicación en http://localhost:3000.

    React starter app

    Se debe mostrar una lista del contenido de Aventura actual de AEM.

  5. Haga clic en una de las imágenes de aventura para ver los detalles de la aventura. Se solicita a AEM que devuelva los detalles de una aventura.

    Vista Detalles de aventura

  6. Utilice las herramientas para desarrolladores del navegador para inspeccionar el Red solicitudes. Consulte la XHR solicita y observa varias solicitudes de POST a /content/graphql/global/endpoint.json, el extremo de GraphQL configurado para AEM.

    Solicitud XHR de extremo de GraphQL

  7. También puede ver los parámetros y la respuesta JSON inspeccionando la solicitud de red. Puede resultar útil instalar una extensión de explorador como Inspector de red de GraphQL para que Chrome obtenga una mejor comprensión de la consulta y la respuesta.

4. Editar contenido en AEM

Ahora que la aplicación React se está ejecutando, actualice el contenido de AEM y vea el cambio reflejado en la aplicación.

  1. Navegar a AEM http://localhost:4502.

  2. Vaya a Recursos > Archivos > Sitio WKND > Inglés > Aventuras > Campo de surf de Bali.

    Carpeta del Campamento Surf de Bali

  3. Haga clic en Campo de surf de Bali fragmento de contenido para abrir el Editor de fragmentos de contenido.

  4. Modifique el Título y Descripción de la aventura

    Modificación del fragmento de contenido

  5. Haga clic en Guardar para guardar los cambios.

  6. Vuelva a la aplicación React en http://localhost:3000 y actualice para ver los cambios:

    Actualizado Bali Surf Camp Adventure

5. Instalación de la herramienta GraphiQL

GraphiQL es una herramienta de desarrollo y solo se necesita en entornos de nivel inferior como un desarrollo o una instancia local. El IDE de GraphiQL le permite probar y refinar rápidamente las consultas y los datos devueltos. GraphiQL también proporciona fácil acceso a la documentación, lo que facilita la comprensión de los métodos disponibles.

  1. Vaya a la Portal de distribución de software > AEM as a Cloud Service.

  2. Busque "GraphiQL" (asegúrese de incluir la variable i en GraphiQL.

  3. Descargue la última Paquete de contenido de GraphiQL v.x.x.x

    Descargar paquete de GraphiQL

    El archivo zip es un paquete AEM que se puede instalar directamente.

  4. En el Inicio de AEM vaya a Herramientas > Implementación > Paquetes.

  5. Haga clic en Cargar paquete y elija el paquete descargado en el paso anterior. Haga clic en Instalar para instalar el paquete.

    Instalación del paquete GraphiQL

  6. Vaya al IDE de GraphiQL en http://localhost:4502/content/graphiql.html y comenzar a explorar las API de GraphQL.

    NOTA

    La herramienta GraphiQL y la API de GraphQL son explorado con más detalle más adelante en el tutorial.

Felicitaciones!

Felicidades, ahora tiene una aplicación externa que consume AEM contenido con GraphQL. No dude en inspeccionar el código en la aplicación React y seguir experimentando con la modificación de los fragmentos de contenido existentes.

Siguientes pasos

Configuración CORS (bono)

AEM, al ser seguro de forma predeterminada, bloquea las solicitudes de origen cruzado, lo que impide que las aplicaciones no autorizadas se conecten a su contenido y lo muestren.

Para permitir que la aplicación React de este tutorial interactúe con AEM extremos de la API de GraphQL, se ha definido una configuración de uso compartido de recursos de origen diverso en el proyecto de referencia del sitio WKND.

Configuración del uso compartido de recursos de origen cruzado

Para ver la configuración implementada:

  1. Vaya a AEM consola web del SDK en http://localhost:4502/system/console.

    NOTA

    La consola web solo está disponible en el SDK. En un entorno as a Cloud Service AEM, esta información se puede ver mediante Developer Console.

  2. En el menú superior, haga clic en OSGI > Configuración para que aparezca todo el Configuraciones de OSGi.

  3. Desplácese hacia abajo por la página Uso compartido de recursos de origen cruzado de Adobe Granite.

  4. Haga clic en la configuración para com.adobe.granite.cors.impl.CORSPolicyImpl~wknd-graphql.

  5. Se han actualizado los campos siguientes:

    • Orígenes permitidos (Regex): http://localhost:.*
      • Permite todas las conexiones de host locales.
    • Rutas permitidas: /content/graphql/global/endpoint.json
      • Este es el único extremo de GraphQL configurado actualmente. Como práctica recomendada, las configuraciones de los informes de calidad deben ser lo más restrictivas posible.
    • Métodos permitidos: GET, HEAD, POST
      • Solo POST es necesario para GraphQL, sin embargo, los demás métodos pueden resultar útiles para interactuar con AEM de forma directa.
    • Encabezados admitidos: autorización se ha agregado para pasar la autenticación básica en el entorno de creación.
    • Admite Credenciales: Yes
      • Esto es necesario, ya que nuestra aplicación React se comunicará con los puntos finales de GraphQL protegidos del servicio AEM Author.

Esta configuración y los extremos de GraphQL forman parte del proyecto AEM WKND. Puede ver todas las variables Configuraciones de OSGi aquí.

En esta página