Cross-Platform Mobile Apps & Drupal Web Services


Published on

Presentation on integration of Titanium Mobile and Drupal at TiConf Mobile Developers Conference 2013.

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Cross-Platform Mobile Apps & Drupal Web Services

  1. 1. Cross-Platform Mobile Apps& Drupal Web ServicesTiConf Mobile Developers Conference 2013Presented by LTC Bob SimsCIS Branch Head, Training Support NATO UNCLASSIFIED
  2. 2. About MeBob SimsUS ArmyInformation Systems Manager• Lots of living and working abroad, currently Bydgoszcz, Poland• Connecting people through systems• Not terribly bright, just likes problem in this brief != Endorsements NATO UNCLASSIFIED
  3. 3. About the JFTC Facility NATO UNCLASSIFIED
  4. 4. About Our Mission NATO UNCLASSIFIED
  5. 5. Why Mobile MattersU.S. Army photo by Capt. Thomas Cieslak/Task Force 1-82 PAO NATO UNCLASSIFIED
  6. 6. Which Problem Space? NATO UNCLASSIFIED
  7. 7. Why Drupal?• Manage data + content• Users, registration, permissions, roles• Flexible themes, content types, views, search, more• Readily publish data• Vast module repository and open-source community• Enterprise-ready Source: Josh Schroeder NATO UNCLASSIFIED
  8. 8. Use Case: Collect Dynamic Data How to change data structure (content type) on Drupal web app without breaking native mobile app? – New allowed field values (pickers)? – Add/remove new fields? – X-platform + native app Ingredients: • Drupal 6 backend – Services + REST server module – Views + CCK modules • Custom node form Drupal module • Code from “Forging Titanium Episode 10: Forms” • Custom Drupal Services CommonJS library • Titanium 3.x + Alloy (w/some cheating!) NATO UNCLASSIFIED
  9. 9. Secret SauceHard Part: building node object in Drupal node-friendly format {"title": "Attend TiConf", "type":"todo", "body": "Prepare presentation", "field_status":[{"value":2}], //cck text field "field_category":[{"value":"Travel"}, //cck text field {"value":"Work"}] } // multiple selectsEasy Part: posting node object with Titanium API to Drupal Services endpoint exports.createNode = function(node, url) { var xhr = Titanium.Network.createHTTPClient();, url); xhr.onload = function(e) { /* passback awesome here */ } xhr.setRequestHeader(Content-Type,application/json; charset=utf- 8); var obj = (node); xhr.send(JSON.stringify(obj)); }; NATO UNCLASSIFIED
  10. 10. User AuthenticationTip: wait for login success response before creating content, dont send CRUDaction before xhr.onload() fires. exports.userLogin = function(url, opts) { var xhr = Titanium.Network.createHTTPClient(); url = url + user/login.json; // Services endpoint, url); xhr.setRequestHeader(Content-Type,application/json; charset=utf- 8); xhr.send({"username":opts.username,"password":opts.password}); xhr.onload = function() { var jsonObject = JSON.parse(this.responseText); opts.success && opts.success(jsonObject); }; xhr.onerror = function(e) { opts.error && opts.error({ "status":xhr.status, "statusText":xhr.statusText }); }; NATO UNCLASSIFIED
  11. 11. Use Case: Event Statistics How to provide executive leadership real-time “business intelligence”? – Limited authenticated roles? – Dynamic graphing of collated data? – X-platform + native app Ingredients: • Drupal 6 backend – Services + REST Server module – Custom statistics Drupal module • RGraph.js charting library – Sample code: – HTML5 Canvas element • Titanium 3.x + Alloy (no cheating!) Custom backbone.js sync adapter NATO UNCLASSIFIED
  12. 12. Secret SaucePassing dynamic data from Alloy controller to webview detail.xml: <WebView id="webcharts" url="/html/charts.htm" onLoad="drawCharts"/> detail.js: // build JSON data object to populate your webview chart var chartData = {"canvas":"signupPie", "title":"Signups", "data":dataArray, "labels":labelArray, "colors":colorArray }; function drawCharts(e) { $.webcharts.evalJS(drawChart( + JSON.stringify(chartData) + )); } NATO UNCLASSIFIED
  13. 13. Prior ArtTitanium + Drupal Integration• Drupanium: integrated Drupal distro + sample TiMobile app• Tyler Frankenstein blog post + examples – Drupal 7 Services + Phonegap + JQuery Mobile• Josh Schroeder "App-ify Drupal Titanium Project" – Drupal Camp Alberta 2010 presentation• Sumit Kataria civicactions.comDrupal Services• post.node create using custom fields (• IBM Developer Works: Create custom web services project in Drupal 7Dynamic Graphing with WebViews• Tim Poulsen – jqPlot x-platform WebView graphing demo• Aaron Saunders – Titanium Appcelerator Quickie: Google Charts and Appcelerator NATO UNCLASSIFIED
  14. 14. Pirate Hunter Title • Dynamic real-world piracy data – Sharepoint-hosted XML to JSON via YQL – Updated daily • NATO Shipping Centre (NSC) – Northwood, UK – • Case study of "decoupled", informal collaboration NATO UNCLASSIFIED
  15. 15. Lessons Learned• Alloy (+ backbone.js) is a "must-learn" for rapid, x- platform, data-driven Titanium apps• underscore.js eases burden of parsing complex JSON data returns• Rendering complex forms or workflows: integrated WebViews vs. native UI objects?• Drupal + Titanium platforms = compelling web/mobile solution for organizations NATO UNCLASSIFIED
  16. 16. Credits/Resources• Aaron Saunders – if he hasnt already posted a solution to your problem, one doesnt exist• Raul Riera – Super awesome HTTP client for Appcelerator Titanium (includes taffydb.js caching)• Grzegorz Bartman – Drupal + mobile app ninja in Wroclaw, Poland. Photo by Justin Pepus NATO UNCLASSIFIED
  17. 17. ConclusionPhoto by Staff Sgt. James Selesnick NATO UNCLASSIFIED