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 usa AEM as a Cloud Service SDK.
Requisitos previos prerequisites
Las siguientes herramientas deben instalarse localmente:
AEM 1. Instalar el SDK de la aem-sdk
Esta configuración usa el SDK de AEM as a Cloud Service AEM para explorar las API de GraphQL de la manera de. AEM Esta sección proporciona una guía rápida para instalar el SDK de la y ejecutarlo en el modo Autor. Puede encontrar una guía más detallada para configurar un entorno de desarrollo local aquí.
-
Vaya a Portal de distribución de software > AEM as a Cloud Service AEM y descargue la versión más reciente del SDK de.
-
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
. -
Cambie el nombre del archivo jar a
aem-author-p4502.jar
.El nombre
author
especifica que el JAR de inicio rápido se inicia en el modo Autor.p4502
especifica que Quickstart se ejecuta en el puerto 4502. -
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
-
Proporcione una contraseña de administrador como
admin
. Cualquier contraseña de administrador es aceptable, pero se recomienda usaradmin
para el desarrollo local a fin de reducir la necesidad de volver a configurar. -
AEM Una vez que el servicio de termine de instalarse, se abrirá una nueva ventana del explorador en http://localhost:4502.
-
AEM Inicie sesión con el nombre de usuario
admin
y la contraseña seleccionados durante el inicio inicial de la sesión de inicio de la sesión de la aplicación (generalmente,admin
) de la sesión de usuario de la sesión de inicio de la sesión de la sesión de usuario.
2. Instalar contenido de muestra install-sample-content
El contenido de muestra del sitio de referencia WKND se usa 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 un extremo GraphQL. En una implementación real, siga los pasos documentados para incluir los extremos de GraphQL en su proyecto de cliente. Un 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. A continuación se encuentra más información sobre CORS.
-
AEM Descargue el paquete de compilaciones más reciente 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 AEM as a Cloud Service y no la versión de classic
. -
AEM En el menú Inicio de la, vaya a Herramientas > Implementación > Paquetes.
-
Haga clic en Cargar paquete y elija el paquete WKND descargado en el paso anterior. Haga clic en Instalar para instalar el paquete.
-
AEM En el menú Inicio de la sesión, vaya a Assets > Archivos > WKND Compartido > Inglés > 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, así como medios específicos de los que se puede usar, como Fragmentos de contenido.
-
Haz clic en la carpeta Downhill Skiing Wyoming y luego en la tarjeta Fragmento de contenido de Downhill Skiing Wyoming:
-
El editor de fragmentos de contenido se abre para la aventura de Downhill Skiing Wyoming.
Observe que varios campos como Título, Descripción y Actividad definen el fragmento.
AEM Los fragmentos de contenido son una de las formas en que se puede administrar el contenido en los recursos de la lista de distribución de contenido de la lista de distribución de contenido. 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.
-
Haga clic en Cancelar para cerrar el fragmento. Siéntase libre de navegar en algunas de las otras carpetas y explorar el otro contenido de Aventura.
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 los.
-
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
-
Abra la aplicación React en
aem-guides-wknd-graphql/react-app
en el IDE que desee. -
En el IDE, abra el archivo
.env.development
en/.env.development
. Compruebe que la líneaREACT_APP_AUTHORIZATION
no esté comentada y que el archivo declare 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
AEM Asegúrese de que
REACT_APP_HOST_URI
apunte a su SDK local de. AEM Para mayor comodidad, este inicio rápido conecta la aplicación React con Autor de la aplicación. Los servicios de Autor requieren autenticación, por lo que la aplicación utiliza al usuarioadmin
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 un entorno de Publish que se haya configurado para el uso de la aplicación en la producción. Esto se trata con más detalle en la sección Implementación de producción. -
Instale e inicie la aplicación React:
code language-shell $ cd aem-guides-wknd-graphql/react-app $ npm install $ npm start
-
Una nueva ventana del explorador abre automáticamente la aplicación en http://localhost:3000.
AEM Se muestra una lista de los contenidos de aventura de la.
-
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.
-
Utilice las herramientas para desarrolladores del explorador para inspeccionar las solicitudes de Red. Vea las solicitudes XHR y observe varias solicitudes de GET a
/graphql/execute.json/...
. AEM Este prefijo de ruta invoca el extremo de consulta persistente de la, seleccionando la consulta persistente que se va a ejecutar con el nombre y los parámetros codificados que siguen al prefijo.
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.
-
AEM Vaya a http://localhost:4502 de la página de inicio de sesión.
-
Vaya a Assets > Archivos > WKND Compartido > Inglés > Aventuras > Bali Surf Camp.
-
Haz clic en el fragmento de contenido Bali Surf Camp para abrir el editor de fragmentos de contenido.
-
Modifica el Título y la Descripción de la aventura.
-
Haga clic en Guardar para guardar los cambios.
-
Actualice la aplicación React en http://localhost:3000 para ver los cambios:
5. Explorar GraphiQL graphiql
-
Abra GraphiQL navegando a Herramientas > General > Editor de consultas de GraphQL
-
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 se exploran 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.