Proyecto del Editor SPA

Aprenda a utilizar un proyecto de Adobe Experience Manager (AEM) Maven como punto de partida para una aplicación de Angular integrada con el AEM SPA Editor.

Objetivo

  1. Comprender la estructura de un nuevo proyecto de AEM SPA Editor creado a partir de un tipo de archivo Maven.
  2. Implemente el proyecto de inicio en una instancia local de AEM.

Qué va a generar

En este capítulo, se implementa un nuevo proyecto de AEM, basado en la variable Tipo de archivo del proyecto AEM. El proyecto AEM se arranca con un punto de partida muy sencillo para la SPA de Angular. El proyecto utilizado en este capítulo servirá de base para la aplicación de la SPA WKND y se basará en futuros capítulos.

Proyecto de inicio de WKND SPA Angular

Un mensaje clásico de Hello World.

Requisitos previos

Revise las herramientas e instrucciones necesarias para configurar un entorno de desarrollo local. Asegúrese de que se ha iniciado una nueva instancia de Adobe Experience Manager en author se está ejecutando localmente.

Obtener el proyecto

Existen varias opciones para crear un proyecto de Maven Multi-module para AEM. Este tutorial ha utilizado las Tipo de archivo del proyecto AEM como base para el código del tutorial. Se han realizado modificaciones en el código del proyecto para admitir varias versiones de AEM. Consulte la nota sobre la compatibilidad con versiones anteriores.

PRECAUCIÓN

Se recomienda utilizar la variable última versión versión de arquetipo para generar un nuevo proyecto para una implementación real. AEM proyectos deben dirigirse a una única versión de AEM usando la variable aemVersion propiedad del tipo de archivo.

  1. Descargue el punto de partida para este tutorial mediante Git:

    $ git clone git@github.com:adobe/aem-guides-wknd-spa.git
    $ cd aem-guides-wknd-spa
    $ git checkout Angular/create-project-start
    
  2. La siguiente estructura de carpetas y archivos representa el proyecto de AEM generado por el tipo de archivo Maven en el sistema de archivos local:

    |--- aem-guides-wknd-spa
        |--- all/
        |--- core/
        |--- dispatcher/
        |--- ui.apps/
        |--- ui.apps.structure/
        |--- ui.content/
        |--- ui.frontend /
        |--- it.tests/
        |--- pom.xml
        |--- README.md
        |--- .gitignore
        |--- archetype.properties
    
  3. Se utilizaron las siguientes propiedades al generar el proyecto de AEM desde el AEM tipo de archivo del proyecto:

    Propiedad Valor
    aemVersion nube
    appTitle WKND SPA Angular
    appId wknd-spa-angular
    groupId com.adobe.aem.guides
    frontendModule angular
    paquete com.adobe.aem.guides.wknd.spa.angular
    includeExamples n
    NOTA

    Observe que frontendModule=angular propiedad. Esto indica al tipo de archivo del proyecto AEM que arranque el proyecto con un inicio base de código de angular para usar con el AEM SPA Editor.

Creación del proyecto

A continuación, compile, cree e implemente el código del proyecto en una instancia local de AEM mediante Maven.

  1. Asegúrese de que una instancia de AEM se esté ejecutando localmente en el puerto 4502.

  2. Desde el terminal de la línea de comandos, compruebe que Maven está instalado:

    $ mvn --version
    Apache Maven 3.6.2
    Maven home: /Library/apache-maven-3.6.2
    Java version: 11.0.4, vendor: Oracle Corporation, runtime: /Library/Java/JavaVirtualMachines/jdk-11.0.4.jdk/Contents/Home
    
  3. Ejecute el comando Maven siguiente desde la aem-guides-wknd-spa para crear e implementar el proyecto para AEM:

    $ mvn -PautoInstallSinglePackage clean install
    

    Si usa AEM 6.x:

    $ mvn clean install -PautoInstallSinglePackage -Pclassic
    

    Los múltiples módulos del proyecto deben compilarse e implementarse en AEM.

    [INFO] ------------------------------------------------------------------------
    [INFO] Reactor Summary for wknd-spa-angular 1.0.0-SNAPSHOT:
    [INFO]
    [INFO] wknd-spa-angular ................................... SUCCESS [  0.473 s]
    [INFO] WKND SPA Angular - Core ............................ SUCCESS [ 54.866 s]
    [INFO] wknd-spa-angular.ui.frontend - UI Frontend ......... SUCCESS [02:10 min]
    [INFO] WKND SPA Angular - Repository Structure Package .... SUCCESS [  0.694 s]
    [INFO] WKND SPA Angular - UI apps ......................... SUCCESS [  6.351 s]
    [INFO] WKND SPA Angular - UI content ...................... SUCCESS [  2.885 s]
    [INFO] WKND SPA Angular - All ............................. SUCCESS [  1.736 s]
    [INFO] WKND SPA Angular - Integration Tests Bundles ....... SUCCESS [  2.563 s]
    [INFO] WKND SPA Angular - Integration Tests Launcher ...... SUCCESS [  1.846 s]
    [INFO] WKND SPA Angular - Dispatcher ...................... SUCCESS [  0.270 s]
    [INFO] ------------------------------------------------------------------------
    [INFO] BUILD SUCCESS
    [INFO] ------------------------------------------------------------------------
    

    El perfil de Maven autoInstallSinglePackage compila los módulos individuales del proyecto e implementa un paquete único en la instancia de AEM. De forma predeterminada, este paquete se implementa en una instancia de AEM que se ejecuta localmente en el puerto 4502 y con las credenciales de admin:admin.

  4. Vaya a Administrador de paquetes en la instancia de AEM local: http://localhost:4502/crx/packmgr/index.jsp.

  5. Debería ver tres paquetes para wknd-spa-angular.all, wknd-spa-angular.ui.apps y wknd-spa-angular.ui.content.

    Paquetes SPA WKND

    Todo el código personalizado necesario para el proyecto se incluye en estos paquetes e se instala en el tiempo de ejecución de AEM.

  6. También debería ver varios paquetes para spa.project.core y core.wcm.components. Son dependencias que el tipo de archivo incluye automáticamente. Más información sobre Los componentes principales de AEM se pueden encontrar aquí.

Contenido de autor

A continuación, abra el SPA de inicio generado por el tipo de archivo y actualice parte del contenido.

  1. Vaya a la Sitios consola: http://localhost:4502/sites.html/content.

    La SPA WKND incluye una estructura básica del sitio con un país, idioma y página de inicio. Esta jerarquía se basa en los valores predeterminados del tipo de archivo para language_country y isSingleCountryWebsite. Estos valores se pueden sobrescribir actualizando la variable propiedades disponibles al generar un proyecto.

  2. Abra el us > en > WKND SPA Angular Home Page seleccionando la página y haciendo clic en el botón Editar en la barra de menús:

    consola del sitio

  3. A Texto ya se ha agregado a la página. Puede editar este componente como cualquier otro componente de AEM.

    Actualizar componente de texto

  4. Agregue un Texto a la página.

    Tenga en cuenta que la experiencia de creación es similar a la de una página de AEM Sites tradicional. Actualmente hay un número limitado de componentes disponibles para usar. Se ha añadido más información a lo largo del tutorial.

Inspect: aplicación de una sola página

A continuación, compruebe que se trata de una aplicación de una sola página con las herramientas para desarrolladores del explorador.

  1. En el Editor de página, haga clic en Información de la página menú > Ver tal y como aparece publicado:

    Botón Ver tal y como aparece publicado

    Se abrirá una nueva pestaña con el parámetro de consulta ?wcmmode=disabled que desactiva el editor de AEM: http://localhost:4502/content/wknd-spa-angular/us/en/home.html?wcmmode=disabled

  2. Vea la fuente de la página y observe que el contenido de texto Hello World o cualquier otro contenido no se encuentra. En su lugar, debería ver un HTML como el siguiente:

    ...
    <body>
        <noscript>You need to enable JavaScript to run this app.</noscript>
        <div id="spa-root"></div>
        <script type="text/javascript" src="/etc.clientlibs/wknd-spa-angular/clientlibs/clientlib-angular.min.js"></script>
        ...
    </body>
    ...
    

    clientlib-angular.min.js es la SPA de Angular que se carga en la página y responsable de procesar el contenido.

    ¿De dónde viene el contenido?

  3. Vuelva a la pestaña : http://localhost:4502/content/wknd-spa-angular/us/en/home.html?wcmmode=disabled

  4. Abra las herramientas para desarrolladores del explorador e inspeccione el tráfico de red de la página durante una actualización. Consulte la XHR solicitudes:

    Solicitudes XHR

    Debe haber una solicitud para http://localhost:4502/content/wknd-spa-angular/us/en.model.json. Contiene todo el contenido, con formato JSON, que dirigirá el SPA.

  5. En una pestaña nueva, abra http://localhost:4502/content/wknd-spa-angular/us/en.model.json

    La solicitud en.model.json representa el modelo de contenido que dirigirá la aplicación. Inspect utiliza la salida JSON y debe poder encontrar el fragmento que representa la variable Texto componentes.

    ...
    ":items": {
        "text": {
            "text": "<p>Hello World! Updated content!</p>\r\n",
            "richText": true,
            ":type": "wknd-spa-angular/components/text"
        },
        "text_98796435": {
            "text": "<p>A new text component.</p>\r\n",
            "richText": true,
            ":type": "wknd-spa-angular/components/text"
    },
    ...
    

    En el siguiente capítulo analizaremos cómo se asigna el contenido de JSON de AEM componentes a SPA componentes para formar la base de la experiencia del AEM SPA editor.

    NOTA

    Puede resultar útil instalar una extensión del explorador para dar formato automáticamente a la salida JSON.

Felicitaciones!

¡Felicidades, acaba de crear su primer proyecto AEM SPA Editor!

Ahora es bastante sencillo pero en los próximos capítulos se añade más funcionalidad.

Pasos siguientes

Integrar el SPA - Aprenda cómo el código fuente SPA está integrado con el proyecto AEM y comprenda las herramientas disponibles para desarrollar rápidamente el SPA.

En esta página