Configuración rápida

Este capítulo ofrece una configuración rápida de un entorno local para ver que una aplicación externa consume contenido de AEM mediante las API de GraphQL de AEM. Los capítulos posteriores del tutorial se basarán en esta configuración.

Requisitos previos

Las siguientes herramientas deben instalarse localmente:

Objetivos

  1. Descargue e instale el SDK de AEM.
  2. Descargue e instale contenido de ejemplo del sitio de referencia de WKND.
  3. Descargue e instale una aplicación de ejemplo para consumir contenido mediante las API de GraphQL.

Instalación del SDK de AEM

Este tutorial utiliza el AEM como Cloud Service SDK 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. Aquí🔗 puede encontrar una guía más detallada para configurar un entorno de desarrollo local .

NOTA

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

  1. Vaya al Software Distribution Portal > AEM as a Cloud Service y descargue la última versión del AEM SDK.

    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) en una carpeta dedicada, por ejemplo ~/aem-sdk/author.

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

    El nombre author especifica que el jar de inicio rápido se iniciará en modo Autor. El 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 el valor predeterminado para el desarrollo local para reducir la necesidad de volver a configurarla.

  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 admin.

Instale contenido de muestra y extremos de GraphQL

Se instalará contenido de muestra del sitio de referencia de WKND 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 de WKND incluye configuraciones necesarias para exponer un extremo de GraphQL. En una implementación real, siga los pasos documentados para incluir los extremos de GraphQL en su proyecto de cliente. También se ha empaquetado un CORS como parte del sitio WKND. Se necesita una configuración CORS para conceder acceso a una aplicación externa. A continuación se puede encontrar más información sobre CORS.

  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 como Cloud Service y no la versión classic.

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

    Navegar a paquetes

  3. Haga clic en Upload Package y seleccione el paquete WKND descargado en el paso anterior. Haga clic en Install para instalar el paquete.

  4. En el menú Inicio de AEM vaya a Assets > Archivos.

  5. Haga clic en las carpetas para navegar a 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 la carpeta Downhill Skiing Wyoming y haga clic en la tarjeta Downhill Skiing Wyoming Content Fragment:

    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 Title, Description y Activity definen el fragmento.

    Los 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 para saber cómo implementar una base de código como el sitio de referencia WKND en un entorno de Cloud Service.

Instale la aplicación de ejemplo

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 en aem-guides-wknd-graphql/react-app/.env.development. Compruebe que la línea REACT_APP_AUTHORIZATION no contiene comentarios y que 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 coincida con la instancia de AEM local. En este capítulo conectaremos la aplicación React directamente al entorno Author de AEM. ​De forma predeterminada, los entornos de autorización requieren autenticación, por lo que la aplicación se conectará como 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 entorno Publish AEM. Esto se explica con más detalle en el capítulo Implementación de producción.

  3. Vaya a la carpeta aem-guides-wknd-graphql/react-app . 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 las solicitudes Network. Vea las solicitudes XHR y observe 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 del explorador como GraphQL Network para Chrome para comprender mejor la consulta y la respuesta.

    Extensión de red de GraphQL

    Uso de la extensión Chrome GraphQL Network

Modificación de un fragmento de contenido

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

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

  2. Vaya a Assets > Files > WKND Site > English > Adventures > Bali Surf Camp.

    Carpeta del Campamento Surf de Bali

  3. Haga clic en el fragmento de contenido Bali Surf Camp para abrir el Editor de fragmentos de contenido.

  4. Modifique el Title y la Description 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

Instale la herramienta GraphiQL

🔗 GraphiQL es una herramienta de desarrollo que solo se necesita en entornos de nivel inferior como una instancia local o de desarrollo. 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 al Software Distribution Portal > AEM como Cloud Service.

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

  3. Descargue el paquete de contenido más reciente 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 menú 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 Install para instalar el paquete.

    Instalación del paquete GraphiQL

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

    NOTA

    La herramienta GraphiQL y la API de GraphQL se exploran 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.

Pasos siguientes

En el capítulo siguiente, Definición de modelos de fragmento de contenido, aprenda a modelar contenido y a crear un esquema con Modelos de fragmento de contenido. Revisará los modelos existentes y creará un nuevo modelo. También aprenderá los diferentes tipos de datos que se pueden utilizar para definir un esquema como parte del modelo.

(Bono) Configuración de CORS

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 AEM como Cloud Service, esta información se puede ver a través de Developer Console.

  2. En el menú superior, haga clic en OSGI > Configuración para que aparezcan todas las configuraciones OSGi.

  3. Desplácese hacia abajo por la página Adobe Granite Cross-Origin Resource Sharing.

  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 se requiere POST para GraphQL; sin embargo, los demás métodos pueden ser útiles para interactuar con AEM de forma directa.
    • Encabezados admitidos: Se ha agregado autorización 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 configuraciones de OSGi aquí.

En esta página