Building Mobile by: Tyler Frankenstein Apps by … Mobile Apps by Example ... by: Tyler Frankenstein...
Transcript of Building Mobile by: Tyler Frankenstein Apps by … Mobile Apps by Example ... by: Tyler Frankenstein...
![Page 1: Building Mobile by: Tyler Frankenstein Apps by … Mobile Apps by Example ... by: Tyler Frankenstein Drupal Developer (7+ Years) Easy Street 3 Co-Founder (June 2010 ... “DrupalGap](https://reader034.fdocuments.in/reader034/viewer/2022051509/5afaeb937f8b9a2d5d8ee881/html5/thumbnails/1.jpg)
Building Mobile Apps by Example
DrupalCamp Ohio 2014November 14 - Columbus, OH
by: Tyler Frankenstein
![Page 2: Building Mobile by: Tyler Frankenstein Apps by … Mobile Apps by Example ... by: Tyler Frankenstein Drupal Developer (7+ Years) Easy Street 3 Co-Founder (June 2010 ... “DrupalGap](https://reader034.fdocuments.in/reader034/viewer/2022051509/5afaeb937f8b9a2d5d8ee881/html5/thumbnails/2.jpg)
● Drupal Developer (7+ Years)
● Easy Street 3 Co-Founder (June 2010 - Present)
● U.M. Library Drupal Developer (Feb 2011 - May 2013)
● Drupal Contributor (10+ Modules)
● DrupalCon Austin 2014 (Co-Presenter w/ Commerce Guys)
● DrupalGap (Creator / Lead Developer)
http://drupal.org/u/tyler.frankenstein
![Page 3: Building Mobile by: Tyler Frankenstein Apps by … Mobile Apps by Example ... by: Tyler Frankenstein Drupal Developer (7+ Years) Easy Street 3 Co-Founder (June 2010 ... “DrupalGap](https://reader034.fdocuments.in/reader034/viewer/2022051509/5afaeb937f8b9a2d5d8ee881/html5/thumbnails/3.jpg)
“...why would I want a mobile application?”
“I already have a responsive, mobile friendly Drupal website…”
![Page 4: Building Mobile by: Tyler Frankenstein Apps by … Mobile Apps by Example ... by: Tyler Frankenstein Drupal Developer (7+ Years) Easy Street 3 Co-Founder (June 2010 ... “DrupalGap](https://reader034.fdocuments.in/reader034/viewer/2022051509/5afaeb937f8b9a2d5d8ee881/html5/thumbnails/4.jpg)
Mobile Application Device Features
● Accelerometer● Audio Capture● Camera*● Contact List● GPS● Notifications● Offline Storage* Take a photo, record video, and browse local media library.
![Page 5: Building Mobile by: Tyler Frankenstein Apps by … Mobile Apps by Example ... by: Tyler Frankenstein Drupal Developer (7+ Years) Easy Street 3 Co-Founder (June 2010 ... “DrupalGap](https://reader034.fdocuments.in/reader034/viewer/2022051509/5afaeb937f8b9a2d5d8ee881/html5/thumbnails/5.jpg)
1. GeoTag a Photo and Upload it
2. GeoLocate Nearby Content and Display on Map
Build 2 Example Mobile Apps
![Page 6: Building Mobile by: Tyler Frankenstein Apps by … Mobile Apps by Example ... by: Tyler Frankenstein Drupal Developer (7+ Years) Easy Street 3 Co-Founder (June 2010 ... “DrupalGap](https://reader034.fdocuments.in/reader034/viewer/2022051509/5afaeb937f8b9a2d5d8ee881/html5/thumbnails/6.jpg)
Tools Involved
![Page 7: Building Mobile by: Tyler Frankenstein Apps by … Mobile Apps by Example ... by: Tyler Frankenstein Drupal Developer (7+ Years) Easy Street 3 Co-Founder (June 2010 ... “DrupalGap](https://reader034.fdocuments.in/reader034/viewer/2022051509/5afaeb937f8b9a2d5d8ee881/html5/thumbnails/7.jpg)
Why Drupal?
Drupal let’s us easily manage our...
Users Content Files
![Page 8: Building Mobile by: Tyler Frankenstein Apps by … Mobile Apps by Example ... by: Tyler Frankenstein Drupal Developer (7+ Years) Easy Street 3 Co-Founder (June 2010 ... “DrupalGap](https://reader034.fdocuments.in/reader034/viewer/2022051509/5afaeb937f8b9a2d5d8ee881/html5/thumbnails/8.jpg)
Why PhoneGap?It let’s us utilize familiar web technologies like...
and then ...
![Page 9: Building Mobile by: Tyler Frankenstein Apps by … Mobile Apps by Example ... by: Tyler Frankenstein Drupal Developer (7+ Years) Easy Street 3 Co-Founder (June 2010 ... “DrupalGap](https://reader034.fdocuments.in/reader034/viewer/2022051509/5afaeb937f8b9a2d5d8ee881/html5/thumbnails/9.jpg)
Compiles them into Mobile Apps
Android (JAVA) (Objective-C, Swift)
![Page 10: Building Mobile by: Tyler Frankenstein Apps by … Mobile Apps by Example ... by: Tyler Frankenstein Drupal Developer (7+ Years) Easy Street 3 Co-Founder (June 2010 ... “DrupalGap](https://reader034.fdocuments.in/reader034/viewer/2022051509/5afaeb937f8b9a2d5d8ee881/html5/thumbnails/10.jpg)
If we know HTML, CSS and JavaScript, then...
… we can build mobile apps.
![Page 11: Building Mobile by: Tyler Frankenstein Apps by … Mobile Apps by Example ... by: Tyler Frankenstein Drupal Developer (7+ Years) Easy Street 3 Co-Founder (June 2010 ... “DrupalGap](https://reader034.fdocuments.in/reader034/viewer/2022051509/5afaeb937f8b9a2d5d8ee881/html5/thumbnails/11.jpg)
jQuery Mobile takes simple HTML and...
Why jQuery Mobile?
… makes it pretty, and mobile friendly.
![Page 12: Building Mobile by: Tyler Frankenstein Apps by … Mobile Apps by Example ... by: Tyler Frankenstein Drupal Developer (7+ Years) Easy Street 3 Co-Founder (June 2010 ... “DrupalGap](https://reader034.fdocuments.in/reader034/viewer/2022051509/5afaeb937f8b9a2d5d8ee881/html5/thumbnails/12.jpg)
jQuery Mobile’s HTML Markup
![Page 13: Building Mobile by: Tyler Frankenstein Apps by … Mobile Apps by Example ... by: Tyler Frankenstein Drupal Developer (7+ Years) Easy Street 3 Co-Founder (June 2010 ... “DrupalGap](https://reader034.fdocuments.in/reader034/viewer/2022051509/5afaeb937f8b9a2d5d8ee881/html5/thumbnails/13.jpg)
That’s great, but...
… how do we handle multiple pages?
![Page 14: Building Mobile by: Tyler Frankenstein Apps by … Mobile Apps by Example ... by: Tyler Frankenstein Drupal Developer (7+ Years) Easy Street 3 Co-Founder (June 2010 ... “DrupalGap](https://reader034.fdocuments.in/reader034/viewer/2022051509/5afaeb937f8b9a2d5d8ee881/html5/thumbnails/14.jpg)
Say “Hello World” to DrupalGap“DrupalGap is an open source mobile application development kit for Drupal websites. It is powered by PhoneGap, jQuery Mobile and Drupal.”
![Page 15: Building Mobile by: Tyler Frankenstein Apps by … Mobile Apps by Example ... by: Tyler Frankenstein Drupal Developer (7+ Years) Easy Street 3 Co-Founder (June 2010 ... “DrupalGap](https://reader034.fdocuments.in/reader034/viewer/2022051509/5afaeb937f8b9a2d5d8ee881/html5/thumbnails/15.jpg)
We use Drupal to easily build our websites...
… so let’s use DrupalGap to easily build our apps.
![Page 16: Building Mobile by: Tyler Frankenstein Apps by … Mobile Apps by Example ... by: Tyler Frankenstein Drupal Developer (7+ Years) Easy Street 3 Co-Founder (June 2010 ... “DrupalGap](https://reader034.fdocuments.in/reader034/viewer/2022051509/5afaeb937f8b9a2d5d8ee881/html5/thumbnails/16.jpg)
Easily build mobile apps, you say?
Let’s see it to believe it…
Example #1: GeoTag a Photo and Upload it
http://tylerfrankenstein.com/code/build-mobile-app-geo-tag-photo
![Page 17: Building Mobile by: Tyler Frankenstein Apps by … Mobile Apps by Example ... by: Tyler Frankenstein Drupal Developer (7+ Years) Easy Street 3 Co-Founder (June 2010 ... “DrupalGap](https://reader034.fdocuments.in/reader034/viewer/2022051509/5afaeb937f8b9a2d5d8ee881/html5/thumbnails/17.jpg)
Not too bad, how about one more...
Example #2: GeoLocate Nearby Content and Display on Map
http://www.tylerfrankenstein.com/code/build-mobile-app-geo-locate-content-drupal
![Page 18: Building Mobile by: Tyler Frankenstein Apps by … Mobile Apps by Example ... by: Tyler Frankenstein Drupal Developer (7+ Years) Easy Street 3 Co-Founder (June 2010 ... “DrupalGap](https://reader034.fdocuments.in/reader034/viewer/2022051509/5afaeb937f8b9a2d5d8ee881/html5/thumbnails/18.jpg)
Neat-o! How do I get started?
DrupalGap Module● https://drupal.org/project/drupalgap
DrupalGap SDK● https://github.com/signalpoint/DrupalGap
Hello World● http://drupalgap.org/hello-world
![Page 19: Building Mobile by: Tyler Frankenstein Apps by … Mobile Apps by Example ... by: Tyler Frankenstein Drupal Developer (7+ Years) Easy Street 3 Co-Founder (June 2010 ... “DrupalGap](https://reader034.fdocuments.in/reader034/viewer/2022051509/5afaeb937f8b9a2d5d8ee881/html5/thumbnails/19.jpg)
Questions / Comments ?
● https://drupal.org/u/tyler.frankenstein● https://github.com/signalpoint● http://tylerfrankenstein.com● @FrankensteinTJ
“Thank you!”