Building mobile applications with DrupalGap

1. BUILDING MOBILE
APPLICATIONS
WITH DRUPALGAP
SCHEDROV ALEXANDER
!
SANCHIZ

2. 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

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

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

5. WHY WE NEED PROVIDES
MOBILE APPLICATION TO
OUR CUSTOMERS?

6. 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

7. REGULAR SITE
Website
+
Responsive
Website

8. 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

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

10. WHAT IS DRUPALGAP?

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

12. 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.

13. 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.

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

16. 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.

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

18. DRUPALGAP INSIDE

19. 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

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

21. 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

22. EXTENSIBLE API
http://api.drupalgap.org

23. We have a special tool for the Jedi!

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

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

26. SPECIAL FEATURES

27. 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 }
);

28. CAMERA ACCESS
AND FILE BROWSER

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

30. 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

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

32. DRUPAL 8

33. DRUPAL 8
RESTful Web Services in Core

34. DRUPAL 8
Views supports REST

35. #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

36. DEVELOPMENT

37. FILE STRUCTURE
modules
custom
themes
settings.js

38. • 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'] = {};

39. 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'}
]
};

40. 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>

41. 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)

42. 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:

43. function MODULE_NAME_page() {
var content = {};
content['team'] = {
theme: 'view',
format: ‘ul', /* ul, ol, table, unformatted_list */
path: 'mobile/team_new', /* the path to the view in Drupal */
row_callback: 'MODULE_NAME_page_row',
empty_callback: 'MODULE_NAME_page_empty',
attributes: {
id: 'team-view'
}
};
return content;
}
!
function MODULE_NAME_page_row(view, row) {
var output = '';
output += '<img class="team-image" src="' + row.field_photo + '">';
output += l(row.title, 'node/' + row.Nid);
return output;
}
!
function MODULE_NAME_page_empty(view) {
return 'Sorry, no results.';
}
app/modules/custom/module_name/module_name.js:

44. 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;
});
}
});

45. RELEASE

46. 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

47. 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

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

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