Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

958 views

Published on

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.

Published in: Software
  • Be the first to comment

  • Be the first to like this

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

  1. 1. APACHE SLING & FRIENDS TECH MEETUP BERLIN, 22-24 S EPTEMBER 2014 Mobile app development with Apache Cordova and AEM Bruce Lefebvre, Adobe
  2. 2. Hello @brucelefebvre adaptTo() 2014 2
  3. 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. 4 Problem?
  5. 5. Java C#, C++ Objec3ve-­‐C Java 2014 adaptTo() 2014 5
  6. 6. ????? 2016 adaptTo() 2014 6
  7. 7. Goal: Avoid proprietary vendor traps adaptTo() 2014 7
  8. 8. The Open Web § Opinion: The web solved crossed platform § Open & standardized (for the most part) adaptTo() 2014 8
  9. 9. Goal: Presence in app store(s) adaptTo() 2014 9
  10. 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. 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. 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. 13. Enter Apache Cordova Build apps with web tech you know and love adaptTo() 2014 13
  14. 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. 15. Cordova § Supported platforms § iOS § Android § BB10 § WP7, WP8, Windows 8 § Amazon Fire OS § Tizen § and more… adaptTo() 2014 15
  16. 16. Cordova Plugins § Device APIs: § Camera § Geoloca3on § Accelerometer § File § Contacts § Events § Connec3on § No3fica3on § Storage § InAppBrowser § Device § Compass § Globaliza3on adaptTo() 2014 16
  17. 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. 18. Let’s give it a try adaptTo() 2014 18
  19. 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. 20. Cordova + Sling § Goals: § Repurpose existing content § Fetch & present data with minimum server side customization § Authenticate with the server adaptTo() 2014 20
  21. 21. Cordova + Sling § Bonus goals § Post content from device § Be indistinguishable from a native app § Offline access to content adaptTo() 2014 21
  22. 22. Less talk, more action bit.ly/blog-­‐app adaptTo() 2014 22
  23. 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. 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. 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. 26. Cordova + Sling § Reuse existing content § Reuse existing infra § Reuse existing web skills § Write once, run cross-platform adaptTo() 2014 26
  27. 27. Cordova + AEM --- PhoneGap Enterprise adaptTo() 2014 27
  28. 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. 29. PhoneGap Enterprise adaptTo() 2014 29
  30. 30. PhoneGap Enterprise demo bit.ly/aem-­‐pg adaptTo() 2014 30
  31. 31. Recap § Problem? § Solution § Cordova § + Sling § + AEM adaptTo() 2014 31
  32. 32. bit.ly/blog-­‐app bit.ly/aem-­‐pg Questions? @brucelefebvre adaptTo() 2014 32
  33. 33. Appendix adaptTo() 2014 33
  34. 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. 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

×