Your SlideShare is downloading. ×
Cross-Platform Mobile Apps & Drupal Web Services
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Cross-Platform Mobile Apps & Drupal Web Services


Published on

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

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Cross-Platform Mobile Apps& Drupal Web ServicesTiConf Mobile Developers Conference 2013Presented by LTC Bob SimsCIS Branch Head, Training Support NATO UNCLASSIFIED
  • 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. About the JFTC Facility NATO UNCLASSIFIED
  • 4. About Our Mission NATO UNCLASSIFIED
  • 5. Why Mobile MattersU.S. Army photo by Capt. Thomas Cieslak/Task Force 1-82 PAO NATO UNCLASSIFIED
  • 6. Which Problem Space? NATO UNCLASSIFIED
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. ConclusionPhoto by Staff Sgt. James Selesnick NATO UNCLASSIFIED