¿Su aplicación híbrida está lista para Adobe Experience Manager Mobile? is-your-hybrid-app-ready-for-aem-mobile

Ha importado su aplicación híbrida PhoneGap o Cordova en AEM, ¿y ahora qué? Es probable que quiera añadir contenido legible a su aplicación. Para realizar esta tarea, necesita comprender la estructura de una aplicación de AEM. Una aplicación de AEM suele dividirse en dos partes. El “shell” y el “content”. El “shell” comprende 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 que ha importado se almacena como parte del shell. En el contexto de este documento, el shell es todo el contenido creado por el desarrollador de la aplicación híbrida PhoneGap que no es de AEM.

El contenido hace referencia a los componentes, las plantillas y las páginas creadas por el desarrollador de AEM en AEM. El contenido se clasifica como contenido de desarrollador o como contenido creado. Los componentes, diseños y plantillas de página se consideran contenido de desarrollo, ya que los crea un desarrollador. El contenido de autor son páginas que se han creado mediante los componentes y las plantillas. Estas páginas las suele realizar un especialista en marketing o un Designer.

La adición de páginas de AEM creadas a la aplicación híbrida requiere la coordinación entre el desarrollador de la aplicación y el desarrollador de AEM. En cualquier lugar de la aplicación donde desee añadir contenido creado, el desarrollador de la aplicación debe organizar estas páginas en una estructura que se pueda superponer en Experience Manager. El desarrollador de aplicaciones debe poder proporcionar al desarrollador de Experience Manager las rutas en las que se agrega el contenido creado por Experience Manager. A continuación, proporcione una página de marcador de posición en la aplicación híbrida que se sustituya después de que el desarrollador de Experience Manager haya creado el contenido de la página.

Para facilitar el seguimiento de la explicación, se está utilizando AEM Experience Cloud: Referencia híbrida de AEM Mobile para explicar los conceptos. La aplicación de referencia híbrida consiste en una página de bienvenida con un menú lateral.

En este ejemplo, se va a crear la página de bienvenida de la aplicación. Examinando el origen https://github.com/Adobe-Marketing-Cloud-Apps/aem-mobile-hybrid-reference/blob/master/hybrid-app/www/js/app.js#L75. Observe que el desarrollador de la aplicación ha definido una página de bienvenida y ha proporcionado una plantilla para la página que la aplicación representa. En esta página es donde el desarrollador de aplicaciones y el desarrollador de AEM 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 importante porque el desarrollador de AEM creará su página de bienvenida en el repositorio de AEM con la misma ruta.

Es importante que la aplicación híbrida y el contenido creado por AEM utilicen la misma ruta porque se basa en la capacidad de superponer contenido mediante la sincronización de contenido para agregar 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 opciones de sincronización de contenido.

Al “Descargar Source” desde el panel de aplicaciones, estos scripts de ContentSync se ejecutan para montar un archivo de la aplicación híbrida.

ContentSync primero extrae el “shell” de la aplicación, que es donde se almacena todo el contenido desarrollado por la aplicación híbrida. 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 el “content”, las páginas bajo el “shell” se (reemplazan) por las páginas bajo el “content”. Por lo tanto, en el ejemplo de la aplicación de referencia híbrida, si se crea una página en AEM que tiene la misma ruta que “content/mobileapps/hybrid-reference-app/en/welcome.template.html”, cuando se ejecuta ContentSync, se superpone a la página que formaba parte de la aplicación de referencia híbrida. Se superpone con lo que haya en AEM en esa ubicación. ContentSync se encarga de la superposición, por lo que para alguien que utilice la aplicación, las actualizaciones de la aplicación con contenido creado por AEM se verán sin problemas y no requerirán una reconstrucción de la aplicación. Como resultado, al ejecutar la aplicación, la página de bienvenida aparece de la siguiente manera: