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

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