Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.

How to create the project set up for AEM Hybrid Mobile App Development and creating app template and /en node configurations

Avatar

Level 2

Hi All

We have started project for developing the hybrid mobile app using AEM 6.2 and Phone Gap.

Can you please provide guidance on how to start with project frame work set up for AEM mobile hybrid app development as how we do for AEM sites project using Maven archtype

Below are the few researches we have done on setting up the project for AEM mobile hybrid mobile app development.

  1. 1. We have gone through the sample AEM and Phone gap starter kit on Github

https://github.com/Adobe-Marketing-Cloud-Apps/aem-phonegap-starter-kit

We downloaded this starter kit and build it using maven and deployed it in AEM, then published the apps/brand_name_placeholder app using AEM phone cloud service which generated the .apk file and which we are able to install on smart phone and app started rendering on mobile

  1. 2. We have tried the creating the mobile app structure from scratch using Phone Gap project and modifying the phone gap files like config.xml and adding content synch configurations to phone gap project by following https://github.com/Adobe-Marketing-Cloud-Apps/aem-mobile-hybrid-reference/wiki/Adding-OTA

  1. 3. Added en page by copying from aem-mobile-hybrid-reference-master\hybrid-app\www\content\mobileapps\hybrid-reference-app

  1. 3. We zipped the total phone gap project and uploaded in the AEM

  1. 4. When we built the custom AEM app created using AEM phone gap cloud service and installed it in smart phone, the app is not showing up on smart phone.

The major difference between the starter kit and the app created by us is

  1. 1.    The starter kit is having the App template under project in /app directory which we are not able create

  1. 3.    The starter kit is having /content/mobileapps/app_name_placeholder/en node created which is having configurations related to angular which we are not able create.

1138734_pastedImage_5.png1138735_pastedImage_7.png

  1. 4.    Whenever we import the phone gap project into the AEM it is only creating shell node under content/mobileapps/ directory but not en node, even we add it manually by copying from hybrid reference from Github it is rendering on mobile.

         

If anybody has done this kind of work , can you provide guidance on project set up for AEM + Phone Gap hybrid mobile app development, creating app template and /en node configurations and enabling content synch for mobile app.

0 Replies