![• 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'] = {};](https://image.slidesharecdn.com/gettingstartedwithdrupagap-140928151726-phpapp01/85/Getting-Started-with-DrupalGap-19-320.jpg)
![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'
}
},
},
};](https://image.slidesharecdn.com/gettingstartedwithdrupagap-140928151726-phpapp01/85/Getting-Started-with-DrupalGap-20-320.jpg)
![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;
}](https://image.slidesharecdn.com/gettingstartedwithdrupagap-140928151726-phpapp01/85/Getting-Started-with-DrupalGap-23-320.jpg)
![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.';
}](https://image.slidesharecdn.com/gettingstartedwithdrupagap-140928151726-phpapp01/85/Getting-Started-with-DrupalGap-24-320.jpg)
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
- 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: [email protected] Twitter: @alexschedrov