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)|
||Maven, nodejs, HTML
|AEM Version(s)||AEM 6.2|
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.
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:
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.
For more information about setting up Maven, see: Maven in 5 Minutes.
A script is available that creates an archive of the mobile app. Perform these tasks:
- Change the working directory to aem-mobile-hybrid-reference\hybrid-app.
- Execute the following nodeJS command: npm install.
- 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.
Ensure you install node.js (http://nodejs.org/) version `>=0.12.x.
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.
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.
After you upload the sample mobile Application to AEM, the application files are stored in the AEM JCR at the following location:
The following illusration shows the mobile application's files located in the AEM JCR.
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:
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.
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.
|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)
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).
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:
Your view should resemble the following illustration.
6. From the menu at the top, click Create, Create Page.
7. Select the Ionic App Page - News Item template and click Next.
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.
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/.
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.
3. This bring you to the PhoneGap Build screen. Click Create Configurations, as shown in this illustration.
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.
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.
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.
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).
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.
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.