DrupalGapCrea una app Android (ed iOS) con Drupal ,

Drupalgap ed Apache Cordova

Lorenzo Monacom3m3nto@gmail.com

DrupalGap

● Inizialmente sviluppato da Tyler Frankenstein all'inizio del 2012.

● Permette di create app Android e iOS totalmente gestite da una installazione Drupal.

DrupalGap: architetturaBasato su un modulo Drupal che fornisce un wrapper per Drupal Services e da un mobile SDK basato su jQuery Mobile

Modulo Drupal:services wrapper

Mobile SDK:basato su jQuery

Mobile

https://www.drupal.org/project/drupalgap

https://www.github.com/signalpoint/DrupalGap

DrupalGap: come funziona? (1)Cordova/PhoneGap permette la creazione di app per Android e iOS (recentemente anche Windows Phone) basate su HTML5 + CSS3 + JS (es. jQuery Mobile)

Cordova mette a disposizione un wrapper javascript per tutte le funzionalità tipiche di un device mobile: fotocamera, bussola digitale, contatti, Gps, filesystem locale, etc.

DrupalGap permette quindi di collegarela app al nostro back-end drupal.DrupalGap fornisce una installazione di Drupal di natura headless, che espone una serie di webservice consumati dalla nostra app.

DrupalGap: come funziona? (2)

rdbms drupal

viewsdatasource

services + drupalgap mod

Restfullwebservice

http server

drupalGapmobile sdkjDrupal

jQuery mobile

mobile app

rest server module

DrupalGap e Drupal (1)

● DrupalGap espone una API javascript che eredita tutti i concetti chiave di Drupal

Themes Forms

Modules Messages

Blocks Vews

Pages Services

Entity Fields

DrupalGap e Drupal (2)● Fornisce integrazione per molti moduli esistenti:

http://drupalgap.com/project/modules● L'api è chiaramente estendibile:

http://api.drupalgap.org● Tra i moduli supportati troviamo:

Commerce, Webform, Gmap, Colorbox, AmazonS3

● Drupal8 fornisce restfull webservice ootb ed è in fase di adattamento il mobile sdk.

Installazione ambiente di sviluppo (1)● Installazione sintetica step by step:

https://github.com/m3m3nto/drupalday2015_drupalgap

● Requisiti:

– Oracle Java6– Nodejs– Apache Cordova– Cordova plugin– AndroidSDK– Drupal

Installazione ambiente di sviluppo (2)

● Creazione dell'app con Apache Cordova:# cordova create drupaldayapp com.drupalday "DrupalDay App"# cd drupaldayapp# cordova platform add android # cordova plugin add … [v. drupalgap_environment_installation]

● Installazione dei moduli Drupal necessari:# drush dl drupalgap services libraries views_datasource

# drush en drupalgap field_ui image list menu number path services views_datasource views_ui locale -y

Installazione ambiente di sviluppo (3)

● Download del mobile SDK:https://github.com/signalpoint/DrupalGap# wget https://github.com/signalpoint/DrupalGap/archive/7.x-1.3.tar.gz# tar xzf 7.x-1.3.tar.gz && mv DrupalGap-7.x-1.3/* www/# rm -rf www/css/ www/img/ www/js/# cd www/app && cp default.settings.js settings.js

● Impostazione della url/endpoint di Drupal ed impostazione del DrupalGap mode in settings.js:Drupal.settings.site_path = 'http://drupalday.dev';drupalgap.settings.mode = 'phonegap';# cp platforms/android/assets/www/cordova.js www/

DrupalGap: DrupalDay demo app

● Repository delle slide [slide]● Istruzioni installazione [drupalgap_install.txt]● Codice del progetto demo [drupaldayapp]

https://github.com/m3m3nto/drupalday2015_drupalgap

http://bit.ly/1IAvqkC

● Apk per l'installazione

http://drupalday.iotdb.it/sites/default/files/drupaldaydemo.apk

DrupalGap API (1)

● Esempio di hook_menu():function drupalday_menu() { try { var items = {}; items['drupaldaydashboard'] = { title: 'Drupalday 2015', page_callback: 'drupalday_dashboard_page' }; items['gallery'] = { title: 'Gallery', page_callback: 'drupalday_gallery_page', options:{ reloadPage:true } }; return items; } catch (error) { console.log('drupalday_menu - ' + error); }}

DrupalGap: API (2)

● page_callback implementation:function drupalday_dashboard_page() { try { var content = {}; content.site_info = { markup: '<h4 style="text-align: center;">' + Drupal.settings.site_path + '</h4>' }; content.welcome = { markup: '<h2 style="text-align: center;">' + t('Benvenuto al DrupalDay') + '</h2>' + '<p style="text-align: center;">' + t('DrupalGap: crea una app Android (ed iOS) con Drupal , Drupalgap ed Apache Cordova') + '</p>' }; if (drupalgap.settings.logo) { content.logo = { markup: '<center>' + theme('image', {path: drupalgap.settings.logo}) + '</center>' }; } content.get_started = { theme: 'button_link', text: t('Guida dev environment'), path: 'https://github.com/m3m3nto/drupalday2015_drupalgap', options: {InAppBrowser: true} }; [...] return content; } catch (error) { console.log('drupalday_dashboard_page - ' + error); }}

DrupalGap: API (3)

● Attivazione del modulo in settings.js:

// App Front Pagedrupalgap.settings.front = 'drupalday-dashboard';Drupal.modules.custom['drupalday'] = {};

● Build della app android:

# cordova run android

DrupalGap Cordova API

● Apache Cordova permette di accedere alle funzionalità tipiche dei device mobili:

# cordova plugin list[...] "Battery"[...] "Contacts"[...] "Device Motion"[...] "Device Orientation"[...] "Vibration"[...] "Whitelist"[...] "Camera"[...] "Console"[...] "Device"[...] "Notification"[...] "File"[...] "Geolocation"[...] "InAppBrowser"[...] "Network Information"