Building AEM Mobile Apps – Part 1

This article will show you how to build and compile a mobile app using AEM and the Start Kit provided out of the box.

Requirements
The following are the tools used to build the app of this tutorial:

AEM 6.1
AEM PhoneGap Start Kit (https://github.com/Adobe-Marketing-Cloud-Apps/aem-phonegap-starter-kit)
Apache maven
PhoneGap CLI (version 5.0)
First Steps
AEM provides a project, as the name indicates, “to start” building mobile apps. To use it, just clone (or download and unzip) the package in a local directory.

The folder is named by default “brand_name_placeholder” and should be renamed to match your project’s name. In our case, we changed it to the “App Test”.

Then, by using maven, upload the project by using the command: “mvn -PautoInstallPackage clean install”

At this point, you have a basic functional app ready to build on top of it. This basic app can be found in the apps section of AEM, as shown in the image below:





Structure of the App
By using CRXDE Lite you can view the structure of the app. The following are some nodes that are worth mentioning:

ng-ionic-page
This is the “foundation” of the app, if you read its properties you will find its superType, which references to mobileapps/components/angular/ng-page. The ng-page component is an AngularJS application module that AEM uses to handle AngularJS configuration. As you probably know, Angular is a well-known framework used for Single Page Applications, which is used behind AEM apps. The integration between AngularJS and AEM a powerful mix that can be leveraged.

app-navigation.js
This script handles moving between “pages” of the app. Its importance derives from the service “btford.phonegap.ready” being injected in it. This service catches the event “deviceready” triggered by PhoneGap, returning “a promise” when PhoneGap is fully loaded. It is equivalent to the typical “deviceready” or “ondeviceready”

angular-module-list.js.jsp
This file is directly related to the ng-page inheritance. You can read its full description in https://docs.adobe.com. In short, this is the main module, where you can inject sub-modules of your angular application.

Implementation
Once you have the basic app ready, and you understood its structure, it’s time to have some fun! In this article, I show how to create an app that displays a “Hello world!” message.

Adding Content
Go to your AEM instance, select the application you uploaded, and add a new page.

Then, just drag a “text component” and enter “Hello World!”

Compiling the App
There are two ways to compile apps.

First, AEM provides an easy and very intuitive way to generate executables files (for android and iOS) using a feature called PhoneGap Build. Just click “Build Remote” and you will get the installer for your mobile device.

Second, you can download the source of your project, and build it with PhoneGap Cli. After installing this tool, you just need to execute the command: PhoneGap run <android/ios> and the installer will be generated.

Finished App
After compiling the source and installing the app on your device, it should look like the following (in our case we also included an image with Conexio’s logo:



I hope you find this tutorial useful. In our next post, we will develop a custom component for AEM Apps.

References:

• http://docs.adobe.com/docs/es/aem/6-0/develop/mobile/apps.html
• https://docs.adobe.com/docs/en/cq/5-6-1/developing/mobile/phonegap_integration.html
• http://docs.adobe.com/docs/en/aem/6-1/develop/mobile-apps/apps/single-page-applications.html
• https://docs.adobe.com/docs/en/aem/6-0/develop/mobile/apps/apps-arch.html