MOBILE APPS · 2014-04-14 · MOBILE APPS MIT DRUPALGAP UND DRUPAL 7 von IRC/drupal.org:...

21
MOBILE APPS MIT DRUPALGAP UND DRUPAL 7 von IRC/drupal.org: lucastockmann

Transcript of MOBILE APPS · 2014-04-14 · MOBILE APPS MIT DRUPALGAP UND DRUPAL 7 von IRC/drupal.org:...

Page 1: MOBILE APPS · 2014-04-14 · MOBILE APPS MIT DRUPALGAP UND DRUPAL 7 von IRC/drupal.org: lucastockmann. WAS IST DRUPALGAP? FRAMEWORK Open Source Mobile Application Development Kit

MOBILE APPSMIT DRUPALGAP UND DRUPAL 7

vonIRC/drupal.org: lucastockmann

Page 2: MOBILE APPS · 2014-04-14 · MOBILE APPS MIT DRUPALGAP UND DRUPAL 7 von IRC/drupal.org: lucastockmann. WAS IST DRUPALGAP? FRAMEWORK Open Source Mobile Application Development Kit

WAS IST DRUPALGAP?

Page 3: MOBILE APPS · 2014-04-14 · MOBILE APPS MIT DRUPALGAP UND DRUPAL 7 von IRC/drupal.org: lucastockmann. WAS IST DRUPALGAP? FRAMEWORK Open Source Mobile Application Development Kit

FRAMEWORK

Open Source Mobile Application Development KitSpeziell für DrupalBasiert auf PhoneGapEntwickelt von Tyler Frankenstein

Page 4: MOBILE APPS · 2014-04-14 · MOBILE APPS MIT DRUPALGAP UND DRUPAL 7 von IRC/drupal.org: lucastockmann. WAS IST DRUPALGAP? FRAMEWORK Open Source Mobile Application Development Kit

DIE TECHNIK DAHINTERPhoneGap

jQuery Mobile

Page 5: MOBILE APPS · 2014-04-14 · MOBILE APPS MIT DRUPALGAP UND DRUPAL 7 von IRC/drupal.org: lucastockmann. WAS IST DRUPALGAP? FRAMEWORK Open Source Mobile Application Development Kit

WIE FUNKTIONIERT DRUPALGAPKommunikation über REST-SchnittstelleDaten werden von Drupal als JSON bereit gestellt

Page 6: MOBILE APPS · 2014-04-14 · MOBILE APPS MIT DRUPALGAP UND DRUPAL 7 von IRC/drupal.org: lucastockmann. WAS IST DRUPALGAP? FRAMEWORK Open Source Mobile Application Development Kit

WOZU EIGNET ES SICH?

Page 7: MOBILE APPS · 2014-04-14 · MOBILE APPS MIT DRUPALGAP UND DRUPAL 7 von IRC/drupal.org: lucastockmann. WAS IST DRUPALGAP? FRAMEWORK Open Source Mobile Application Development Kit

NACHTEILEKeine "Native" App

Daher langsamer als normale Apps

Page 8: MOBILE APPS · 2014-04-14 · MOBILE APPS MIT DRUPALGAP UND DRUPAL 7 von IRC/drupal.org: lucastockmann. WAS IST DRUPALGAP? FRAMEWORK Open Source Mobile Application Development Kit

VORTEILELeichte Sprache (Javascript)Zugriff auf System-Komponenten

KameraGeo-Location...

Multi-PlattformiOSAndroid...

Page 9: MOBILE APPS · 2014-04-14 · MOBILE APPS MIT DRUPALGAP UND DRUPAL 7 von IRC/drupal.org: lucastockmann. WAS IST DRUPALGAP? FRAMEWORK Open Source Mobile Application Development Kit

WAS BRAUCHE ICH ZUM

ENTWICKELN?

Page 10: MOBILE APPS · 2014-04-14 · MOBILE APPS MIT DRUPALGAP UND DRUPAL 7 von IRC/drupal.org: lucastockmann. WAS IST DRUPALGAP? FRAMEWORK Open Source Mobile Application Development Kit

SETUPDrupal Installation

DrupalGap ModulViews DatasourceServices

DrupalGap InstallationPhoneGap Account zum kompilieren

Page 11: MOBILE APPS · 2014-04-14 · MOBILE APPS MIT DRUPALGAP UND DRUPAL 7 von IRC/drupal.org: lucastockmann. WAS IST DRUPALGAP? FRAMEWORK Open Source Mobile Application Development Kit

UNSER BEISPIELPROJEKT

Page 12: MOBILE APPS · 2014-04-14 · MOBILE APPS MIT DRUPALGAP UND DRUPAL 7 von IRC/drupal.org: lucastockmann. WAS IST DRUPALGAP? FRAMEWORK Open Source Mobile Application Development Kit

MOBILE APP:User kann einen Nodeerstellen

Title ist CustomStandort wird per GPSabgefragt

DRUPAL:Node Ansicht mit Karte

ZIELE

Page 13: MOBILE APPS · 2014-04-14 · MOBILE APPS MIT DRUPALGAP UND DRUPAL 7 von IRC/drupal.org: lucastockmann. WAS IST DRUPALGAP? FRAMEWORK Open Source Mobile Application Development Kit

DRUPAL PART1. Installieren 2. Geofield installieren und aktivieren 3. Content Typ Location anlegen

FelderTitle Geo location

4. drupalgap installieren und aktivieren

CheckCheck

Check

CheckCheck

Check

Page 14: MOBILE APPS · 2014-04-14 · MOBILE APPS MIT DRUPALGAP UND DRUPAL 7 von IRC/drupal.org: lucastockmann. WAS IST DRUPALGAP? FRAMEWORK Open Source Mobile Application Development Kit

MOBILE APP PART1. "Installieren"2. settings.js einrichten3. Module erstellen

Page erstellenFeld für TitelButton zum erstellen des Nodes

4. App kompilieren

Page 15: MOBILE APPS · 2014-04-14 · MOBILE APPS MIT DRUPALGAP UND DRUPAL 7 von IRC/drupal.org: lucastockmann. WAS IST DRUPALGAP? FRAMEWORK Open Source Mobile Application Development Kit

SETTINGS.JS EINRICHTENdefault.settings.js kopieren nach settings.jssettings.js customizen

Drupal.settings.site_path = 'http://dcf.dev';drupalgap.settings.title = 'DrupalCamp Frankfurt';

Page 16: MOBILE APPS · 2014-04-14 · MOBILE APPS MIT DRUPALGAP UND DRUPAL 7 von IRC/drupal.org: lucastockmann. WAS IST DRUPALGAP? FRAMEWORK Open Source Mobile Application Development Kit

MODUL ERSTELLEN - 1Neue Datei inapp/modules/custom/[app_name]/[app_name].jsModul in settings.js registrieren

Drupal.modules.custom['drupal_camp_frankfurt'] = { name: 'drupal_camp_frankfurt'};

Page 17: MOBILE APPS · 2014-04-14 · MOBILE APPS MIT DRUPALGAP UND DRUPAL 7 von IRC/drupal.org: lucastockmann. WAS IST DRUPALGAP? FRAMEWORK Open Source Mobile Application Development Kit

MODUL ERSTELLEN - 2Page erstellen

function dcf_menu() { var items = { 'publish_geo_location':{ 'title':'Publish my Geo-Location', 'page_callback':'drupalgap_get_form', 'page_arguments':['dcf_publish_location_form'] } }; return items;}

Page 18: MOBILE APPS · 2014-04-14 · MOBILE APPS MIT DRUPALGAP UND DRUPAL 7 von IRC/drupal.org: lucastockmann. WAS IST DRUPALGAP? FRAMEWORK Open Source Mobile Application Development Kit

MODUL ERSTELLEN - 3Form bauen

function dcf_publish_location_form(form, form_state) { form.elements.location_name = { type:'textfield', title:'Location name', required:true }; form.elements.submit = { type:'submit', value:'Publish location' }; return form;}

Page 19: MOBILE APPS · 2014-04-14 · MOBILE APPS MIT DRUPALGAP UND DRUPAL 7 von IRC/drupal.org: lucastockmann. WAS IST DRUPALGAP? FRAMEWORK Open Source Mobile Application Development Kit

MODUL ERSTELLEN - 4Submit handler bauen

function dcf_publish_location_form_submit(form, form_state) { navigator.geolocation.getCurrentPosition( function (position) { var node = { title: form_state.values.location_name, field_geo_location: { // Das Feld mit den Geo-Daten befüllen. }, type: 'location' }; node_save(node, { success:function(result) { } }); } );}