GETTING STARTED WITH DRUPALGAP

Schedrov Alexander - sanchiz

SCHEDROV ALEXANDER AKA

SANCHIZLead Drupal Developer at TrellonMaintainer : • pathauto_i18n • user_profile_comment • DrupalGapManager

https://github.com/Sanchiz/DrupalGapManager

Participant: • crm_core • relation_lists

MOBILE WEBSITE TRAFFICPercentage of website traffic from mobile devices

0

8

16

24

32

Q1 2013 Q2 2013 Q3 2013 Q4 2013 Q1 2014

32.0%30.0%

28.0%29.0%

23.9%

MEET DRUPALGAP

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

REGULAR SITE

Website

+

Responsive Website

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.

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.

REQUIREMENTSDRUPAL

Services, Rest_server, Views_datasource, Views_json, Drupalgap

!

DEVELOPMENT ENVIRONMENTS

Google Chrome and the Ripple Emulator extension OR

node.jscordova(node.js package)

Java SDK for Android or xCode for iOS

DRUPALGAP INHERITS DRUPAL DEVELOPER CONCEPTS

• Themes, modules

• Blocks

• Menus

• Pages

• Entities

• Fields

• Forms

• Views

• Messages

• Services

• Other Drupal tools

2 FOR DEALS

https://play.google.com/store/apps/details?id=com.twofordeals

BETTRACKS

https://bettracks.co.uk

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

DRUPALGAP MANAGER

https://github.com/Sanchiz/DrupalGapManager https://www.npmjs.org/package/dgm

is a command-line tool and interface for DrupalGap

EVEN MORE…. INTEGRATION WITH COMMERCE

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

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

FILE STRUCTURE

modules

themes

settings.js

• core_app (module folder)

• core_app.js (module file)

Drupal.modules.custom['core_app'] = {};

settings.js:

/** * 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; }

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' } }, }, };

OR CUSTOM FORM?function core_app_voting_form(form, form_state) { form.elements.name = { 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; }

NEED ADDITIONAL FUNCTIONALITY? YOU GOT IT!1. Create custom services resource in Drupal module

hook_services_resources();

2. Create custom services call in DrupalGap moduleDrupal.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; }); } });

Need to create page with JSON data document format (views_json module)

VIEWS

Displaying a View in mobile app

function core_team_menu() { var items = {}; items['team'] = { title: 'Our team', page_callback: 'core_team_page' } return items; }

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

DEMO

THANK YOU!

https://www.drupal.org/u/sanchiz

https://github.com/Sanchiz

http://sanchiz.net

Email: alexander.schedrov@gmail.com

Twitter : @alexschedrov