![Page 1: Building Apps is Easy with Drupal, DrupalGap, HTML ...joerobertsphotography.com/presentations/DrupalGap_Drupal...Why Drupal? What is DrupalGap? App #1: Mobile App - GeoTag a Photo](https://reader035.vdocuments.us/reader035/viewer/2022070721/5ee19b4ead6a402d666c6ce7/html5/thumbnails/1.jpg)
Building Apps is Easy with Drupal, DrupalGap, HTML, JavaScript & CSS for Apple and Android StoresDrupaldelphia 2016By Joe Roberts
![Page 2: Building Apps is Easy with Drupal, DrupalGap, HTML ...joerobertsphotography.com/presentations/DrupalGap_Drupal...Why Drupal? What is DrupalGap? App #1: Mobile App - GeoTag a Photo](https://reader035.vdocuments.us/reader035/viewer/2022070721/5ee19b4ead6a402d666c6ce7/html5/thumbnails/2.jpg)
● Why Drupal?● What is DrupalGap?● App #1: Mobile App - GeoTag a Photo and Upload it● App #2: Web App (Headless Drupal) - Get Nearby
Content and Show on Map● How to Get Involved● Questions
NOTE: This presentation will be available online after presentation has been given :-).
Agenda
![Page 3: Building Apps is Easy with Drupal, DrupalGap, HTML ...joerobertsphotography.com/presentations/DrupalGap_Drupal...Why Drupal? What is DrupalGap? App #1: Mobile App - GeoTag a Photo](https://reader035.vdocuments.us/reader035/viewer/2022070721/5ee19b4ead6a402d666c6ce7/html5/thumbnails/3.jpg)
Why Drupal… Cause it’s Drupaldelphia :-)
![Page 4: Building Apps is Easy with Drupal, DrupalGap, HTML ...joerobertsphotography.com/presentations/DrupalGap_Drupal...Why Drupal? What is DrupalGap? App #1: Mobile App - GeoTag a Photo](https://reader035.vdocuments.us/reader035/viewer/2022070721/5ee19b4ead6a402d666c6ce7/html5/thumbnails/4.jpg)
![Page 5: Building Apps is Easy with Drupal, DrupalGap, HTML ...joerobertsphotography.com/presentations/DrupalGap_Drupal...Why Drupal? What is DrupalGap? App #1: Mobile App - GeoTag a Photo](https://reader035.vdocuments.us/reader035/viewer/2022070721/5ee19b4ead6a402d666c6ce7/html5/thumbnails/5.jpg)
![Page 6: Building Apps is Easy with Drupal, DrupalGap, HTML ...joerobertsphotography.com/presentations/DrupalGap_Drupal...Why Drupal? What is DrupalGap? App #1: Mobile App - GeoTag a Photo](https://reader035.vdocuments.us/reader035/viewer/2022070721/5ee19b4ead6a402d666c6ce7/html5/thumbnails/6.jpg)
![Page 7: Building Apps is Easy with Drupal, DrupalGap, HTML ...joerobertsphotography.com/presentations/DrupalGap_Drupal...Why Drupal? What is DrupalGap? App #1: Mobile App - GeoTag a Photo](https://reader035.vdocuments.us/reader035/viewer/2022070721/5ee19b4ead6a402d666c6ce7/html5/thumbnails/7.jpg)
![Page 8: Building Apps is Easy with Drupal, DrupalGap, HTML ...joerobertsphotography.com/presentations/DrupalGap_Drupal...Why Drupal? What is DrupalGap? App #1: Mobile App - GeoTag a Photo](https://reader035.vdocuments.us/reader035/viewer/2022070721/5ee19b4ead6a402d666c6ce7/html5/thumbnails/8.jpg)
![Page 9: Building Apps is Easy with Drupal, DrupalGap, HTML ...joerobertsphotography.com/presentations/DrupalGap_Drupal...Why Drupal? What is DrupalGap? App #1: Mobile App - GeoTag a Photo](https://reader035.vdocuments.us/reader035/viewer/2022070721/5ee19b4ead6a402d666c6ce7/html5/thumbnails/9.jpg)
![Page 10: Building Apps is Easy with Drupal, DrupalGap, HTML ...joerobertsphotography.com/presentations/DrupalGap_Drupal...Why Drupal? What is DrupalGap? App #1: Mobile App - GeoTag a Photo](https://reader035.vdocuments.us/reader035/viewer/2022070721/5ee19b4ead6a402d666c6ce7/html5/thumbnails/10.jpg)
What is DrupalGap?An Open Source Mobile Application Development Kit
for Drupal Websites
Build Custom Mobile Applications for Android and iOS Devices to Communicate with Drupal Websites
![Page 11: Building Apps is Easy with Drupal, DrupalGap, HTML ...joerobertsphotography.com/presentations/DrupalGap_Drupal...Why Drupal? What is DrupalGap? App #1: Mobile App - GeoTag a Photo](https://reader035.vdocuments.us/reader035/viewer/2022070721/5ee19b4ead6a402d666c6ce7/html5/thumbnails/11.jpg)
DrupalGap has two parts...
Drupal Module
Mobile Application Development Kit
● http://www.drupal.org/project/drupalgap● https://www.github.com/signalpoint/DrupalGapThe Drupal Module opens up communication possibilities between a mobile app and the website. The Mobile Application Development Kit is used by developers to create custom mobile applications. (All can be found at www.DrupalGap.org)
Let’s first look at the DrupalGap module...
![Page 12: Building Apps is Easy with Drupal, DrupalGap, HTML ...joerobertsphotography.com/presentations/DrupalGap_Drupal...Why Drupal? What is DrupalGap? App #1: Mobile App - GeoTag a Photo](https://reader035.vdocuments.us/reader035/viewer/2022070721/5ee19b4ead6a402d666c6ce7/html5/thumbnails/12.jpg)
How does the DrupalGap module work?The DrupalGap module uses the Servicesand Views Datasource modules to help mobile apps communicate with a Drupal website using JSON.
Services
Views Datasource
![Page 13: Building Apps is Easy with Drupal, DrupalGap, HTML ...joerobertsphotography.com/presentations/DrupalGap_Drupal...Why Drupal? What is DrupalGap? App #1: Mobile App - GeoTag a Photo](https://reader035.vdocuments.us/reader035/viewer/2022070721/5ee19b4ead6a402d666c6ce7/html5/thumbnails/13.jpg)
What tools does the DrupalGap mobile application development kit use to build apps?
DrupalGap uses jQueryMobile to build the user interface and PhoneGap to compile the App for installation on Android and iOS mobile devices.
Let’s first look at how PhoneGap works...
![Page 14: Building Apps is Easy with Drupal, DrupalGap, HTML ...joerobertsphotography.com/presentations/DrupalGap_Drupal...Why Drupal? What is DrupalGap? App #1: Mobile App - GeoTag a Photo](https://reader035.vdocuments.us/reader035/viewer/2022070721/5ee19b4ead6a402d666c6ce7/html5/thumbnails/14.jpg)
How does PhoneGap work?
HTML + CSS + JavaScriptPhoneGap takes HTML, CSS and JavaScript and compiles it into a Mobile Application for iOS and Android mobile devices.PhoneGap provides access via JavaScript to device features such as the Camera, GPS, File System, Contacts, Compass, accelerometer, etc.If we can build a website, then we can build a mobile app for multiple platforms, with one set of code...
![Page 15: Building Apps is Easy with Drupal, DrupalGap, HTML ...joerobertsphotography.com/presentations/DrupalGap_Drupal...Why Drupal? What is DrupalGap? App #1: Mobile App - GeoTag a Photo](https://reader035.vdocuments.us/reader035/viewer/2022070721/5ee19b4ead6a402d666c6ce7/html5/thumbnails/15.jpg)
Putting it all together…
Services
Views Datasource
DrupalGap uses the Services and Views Datasource modules to talk to Drupal, it also uses jQueryMobile to build the user interface, and it uses PhoneGap to access device features and compile the mobile application for Android and iOS.
![Page 16: Building Apps is Easy with Drupal, DrupalGap, HTML ...joerobertsphotography.com/presentations/DrupalGap_Drupal...Why Drupal? What is DrupalGap? App #1: Mobile App - GeoTag a Photo](https://reader035.vdocuments.us/reader035/viewer/2022070721/5ee19b4ead6a402d666c6ce7/html5/thumbnails/16.jpg)
How does it work?DrupalGap inherits Drupal development concepts except it uses JavaScript instead of PHP.
● Regions● Blocks● Menus● Pages
Customize it using:● Modules● Hooks● Themes● Templates
![Page 17: Building Apps is Easy with Drupal, DrupalGap, HTML ...joerobertsphotography.com/presentations/DrupalGap_Drupal...Why Drupal? What is DrupalGap? App #1: Mobile App - GeoTag a Photo](https://reader035.vdocuments.us/reader035/viewer/2022070721/5ee19b4ead6a402d666c6ce7/html5/thumbnails/17.jpg)
There is more and it is all FREE:
● Contributed● Forms API● Render arrays/objects● Widgets● Localization (Multilingual Support)● Lots of other goodies
Support for Drupal 8:● Alpha is almost ready for release. ● Purely written in JavaScript. ● Supports Bootstrap, Foundation and any design
frame work you want to use.
![Page 18: Building Apps is Easy with Drupal, DrupalGap, HTML ...joerobertsphotography.com/presentations/DrupalGap_Drupal...Why Drupal? What is DrupalGap? App #1: Mobile App - GeoTag a Photo](https://reader035.vdocuments.us/reader035/viewer/2022070721/5ee19b4ead6a402d666c6ce7/html5/thumbnails/18.jpg)
Episode 7: Mobile App -Geotag a Photo and upload it(http://tylerfrankenstein.com/code/build-mobile-app-geo-tag-photo)
![Page 19: Building Apps is Easy with Drupal, DrupalGap, HTML ...joerobertsphotography.com/presentations/DrupalGap_Drupal...Why Drupal? What is DrupalGap? App #1: Mobile App - GeoTag a Photo](https://reader035.vdocuments.us/reader035/viewer/2022070721/5ee19b4ead6a402d666c6ce7/html5/thumbnails/19.jpg)
Episode 8: Web App (Headless Drupal) -Get Nearby Content and Show on Map
(http://tylerfrankenstein.com/code/build-mobile-app-geo-locate-content-drupal& my_module.js file - http://pastebin.com/xFyDhTzV)
![Page 20: Building Apps is Easy with Drupal, DrupalGap, HTML ...joerobertsphotography.com/presentations/DrupalGap_Drupal...Why Drupal? What is DrupalGap? App #1: Mobile App - GeoTag a Photo](https://reader035.vdocuments.us/reader035/viewer/2022070721/5ee19b4ead6a402d666c6ce7/html5/thumbnails/20.jpg)
How to Get InvolvedHave an idea about how DrupalGapcan be improved? Spotted a bug? Squashed a bug?•View the DrupalGap contributions page (http://drupalgap.org/contribute) to learn more about getting involved•Join the DrupalGap Association(http://drupalgap.org/association) or make a donation(http://drupalgap.org/donate) to support DrupalGapNeed Help?•Geting Started - http://drupalgap.org/get-started
•Troubleshooting - http://drupalgap.org/troubleshoot
•Upgrading - http://drupalgap.org/upgrade
•Support Topics - http://drupalgap.org/support
•Premium Support - http://drupalgap.org/premium-support
(see the partner program(http://easystreet3.com/partners) for discounts)
Stay Connected•Follow DrupalGap on Twitter -https://twitter.com/DrupalGap•Like DrupalGap on Facebook -http://facebook.com/drupalgapThanks, and happy coding!
Signup for DrupalGap updateshttp://www.drupalgap.com/newsletter/updates
![Page 21: Building Apps is Easy with Drupal, DrupalGap, HTML ...joerobertsphotography.com/presentations/DrupalGap_Drupal...Why Drupal? What is DrupalGap? App #1: Mobile App - GeoTag a Photo](https://reader035.vdocuments.us/reader035/viewer/2022070721/5ee19b4ead6a402d666c6ce7/html5/thumbnails/21.jpg)
Questions and Contact Information!
?Questions Time?
Contact Information:
Joe [email protected]@JoeRobertsPhotoIRC Chat Name: JoeRobertsPhotog
IRC Chat:URL: http://webchat.freenode.net/Channel: #drupal-drupalgap
***SPECIAL THANKS to the creator of DrupalGap Tyler Frankenstein.IRC Chat Name: frankenstein