Configuración rápida

La configuración rápida es una guía rápida que ilustra cómo instalar y ejecutar la aplicación WKND y como SPA remoto, y crearla con AEM SPA Editor.

La configuración rápida le lleva directamente al estado final de este tutorial.

Un vídeo explicativo de la configuración rápida

Requisitos previos

Este tutorial requiere lo siguiente:

Este tutorial supone:

  • Código Microsoft® Visual Studio como el IDE
  • Un directorio de trabajo de ~/Code/wknd-app
  • Ejecución del SDK de AEM como servicio de creación en http://localhost:4502
  • Ejecución del SDK de AEM con la cuenta local admin con contraseña admin
  • Ejecución del SPA en http://localhost:3000

Inicio rápido del SDK de AEM

Descargue e instale el AEM SDK Quickstart en el puerto 4502, con las credenciales predeterminadas admin/admin.

  1. Descargar el SDK de AEM más reciente

  2. Descomprima el SDK de AEM en ~/aem-sdk

  3. Ejecutar el Jar de inicio rápido del SDK de AEM

    $ java -jar aem-sdk-quickstart-xxx.jar

# Provide `admin` as the admin user's password

AEM SDK se iniciará y se iniciará automáticamente en http://localhost:4502. Inicie sesión con las siguientes credenciales:

  • Nombre de usuario: admin
  • Contraseña: admin

Descargar e instalar el paquete WKND Site

Este tutorial depende del proyecto WKND 0.3.0+'s (para contenido).

  1. Descargue la versión más reciente de aem-guides-wknd.all.x.x.x.zip
  2. Inicie sesión en AEM administrador de paquetes del SDK en http://localhost:4502/crx/packmgr con las credenciales admin.
  3. ____ Cargue los aem-guides-wknd.all.x.x.x.zip descargados en el paso 1
  4. Pulse el botón Install para la entrada aem-guides-wknd.all-x.x.x.zip

Descargar e instalar paquetes de SPA de aplicaciones WKND

Para realizar una configuración rápida, se proporcionan AEM paquetes que contienen la configuración de AEM final y el contenido del tutorial.

  1. Descargar
  2. Descargar
  3. Inicie sesión en AEM administrador de paquetes del SDK en http://localhost:4502/crx/packmgr con las credenciales admin.
  4. ____ Cargue los wknd-app.all.x.x.x.zip descargados en el paso 1
  5. Pulse el botón Install para la entrada wknd-app.all.x.x.x.zip
  6. ____ Cargue los wknd-app.ui.content.sample.x.x.x.zip descargados en el paso 2
  7. Pulse el botón Install para la entrada wknd-app.ui.content.sample.x.x.x.zip

Descargar la fuente de la aplicación WKND

Descargue el código fuente de la aplicación WKND de Github.com y cambie la rama que contiene los cambios a la SPA realizada en este tutorial.

$ mkdir -p ~/Code/wknd-app
$ cd ~/Code/wknd-app
$ git clone --branch feature/spa-editor https://github.com/adobe/aem-guides-wknd-graphql.git
$ cd aem-guides-wknd-graphql

Inicie la aplicación SPA

Desde la raíz del proyecto, instale las dependencias npm de SPA proyectos y ejecute la aplicación.

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

Si hay errores al ejecutar npm install, pruebe los siguientes pasos:

$ cd ~/Code/wknd-app/aem-guides-wknd-graphql/react-app
$ rm -f package-lock.json
$ npm install --legacy-peer-deps
$ npm run start

Compruebe que la SPA se esté ejecutando en http://localhost:3000.

Creación de contenido en AEM editor SPA

Antes de crear contenido, arregle las ventanas del navegador de modo que AEM Author (http://localhost:4502) esté a la izquierda y el SPA remoto (http://localhost:3000) se ejecute a la derecha. Esta disposición le permite ver cómo los cambios en el contenido AEM se reflejan inmediatamente en la SPA.

  1. Inicie sesión en AEM SDK Author service como admin
  2. Vaya a Sites > WKND App > us > en
  3. Editar Página principal de la aplicación WKND
  4. Cambiar al modo Editar

Cree el componente fijo de la vista Inicio

  1. Toque el texto WKND Adventures para activar el componente Título fijo (codificado en la vista Inicio de SPA)
  2. Pulse el icono llave inglesa en la barra de acciones del componente Título
  3. Cambia el contenido del componente Título y guárdelo
  4. Actualice la SPA que se ejecuta en http://localhost:3000 y vea que los cambios se reflejan

Creación del componente contenedor de la vista Inicio

  1. Mientras sigue editando la Página principal de la aplicación WKND…
  2. Expanda la barra lateral del Editor de SPA (a la izquierda)
  3. Pulse los iconos Componentes
  4. Añadir, cambiar o quitar componentes del componente contenedor que se encuentra debajo del logotipo de WKND y encima del componente de título fijo
  5. Actualice la SPA que se ejecuta en http://localhost:3000 y vea que los cambios se reflejan

Creación de un componente contenedor en una ruta dinámica

  1. Cambie al modo Vista previa en SPA Editor
  2. Pulse en la tarjeta Bali Surf Camp y navegue hasta su ruta dinámica
  3. Agregar, cambiar o quitar componentes del componente contenedor que se encuentra sobre el encabezado Itinerario
  4. Actualice la SPA que se ejecuta en http://localhost:3000 y vea que los cambios se reflejan

Las páginas de AEM nuevas en la Página de inicio de la aplicación WKND > Aventura deben tener un nombre de página AEM que coincida con el nombre del fragmento de contenido de la aventura correspondiente. Esto se debe a que la ruta SPA a AEM asignación de página se basa en el último segmento de la ruta, que es el nombre del fragmento de contenido.

Felicitaciones!

Solo tienes que probar rápidamente cómo AEM editor de SPA puede mejorar tu SPA con áreas controladas y editables. Si le interesa, consulte el resto del tutorial, pero asegúrese de empezar de nuevo, ya que en esta configuración rápida su entorno de desarrollo local está en el estado final del tutorial.

En esta página