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)|
||Java, Sling, HTML
|AEM Version(s)||AEM 6.1 (SP1)|
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
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
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.
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.
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.
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.
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 Iconic Application to AEM, the application files are stored in the AEM JCR at the following location:
The following illusration shows the Ionic application's files located in the AEM JCR.
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:
and paste it here:
Once you perform this task, your JCR node structure resembles the following illustration.
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:
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.
You can add pages to the mobile application using these templates. The following section discusses how to add pages to an AEM 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 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.
|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).|
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).
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:
Your view should resemble the following illustration.
3. Click on the geometrixx-outdoors mobile applicaton by clicking the geometrixx-outdoors Home tile.
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.
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.
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.
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.
2. From the dialog that appears, click the Manage the PhoneGap Build Configuration icon, as shown here.
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.
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.
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).
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.