Your SlideShare is downloading. ×
DrupalGap. How to create native application for mobile devices based on Drupal site - Alexander Schedrov
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

DrupalGap. How to create native application for mobile devices based on Drupal site - Alexander Schedrov

702
views

Published on

Рано или поздно каждый сайт нуждается в мобильной версии. Существует несколько способов реализации мобильной версии: адаптивный сайт, нативное приложение для iOS, Android etc. …

Рано или поздно каждый сайт нуждается в мобильной версии. Существует несколько способов реализации мобильной версии: адаптивный сайт, нативное приложение для iOS, Android etc.

В создании нативного приложения нам поможет отличная платформа под названием DrupalGap. DrupalGap - это платформа позволяющая создавать приложения для iOS и Android при помощи Drupal, PhoneGap, jQueryMobile, без непосредственного программирования на языке платформы.

Published in: Internet, Technology

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
702
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
7
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 25 -27 April, 2014 http://camp2014.drupal.dn.ua DrupalGap Alexander Schedrov How to create native application for mobile devices based on Drupal site
  • 2. Schedrov Alexander sanchiz Drupal Developer at Trellon
  • 3. What is DrupalGap? Mobile Application Development Kit for Drupal Websites DrupalGap Module is the connection between mobile applications and Drupal websites (c)drupalgap.org Let's take a look, if it's true!
  • 4. Support • Themes, modules • Blocks • Menus • Pages • Entities • Fields • Forms • Views • Messages • Services • Geolocation • Other tools
  • 5. • You don't need a Objective-C and Java developers • For creating modules just need to write primitive JS code • Need to know how work Services • Need to know how to create custom Services endpoints and resources To create powerful mobile application
  • 6. How does PhoneGap work? 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.
  • 7. How mobile application interacts with Drupal Core Services FTW!!!:) Drupal site Application
  • 8. Drupal requirements services, rest_server, taxonomy, views_datasource, views_json, drupalgap ! Development environments Google Chrome and the Ripple Emulator extension
 
 OR node.js
 cordova
 Java SDK for Android or xCode for iOS
  • 9. File structure modules themes settings.js
  • 10. Debug settings.js: Drupal.settings.debug = true; Logs in browser console: dpm(json_result); window.localStorage.clear(); drupalgap_alert(Fatal error', { title: ‘Alert title', buttonName: 'Done', alertCallback: function() {} }); drupalgap_set_message('Oh no!', 'error');
  • 11. Themedrupalgap.settings.theme = 'amazing'; drupalgap.settings.blocks.amazing = { header: { title: {} }, navigation: { user_menu_anonymous:{ roles:{ value:['anonymous user'], mode:'include' } }, user_menu_authenticated:{ roles:{ value:['authenticated user'], mode:'include' } } }, content: { messages: {}, main: {} }, footer: { } }; http://themeroller.jquerymobile.com <div id="{:drupalgap_page_id:}" data-role="page"> {:header:} {:navigation:} {:content:} {:footer:} </div> Need to add styles to index.html page.tpl.html
  • 12. Creating module with page callback • 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: 'DCDN Sandbox', page_callback: 'core_app_homepage' }; return items; } ! function core_app_homepage() { var content = {}; content['homepage'] = { markup: 'some markup' }; return content; }
  • 13. Creating Menu drupalgap.settings.menus['homepage_menu'] = { links:[ {title:'News', path:'news'}, {title:'About', path:'node/1'}, {title:'Contact', path:'contact'}, {title:'Our team', path:'team'} ] }; settings.js: Important: here might be only real paths, not aliases
  • 14. Creating Blocks /** * 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; } Block visibility 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' } }, }, }; !
  • 15. Entity node_load(1, { success: function(node) { } }); ! node_save(node_array, { success: function(node) { } }); ! node_delete(1, { success: function(node) { } }); By default available pages: • node/%, node/%/edit • user/%, user/%/edit • taxonomy/term/%, taxonomy/term/%/edit • comment/%, comment/%/edit
  • 16. Using 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; }
  • 17. 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.'; }
  • 18. 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; } Forms
  • 19. /** * Implements hook_menu(). */ function core_app_menu() { var items = {}; items['vote-form'] = { title: 'Voting form', page_callback: 'drupalgap_get_form', page_arguments:['core_app_voting_form'] }; return items; } /** * Form's validation function (optional). */ function core_app_voting_form_validate(form, form_state) { if (form_state.values.name == '') { drupalgap_form_set_error('name', 'Name is required field.'); } } ! /** * Form's submit function. */ function core_app_voting_form_submit(form, form_state) { drupalgap_set_message('Thank you ' + form_state.values.name + '!'); drupalgap_goto('news'); }
  • 20. 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; }); } });
  • 21. Demo
  • 22. Links • http://api.drupalgap.org/ • http://www.drupalgap.org/ • http://www.drupalgap.org/troubleshoot • http://www.drupalgap.org/node/211 • https://drupal.org/node/2015065 Troubleshooting
  • 23. THANK YOU! ! Email: alexander.schedrov@gmail.com Twitter: @alexschedrov FB: schedrov http://sanchiz.net

×