Proyecto del Editor de 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 implementará un nuevo proyecto de AEM, basado en el AEM tipo de archivo del proyecto. El proyecto AEM se arrancará 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 del 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 esté ejecutando localmente una nueva instancia de Adobe Experience Manager, iniciada en modo author.

Obtener el proyecto

Existen varias opciones para crear un proyecto de Maven Multi-module para AEM. Este tutorial utilizó el último AEM tipo de archivo del proyecto como base para el código del tutorial. Se han realizado modificaciones en el código del proyecto para admitir varias versiones de AEM. Revise la nota sobre la compatibilidad con versiones anteriores.

PRECAUCIÓN

Se recomienda utilizar la versión más reciente del arquetipo para generar un nuevo proyecto para una implementación real. AEM proyectos deben dirigirse a una sola versión de AEM utilizando la propiedad aemVersion 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 AEM desde el AEM tipo de archivo del proyecto:

    Propiedad Value
    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 la propiedad frontendModule=angular. Esto le indica al tipo de archivo del proyecto AEM que arranque el proyecto con un código de Angular base que se utilizará 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 siguiente comando Maven desde el directorio aem-guides-wknd-spa para crear e implementar el proyecto para AEM:

    $ mvn -PautoInstallSinglePackage clean install
    

    Si utiliza 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 implementará en una instancia de AEM que se ejecute localmente en el puerto 4502 y con las credenciales de admin:admin.

  4. Vaya al 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. Puede encontrar más información sobre los AEM componentes principales 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 consola Sites: 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 las propiedades disponibles al generar un proyecto.

  2. Abra la página 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. Ya se ha agregado un componente Texto a la página. Puede editar este componente como cualquier otro componente de AEM.

    Actualizar componente de texto

  4. Agregue un componente Texto adicional 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 agregará más durante el 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 el menú Información de página > Ver 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 efectivamente 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 no se encuentra el contenido de texto Hello World o cualquiera de los demás contenidos. En su lugar, debería ver 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. Ver las solicitudes XHR:

    Solicitudes XHR

    Debería haber una solicitud a 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 los componentes Text .

    ...
    ":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 agregará más funcionalidad.

Pasos siguientes

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

En esta página