Article summary

Summary

Discusses how to get up and running with AEM 6.1 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 Artilce, please ensure that you have installed AEM 6.1 service pack. 

Digital Marketing Solution(s) Adobe Experience Manager (Adobe CQ)
Audience
Developer (intermediate)
Required Skills
Java, Sling, HTML
AEM Version(s) AEM 6.1 (SP1)

Download

Introduction

Adobe Experience Manager (AEM) Mobile lets you create and organize business mobile applications. Using AEM Mobile applications, you can perform tasks such as developing, importing and building mobile AEM applications. You can create a mobile application using a mobile JavaScript framework, such as the ionic framework, and then import the mobile application into Adobe Experience Manager (AEM) 6.1. For more information about AEM Apps, see the AEM documentation: Developing Mobile Applications in AEM.

 This development article walks you through peforming these common AEM Mobile application tasks:

  • how to build a basic Ionic mobile application and import it into AEM
  • how to modify existing AEM Mobile content
  • how to build mobile applilcations using the PhoneGap Marketing Cloud service
  • how to deploy an AEM mobile application to your mobile device
  • how to down the source code of an existing AEM mobile applications

Import a mobile application into Adobe Experience Manager 

Create a mobile application using the Ionic framework. For this purposes of this artilce, the mobile application is a basic mobile application consisting of a playback list, as show

MobileApp2
A basic mobile app built with the Ionic framework

To build this basic mobile application using the Ionic framework, follow steps 1-3 from this online tutorial.

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

 

 

projectFiles
Project files that belong to the mobile Ionic app

These files represent the mobile application that you import into AEM. The next task you perform is to zip up this directory. Make sure that you zip up the top level directory that contains these files. 

Note:

Instead of creating your own Ionic application, you can download and use the sample one that is available for download at the start of this article. 

Upload ionic-starterkit-app to AEM

You can drop and drop the ZIP file that contains the Ionic application into AEM. That is, you can drag and drop the ZIP from your local file system onto the AEM Apps screen.

DnDApps
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.  

 

IonApps2
The Ionic sample application

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

/content/mobileapps/ionic-starterkit-app

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

 

JCRFiles
Ionic Files located in ther AEM JCR

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

Add page nodes to the ionic-starterkit-app

After you upload the ionic-starterkit-app to AEM, you can add pages to the sample application. To add pages to this application, copy this node:

/content/phonegap/geometrixx-outdoors/en

and paste it here: 

/content/mobileapps/ionic-starterkit-app

Once you perform this task, your JCR node structure resembles the following illustration. 

PageStr
JCR nodes under ionic-starterkit-app

Delete the home node and all nodes under it. 

Add the AEM Mobile Apps Package

Install the AEM Mobile Apps package that lets you select templates required to add pages to the ionic-starterkit-app. Without this package, the templates are not available. To install this package,  download and build the package 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 GitHub clone command:

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

This command downloads the forked repository to your local Github folder. 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.

 

packages
Two AEM packages

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

newTemplatges
AEM Mobile Templates

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 Mobile Geometrixx-outdoors 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 example geometrixx-outdoors 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. 

OverviewApps
AEM Apps Overview page

Section Description
A The overview section that describes your AEM mobile application. 
B You can view analytical data related to your app. You must have setup mobile services. For information (this is covered in the Ask the Experts session that is referenced at the start of this article).
C 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)
D 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). 
E Lets you build your AEM App using the configured PhoneGap or download the files. (this is shown in this article)
F Lets you perform push notifications (this is covered in the Ask the Experts session that is referenced at the start of this article). 

Adding a new page to the geometrixx-outdoors application

This section walks you through how to add a new page to the geometrixx-outdoors application. You can add pages that are based on templates and then add components and set the components during Edit mode. In AEM 6.1, 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). 

PreviewMB
A new page added to the geometrixx-outdoors app

To add a new page to the existing geometrixx-outdoors mobile application, perform these tasks: 

1. Click Apps and then click on the geometrixx-outdoors application. Ensure that you are at the following URL:

http://localhost:4502/libs/mobileapps/admin/content/dashboard.html/content/phonegap/geometrixx-outdoors/shell

Your view should resemble the following illustration. 

Apps_Overview
AEM Mobile View

2. Under Manage Content, click English, as shown in this illustration.

ManageContentEn
Manage Content

3. Click on the geometrixx-outdoors mobile applicaton by clicking the geometrixx-outdoors Home tile. 

OpenGear
Open geometrixx-outdoors app

4. Click on Reviews, as shown here. 

Reviews
Click on Reviews

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

6. Select the available geometrixx-outdoors template and click Next. 

7. In the Name field, specify Mountain Bike Review, as shown in the following illustration.  

NewPage
New Apps Page

8. Add the PhoneGap Image component to the new Mountain Bike Review page.

AddComponent
Add the PhoneGap Image component to the page

9. Add an AEM asset located in the AEM Dam to the PhoneGap image component. Search for the asset you want and then drag and drop it onto the image component. The following illustration shows a Mountain Bike image being added to the new Mountain Bike Review page.

MountainBikePic
An image is added to the new page

10. Add a Text component to the page, as shown in this illustration.

textcomponent
An AEM PhoneGap Text component

11. Preview the new page by clicking Preview, as shown in this illustration. 

PreviewPage
Preview an Apps page

Build the AEM mobile application using the Marketing Cloud PhoneGap service

You can build the AEM mobile application by using the configured PhoneGap setting. 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 geometrixx-outdoors application.

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

Setup a PhoneGap remote build service

You can setup a PhoneGap build service so that you can build your AEM mobile applications. You need a user account id and password. For information, see https://build.phonegap.com/.

To setup the PhoneGap build, perform these tasks: 

1. In the PhoneGap build area, click the menu and then select configure, as shown in this illustration. 

PhoneGapBuild
Configure a PhoneGap build

2. From the dialog that appears, click the Manage the PhoneGap Build Configuration icon, as shown here. 

PhoneGapBuild2
PhoneGap Build Configuration

3. This bring you to the PhoneBuild screen located at http://localhost:4502/etc/cloudservices/phonegap-build.html.

4. Click the Available Configurations icon.

5. In the dialog that appears, enter a name for the build. Enter AEMPhoneBuild

6. Click Create. 

7. Enter your build Id in the PhoneGap Build Id field. 

8. Enter the corresponding password value in the Password field. 

9. Test the configuration by clicking the Test PhoneGap Build Credentials button. 

10. If successful, you will see a Connection successful message.

Build the  geometrixx-outdoors 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 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). 

AppRunngInDevice2
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