Drupal
34
Drupal as Backend for Mobile Apps Drupal Camp PHOENIX - March, 2013 Chandi Cumaranatunge
-
Upload
denisho-dee -
Category
Documents
-
view
20 -
download
0
Transcript of Drupal
Drupal as Backend for Mobile Apps
Drupal Camp PHOENIX - March, 2013
Chandi Cumaranatunge
Chandi Cumaranatunge
Systems Analyst, SeniorUniversity Technology Office
Topics
• Drupal as CMS
• Drupal as datastore
• Exposing Drupal data
• Consuming and displaying data
• Building a hybrid mobile app to display data
• Cordova / PhoneGap, client-side templates
CMS
Create, edit, publish and manage content
Content in Drupal 7
• Entities
• nodes
• users
• comments
• taxonomy terms
• files
Drupal as CMS
database
Entitiestheming
web browser
Drupal
HTML, JS, CSS
over HTTP
Drupal as Datastore
database
Entities
Pure Data
Drupal
JSON, XML
over HTTP
No theming!
Drupal as Backendto a mobile app
JSON, XML
over HTTP
Exposing Drupal Entities (and entity collections)
• Services Module
• Views Datasource + Entity JSON modules
• RESTful Web Services module
RESTful Web ServicesExpose Drupal entities through a RESTful web service
• /node.json
• /node/15.json
• /node/15.xml
• /node.json?type=location
• /user.json
1.Client Authentication Module
2.CRUD API Module
CRUDfor entities
CREATE Entity HTTP POST /nodeREAD Entity HTTP GET /node/15.jsonUPDATE Entity HTTP PUT /node/15.jsonDELETE Entity HTTP DELETE /node/15
RESTful Web Services module provides full CRUD support with authentication
Let’s build an app!Bird Sightings
Drupal backend(datastore & API)
Mobile front-end(client interface)
Drupal backend first
• Define entities
• Create User (restws_user)
• Define roles and specify access permissions
• Populate content
Drupal entitiesBird
Location
Drupal view of geo markersViews + IP Geolocation Views modules
Access permissionsrestws module permissions
restws_user permissions to create content
Mobile front end
• Presentation moved to client-side (theming)
• Application state handling moved to client side (page routing)
database
Entities
Drupal
Har
dwar
eM
obile
OS
Mob
ile
App
Mobile Device
JSON, XML
Hybrid Mobile Apps
MobileDevice
Hybrid App
Mobile OS
HTML Rendering Engine (WebView)
Hardware
HTML5, CSS3, JS
Hybrid vs Native Appscriteria that matter
Hybrid App Native App
Skills HTML, CSS, JS Objective-C, Java
UI HTML elements Native UI
Performance Slower Fastest
Deploy Multiple OSs Single OS
UI
Architecture
DOMManipulation
Frameworksfor HTML5, CSS3 & JS
Bird Sightings Mobile Appdesign and implementation decisions
• Hybrid mobile app• Speed not critical, leverage existing HTML, CSS and
JS skills
• jQuery for DOM Manipulation• Known quantity
• jQuery Mobile for Architecture and UI• Simple app without complex views and states
• Availability of required UI components
Bird Sightings Mobile Appfinal product specs
• Built iteratively ( final iteration index_11.html )
• 150 lines of code ( 1/3 HTML, 2/3 Javascript )
• No CSS
Cross-site Scripting
#CORS SetEnvIf Origin "^(.*)$" AccessControlAllowOrigin=$0 Header add Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin Header set Access-Control-Allow-Methods "GET, PUT, POST, OPTIONS" Header set Access-Control-Allow-Credentials "true" Header set Access-Control-Allow-Headers "Authorization, Origin, Content-Type, X-CSRF-Token"
• Javascript cross-site AJAX client requests are blocked by web browsers
• JSONP
• CORS
Add the following modifications to the Drupal .htaccess file for CORS support
jQuery Mobile Basics + Entity Readindex_02.html
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Bird Sightings</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script> </head><body>
<div data-role="page" id="birds"> <div data-role="header"> <h1>Birds</h1> </div><!-- /header --> <div data-role="content"> <p>Page content goes here.</p> </div><!-- /content --> </div><!-- /page -->
<script> var bird_server = 'birds.mamp.chandima.info'; $('#birds').on('pageshow', function(event, ui){ $.getJSON('http://'+bird_server+'/node.json?type=bird', function(data) { console.log(data); }); }); </script> </body></html>
Client-side Javascript Templatesprevent mixing data with code
Hogan.js is compiled Mustache.js
Client-side templating with Hogan.jsindex_03.html
<script src="http://twitter.github.com/hogan.js/builds/2.0.0/hogan-2.0.0.js"></script> <!-- bird list template --> <script type="text/template" id="bird-li-tpl">
{{#list}} <li><a href="{{url}}"><h4>{{title}}</h4></a></li> {{/list}} </script>
<div data-role="page" id="birds"> <div data-role="header"> <h1>Birds</h1> </div><!-- /header --> <div data-role="content"> <ul id="bird-list" data-role="listview"></ul> </div><!-- /content --> </div><!-- /page -->
<script> var bird_server = 'birds.mamp.chandima.info'; var birdListTpl = Hogan.compile($("#bird-li-tpl").html()); $('#birds').on('pageshow', function(event, ui){ $.getJSON('http://'+bird_server+'/node.json?type=bird', function(data) { var html = birdListTpl.render(data); $('#bird-list').html(html); $('#bird-list').listview('refresh'); }); }); </script>
Single-page architecture - Bird list and bird detailsindex_04.html
<div data-role="page" id="birds"> <div data-role="header"> <h1>Birds</h1> </div><!-- /header --> <div data-role="content"> <ul id="bird-list" data-role="listview"></ul> </div><!-- /content --> </div><!-- /page --> <div data-role="page" id="bird"> <div data-role="header"> <h1>Bird details</h1> </div><!-- /header --> <div data-role="content"> <p>Content goes here...</p> </div><!-- /content --> </div><!-- /page -->
Getting a session token - authenticationindex_09.html
// get session token $.ajax ({ type: 'GET', url: 'http://'+bird_server+'/restws/session/token', async: false, beforeSend: function (xhr){ // base64 encoded user:pass xhr.setRequestHeader('Authorization', 'Basic cmVzdHdzX2VkaXRvcjplYXN5cGFzcw=='); }, success: function (data){ authToken = data; } });
Getting geolocation and creating location entityindex_10.html
if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(
function(position) { var loc_entity = { 'type':'location', 'field_latitude':position.coords.latitude, 'field_longitude':position.coords.longitude, 'field_bird': {'id':nid}
}; $.ajax ({ type: 'POST', url: 'http://'+bird_server+'/node', contentType: 'application/json', data: JSON.stringify(loc_entity), beforeSend: function (xhr){ xhr.setRequestHeader('X-CSRF-Token', authToken); }, xhrFields: { withCredentials: true }, success: function (data){ console.log(data); }, error: function (xhr, ajaxOptions, thrownError){ console.log(thrownError); } }); },
Takeaways
• Hybrid mobile apps leverage HTML, CSS and JS skills.
• Build for multiple mobile platforms from a single code-base.
• Templates allow you to separate data from code.
• REST is the predominant web services design model.
• Drupal is evolving into a complete web services platform.
• Take the code and build some apps!!!!
Thank you!
Questions?
