Drupal Mobile #drupalmobile
Theming
Drupal for Mobile AppsDrupal as REST Server
Concepts
JSON
JSON   XML
JSON Format{    "firstName": "Hommer",    "lastName": "Simpson",    "age": 36,    "address": {        "streetAddress": "74...
REST
REST VerbsGET                POSTPUT           DELETEHEAD         OPTIONS      PATCH
REST URLshttp://host/server/resource/parameter    200 OK        400 Bad Request
Server App
ViewsViews Datasource    Services
App Structure      Views              Views Datasource                  Services
Views Datasource
Views Datasource
JSON FormatBusinesses{  "nodes" : [    {       "node" : {         "title" : "Luigis Restaurant",         "field_logo" : "s...
Services
REST Server
hook_services_resources/** * Implements hook_services_resources() */function twittalicious_services_resources() {  return ...
REST Resources
Mobile App
jQuery Mobile PhoneGap
jQuery Mobile
jQuery.getJSON$.getJSON("http://twittalicious.com/rest/graph/reputation", function(data)  {     data.chart.chart.renderTo ...
jQuery.postvar user = $(#username).val();var pass = $(#password).val();$.post("http://twittalicious.com/rest/user/login",{...
PhoneGap
PhoneGap = Cordova
App BuildSource: build.phonegap.com
IPhone Application
Questions?                        Ruben Teijeiro                        @rteijeiroPhoto: Dries Buytaert   rteijeiro@drewpu...
Upcoming SlideShare
Loading in …5
×

Drupal Mobile

1,474 views
1,315 views

Published on

Mobile application development using Drupal 7 as REST webservices server with JSON format. Mobile application build with jQuery Mobile and PhoneGap.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,474
On SlideShare
0
From Embeds
0
Number of Embeds
26
Actions
Shares
0
Downloads
12
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Drupal Mobile

  1. 1. Drupal Mobile #drupalmobile
  2. 2. Theming
  3. 3. Drupal for Mobile AppsDrupal as REST Server
  4. 4. Concepts
  5. 5. JSON
  6. 6. JSON XML
  7. 7. JSON Format{ "firstName": "Hommer", "lastName": "Simpson", "age": 36, "address": { "streetAddress": "742 Evergreen Terrace", "city": "Springfield", "state": "Unknown", "postalCode": "80085" }, "phoneNumber": [ { "type": "home", "number": "555 123-4567" }, { "type": "mobile", "number": "555 987-6543" } ]}
  8. 8. REST
  9. 9. REST VerbsGET POSTPUT DELETEHEAD OPTIONS PATCH
  10. 10. REST URLshttp://host/server/resource/parameter 200 OK 400 Bad Request
  11. 11. Server App
  12. 12. ViewsViews Datasource Services
  13. 13. App Structure Views Views Datasource Services
  14. 14. Views Datasource
  15. 15. Views Datasource
  16. 16. JSON FormatBusinesses{ "nodes" : [ { "node" : { "title" : "Luigis Restaurant", "field_logo" : "sites/default/files/luigis.jpg", "field_latitude" : "38.100259", "field_longitude" : "-8.037359", "field_address" : "Little Italy" } }, { "node" : { "title" : "The Androids Dungeon", "field_logo" : "sites/default/files/android.jpg", "field_latitude" : "38.133792", "field_longitude" : "-6.284128", "field_address" : "Springfield", } }}
  17. 17. Services
  18. 18. REST Server
  19. 19. hook_services_resources/** * Implements hook_services_resources() */function twittalicious_services_resources() { return array( chart => array( retrieve => array( help => Demo chart with random data in JSON, file => array( file => twittalicious.inc, module => twittalicious, type => inc, ), callback => _twittalicious_chart_json, access callback => _twittalicious_resource_access, access arguments => array(demo), args => array( array( name => name, type => string, description => The name of the chart, source => array(path => 0), optional => TRUE, ),
  20. 20. REST Resources
  21. 21. Mobile App
  22. 22. jQuery Mobile PhoneGap
  23. 23. jQuery Mobile
  24. 24. jQuery.getJSON$.getJSON("http://twittalicious.com/rest/graph/reputation", function(data) { data.chart.chart.renderTo = "reputation-container-portrait"; data.chart.chart.width = chart_width_portrait; data.chart.chart.height = chart_height_portrait; var portraitChart = new Highcharts.Chart(data.chart); });});
  25. 25. jQuery.postvar user = $(#username).val();var pass = $(#password).val();$.post("http://twittalicious.com/rest/user/login",{ “username”: user, “password”: pass}, function(data){ console.log(“Login successful”); }, "json");
  26. 26. PhoneGap
  27. 27. PhoneGap = Cordova
  28. 28. App BuildSource: build.phonegap.com
  29. 29. IPhone Application
  30. 30. Questions? Ruben Teijeiro @rteijeiroPhoto: Dries Buytaert rteijeiro@drewpull.com

×