Votre application hybride est-elle prête pour AEM Mobile ?

REMARQUE

Adobe recommande d’utiliser l’éditeur d’application d’une seule page (SPA) pour les projets nécessitant un rendu côté client basé sur la structure SPA (par exemple, React). En savoir plus.

Vous avez importé votre application PhoneGap hybride ou Cordova dans AEM, et maintenant ? Il est probable que vous souhaitiez ajouter du contenu modifiable à votre application. Pour accomplir cette tâche, vous aurez besoin d’une compréhension générale de la structure d’une application AEM. Une application dans AEM est généralement divisée en deux parties. "shell" et "contenu". Le "shell" comprend les parties statiques de votre application ; tels que les fichiers de configuration PhoneGap, la structure de l’application et les commandes de navigation. Le contenu de l’archive que vous avez importée est stocké dans le shell. Dans le contexte de ce document, le shell est tout le contenu créé non AEM de votre application PhoneGap hybride créée par le développeur de l’application.

Le contenu fait référence aux composants, aux modèles et aux pages créées dans AEM générés par le développeur AEM. Le contenu est classé comme contenu de développement ou comme contenu créé. Les composants, conceptions et modèles de page sont considérés comme du contenu de développement puisqu’ils sont créés par un développeur. author-content sont des pages qui ont été créées à l’aide des composants et des modèles. Elles sont généralement effectuées par un concepteur ou un spécialiste du marketing.

L’ajout de pages d’AEM créées à votre application hybride nécessite une coordination entre le développeur de l’application et le développeur AEM. Partout dans l’application où vous souhaitez ajouter du contenu créé, le développeur de l’application doit organiser ces pages dans une structure qui peut être superposée dans AEM. Le développeur de l’application doit être en mesure de fournir au développeur de l’AEM les chemins d’accès vers lesquels le contenu créé AEM doit être ajouté, puis fournir une page d’espace réservé dans l’application hybride qui sera remplacée après que le développeur de l’AEM a créé le contenu de la page.

Pour faciliter le suivi de l’explication, nous utiliserons le Marketing Cloud AEM : Référence hybride AEM Mobile pour expliquer les concepts. L’application de référence hybride est composée d’une page de bienvenue avec un menu latéral.

chlimage_1-76

Dans cet exemple, nous allons créer la page de bienvenue de l’application. Consulter la source https://github.com/Adobe-Marketing-Cloud-Apps/aem-mobile-hybrid-reference/blob/master/hybrid-app/www/js/app.js#L75. Nous constatons que le développeur de l’application a défini une page de bienvenue et fourni un modèle pour la page rendue par l’application. C’est là que le développeur de l’application et le développeur AEM doivent se coordonner. Le chemin d’accès au modèle de page de bienvenue dans l’application de référence hybride est défini sur "content/mobileapps/hybrid-reference-app/en/welcome.template.html". Ce chemin d’accès est extrêmement important, car le développeur AEM va créer sa page de bienvenue dans le référentiel AEM en utilisant le même chemin d’accès.

chlimage_1-77

Il est important que l’application hybride et le contenu créé AEM utilisent le même chemin d’accès car nous comptons sur la possibilité de superposer du contenu à l’aide de la synchronisation de contenu pour ajouter de nouvelles pages à l’application hybride. Lorsque l’application hybride est importée dans AEM dans le cadre du processus d’importation, les configurations de synchronisation du contenu sont configurées.

chlimage_1-78

Lorsque vous "Téléchargez la source" depuis le tableau de bord de l’application, ces scripts ContentSync sont exécutés pour assembler une archive de votre application hybride.

chlimage_1-79

ContentSync extrait d’abord "shell" de l’application, où est stocké tout le contenu développé par l’application Hybrid, puis extrait le "contenu" de l’application. Désormais, si des pages de l’interpréteur de commandes ont le même chemin que dans "contenu", les pages situées sous "contenu" seront (remplacées) par les pages situées sous "contenu". En d’autres termes, dans l’exemple d’application de référence hybride, si nous créons une page dans AEM qui a le même chemin que "content/mobileapps/hybrid-reference-app/en/welcome.template.html" lorsque ContentSync s’exécute, elle recouvrera la page qui faisait partie de l’application de référence hybride avec tout ce qui se trouve dans AEM à cet emplacement. La superposition est prise en charge par ContentSync. Pour les utilisateurs de l’application, les mises à jour apportées à l’application avec AEM contenu créé apparaissent de manière transparente et ne nécessitent pas de reconstruction de l’application. Par conséquent, lorsque vous exécutez l’application, la page de bienvenue s’affiche comme suit :

chlimage_1-80

Sur cette page