Proyecto de SPA Editor

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

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

Ejecute el siguiente comando Maven desde el directorio aem-guides-wknd-spa para generar e implementar el proyecto en AEM:

$ mvn -PautoInstallSinglePackage clean install

Si usas 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 manera 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.

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

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

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

También debería ver varios paquetes para spa.project.core y core.wcm.components. Son dependencias incluidas automáticamente por el tipo de archivo. Encontrará más información sobre componentes principales de AEM aquí.

Vaya a la consola de Sites: http://localhost:4502/sites.html/content.

La SPA de WKND incluye una estructura básica del sitio con un país, un idioma y una 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.

Para abrir la página us > en > WKND SPA Angular Home Page, seleccione la página y haga clic en el botón Editar de la barra de menús:

Ya se agregó un componente Texto a la página. Puede editar este componente como cualquier otro componente de AEM.

Agregue un componente Text 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 su uso. Se agregarán más en el curso del tutorial.

En el Editor de páginas, haga clic en el menú Información de la página > Ver como publicado:

Se abrirá una nueva ficha 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

Vea el origen 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 se muestra a continuación:

...
<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 proviene el contenido?

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

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:

Debe 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.

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

La solicitud en.model.json representa el modelo de contenido que controlará la aplicación. Inspeccione la salida JSON y debería poder encontrar el fragmento que representa los componentes Texto.

...
":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 JSON de los componentes de AEM a los componentes de SPA para formar la base de la experiencia del editor de SPA de AEM.

NOTE

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