Developing and Authoring a basic mobile application using adobe AEM 6.1

Master Mobile Apps Domination With Adobe Experience Manager
March 12, 2015
How to make your AEM sites Web Accessibility Compliant?
February 25, 2017

What is Adobe Experience Manager Apps?

It’s a mobile app development and management platform within Adobe Experience Manager that helps you create and deliver mobile apps for all consumers and devices. From a single view, integrate your apps into your overall marketing strategy.

 

How does Adobe Experience Manager Apps build and deploy?

 

  • AEM integrates with the Adobe PhoneGap Build serviceto simplify the application build and deploy process.
  • ContentSyncenables users to download page and content updates Over-the-Air (OTA) to their devices without having to re-install the application or download from the appStore, Google Play, or other app sources.
  • Adobe Analytics is fully integrated into AEM apps and allows detailed tracking of distribution, geolocation, operating systems, devices, click-streams, time in app, crash reports, iBeacon tracking and more.

 

Why should we use Adobe Experience Manager Apps?

 

Adobe PhoneGap Enterprise uses AEM as a platform and, leverages both Apache

Cordova and Adobe PhoneGap to create and manage content-rich cross-platform mobile applications that take full advantage of both HTML and Native Device Features:

 

  • Manage all your company’s mobile apps in one place. Whether they’re 100% native or a hybrid application, they can be managed within PhoneGap Enterprise.
  • Review apps in development and staging environments without the complexities of provisioning profiles and the extra effort to build and upload your app for sharing.  See the PhoneGap Enterprise App in both the AppStore and PlayStore for how this is easily done.
  • Use the AEM page authoring environment to create and manage rich content for your apps, including single page app (SPA) reference implementations.
  • Use the HTML with Adobe PhoneGap to create a mobile app container, page templates and components with device-native capabilities (including for example, native transitions between pages for a smoother and more performant experience).
  • Build and manage mobile content into new or pre-existing native apps through Cordova Web Viewintegration with Adobe Experience Manager (AEM).
  • Share content across all delivery channels including, web, mobile-web, mobile-app and print. Content is managed within Assets and through Adobe S7 capabilities one can very easily stream (online) or package (offline) images and videos targeting all view ports (size and quality of images and video to support all screen sizes and bandwidth limitations).

 

Below are the steps to create a basic sample app in AEM: –

 

For creating a basic app you can start with basic starter kit provided by adobe in the following link

https://github.com/Adobe-Marketing-Cloud-Apps/aem-phonegap-starter-kit

All the requirements and prerequisites are stated in the above link: –

 

Picture1

 

After cloning the repository you can customize the app name and title: –

 

Picture2

For installing the project onto the AEM instance: –

 

Picture3

After installation onto AEM instance you will find your project in apps folder: –

 

Picture4

Folder structure for mobile apps in AEM

 

Picture5

Content for the app should be in content/phonegap folder for best practices

 

Picture6

You can author the created AEM app from Mobile Apps list console

 

Picture7

From the AEM Mobile Apps Control Center, you can manage your application, view statistics, build, deploy and manage your mobile app content.You can drill into each tile in the Control Center to view or edit details by clicking the ‘…’ in the bottom right corner.

 

Picture8

The Manage App Tile displays your application icon, name, description, supported platforms, call home for updates URL and version information.  You can drill into this tile to edit and maintain the PhoneGap Application Configuration (config.xml) and, prepare your application for submission to the varius application stores for distribution.

 

Picture9

 

Content can be created, updated and deleted in AEM Apps in much the same way you do the same within AEM Sites. The Content Tile displays the number of pages of managed content and last modified. You can drill-into content to create, copy, move, delete and update pages by clicking on each record in the tile.

 

Picture10

Apart from managing content from Mobile App List Console you can also manage it through crxde Lite

 

Picture11

The PhoneGap Build Tile connects with http://build.phonegap.com to build and host remote builds.

Picture12

 

To connect to http://build.phonegap.com you need to configure this tile by creating or using existing adobe ID

 

Picture13

 

After configuring you can build the app remotely or build by downloading the source

 

Picture14

Once built remotely, the build is made available either as a download or directly to your device via a QR code.

 

Picture15

Request Consultation by Submitting the form