The document outlines a presentation on mobile app development using Apache Cordova and AEM, discussing the challenges of cross-platform development and the advantages of hybrid applications. It highlights the goals of repurposing existing content, minimizing server-side customization, and achieving offline access. The presentation also covers the integration of Cordova with Sling and AEM, showcasing its potential to update app content without extensive coding.

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