AEM Mobile - AEMM

Monday, 7 August 2017

Difference between Adobe Experience Manager Mobile(AEM Mobile) and PhoneGap.

AEM Mobile Vs PhoneGap.

Technical clients come up with a common question, what is the difference between AEM Mobile and PhoneGap?

Adobe PhoneGap is a powerful opensource platform for creating and publishing multi-platform mobile apps. Web technologies like HTML and CSS are used to build apps which are wrapped in a native app wrapper.

AEM Mobile is one of the new entrant in mobile technology which enables enterprise organizations to produce, manage and maintain their mobile apps through a unified dashboard, which in turn reducing time to market and making it easier for organizations to engage audiences quicker. AEM Mobile collaborates PhoneGap Enterprise and Adobe Digital Publishing Suite with AEM Apps to make an app which changes an enterprise customers essential for the business.

Differences:

PhoneGap

Need web development skills like HTML,CSS, Javascript.
Opensource. So great community support.
PhoneGap supports quick test and preview of the changes on iOS and Andriod.
With PhoneGap, we need to do some HTML / JavaScript / CSS coding to design and build an app that works on any platform.
Phonegap supports third party data integrations.
PhoneGap Build service can be utilized by AEM Mobile for quicker app installation/updates.

AEM Mobile

No need of web development skills to work on basic AEM Mobile apps.
AEM Mobile is licensed, with Adobe community support available.
Using AEM Mobile, we can build an app from scratch without any coding and have it on devices in a minutes with less effort.
AEM Mobile once built, helps to add content to the app without rebuilding, and many build options like iOS, Android, Windows, or the Web available.
AEM Mobile helps even a non IT person to create content with existing or new data through template-based authoring.
AEM Mobile provides a dashboard to manage various operations of an app.
AEM Mobile helps to develop and deliver apps for iOS and Android quickly compared to other technologies.
AEM Mobile has power to extend some of the most used Cordova Plugins to include in the app; also new plugins are easy to create.
AEM Mobile provides option to instant update of apps and its content.
AEM Mobile can be easily connected to other Adobe cloud tools like analytics, Test and Target.
AEM Mobile provides API support to integrate third party applications like login, authentication etc.

Both

Both PhoneGap and AEM Mobile supports Apache Cordova plug-ins to access native device APIs such as GPS, camera, contacts etc. AEM Authored data can be pulled to PhoneGap and AEM Mobile by configuring.

Read More:

AEM Mobile integration with third party applications

AEMM: How to create custom authentication

Various options in AEM integrated with AEM Mobile On-Demand Portal

Add/MAP user to AEM Mobile project

Create Article/Banner from AEM and publish it to AEM Mobile

Integrate AEM with AEM Mobile

Create an APP in AEM And Mapping with AEM Mobile On-Demand

AEM Mobile Interview questions for developers

Adjusting Home Navigation Menu from AEM Mobile On-Demand portal

Friday, 28 April 2017

AEM Mobile app with PhoneGap

AEM Mobile app with PhoneGap

An app in AEM is commonly divided into two parts.

'shell'
'content'

Shell:

The shell in high level is all the non-AEM authored content of a Hybrid(cross platform) PhoneGap app built by the app developer.

The 'shell' is a part which has the static parts of the app; Real world examples could be PhoneGap configuration files, the navigation controls, and the app framework. Any content of the archive that we import are stored as part of the shell.

Content:

Content includes the components, templates and authored pages that are authored in AEM built by the AEM Developer. Content is categorized as either developer content or as authored content.

Developer Content: Designs, page templates, and components are considered to be dev content since they are built by a developer.

Author Content: Pages that are built using the design, components and templates are referred as author content.

Generic Phone gap CRX site structure is given below

What are the general difference between Phonegap, Cordova, Ionic Framework, React Native?

Phonegap / Apache Cordova is a framework for developing hybrid mobile application using HTML5 and JavaScript.

Ionic that uses apache cordova (phonegap) for accessing mobile hardware (api) such as camera, contacts, Accelerometer, Vibration and more.

Ionic comes with Angular, which has a beautiful UI Components for mobile applications.
Ionic Framework is a framework functions based on Cordova, comes with a set of standard controls that has power of native controls.

To be complete, NativeScript and React Native are cross platform development environments that feel somewhat like hybrid, in that they use web frameworks or view layers (Angular 2 and React), but they don't rely on a WebView, and are therefore native approaches that simply rely on JavaScript instead of the native language on each platform.

Read More:

AEM Mobile integration with third party applications

AEMM: How to create custom authentication

Wednesday, 22 March 2017

Parameters involved in Sign In and Login Scripts

Parameters involved in Sign In and Login Scripts

In previous post we have given the details of Generic Identity Sign In. Here we will give details on parameters involved in Sign in with the sample script which helps login functionality.

Click on image to see it big

redirectUrl – the callback URL that the sign-in UI will need to use to redirect the user to the app based on successful or failure login.
projectId – project ID mentioned in On-Demand portal
appId – the app bundle ID mentioned in projects ettings
appVersion – the version of the Runtime app
uuid – application running device's UUID

In the device we need to get the redirectUri, so that we can redirect the user to app home page on login. Below code retrieves the redirectUri and saves it in appData.

Code to get redirect URL
var urlParam = window.location.search.substring(1);
urlParam = decodeURIComponent(urlParam);
var appData = {};
if (urlParam !== '') { // fail-safe
var param, paramList = urlParam.split('&');
for (var index in paramList)
{
param = paramList[index].split('=');
if (param.length === 2)
{ // fail-safe
appData[param[0]] = param[1];
}
}
}

Code for redirect:

function login() {
//Use a call to your db and check user credentials are valid. If it is success set the user values to a property called 'uservalues'
function success(uservalues) {
var authToken = JSON.stringify(uservalues); // uservalues which is a collection of information to a specific user
window.location = appData.redirectUri + '?authToken=' + authToken;
else{
window.location = appData.redirectUri + '?error="Internal Error"';
}
}

Read More:

AEM Mobile integration with third party applications

AEMM: How to create custom authentication

Setting up custom analytics in AEM Mobile

Setting up custom analytics in AEM Mobile:

Custom analytics works based on the events transferred during page load/application launches. AEM Mobile apps can be configured to read custom events and send data to Analytics as per our needs. For eg: AEM Mobile analytics provides the 'count of article views' by default. But it does not provide 'user specific article view' in analytics.

We need to define the custom events through Mobile Marketing Dashboard and its processing rules. Once this is done, we can send these pre-configured custom analytics events from within our AEM Mobile HTML content.

Below diagram shows an over view of custom analytics in AEM Mobile

Click on image to see it big

Basic requirements:

1). License for Mobile Marketing SDK(Part of Digital Marketing Cloud).

2). The user who configures the custom analytics events must be an admin for the report suite in Adobe Analytics (with process rule edit permission).

3). The articles which are sending custom events must be pre-configured for extensibility features by default. [On-Demand Portal> Content & Layouts> Content> Article Properties> Article Metadata> Enable Extensibility Features check box selected]

Read related posts

Integrate Analytics with AEM Mobile

Default reports available through AEM Mobile

Steps for Setting up custom analytics

1) Mobile Marketing Dashboard configurations:

In Mobile marketing dashboard (https://mobilemarketing.adobe.com/) Manage App Settings> Manage Variables & Metrics>Custom Metrics.

Custom Metrics: select an event number , enter an event name, and select type 'Whole Number'

Custom Variables: select an evar number, enter an evar name, select Tracking Call for persistence value from the drop-down.
Save the changes, rebuild your app in order for the changes to take place.

2) Configurations on Adobe Analytics (Omniture)

Omniture Step1:

Login to Omniture(https://my.omniture.com/login/), Admin> report suites> select your report suite. Then Edit Settings > Conversion > Success Events.

Click on Add New. Type an event name, and select the type Counter for the newly added event and save the configuration.

Omniture Step2:

Defining processing rules: Once the admin configures the custom analytics events and its evars, next step is adding Processing Rules for the newly created events and evars.

In Omniture Admin> Report Suite > Select the relevant report Suite > Edit Settings > General > Processing Rules

Select an existing rule and Add Rule > Add Action. Configure the action to set the custom event to 1 if the condition below is met. Here we are setting action to send user defined string to send the event.

Again Add Rule to create a new rule for evars, Add Action. Then configure the action to overwrite the custom evar with the evar to be used to send the event.

Save the changes, rebuild your app in order for the changes to take place.

3) Adding custom events to HTML content

Once the custom events, its evars, and processing rules are defined, we are done with configurations. Now we need to modify the HTML so that it can handle the analytics configurations.

Ensure extensibility features are enabled for your HTML content in On-Demand Portal.

i) Include the Analytics SDK in your pages.

Add below line in your article HTML in the <head> tag.
<script type="text/javascript" src="cordova.js"></script>

ii) Send the Custom Event

Now configure your HTML content to send the custom event, for e.g. if you are sending the login event to analytics,
ADB.trackAction("login", {"evar51":"user-defined value"}, {"user":"testuser","remember":"true"});

The login event uses evar51 with its own set of parameters to recognize the event.

In the Back-end, when an event happens, Processing Rule increment the count of the corresponding event and the previously defined values will be overwritten with the values the user set in evar51.

Debugging the issues:

Analytics may not be appearing due to below reasons:

Any change in Mobile Marketing Dashboard, Omniture, needs rebuild of app in order for the changes to take place.
Check the extensibility features are enabled for analytics tracking.

Read More:

Parameters involved in Sign In and Login Scripts

Thursday, 9 March 2017

AEM Mobile with Login Functionality

Custom authentication Using Generic Identity Provider in AEM Mobile

AEM Mobile supports different ways of Sign in in to the application. Below are the three methods which can be integrated for AEM Mobile login functionality.

SAML 2.0 (Gigya, MFA/OKTA)
OAuth 2.0 (Facebook, Google id's)
Generic

AEM Mobile fetches authorization tokens from these identity providers, which you can use in your entitlement service to authorize users to content. AEM Mobile provides many APIs for Sign in procedures; For eg 'setAuthToken' 'isAuthenticated', 'launchSignInUI' etc.

Here we are going to understand the Generic identity provider implementation and it supports two types of login. First one is using a separate HTML form which is hosted in internet and second method using Sign-in in experience in an AEM Mobile article itself.

Generic Identity Provider Implementation.

Click on image to see it big

When users tap on Sign In button from the AEM Mobile app menu, the users are redirected to the provided sign-in UI. The Sign In HTML will have login functionality written, so that the code calls the DB and verify the user information and if it is a successful login, the user is redirected to app Home page with additional authToken Parameters. The authToken can be any String which holds multiple values related to User like user id, user location, user preferences etc.

The token can be a JSON file(Stringify this before passing to AEM Mobile as authToken) as given below. In AEM Mobile app, we can retrieve this authToken and read values, and use this values if required to set some additional features. For eg. say we need to set articles based on Geo of 'LA', so that only LA user will be able to see this content after login. We can send the authToken with below JSON and check in app for geo location. If it matches the geo 'LA' then display the article.

{
"UserArray":[{
"UserName":"user1",
"userGeo":"LA",
"userAge":"23",
"userLastLogIn":"04-04"
}

]
}

Steps involved in setting up Generic Identity Provider.

Step 1: Create Login HTML

Create HTML Page with login functionality. Below given a sample HTML form page.

<html>
<head>
</head>
<body>
<form method="post" onsubmit="login();">

<input type="text" name="username">
<input type="password" id="password">

<input type="submit" value="Login" />

<script>
//You code which will call login functionality and verify the submitted user credentials by invoking DB.
// If login is success set the authToken and redirect the user from Login UI page to app home page.
//A sample code is available in next page of the blog. Parameters involved in Sign In and Login Scripts
</script>
</body>
</html>

Step 2: Host the Login HTML in you internet site.

We can place the login HTML to any internet facing site, so that we will have a new login URL like www.yourdomain.com/login.html. Ensure this is accessible through app.

Step 3: Configure the Identity Provider

Once the Login UI is ready and hosted, get the URL. Go to Master Settings of On-Demand portal > Identity Providers tab

Identity Provider Name: Generic
Identity Provider Type: Generic

In the next 'Generic setup' screen, provide below details.

Authentication URL *: The URL Where you have hosted the login UI.
Default Session Expiry : You can leave this blank (Number of seconds that a successful sign-in is valid)

Save the configuration.

Step 4: Enable Custom Authentication in On-Demand portal

Go to project Settings in On-Demand Portal > Select the project to be edited, click on Edit and go to 'Access' tab.
Enable the check box under section 'Custom Authentication'
Select identity provider 'Generic'
Add a bundle ID under section 'Entitlement & Authentication' (This ID will be sent when apps request entitlement or authentication information)

Step 5: Build the app(not a preflight app) sign it, and test it as described here.

Read : Parameters involved in Sign In and Login Scripts

Read More:

Authoring AEM Mobile Article from Custom Third party applications.

AEM Mobile on-Demand portal allows third party application authoring though the APIs provided. We can have either a CMS plugin(wordpress or joomla) which talks to the API or a complete Web-based authoring solution for the same.

Using the on-Demand API's services, we can manage:

Articles
Collections
Products
Push notifications

Authoring Orchestrator
Let us see the steps involved in setting up a web based authoring application system (I call it 'Authoring Orchestrator') for AEM Mobile. One of the major condition to run this application is that we need a public hosted server so that our application files can be deployed over internet.

Step 1:

Download the On-Demand Services API files : This set of files contains API Documentation, Examples etc.

Step 2:

Get the API Keys, generate Device ID, Device Token

To access the On-Demand Services API, you need to request an API key through the form specified. If you need further assistance, please let us know thorough the comment section.

Step 3:

Update /aemmobile-api-examples/config/credentials.php for below details

i) Update the values for ‘client_id' (with API Key), 'client_secret';
ii) Update the value for 'device_token', 'device_id' received from the AEX service.
iii) Provide a value for 'client_version' (It can be like 'aemmobile-orchestrator-api-doc-1.0');

Step 4:

Deploy the file folder in hosted server so that files are available over internet. The url could be
www.yourserverpath/aemmobile-api-examples/demo/index.php

Step 5:

Test the set up.
We can call the test file using below url

www.yourserverpath/aemmobile-api-examples/demo/01_get_access_token.php

This url returns back the access token if your set up is correctly configured.

Copy the 'access_token' returned in previous example and update file /aemmobile-api-examples/config/credentials.php

Now access www.yourserverpath/aemmobile-api-examples/demo/02_get_user_permissions.php, which returns the project id.

Update the file /aemmobile-api-examples/config/parameters.php 'publication_id' with previously retrieved project ID.

Now call www.yourserverpath/aemmobile-api-examples/demo/03_update_home_collection.php will return the top-level collections.

We can call all tests provided at www.yourserverpath/aemmobile-api-examples/demo/index.php in a similar manner.

Above tests ensures that we have configured the 'Authoring Orchestrator' correctly.

Step 6:

Create a form(which can be HTML or PHP) which takes the article details and post it to relevant API.

In this case you need an html or PHP form which takes all article meta-data like Article Name, Article Title etc. On submission, you need to post this data by referring relevant on-demand API file.

For eg: If we are creating a new article we need to post the data to '/aemmobile-api-examples/article/create_article.php'

Once the article is created, we can have similar operation for image updation and .article file upload for the newly created article.

This 'article' folder contains article operations like, create article, delete article, get article list, get article metadata, publish article, upload article etc.

Similarly there are many directories which helps us to operate on authentication, banner, card, collection, image, layout, project etc.

Facing difficulty in configuring on-Demand API? Let us know through comments.

Read More:

Angular JS Implementation for AEM Mobile Articles

AngularJS Articles in AEM Mobile

AEM Articles are normal HTML articles and it supports any front end technology, which a normal web page supports.

In this post, we will see how we can create an Angular JS article in AEM Mobile.

What is AngularJS?

Angular JS is a new Javascript technology which can be added to any HTML by adding relevant Angular library inside <script> tag.
Angular adds Directives to HTML page, and binds data to page with Expressions.

How to add AngularJS in an article?
AEM Mobile article structure contains an index.html with js, css, images, lib folders. This structure is used to create .article file using AEM Mobile packager.

Steps to create angular article:

Get Angular

We need to get latest AngularJS library from AngularJS website. Download 'angular.min.js' and any required angular additional libraries to your /js directory in article folder.

Create Controller

Now create a file controller.js in /js folder and add below code.



var app = angular.module("myFirstAngular",['ngSanitize'], function ($compileProvider) {

$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file):/);

});
app.controller("controller",function($scope,$window,$sce){

$scope.personsList =[
{name:'John',age:'23'},
{name:'Jannet',age:'24'},
{name:'Mark',age:'25'}
];
}
);

Update index file of article to involve AngularJS in article

Add angularJS libraries in your index.html. Below we have added sanitizor also which helps to sanitize the urls.

<head>
<script src="js/angular.min.js"></script>
<script src="js/angular-sanitize.min.js"></script>
</head>

Define body element which refers the controller and app.

<body ng-app="myFirstAngular" ng-controller="controller">

Add AngularJS code (which is of syntax 'ng-')

<div ng-repeat="person in personsList">
<div class = "your class">
<p class="name">{{person.name}}</p>
<p class="age" >{{person.age}}</p>
</div>
</div>

Save and upload to AEM - On-demand Portal

Save all the files, drag and drop it to AEM Mobile Packager. Your angular '.article' file is ready. Upload this to AEM - On-demand portal.

When you use AngularJS, you may face issue in adding 'navto' as cross browser call.
Just add 'navto' in aHrefSanitizationWhitelist so that it gets white listed.

Read More: