Building mobile applications with DrupalGap

BUILDING MOBILE
APPLICATIONS
WITH DRUPALGAP
SCHEDROV ALEXANDER
!
SANCHIZ

SCHEDROV ALEXANDER
AKA
SANCHIZ
Lead Drupal Developer at Trellon
Maintainer:
• pathauto_i18n
• user_profile_comment
• DrupalGapManager
https://github.com/Sanchiz/DrupalGapManager
Participant:
• crm_core
• relation_lists

“Never memorise what you can look up in
books.”
- Albert Einstein

“Never memorise what you can look up
IN YOUR PHONE.”
- not Albert Einstein

WHY WE NEED PROVIDES
MOBILE APPLICATION TO
OUR CUSTOMERS?

MOBILE WEBSITE TRAFFIC
Percentage of website traffic from mobile devices
32
24
16
8
0
30.0% 32.0% 29.0% 28.0%
23.9%
Q1 2013 Q2 2013 Q3 2013 Q4 2013 Q1 2014

REGULAR SITE
Website
+
Responsive
Website

Site
Drupal Bootstrap
Receive response as
markup
Load CSS files
Load JS files
Load theme
files(images, fonts)
Load content images
Show content to user
Mobile application
Drupal Bootstrap
Receive response as
JSON
Load content images
Show content to user

HOW MOBILE APPLICATION
DIFFERENT FROM RESPONSIVE SITE?
Our mobile phone have
features which don't
have our regular devices!
It’s handy!

• Created by Tyler Frankenstein
• First release Feb 25, 2012 ~100 lines
• Currently ~10,000 lines

DRUPALGAP
Drupal module
hosted on d.org
It's connection
between mobile
applications and
Drupal websites via
web Services.
Development Kit hosted
on GitHub
Developers can create
custom multi-platform
mobile applications that
communicate with their
Drupal websites.

DRUPALGAP FEATURES
You don't need a Objective-C and Java
developers.
!
If you know how to build Drupal modules
and know JavaScript - Welcome to
DrupalGap developers.

DrupalGap application it’s a good
example of using headless Drupal

Building mobile applications with DrupalGap

HOW IT WORKS?
PhoneGap generates HTML, CSS
and JavaScript and make application
iOS and Android mobile
devices.
Apache Cordova provides access
via JavaScript to device
features such as the
Camera, GPS, File System,
Contacts, Compass, etc.

TYPES OF SITES WHICH CAN USE
MOBILE APPLICATION
Any sites that you can imagine.

DEVELOPMENT REQUIREMENTS
ENVIRONMENTS
1. Google Chrome and
Ripple Emulator extension
2. node.js
cordova(node.js package)
Java SDK for Android or
xCode for iOS
DRUPAL
• services
• rest_server
• views_datasource
• views_json

DRUPALGAP INHERITS DRUPAL
DEVELOPER CONCEPTS
• Themes, modules
• Blocks
• Menus
• Pages
• Entities
• Fields
• Forms
• Views
• Messages
• Services
• Other Drupal
tools

EXTENSIBLE WITH CONTRIB MODULES
• Force Authentication
• Telephone
• Address Field
• AmazonS3
• AudioField
• Colorbox
• Commerce
• Commerce DrupalGap Stripe
• Date
• Email Registration
• Entity reference
• Fivestar
• Flag
• Geofield
• GeoTracker
• Link
• Location
• LoginToboggan
• Pathfix
• Push Notifications
• Rate
• Services Menu
• Shadowbox
• User registration password
• Voting API
• Webform
http://www.drupalgap.org/project/modules

EXTENSIBLE API
http://api.drupalgap.org

We have a special tool for the Jedi!

DRUPALGAP MANAGER
is a command-line tool and interface for DrupalGap
https://github.com/Sanchiz/DrupalGapManager
https://www.npmjs.org/package/dgm

http://tylerfrankenstein.com/code/build-mobile-app-sell-products-
with-drupal

GEOLOCATION
var onSuccess = function(position) {
console.log(position);
};
var onError = function(error) {
console.log(error.message);
}
navigator.geolocation.getCurrentPosition(onSuccess, onError);
var onSuccess = function(position) {
console.log(position);
}
var onError = onError(error) {
console.log(error.message);
}
!
// Update is received every 30 seconds.
var watchID = navigator.geolocation.watchPosition(
onSuccess,
onError,
{ timeout: 30000 }
);

CAMERA ACCESS
AND FILE BROWSER

PUSH NOTIFICATIONS
Sender Cloud server Target device
Google Cloud Messaging
or
Apple Push Notification Service
Drupal site
Other systems

Drupal module: https://www.drupal.org/project/push_notifications
Cordova plugin: https://github.com/phonegap-build/PushPlugin
DrupalGap module: https://github.com/signalpoint/push_notifications
Rules integration in 7.x-1.x-dev: https://www.drupal.org/node/
1658132#comment-8512423

EXTENSIBLE WITH CORDOVA PLUGINS
http://plugins.cordova.io

DRUPAL 8
RESTful Web Services in Core

#D8CX
All that we need - update
DrupalGap SDK according
to the changes in Drupal 8.
#D8CX: I pledge that DrupalGap will have a full Drupal 8
release on the day that Drupal 8 is released (c) Tyler

FILE STRUCTURE
modules
custom
themes
settings.js

• MODULE_NAME (module folder)
• MODULE_NAME.js (module file)
/**
* Implements hook_menu().
*/
function MODULE_NAME_menu() {
}
!
function MODULE_NAME_homepage() {
}
app/settings.js:
var items = {};
items['homepage'] = {
title: 'New Sandbox',
page_callback: 'MODULE_NAME_homepage'
};
return items;
var content = {};
content['homepage'] = {
markup: 'some markup'
};
return content;
Drupal.modules.custom['MODULE_NAME'] = {};

app/settings.js:
drupalgap.settings.menus['homepage_menu'] = {
links:[
{title:'News', path:'news'},
{title:'About', path:'node/1'},
{title:'Contact', path:'contact'},
{title:'Our team', path:'team'}
]
};

drupalgap.settings.blocks.THEME_NAME = {
content: {
homepage_menu: {
pages:{
value:['homepage'],
mode:'include'
}
},
users_block: {
pages:{
value:['node/*', 'user/*'],
mode:'include'
},
roles:{
value:['authenticated user'],
mode:'include'
}
},
},
};
app/settings.js:
page.tpl.html
<div
id="{:drupalgap_page_id:}"
data-role="page">
{:header:}
{:navigation:}
{:content:}
{:footer:}
</div>

VIEWS
1. Need to create page with JSON data document
format (views_json module)
2. Implement hook_menu
3. Implement page_callback
4. Implement row_callback(function to process
and render each row)

function MODULE_NAME_menu() {
var items = {};
items['team'] = {
title: 'Our team',
page_callback: 'MODULE_NAME_page'
}
return items;
}
app/modules/custom/module_name/module_name.js:

NEED ADDITIONAL FUNCTIONALITY?
YOU GOT IT!
1. Create custom services resource in Drupal module
hook_services_resources();
2. Create custom services call in DrupalGap module
Drupal.services.call(options);
var output = '';
Drupal.services.call({
method: 'POST',
path: 'news.json',
data: args,
success: function(result) {
output = '';
$.each(result, function(i, node) {
output += node.title;
});
}
});

ANDROID
Devices
Android 2.1 (Deprecated May 2013)
Android 2.2
Android 2.3
Android 3.x (Deprecated May 2013)
Android 4.x
Development
Any OS
JDK 6+ and Apache Ant
Developer license: $25 one time

IOS
Devices
iOS Device with at least iOS 5.x+
Development
Intel-based Computer with Mac OS X Lion or
greater (10.7.4+)
Xcode Command Line Tools
Xcode 4.5+ and iOS 6 SDK
Developer license: $99 per year

CONCLUSION
• DrupalGap is growing
• Needs support from a community
• We have incredible tool that allows
us to build mobile application from
scratch

THANK YOU!
https://www.drupal.org/u/sanchiz
https://github.com/Sanchiz
http://sanchiz.net
Email: alexander.schedrov@gmail.com
Twitter: @alexschedrov

Building mobile applications with DrupalGap

More Related Content

What's hot (20)

Similar to Building mobile applications with DrupalGap (20)

More from Alex S (10)

Recently uploaded (20)

Building mobile applications with DrupalGap