Cross-Platform Mobile Apps & Drupal Web Services
7 likes5,854 views
The document discusses the integration of cross-platform mobile applications with Drupal web services, presented by Bob Sims at the Ticonf Mobile Developers Conference 2013. It details backend structures, use cases for dynamic data collection and event statistics, and practical coding examples for implementing these services using Titanium and Drupal. Lessons learned highlight the value of leveraging both platforms for data-driven mobile solutions.
![Secret Sauce
Hard 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 selects
Easy Part: posting node object with Titanium API to Drupal Services endpoint
exports.createNode = function(node, url) {
var xhr = Titanium.Network.createHTTPClient();
xhr.open('POST', 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](https://image.slidesharecdn.com/simsticonf2013-130223092253-phpapp01/85/Cross-Platform-Mobile-Apps-Drupal-Web-Services-9-320.jpg)
Cross-Platform Mobile Apps & Drupal Web Services
- 1. Cross-Platform Mobile Apps & Drupal Web Services TiConf Mobile Developers Conference 2013 Presented by LTC Bob Sims CIS Branch Head, Training Support Division www.jftc.nato.int NATO UNCLASSIFIED
- 2. About Me Bob Sims US Army Information Systems Manager • Lots of living and working abroad, currently Bydgoszcz, Poland • Connecting people through systems • Not terribly bright, just likes problem solving bob.sims@gmail.com @2wheelsburning bobsims.tumblr.com github.com/bob-sims Disclaimer: Mentions in this brief != Endorsements NATO UNCLASSIFIED
- 3. About the JFTC Facility www.jftc.nato.int NATO UNCLASSIFIED
- 4. About Our Mission NATO UNCLASSIFIED
- 5. Why Mobile Matters U.S. Army photo by Capt. Thomas Cieslak/Task Force 1-82 PAO NATO UNCLASSIFIED
- 6. Which Problem Space? http://events.jftc.nato.int 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 http://jdschroeder.ca
- 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 https://gist.github.com/bob-sims/4094461 • Code from “Forging Titanium Episode 10: Forms” http://is.gd/dPGqBG • Custom Drupal Services CommonJS library https://gist.github.com/bob-sims/1966524 • Titanium 3.x + Alloy (w/some cheating!) NATO UNCLASSIFIED
- 9. Secret Sauce Hard 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 selects Easy Part: posting node object with Titanium API to Drupal Services endpoint exports.createNode = function(node, url) { var xhr = Titanium.Network.createHTTPClient(); xhr.open('POST', 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 Authentication Tip: wait for login success response before creating content, don't send CRUD action before xhr.onload() fires. exports.userLogin = function(url, opts) { var xhr = Titanium.Network.createHTTPClient(); url = url + 'user/login.json'; // Services endpoint xhr.open('POST', 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: http://is.gd/qtVOTS – HTML5 Canvas element • Titanium 3.x + Alloy (no cheating!) Custom backbone.js sync adapter NATO UNCLASSIFIED
- 12. Secret Sauce Passing 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 Art Titanium + 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.com Drupal Services • post.node create using custom fields (drupal.org) • IBM Developer Works: Create custom web services project in Drupal 7 Dynamic 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 – www.shipping.nato.int • 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 hasn't already posted a solution to your problem, one doesn't 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. Conclusion Photo by Staff Sgt. James Selesnick NATO UNCLASSIFIED