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

AEM AEM SPA AEM La configuración rápida sin encabezado le permite ponerse en contacto con el contenido sin encabezado mediante el contenido del proyecto de muestra del sitio WKND y una aplicación React de muestra (una aplicación de react) que consume el contenido a través de las API de GraphQL sin encabezado, lo que le ayuda a utilizar el contenido sin encabezado. Esta guía utiliza el AEM SDK as a Cloud Service de.

Requisitos previos prerequisites

Las siguientes herramientas deben instalarse localmente:

AEM 1. Instalar el SDK de la aem-sdk

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

NOTE
También es posible seguir el tutorial con un AEM entorno as a Cloud Service. A lo largo del tutorial se incluyen notas adicionales para utilizar un entorno de nube.
  1. Vaya a Portal de distribución de software > AEM as a Cloud Service y descargue la versión más reciente de AEM SDK de.

    Portal de distribución de software

  2. Descomprima la descarga y copie el JAR de inicio rápido (aem-sdk-quickstart-XXX.jar) a una carpeta específica, por ejemplo, ~/aem-sdk/author.

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

    El author name especifica que el JAR de inicio rápido se inicia en el modo Autor. El p4502 especifica que Quickstart se ejecuta en el puerto 4502.

  4. AEM Para instalar e iniciar la instancia de, abra un símbolo del sistema en la carpeta que contiene el archivo jar y ejecute el siguiente comando:

    code language-shell
    $ 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 utilizarla admin para el desarrollo local con el fin de reducir la necesidad de reconfigurar.

  6. AEM Una vez que el servicio de termine de instalarse, se abrirá una nueva ventana del explorador en http://localhost:4502.

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

2. Instalar contenido de muestra install-sample-content

Contenido de muestra de Sitio de referencia de WKND se utiliza para acelerar el tutorial. AEM La WKND es una marca ficticia de estilo de vida, que a menudo se utiliza con el entrenamiento de la.

El sitio WKND incluye las configuraciones necesarias para exponer una Extremo de GraphQL. En una implementación real, siga los pasos documentados para incluir los extremos de GraphQL en el proyecto de cliente. A CORS también se ha empaquetado como parte del sitio WKND. Se requiere una configuración de CORS para conceder acceso a una aplicación externa, más información acerca de CORS se puede encontrar a continuación.

  1. AEM Descargue el último paquete de datos compilado para el sitio WKND: aem-guides-wknd.all-x.x.x.zip.

    note note
    NOTE
    Asegúrese de descargar la versión estándar compatible con las versiones as a Cloud Service y AEM de no el classic versión.
  2. Desde el AEM Inicio de , vaya a Herramientas > Implementación > Paquetes.

    Navegar a paquetes

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

  4. Desde el AEM Inicio de , vaya a Assets > Archivos > WKND compartido > Inglés > Aventuras.

    Vista de carpeta de aventuras

    Esta es una carpeta de todos los activos que componen las distintas Aventuras promocionadas por la marca WKND. AEM Esto incluye tipos de medios tradicionales, como imágenes y vídeo, y medios específicos de los que se puede hacer uso, como los siguientes: Fragmentos de contenido.

  5. Haga clic en Esquí de descenso Wyoming y haga clic en la Fragmento de contenido de Downhill Skiing Wyoming tarjeta:

    Tarjeta de fragmento de contenido

  6. El editor de fragmentos de contenido se abre para la aventura de Downhill Skiing Wyoming.

    Editor de fragmentos de contenido

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

    Fragmentos de contenido AEM Estas son una de las formas en que se puede administrar el contenido en los recursos de la. Los fragmentos de contenido son contenidos reutilizables y no relacionados con la presentación compuestos por elementos de datos estructurados, como texto, texto enriquecido, fechas o referencias a otros fragmentos de contenido. Los fragmentos de contenido se exploran con mayor detalle más adelante en la configuración rápida.

  7. Clic Cancelar para cerrar el fragmento. Siéntase libre de navegar en algunas de las otras carpetas y explorar el otro contenido de Aventura.

NOTE
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 de WKND en un entorno de Cloud Service.

3. Descargar y ejecutar la aplicación WKND React sample-app

AEM Uno de los objetivos de este tutorial es mostrar cómo consumir contenido de la aplicación desde una aplicación externa mediante las API de GraphQL. Este tutorial utiliza un ejemplo de la aplicación React. AEM La aplicación React es intencionadamente sencilla, para centrarse en la integración con las API de GraphQL de la red de aplicaciones (API) de la red de redes sociales de.

  1. Abra un nuevo símbolo del sistema y clone la aplicación React de ejemplo desde GitHub:

    code language-shell
    $ git clone git@github.com:adobe/aem-guides-wknd-graphql.git
    $ cd aem-guides-wknd-graphql/react-app
    
  2. Abra la aplicación React en aem-guides-wknd-graphql/react-app en el IDE que elija.

  3. En el IDE, abra el archivo .env.development en /.env.development. Compruebe el REACT_APP_AUTHORIZATION La línea no está comentada y el archivo declara las siguientes variables:

    code language-plain
    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
    

    Asegurar REACT_APP_HOST_URI AEM apunta a su SDK de local. Para mayor comodidad, este inicio rápido conecta la aplicación React con AEM Autor de. Autor requieren autenticación, por lo que la aplicación utiliza el admin para establecer su conexión. AEM La conexión de una aplicación a Autor de la es una práctica común durante el desarrollo, ya que facilita la iteración rápida en el contenido sin necesidad de publicar cambios.

    note note
    NOTE
    AEM En un escenario de producción, la aplicación se conectará a una aplicación de tipo de conexión Publish entorno. Esto se explica con más detalle en la Implementación de producción sección.
  4. Instale e inicie la aplicación React:

    code language-shell
    $ cd aem-guides-wknd-graphql/react-app
    $ npm install
    $ npm start
    
  5. Una nueva ventana del explorador abre automáticamente la aplicación en http://localhost:3000.

    Reaccionar aplicación de inicio

    AEM Se muestra una lista de los contenidos de aventura de la.

  6. Haga clic en una de las imágenes de aventura para ver los detalles de la aventura. AEM Se hace una petición para que se le devuelva el detalle de una aventura.

    Vista de detalles de aventura

  7. Utilice las herramientas para desarrolladores del explorador para inspeccionar el Red solicitudes. Ver el XHR solicitudes de y observe varias solicitudes de GET a /graphql/execute.json/.... AEM Este prefijo de ruta invoca el punto de conexión de consulta persistente, seleccionando la consulta persistente que se ejecutará con el nombre y los parámetros codificados que siguen al prefijo.

    Solicitud XHR de extremo de GraphQL

AEM 4. Edite el contenido en la

AEM Con la aplicación React en ejecución, realice una actualización del contenido en la aplicación y compruebe que el cambio se refleje en la aplicación.

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

  2. Vaya a Assets > Archivos > WKND compartido > Inglés > Aventuras > Bali Surf Camp.

    Carpeta Bali Surf Camp

  3. Haga clic en Bali Surf Camp Fragmento de contenido para abrir el editor de fragmentos de contenido.

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

    Modificar fragmento de contenido

  5. Clic Guardar para guardar los cambios.

  6. Actualice la aplicación React en http://localhost:3000 para ver los cambios:

    Actualizado Bali Surf Camp Adventure

5. Explorar GraphiQL graphiql

  1. Abrir GraphiQL navegando a Herramientas > General > Editor de consultas de GraphQL

  2. Seleccione las consultas persistentes existentes a la izquierda y ejecútelas para ver los resultados.

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

Enhorabuena. congratulations

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

Pasos siguientes

recommendation-more-help
e25b6834-e87f-4ff3-ba56-4cd16cdfdec4