mobile apps · 2014-04-14 · mobile apps mit drupalgap und drupal 7 von irc/drupal.org:...

MOBILE APPSMIT DRUPALGAP UND DRUPAL 7

vonIRC/drupal.org: lucastockmann

WAS IST DRUPALGAP?

FRAMEWORK

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

DIE TECHNIK DAHINTERPhoneGap

jQuery Mobile

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

WOZU EIGNET ES SICH?

NACHTEILEKeine "Native" App

Daher langsamer als normale Apps

VORTEILELeichte Sprache (Javascript)Zugriff auf System-Komponenten

KameraGeo-Location...

Multi-PlattformiOSAndroid...

WAS BRAUCHE ICH ZUM

ENTWICKELN?

SETUPDrupal Installation

DrupalGap ModulViews DatasourceServices

DrupalGap InstallationPhoneGap Account zum kompilieren

UNSER BEISPIELPROJEKT

MOBILE APP:User kann einen Nodeerstellen

Title ist CustomStandort wird per GPSabgefragt

DRUPAL:Node Ansicht mit Karte

ZIELE

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

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

Page erstellenFeld für TitelButton zum erstellen des Nodes

4. App kompilieren

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

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

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'};

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;}

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;}

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) { } }); } );}

DEMODRUPAL

MOBILE APP

LINK SAMMLUNGDRUPALGAP

APIBEISPIEL DATEN & SLIDESHELLO WORLD - TUTORIAL