SCHEDROV ALEXANDER !

SANCHIZ

BUILDING MOBILE APPLICATIONS

WITH DRUPALGAP

SCHEDROV ALEXANDER AKA

SANCHIZLead Drupal Developer at TrellonMaintainer : • 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 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%

REGULAR SITE

Website

+

Responsive Website

Drupal Bootstrap

Site

Load CSS files

Load JS files

Load theme files(images, fonts)

Load content images

Receive response as markup

Show content to user

Drupal Bootstrap

Mobile application

Load content images

Receive response as JSON

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!

WHAT IS 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.

DRUPALGAP FEATURESYou 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

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.

DRUPALGAP INSIDE

DEVELOPMENT REQUIREMENTS

ENVIRONMENTS

1. Google Chrome and Ripple Emulator extension

2. node.jscordova(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

https://github.com/Sanchiz/DrupalGapManager

https://www.npmjs.org/package/dgm

is a command-line tool and interface for DrupalGap

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

SPECIAL FEATURES

GEOLOCATIONvar 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

Google Cloud Messaging or

Apple Push Notification Service

Drupal site

Other systems

Sender Target deviceCloud server

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

DRUPAL 8RESTful Web Services in Core

DRUPAL 8Views supports REST

#D8CX

#D8CX: I pledge that DrupalGap will have a full Drupal 8 release on the day that Drupal 8 is released (c) Tyler

All that we need - update DrupalGap SDK according to the changes in Drupal 8.

DEVELOPMENT

FILE STRUCTURE

modules

custom themes

settings.js

• MODULE_NAME (module folder) • MODULE_NAME.js (module file)

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

app/settings.js:

/** * Implements hook_menu(). */ function MODULE_NAME_menu() { var items = {}; items['homepage'] = { title: 'New Sandbox', page_callback: 'MODULE_NAME_homepage' }; return items; } !function MODULE_NAME_homepage() { var content = {}; content['homepage'] = { markup: 'some markup' }; return content; }

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

app/settings.js:

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:

<div id="{:drupalgap_page_id:}" data-role="page"> {:header:} {:navigation:} {:content:} {:footer:} </div>

page.tpl.html

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)

VIEWS

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:

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:

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

RELEASE

ANDROIDDevices 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

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

Devices iOS Device with at least iOS 5.x+

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