Article summary

Summary

Discusses how to get up and running with AEM 6.2 mobile applications and perform common tasks such as modifying, building, and deploying mobile applications. 

In addition to reading this community article, it is recommended that you watch the November 2015 Ask the AEM Community Experts on AEM Apps.

NOTE: In order to follow along with this AEM Community Article, please ensure that you have installed AEM 6.2 and you have valid user credentials for the PhoneGap Mobile Cloud Service.   

Digital Marketing Solution(s) Adobe Experience Manager (Adobe CQ)
Audience
Developer (intermediate)
Required Skills
Maven, nodejs, HTML
AEM Version(s) AEM 6.2

Introduction

Adobe Experience Manager (AEM) Mobile provides a complete toolset to rapidly build, manage, and deliver mobile apps that integrate with the Adobe Marketing Cloud so you can measure and optimize app performance. Leverage existing content from multiple sources including the easy-to-use authoring environment of AEM and deliver updates without requiring app rebuilds or resubmissions. Integrate with third-party APIs to extend functionality and connect to critical business systems. Use built-in messaging and analytics to communicate with your audience and track user activity and engagement.

Use AEM Mobile to quickly import an existing mobile application in order to begin instantly managing its content. Learn the techniques that will allow non-technical users to begin authoring content for an existing mobile application and prepare for updates to be published. Take advantage of existing content in AEM that can be re-used in a mobile delivery channel and learn the simple steps to integrate your mobile apps with the Marketing Cloud. Master the use of the AEM Verify tool throughout the entire app development process.

In this development article, you learn how to use AEM and PhoneGap to quickly and easily build your own mobile application, how to test it in simulators for a range of devices, and how to track app usage.

MobileApp
An AEM Mobile application

Download and build the AEM Hybrid Mobile mobile project

The first step is to download and build the AEM Hybrid Mobile project that is located from the following GitHub repository:

https://github.com/Adobe-Marketing-Cloud-Apps/aem-mobile-hybrid-reference

Fork the repository to make a copy of it. Download the forked version by using the GitHub clone command:

git clone git://<URL TO THE FORKED REPOSITOY>

This command downloads the forked repository to your local Github folder. Now you can use Maven to build and deploy the AEM Hybrid Mobile project to Adobe Experience Manager 6.2.

Note:

For more information about setting up Maven, see: Maven in 5 Minutes.

Once done, you will see files on your local file system that resembles this illustration.

 

GitFiles2
AEM mobile project files

Create an app archive

A script is available that creates an archive of the mobile app. Perform these tasks: 

  1. Change the working directory to aem-mobile-hybrid-reference\hybrid-app.
  2. Execute the following nodeJS command: npm install.
  3. Execute the following nodeJS command: npm run zip.

Once done, you will see a message that confirms it was successful, as shown in the following illustration.

jsnode
Console window

Note:

Ensure you install node.js (http://nodejs.org/) version `>=0.12.x.

Import the AEM Hybrid Mobile app

You can drop and drop the hybrid-app.zip file that contains the AEM Hybrid Mobile application into AEM. That is, you can drag and drop the ZIP from aem-mobile-hybrid-reference\hybrid-app onto the AEM Apps screen located at http://localhost:4502/aem/apps.html/content/mobileapps.

dropApp
A mobile app being dragged and dropped into AEM

Once you upload your mobile application to AEM, you can click on the application (from the AEM Apps screen) and then you see an AEM Apps screen that resembles the following illustration.  

 

dropApp3
The AEM sample mobile application

After you upload the sample mobile Application to AEM, the application files are stored in the AEM JCR at the following location: 

/content/dam/mobileapps/hybrid-reference-app

The following illusration shows the mobile application's files located in the AEM JCR.

 

crxdelite2
Mobile Files located in the AEM JCR

Once you import the application into AEM, you can modify it as described in this article. 

Add the AEM Mobile Apps Package

Install the AEM Mobile Apps package that lets you select templates required to add pages to AEM Hybrid Mobile. Without this package, the templates are not available.

Change the working directory to:

aem-mobile-hybrid-reference\aem-package 

Use Maven to build and deploy two AEM packages by using the following command:

mvn -PautoInstallPackage clean install

This command builds and installs these two packages.

 

appPackages2
Two AEM packages

Once you install these two packages, you have access to these templates to build pages. 

Note:

You can add pages to the mobile application using these templates. The following section discusses how to add pages to an AEM mobile application. 

Modify the AEM Hybrid Mobile application

You can modify AEM Mobile Applications in a similar way as AEM web applications. That is, you can drag and drop AEM components into AEM Mobile application pages. This section uses the AEM Hybrid Mobile application to teach you how to add content to an AEM mobile application. 

Before you modify AEM mobile applications, it is important that you are familiar with the AEM Apps environment. 

OverviewPage
AEM Apps Overview page

Section Description
A The overview section that describes your AEM mobile application. 
B You can manage your content in this section. For example, you can add a new page to your AEM mobile application from this section. (this is shown in this article)
C Provides information about Content Release related to your application. For example, you can push updates to your AEM mobile applications. (this is covered in the Ask the Experts session that is referenced at the start of this article). 
D Lets you build AEM Apps using Managed Cloud Services (this is covered later in this development article). 
E Lets you build your AEM App using the configured PhoneGap or download the files. (this is shown in this article)

Adding a new page to the AEM Hybrid Mobile application

This section walks you through how to add a new page to the mobile application. You can add pages that are based on templates and then add components and set the components during Edit mode. In AEM, you can edit mobile applications using the Touch UI.

Once you add all of the AEM components to a new page, the content becomes part of your application and is displayed on a deployed mobile device (shown later in this article). 

IPhoneEm
A new page added to the AEM Hybrid Mobile app

To add a new page to the AEM Hybrid Mobile application, perform these tasks: 

1. Click Apps and then click on the AEM Hybrid Mobile application. Ensure that you are at the following URL:

http://localhost:4502/libs/mobileapps/admin/content/dashboard.html/content/mobileapps/hybrid-reference-app/shell 

Your view should resemble the following illustration. 

OverviewPage1
AEM Mobile View

2. Under Hybrid Reference App, click English, as shown in this illustration.

EnPage
Manage Content

3. Click on the mobile applicaton by clicking the Welcome tile. 

WelcomePage
Click the Welcome page

4. Click on News and Events, as shown here. 

NewsEvents
Click on News and Events

5. Click on The News.

News
Click on News

6. From the menu at the top, click Create, Create Page. 

7. Select the Ionic App Page - News Item template and click Next. 

 

NewTemplate
Mobile template

8. In the Name field, specify Healthy Activity, as shown in the following illustration.  

Health
New Page

9. Click on Drag components here and then select Image component, as shown here.

NewImageComponent
AEM Image component

10. Drag an image from the side rail onto the new page.

DnDImage2
Dragging an image on a mobile page

11. Add a text component and type:  An Active Family is a Healthy Family.

TextComponent
Text Component

12. Click the Emulator button and you will see the image, as shown in the following image.

IPhoneEm
New page is displayed in an Emulator

13. Preview the new page by clicking Preview. 

Build the AEM mobile application using the Marketing Cloud PhoneGap service

You can build the AEM mobile application by using a configured Marketing Cloud PhoneGap service. Using the Digital Marketing PhoneGap build setting, you can setup a remote build service and then use this service to build the AEM mobile application. After you finish building the applicaton, a barcode appears that you can use to download the mobile application onto your local device.

The following illustration shows the barcode for the AEM Hybrid Mobile application.

barCode
A Barcode that lets you install an AEM mobile application on your mobile device

Configure Manage Cloud Services to build the mobile application

You can configure Managed Cloud Services to build the AEM mobile app. This uses the PhoneGap cloud service. You need a user account id and password. For information, see https://build.phonegap.com/.

 

Manage Cloud Services
Manage Cloud Services

To configure Managed Cloud Services to build the AEM mobile app, perform these tasks: 

1. In the Managed Cloud Services area, click the + icon, as shown in this illustration. 

MCS
Managed Cloud Services

2. Click the PhoneGap Build  and click Next, as shown here. 

PhoneGap
PhoneGap Build Configuration

3. This bring you to the PhoneGap Build screen. Click Create Configurations, as shown in this illustration.

PhoneGap1
PhoneGap Configuration

5. In the dialog that appears, enter these values:

  • name for the build. Enter AEMPhoneBuild
  • your build Id in the PhoneGap Build Id field.
  • the corresponding password value in the Password field. 

9. Test the configuration by clicking the Verify button. 

10. If successful, you will see a checkmark icon in the Verify button.

11. Click the Submit button. 

Once successfully configured, you will see the new configuration in the Managed Cloud Services area. 

MCS1
Managed Cloud Services area displaying a configured account

Build the AEM Hybrid mobile application

To build an AEM mobile application, select the Build Remote option from the drop-down menu. 

PhoneGapBuildRemote
Build Remote option

To build an AEM App using the PhoneGap build service, perform these tasks:

1. From the PhoneGap Build section, click the menu.

2. Select the Build Remote. While the mobile application is building, you will see a build message. 

Building
A PhoneGap build message

3. Once done, you will see a barcode (see the illustation at the begining of this section). 

Deploy the AEM mobile application to your device

You can deploy the mobile application to your mobile device. The supported devices are Android devices or IOS devices. To deploy the AEM mobile application to your mobile device, install a QR reader application on your device. Then simply scan the barcode in the PhoneGap build section using the QR reader. 

ScanQRCode2
A device installing the geometrixx-outdoors app

After you install the application following the instructions on your device, you are able to run the app in the physical device, as shown in the following illustration (this is the new page created in this article running on an Android device). 

MobileApp
An AEM App running in an Android device

Download the mobile application source code

You can download the mobile application source code (including the changes made in AEM) to your local developer environment. Once downloaded, you can use it like any other mobile applicaiton project. You can submit it to the Android Playstore for example. For information, see https://play.google.com/apps/publish/signup/.

To download your application's source code, from the PhoneGap build menu, click Download source

See also

Congratulations, you have just got up and running with AEM mobile applications and performed common development tasks, such as modifying an application and deploying it to your physical device. Please refer to the AEM community page for other articles that discuss how to build AEM services/applications.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy