Getting Started with DrupalGap

1. GETTING STARTED 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. 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

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

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

6. REGULAR SITE
Website
+
Responsive
Website

7. WHY DO YOU NEED MOBILE
APPLICATION?
Our mobile phone have features which don't
have our regular devices!
!
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.

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

10. REQUIREMENTS
DRUPAL
Services, Rest_server, Views_datasource, Views_json, Drupalgap
!
DEVELOPMENT ENVIRONMENTS
Google Chrome and the Ripple Emulator extension
OR
node.js
cordova(node.js package)
Java SDK for Android or xCode for iOS

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

12. 2 FOR DEALS
https://play.google.com/store/apps/details?id=com.twofordeals

13. BETTRACKS
https://bettracks.co.uk

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

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

16. EVEN MORE…. INTEGRATION WITH COMMERCE
http://tylerfrankenstein.com/code/build-mobile-app-sell-products-with-drupal

17. HOOKS IN 7.X-1.0-RC3
*_404
*_assemble_form_state_into_field
*_block_info
*_block_view
*_deviceready
*_drupalgap_goto_post_process
*_drupalgap_goto_preprocess
*_entity_post_render_content
*_entity_post_render_field
*_field_formatter_view
*_field_widget_form
*_form_alter
*_image_path_alter
*_install
*_menu
*_services_postprocess
*_services_preprocess
*_services_request_postprocess_alter
*_services_request_pre_postprocess_alter
*_services_success
and custom forms
http://api.drupalgap.org

18. FILE STRUCTURE
modules
themes
settings.js

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

20. OR CUSTOM BLOCK?
/**
* Implements hook_block_info().
*/
function core_app_block_info() {
var blocks = {
latest_news_block: {
delta: 'latest_news_block',
module: 'core_app'
}
};
return blocks;
}
!
/**
* Implements hook_block_view().
*/
function core_app_block_view(delta) {
var content = '';
if (delta == 'latest_news_block') {
content = '<h2>Latest news</h2>';
content += 'Some content...';
}
return content;
}
drupalgap.settings.blocks.amazing = {
content: {
homepage_menu: {
pages:{
value:['homepage'],
mode:'include'
}
},
latest_news_block: {
pages:{
value:['homepage'],
mode:'exclude'
}
},
users_block: {
pages:{
value:['node/*', 'user/*'],
mode:'include'
},
roles:{
value:['authenticated user'],
mode:'include'
}
},
},
};

21. function core_app_voting_form(form, form_state) {
form.elements.name = {
OR CUSTOM FORM? type:'textfield',
title:'Name',
default_value: Drupal.user.name
};
form.elements.email = {
title:'Email Address',
type:'email',
required: true,
default_value: Drupal.user.mail
};
form.elements.categoty = {
title:'Category',
type:'select',
options:{
0:'Feedback',
1:'Question'
},
default_value:0
};
form.elements.comment = {
title:'Comment',
type:'textarea',
};
form.elements.rating = {
title:'Rating',
type:'radios',
required: true,
options:{
0:'0',
1:'+1',
},
default_value:3
};
form.elements.submit = {
type:'submit',
value:'Submit'
};
return form;
}

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

23. VIEWS
Need to create page with JSON data document
format (views_json module)
Displaying a View in mobile app
function core_team_menu() {
var items = {};
items['team'] = {
title: 'Our team',
page_callback: 'core_team_page'
}
return items;
}

24. function core_team_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: 'core_team_page_row',
empty_callback: 'core_team_page_empty',
attributes: {
id: 'team-view'
}
};
return content;
}
!
function core_team_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 core_team_page_empty(view) {
return 'Sorry, no results.';
}

25. DEMO

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