Come realizzare una app Android ed iOS attraverso DrupalGap. Relatore: Lorenzo Monaco

2. DrupalGap
Crea una app Android (ed iOS) con Drupal ,
Drupalgap ed Apache Cordova
Lorenzo Monaco
m3m3nto@gmail.com

3. DrupalGap
● Inizialmente sviluppato da Tyler Frankenstein
all'inizio del 2012.
● Permette di create app Android e iOS
totalmente gestite da una installazione Drupal.

4. DrupalGap: architettura
Basato 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

5. 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 collegare
la 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.

6. DrupalGap: come funziona? (2)
rdbms drupal
views
datasource
services +
drupalgap mod
Restfull
webservice
http server
drupalGap
mobile sdkjDrupal
jQuery
mobile
mobile app
rest server module

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

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

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

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

11. 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/

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

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

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

15. DrupalGap: API (3)
● Attivazione del modulo
in settings.js:
// App Front Page
drupalgap.settings.front =
'drupalday-dashboard';
Drupal.modules.custom['drupalday'] = {};
● Build della app android:
# cordova run android

16. 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"