From http://adapt.to/2014/en/schedule/mobile-app-development-with-apache-cordova-and-aem.html: This talk will focus on patterns and tools for bringing your Sling and web expertise to the world of mobile applications. Centre stage will be Cordova, an Apache project with PhoneGap origins - built to enable cross-platform mobile apps and in turn, advance the open web. I'll introduce techniques for solving common use cases with Sling as the backend, complete with sample code to get you started today. Lastly, we'll take a look at the integration of Cordova and AEM (affectionately known as PhoneGap Enterprise) featured in the 6.0 release.

1. APACHE SLING & FRIENDS TECH MEETUP
BERLIN, 22-24 S EPTEMBER 2014
Mobile app development with Apache Cordova and AEM
Bruce Lefebvre, Adobe

2. Hello
@brucelefebvre
adaptTo() 2014 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. 4
Problem?

5. Java
C#,
C++
Objec3ve-­‐C
Java
2014
adaptTo() 2014 5

6. ?????
2016
adaptTo() 2014 6

7. Goal: Avoid proprietary vendor 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 in app 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 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

13. Enter Apache Cordova
Build apps with web tech you know and love
adaptTo() 2014 13

14. 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

15. Cordova
§ Supported platforms
§ 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 it a try
adaptTo() 2014 18

19. 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

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, more action
bit.ly/blog-­‐app
adaptTo() 2014 22

23. 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

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 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

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. PhoneGap Enterprise
adaptTo() 2014 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. Appendix
adaptTo() 2014 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