¿Su aplicación híbrida está lista para AEM Mobile?

Nota

Adobe recomienda el uso del Editor de SPA para proyectos que requieren una representación de cliente basada en el marco de aplicaciones de una sola página (por ejemplo, React). Más información.

Así que ha importado su aplicación híbrida PhoneGap o Cordova en AEM, ¿ahora qué? Es probable que quiera añadir contenido de creación a su aplicación. Para llevar a cabo esta tarea, necesitará una comprensión general de la estructura de una aplicación AEM. Una aplicación de AEM se divide comúnmente en dos partes. El 'shell' y el 'contenido'. El "shell" está formado por las partes estáticas de la aplicación; como los archivos de configuración de PhoneGap, el marco de la aplicación y los controles de navegación. El contenido del archivo importado se almacena como parte del shell. En el contexto de este documento, el shell es todo el contenido no AEM de su aplicación Híbrido PhoneGap creado por el desarrollador de la aplicación.

El contenido se refiere a los componentes, las plantillas y las páginas creadas que son creadas en AEM creadas por el AEM Developer. El contenido se clasifica como contenido para desarrolladores o como contenido creado. Los componentes, diseños y plantillas de página se consideran contenido de desarrollo, ya que son creados por un desarrollador. author-content son páginas que se han creado con los componentes y las plantillas. Normalmente, los realiza un diseñador o un especialista en marketing.

Para Añadir páginas de AEM creadas en la aplicación híbrida se requiere la coordinación entre el desarrollador de la aplicación y el desarrollador de AEM. En cualquier parte de la aplicación en la que desee añadir contenido de creación, el desarrollador de la aplicación debe organizar estas páginas en una estructura que se pueda superponer en AEM. El desarrollador de la aplicación debe poder proporcionar al desarrollador de AEM las rutas a las que se va a añadir el contenido AEM creado y, a continuación, proporcionar una página de marcador de posición en la aplicación híbrida que se sustituirá después de que el desarrollador de AEM haya creado el contenido de la página.

Para que la explicación sea más fácil de seguir, usaremos el Marketing Cloud AEM: Referencia híbrida de AEM Mobile para explicar los conceptos. La aplicación de referencia híbrida consta de una página de bienvenida con un menú lateral.

chlimage_1-76

En este ejemplo vamos a crear la página de bienvenida de la aplicación. Eche un vistazo a la fuente https://github.com/Adobe-Marketing-Cloud-Apps/aem-mobile-hybrid-reference/blob/master/hybrid-app/www/js/app.js#L75. Vemos que el desarrollador de la aplicación ha definido una página de bienvenida y ha proporcionado una plantilla para la página representada por la aplicación. Aquí es donde el desarrollador de la aplicación y AEM desarrollador deben coordinarse. La ruta a la plantilla de página de bienvenida en la aplicación de referencia híbrida se define como ''content/mobileapps/hybrid-reference-app/en/welcome.template.html''. Esta ruta es extremadamente importante porque el desarrollador de AEM creará su página de bienvenida en el repositorio de AEM usando la misma ruta.

chlimage_1-77

Es importante que la aplicación híbrida y el contenido AEM creado utilicen la misma ruta porque confiamos en la capacidad de superponer contenido mediante la sincronización de contenido para añadir nuevas páginas a la aplicación híbrida. Cuando la aplicación híbrida se importa a AEM como parte del proceso de importación, se configuran las configuraciones de sincronización de contenido.

chlimage_1-78

Al 'Descargar fuente' desde el panel de la aplicación, estos scripts de ContentSync se ejecutan para compilar un archivo de la aplicación híbrida.

chlimage_1-79

ContentSync primero extrae 'shell' de la aplicación, que es donde se almacena todo el contenido desarrollado por la aplicación de la aplicación híbrida y, a continuación, extrae el 'contenido' de la aplicación. Ahora, si hay páginas en el "shell" que tienen la misma ruta que en 'content', las páginas debajo de 'shell' serán (reemplazadas) por las páginas debajo de 'content'. En otras palabras, en el ejemplo de la aplicación de referencia híbrida, si creamos una página en AEM que tenga la misma ruta que ''content/mobileapps/hybrid-reference-app/en/welcome.template.html'' cuando se ejecute ContentSync, se superpondrá a la página que formaba parte de la aplicación de referencia híbrida con lo que esté en AEM en esa ubicación. ContentSync se encarga de la superposición, por lo que para los usuarios que utilicen la aplicación, las actualizaciones de la aplicación con AEM contenido creado se verán perfectamente y no requerirán una reconstrucción de la aplicación. Como resultado, al ejecutar la aplicación, la página de bienvenida aparecerá de la siguiente manera:

chlimage_1-80

En esta página