DrupalGap: crea una app Android (ed iOS) con Drupal, Drupalgap ed Apache Cordova
-
Upload
drupalday -
Category
Technology
-
view
472 -
download
0
Transcript of DrupalGap: crea una app Android (ed iOS) con Drupal, Drupalgap ed Apache Cordova
DrupalGapCrea una app Android (ed iOS) con Drupal ,
Drupalgap ed Apache Cordova
Lorenzo [email protected]
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"