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

6,878
views

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

0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,878
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
0
Comments
0
Likes
6
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Cross-Platform Mobile Apps& Drupal Web ServicesTiConf Mobile Developers Conference 2013Presented by LTC Bob SimsCIS Branch Head, Training Support Divisionwww.jftc.nato.int 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 solvingbob.sims@gmail.com@2wheelsburningbobsims.tumblr.comgithub.com/bob-simsDisclaimer: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 MattersU.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 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(); 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 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 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 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 (drupal.org)• 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 – 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 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