APACHE SLING & FRIENDS TECH MEETUP 
BERLIN, 22-24 S EPTEMBER 2014 
Mobile app development with Apache Cordova and AEM 
Bruce Lefebvre, Adobe
Hello 
@brucelefebvre 
adaptTo() 2014 2
<% 
agenda.jsp 
out.println("<h1> 
AGENDA 
</h1>" 
+ 
"<ul> 
" 
+ 
" 
<li> 
Problem? 
</li>" 
+ 
" 
<li> 
Solution 
" 
+ 
" 
<ul> 
" 
+ 
" 
<li> 
Cordova 
</li>" 
+ 
" 
<li> 
+ 
Sling 
</li>" 
+ 
" 
<li> 
+ 
AEM 
</li>" 
+ 
" 
</ul> 
" 
+ 
" 
</li> 
" 
+ 
"</ul> 
"); 
%> 
adaptTo() 2014 3
4 
Problem?
Java 
C#, 
C++ 
Objec3ve-­‐C 
Java 
2014 
adaptTo() 2014 5
????? 
2016 
adaptTo() 2014 6
Goal: Avoid proprietary vendor traps 
adaptTo() 2014 7
The Open Web 
§ Opinion: The web solved crossed platform 
§ Open & standardized (for the most part) 
adaptTo() 2014 8
Goal: Presence in app store(s) 
adaptTo() 2014 9
Enter Hybrid Applications 
§ Web app wrapped in a device native shell 
§ Write once, run everywhere* 
§ *aka “the promised land” 
Na3ve 
SDKs 
adaptTo() 2014 10
But… Web vs. Native! 
§ Both built on the same set of technologies 
§ Web capabilities sufficient for most apps 
“If a browser doesn’t do something its not because it can’t; 
it’s just because we haven’t gotten around to implementing that part yet.” 
-Brian LeRoux 
adaptTo() 2014 11
But the web can’t… 
§ Access device features, like: 
§ Camera 
§ Device motion 
§ File system 
§ Location 
§ Provide background notifications 
§ Render without connectivity 
§ or even poor connectivity 
§ Or can it? 
adaptTo() 2014 12
Enter Apache Cordova 
Build apps with web tech you know and love 
adaptTo() 2014 13
Cordova 
§ A cross-platform app framework 
§ Initially PhoneGap, created by Nitobi 
§ Donated to ASF in 2011 as Cordova 
§ of which PhoneGap is a distribution 
adaptTo() 2014 14
Cordova 
§ Supported platforms 
§ iOS 
§ Android 
§ BB10 
§ WP7, WP8, Windows 8 
§ Amazon Fire OS 
§ Tizen 
§ and more… 
adaptTo() 2014 15
Cordova Plugins 
§ Device APIs: 
§ Camera 
§ Geoloca3on 
§ Accelerometer 
§ File 
§ Contacts 
§ Events 
§ Connec3on 
§ No3fica3on 
§ Storage 
§ InAppBrowser 
§ Device 
§ Compass 
§ Globaliza3on 
adaptTo() 2014 16
Cordova CLI 
§ Command line interface features 
§ Bootstrap a new app 
§ build/install/run app on a 
specific platform 
§ Locally 
or 
via 
PhoneGap 
build 
§ Manage plugins 
adaptTo() 2014 17
Let’s give it a try 
adaptTo() 2014 18
Cordova CLI at a glance 
§ Create your app: 
cordova create helloAdaptTo 
§ Add a platform: 
cd helloAdaptTo 
cordova platform add ios 
§ Run your app on a simulator: 
cordova emulate ios 
adaptTo() 2014 19
Cordova + Sling 
§ Goals: 
§ Repurpose existing content 
§ Fetch & present data with 
minimum server side 
customization 
§ Authenticate with the server 
adaptTo() 2014 20
Cordova + Sling 
§ Bonus goals 
§ Post content from device 
§ Be indistinguishable from 
a native app 
§ Offline access to content 
adaptTo() 2014 21
Less talk, more action 
bit.ly/blog-­‐app 
adaptTo() 2014 22
Goal: Repurpose existing content 
§ server/espblog/[…]/apps/espblog/json.esp 
{ 
"title": "<%=post.title%>", 
"link": "<%= serverURI %><%=post%>.json", 
"description": "<%=post.posttext%>", 
"pubDate": "<%=df.format(post.created.getTime())%>", 
"resources": { 
"attachments": [ 
<% renderMedia(post, "attachments"); %> 
] 
} 
} 
adaptTo() 2014 23
Goal: Fetch & present data 
§ www/js/controllers.js 
$http.get(slingHostURI + '/content/espblog/posts.list.json') 
.success(function(data, status) { 
$scope.connected = true; 
$scope.blogPostList = data.posts; 
}) 
.error(function(data, status) { 
$scope.connected = false; 
console.error('Blog post list fetch failed’); 
}); 
adaptTo() 2014 24
Goal: Authenticate with the server 
§ www/js/controllers.js 
$http({ 
method: 'POST', 
url: slingHostURI + '/j_security_check', 
data: formData, 
headers: { 
'Content-Type': undefined 
}, 
transformRequest: formDataObject 
}) 
… 
basicAuthentication.setCredentials(formData.j_username, formData.j_password); 
adaptTo() 2014 25
Cordova + Sling 
§ Reuse existing content 
§ Reuse existing infra 
§ Reuse existing web skills 
§ Write once, run cross-platform 
adaptTo() 2014 26
Cordova + AEM --- PhoneGap Enterprise 
adaptTo() 2014 27
PhoneGap Enterprise 
§ Highlights 
§ Update app content w/o writing code 
§ Integration with Adobe Mobile Services 
§ Over the Air content updates 
§ AngularJS integration 
§ Geometrixx reference implementation 
adaptTo() 2014 28
PhoneGap Enterprise 
adaptTo() 2014 29
PhoneGap Enterprise demo 
bit.ly/aem-­‐pg 
adaptTo() 2014 30
Recap 
§ Problem? 
§ Solution 
§ Cordova 
§ + Sling 
§ + AEM 
adaptTo() 2014 31
bit.ly/blog-­‐app 
bit.ly/aem-­‐pg 
Questions? 
@brucelefebvre 
adaptTo() 2014 32
Appendix 
adaptTo() 2014 33
Resources 
§ Cordova + Sling blog app Github repository 
§ PhoneGap Kitchen Sink Github repository 
§ PhoneGap Beliefs, Goals, and Philosophy – Brian LeRoux 
§ PhoneGap, Cordova, and what’s in a name? – Brian LeRoux 
§ PhoneGap Documentation – v. 3.5.0 
adaptTo() 2014 34
Creative Resources 
§ ‘But the web can’t’ slide 
http://www.designcaffeine.com/uncategorized/mobile-magic-moments-transform-the-trivial/ 
§ ‘Cordova CLI’ slide http://www.stradiji.com/wp-content/uploads/2013/03/swiss-army-knife.png 
§ ‘Cordova Plugins’ slide http://www.freshtilledsoil.com/native-app-vs-mobile-website/ 
§ Apache httpd http://httpd.apache.org/ 
§ ECMA logo http://en.wikipedia.org/wiki/Ecma_International 
§ W3C http://www.w3.org/ 
§ WHATWG http://www.whatwg.org/ 
§ AngularJS https://angularjs.org/ 
§ Sling http://sling.apache.org/ 
§ HTML http://en.wikipedia.org/wiki/HTML 
adaptTo() 2014 35

adaptTo() 2014 - Mobile app dev with Cordova, Sling, and AEM

  • 1.
    APACHE SLING &FRIENDS TECH MEETUP BERLIN, 22-24 S EPTEMBER 2014 Mobile app development with Apache Cordova and AEM Bruce Lefebvre, Adobe
  • 2.
  • 3.
    <% agenda.jsp out.println("<h1> AGENDA </h1>" + "<ul> " + " <li> Problem? </li>" + " <li> Solution " + " <ul> " + " <li> Cordova </li>" + " <li> + Sling </li>" + " <li> + AEM </li>" + " </ul> " + " </li> " + "</ul> "); %> adaptTo() 2014 3
  • 4.
  • 5.
    Java C#, C++ Objec3ve-­‐C Java 2014 adaptTo() 2014 5
  • 6.
  • 7.
    Goal: Avoid proprietaryvendor traps adaptTo() 2014 7
  • 8.
    The Open Web § Opinion: The web solved crossed platform § Open & standardized (for the most part) adaptTo() 2014 8
  • 9.
    Goal: Presence inapp store(s) adaptTo() 2014 9
  • 10.
    Enter Hybrid Applications § Web app wrapped in a device native shell § Write once, run everywhere* § *aka “the promised land” Na3ve SDKs adaptTo() 2014 10
  • 11.
    But… Web vs.Native! § Both built on the same set of technologies § Web capabilities sufficient for most apps “If a browser doesn’t do something its not because it can’t; it’s just because we haven’t gotten around to implementing that part yet.” -Brian LeRoux adaptTo() 2014 11
  • 12.
    But the webcan’t… § Access device features, like: § Camera § Device motion § File system § Location § Provide background notifications § Render without connectivity § or even poor connectivity § Or can it? adaptTo() 2014 12
  • 13.
    Enter Apache Cordova Build apps with web tech you know and love adaptTo() 2014 13
  • 14.
    Cordova § Across-platform app framework § Initially PhoneGap, created by Nitobi § Donated to ASF in 2011 as Cordova § of which PhoneGap is a distribution adaptTo() 2014 14
  • 15.
    Cordova § Supportedplatforms § iOS § Android § BB10 § WP7, WP8, Windows 8 § Amazon Fire OS § Tizen § and more… adaptTo() 2014 15
  • 16.
    Cordova Plugins §Device APIs: § Camera § Geoloca3on § Accelerometer § File § Contacts § Events § Connec3on § No3fica3on § Storage § InAppBrowser § Device § Compass § Globaliza3on adaptTo() 2014 16
  • 17.
    Cordova CLI §Command line interface features § Bootstrap a new app § build/install/run app on a specific platform § Locally or via PhoneGap build § Manage plugins adaptTo() 2014 17
  • 18.
    Let’s give ita try adaptTo() 2014 18
  • 19.
    Cordova CLI ata glance § Create your app: cordova create helloAdaptTo § Add a platform: cd helloAdaptTo cordova platform add ios § Run your app on a simulator: cordova emulate ios adaptTo() 2014 19
  • 20.
    Cordova + Sling § Goals: § Repurpose existing content § Fetch & present data with minimum server side customization § Authenticate with the server adaptTo() 2014 20
  • 21.
    Cordova + Sling § Bonus goals § Post content from device § Be indistinguishable from a native app § Offline access to content adaptTo() 2014 21
  • 22.
    Less talk, moreaction bit.ly/blog-­‐app adaptTo() 2014 22
  • 23.
    Goal: Repurpose existingcontent § server/espblog/[…]/apps/espblog/json.esp { "title": "<%=post.title%>", "link": "<%= serverURI %><%=post%>.json", "description": "<%=post.posttext%>", "pubDate": "<%=df.format(post.created.getTime())%>", "resources": { "attachments": [ <% renderMedia(post, "attachments"); %> ] } } adaptTo() 2014 23
  • 24.
    Goal: Fetch &present data § www/js/controllers.js $http.get(slingHostURI + '/content/espblog/posts.list.json') .success(function(data, status) { $scope.connected = true; $scope.blogPostList = data.posts; }) .error(function(data, status) { $scope.connected = false; console.error('Blog post list fetch failed’); }); adaptTo() 2014 24
  • 25.
    Goal: Authenticate withthe server § www/js/controllers.js $http({ method: 'POST', url: slingHostURI + '/j_security_check', data: formData, headers: { 'Content-Type': undefined }, transformRequest: formDataObject }) … basicAuthentication.setCredentials(formData.j_username, formData.j_password); adaptTo() 2014 25
  • 26.
    Cordova + Sling § Reuse existing content § Reuse existing infra § Reuse existing web skills § Write once, run cross-platform adaptTo() 2014 26
  • 27.
    Cordova + AEM--- PhoneGap Enterprise adaptTo() 2014 27
  • 28.
    PhoneGap Enterprise §Highlights § Update app content w/o writing code § Integration with Adobe Mobile Services § Over the Air content updates § AngularJS integration § Geometrixx reference implementation adaptTo() 2014 28
  • 29.
  • 30.
    PhoneGap Enterprise demo bit.ly/aem-­‐pg adaptTo() 2014 30
  • 31.
    Recap § Problem? § Solution § Cordova § + Sling § + AEM adaptTo() 2014 31
  • 32.
    bit.ly/blog-­‐app bit.ly/aem-­‐pg Questions? @brucelefebvre adaptTo() 2014 32
  • 33.
  • 34.
    Resources § Cordova+ Sling blog app Github repository § PhoneGap Kitchen Sink Github repository § PhoneGap Beliefs, Goals, and Philosophy – Brian LeRoux § PhoneGap, Cordova, and what’s in a name? – Brian LeRoux § PhoneGap Documentation – v. 3.5.0 adaptTo() 2014 34
  • 35.
    Creative Resources §‘But the web can’t’ slide http://www.designcaffeine.com/uncategorized/mobile-magic-moments-transform-the-trivial/ § ‘Cordova CLI’ slide http://www.stradiji.com/wp-content/uploads/2013/03/swiss-army-knife.png § ‘Cordova Plugins’ slide http://www.freshtilledsoil.com/native-app-vs-mobile-website/ § Apache httpd http://httpd.apache.org/ § ECMA logo http://en.wikipedia.org/wiki/Ecma_International § W3C http://www.w3.org/ § WHATWG http://www.whatwg.org/ § AngularJS https://angularjs.org/ § Sling http://sling.apache.org/ § HTML http://en.wikipedia.org/wiki/HTML adaptTo() 2014 35