![Page 1: Universal Mind is a digital solutions agency.ptraeg.github.io/ncdevcon-2013/buildmobile/...Universal Mind | Building Mobile Applications: Strategies and Technologies Adobe PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022052001/60140a0cb48bfe5b6715f115/html5/thumbnails/1.jpg)
Universal Mind | Identity Guide 2010
Universal Mind is a digital solutions agency. As our company evolves, it is important that our brand follow suit. Building Mobile Applications:
Strategies and TechnologiesPeter Traeg, Solutions Architect, Universal Mind
Sunday, September 22, 13
![Page 2: Universal Mind is a digital solutions agency.ptraeg.github.io/ncdevcon-2013/buildmobile/...Universal Mind | Building Mobile Applications: Strategies and Technologies Adobe PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022052001/60140a0cb48bfe5b6715f115/html5/thumbnails/2.jpg)
Universal Mind | Building Mobile Applications: Strategies and Technologies
Peter TraegSolutions Architect, Universal Mind
iOS, Android, and HTML 5 Developer
Slides / Code: http://traeg.orgTwitter: @ptraeg
About Me:
Sunday, September 22, 13
![Page 3: Universal Mind is a digital solutions agency.ptraeg.github.io/ncdevcon-2013/buildmobile/...Universal Mind | Building Mobile Applications: Strategies and Technologies Adobe PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022052001/60140a0cb48bfe5b6715f115/html5/thumbnails/3.jpg)
Universal Mind | Building Mobile Applications: Strategies and Technologies
Sunday, September 22, 13
![Page 4: Universal Mind is a digital solutions agency.ptraeg.github.io/ncdevcon-2013/buildmobile/...Universal Mind | Building Mobile Applications: Strategies and Technologies Adobe PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022052001/60140a0cb48bfe5b6715f115/html5/thumbnails/4.jpg)
Universal Mind | Building Mobile Applications: Strategies and Technologies
Agenda: Mobile App Development
4WAYS 40Sunday, September 22, 13
![Page 5: Universal Mind is a digital solutions agency.ptraeg.github.io/ncdevcon-2013/buildmobile/...Universal Mind | Building Mobile Applications: Strategies and Technologies Adobe PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022052001/60140a0cb48bfe5b6715f115/html5/thumbnails/5.jpg)
Universal Mind | Building Mobile Applications: Strategies and Technologies
A quick tour of 4 different mobile development technologies. Strategies for getting started in each.
• iOS Native Development
• Android Native Development
• PhoneGap
• Appcelerator Titanium
Agenda:
Sunday, September 22, 13
![Page 6: Universal Mind is a digital solutions agency.ptraeg.github.io/ncdevcon-2013/buildmobile/...Universal Mind | Building Mobile Applications: Strategies and Technologies Adobe PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022052001/60140a0cb48bfe5b6715f115/html5/thumbnails/6.jpg)
Universal Mind | Building Mobile Applications: Strategies and Technologies
Let’s try to make sense of it all....
Objective-C Java
Javascript
HTML5Eclipse
X-Code
Native
Hybrid
Build in the cloud
CSS
StoryboardActiv
ity
Intent
Titanium Studio
Sunday, September 22, 13
![Page 7: Universal Mind is a digital solutions agency.ptraeg.github.io/ncdevcon-2013/buildmobile/...Universal Mind | Building Mobile Applications: Strategies and Technologies Adobe PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022052001/60140a0cb48bfe5b6715f115/html5/thumbnails/7.jpg)
Universal Mind | Building Mobile Applications: Strategies and Technologies
Demonstration App ...
Sunday, September 22, 13
![Page 8: Universal Mind is a digital solutions agency.ptraeg.github.io/ncdevcon-2013/buildmobile/...Universal Mind | Building Mobile Applications: Strategies and Technologies Adobe PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022052001/60140a0cb48bfe5b6715f115/html5/thumbnails/8.jpg)
Universal Mind | Building Mobile Applications: Strategies and Technologies
iOS Native Development
• Requires Mac OSX•Dev Tools are free of charge• $99/yr developer fee to test on devices and
submit to the Apple AppStore
Language: Objective-C
Dev Tools: • X-Code• iOS SDK
Sunday, September 22, 13
![Page 9: Universal Mind is a digital solutions agency.ptraeg.github.io/ncdevcon-2013/buildmobile/...Universal Mind | Building Mobile Applications: Strategies and Technologies Adobe PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022052001/60140a0cb48bfe5b6715f115/html5/thumbnails/9.jpg)
Universal Mind | Building Mobile Applications: Strategies and Technologies
Tour of iOS Native Development
• X-Code
• ViewController
•NavigationController
• Storyboards
Sunday, September 22, 13
![Page 10: Universal Mind is a digital solutions agency.ptraeg.github.io/ncdevcon-2013/buildmobile/...Universal Mind | Building Mobile Applications: Strategies and Technologies Adobe PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022052001/60140a0cb48bfe5b6715f115/html5/thumbnails/10.jpg)
Universal Mind | Building Mobile Applications: Strategies and Technologies
iOS Learning Resources• iOS Programming: The Big Nerd Ranch
Guide - Conway/Hillegass
• Objective-C Programming: The Big Nerd Ranch Guide - Hillegass
• Stanford University iOS Course on iTunes
•WWDC Videos
• Ray Wenderlich.com - iOS Tutorials
Sunday, September 22, 13
![Page 11: Universal Mind is a digital solutions agency.ptraeg.github.io/ncdevcon-2013/buildmobile/...Universal Mind | Building Mobile Applications: Strategies and Technologies Adobe PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022052001/60140a0cb48bfe5b6715f115/html5/thumbnails/11.jpg)
Universal Mind | Building Mobile Applications: Strategies and Technologies
Android Native Development
• Works on Mac, Windows, or Linux• One time $25 fee to distribute apps on
Google Play.
Language: Java
Dev Tools: • Eclipse• Eclipse ADT Plug-In• Android Studio• Android SDK
Sunday, September 22, 13
![Page 12: Universal Mind is a digital solutions agency.ptraeg.github.io/ncdevcon-2013/buildmobile/...Universal Mind | Building Mobile Applications: Strategies and Technologies Adobe PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022052001/60140a0cb48bfe5b6715f115/html5/thumbnails/12.jpg)
Universal Mind | Building Mobile Applications: Strategies and Technologies
Tour of Android Native Development
• Eclipse
• Android Development Tools
• Activities / Intents
• Android Support Library
• XML Based layouts
• Android resource system
Sunday, September 22, 13
![Page 13: Universal Mind is a digital solutions agency.ptraeg.github.io/ncdevcon-2013/buildmobile/...Universal Mind | Building Mobile Applications: Strategies and Technologies Adobe PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022052001/60140a0cb48bfe5b6715f115/html5/thumbnails/13.jpg)
Universal Mind | Building Mobile Applications: Strategies and Technologies
Android Learning Resources
• Busy Coder’s Guide To Android Development - Mark Murphy, CommonsWare
• Beginning Android 4 Application Development - Lee
• Vogella.com - Android Tutorials
Sunday, September 22, 13
![Page 14: Universal Mind is a digital solutions agency.ptraeg.github.io/ncdevcon-2013/buildmobile/...Universal Mind | Building Mobile Applications: Strategies and Technologies Adobe PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022052001/60140a0cb48bfe5b6715f115/html5/thumbnails/14.jpg)
Universal Mind | Building Mobile Applications: Strategies and Technologies
PhoneGap Development• Cross Device Support
• User interface written in HTML / CSS / JS
• Supports:• iOS
• Android
• Windows 8
• Windows Phone 7 & 8
• Blackberry 5.x+
• WebOS
• Symbian
• Samsung Bada
Sunday, September 22, 13
![Page 15: Universal Mind is a digital solutions agency.ptraeg.github.io/ncdevcon-2013/buildmobile/...Universal Mind | Building Mobile Applications: Strategies and Technologies Adobe PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022052001/60140a0cb48bfe5b6715f115/html5/thumbnails/15.jpg)
Universal Mind | Building Mobile Applications: Strategies and Technologies
Adobe PhoneGap / Apache Cordova• Apache Cordova: The open source platform• Adobe PhoneGap: An Adobe branded product of Cordova
• PhoneGap core capabilities:• Accelerometer• Camera• Contacts• File System• Media playback & recording• Network availability
• Think of PhoneGap as non-visual components. You still need visual components created in HTML/CSS as any mobile web application would.
Sunday, September 22, 13
![Page 16: Universal Mind is a digital solutions agency.ptraeg.github.io/ncdevcon-2013/buildmobile/...Universal Mind | Building Mobile Applications: Strategies and Technologies Adobe PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022052001/60140a0cb48bfe5b6715f115/html5/thumbnails/16.jpg)
Universal Mind | Building Mobile Applications: Strategies and Technologies
PhoneGap Plugins• Extending your solution when Javascript and the base
PhoneGap functionality don’t meet your needs.
• Large repository of existing plugins:• Barcode Scanning• Bluetooth• Push Notifications• Text to Speech• Calendars• Facebook Connect
• You can write your own
Sunday, September 22, 13
![Page 17: Universal Mind is a digital solutions agency.ptraeg.github.io/ncdevcon-2013/buildmobile/...Universal Mind | Building Mobile Applications: Strategies and Technologies Adobe PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022052001/60140a0cb48bfe5b6715f115/html5/thumbnails/17.jpg)
Universal Mind | Building Mobile Applications: Strategies and Technologies
UX Frameworks for PhoneGap Applications
• jQuery Mobile
• Sencha Touch
• Kendo UI
• Enyo
Sunday, September 22, 13
![Page 18: Universal Mind is a digital solutions agency.ptraeg.github.io/ncdevcon-2013/buildmobile/...Universal Mind | Building Mobile Applications: Strategies and Technologies Adobe PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022052001/60140a0cb48bfe5b6715f115/html5/thumbnails/18.jpg)
Universal Mind | Building Mobile Applications: Strategies and Technologies
PhoneGap Development
• Works on Mac, Windows, or Linux• Free of charge• Still must pay platform AppStore fees and follow processes to
submit to the platform’s AppStore just like with native development.
Language: Javascript
Dev Tools: • HTML/JS editor (eg: WebStorm)• SDKs for platforms you want to
support• Debugging tools (eg: Ripple, Weinre,
Safari - see PhoneGap Wiki)
Sunday, September 22, 13
![Page 19: Universal Mind is a digital solutions agency.ptraeg.github.io/ncdevcon-2013/buildmobile/...Universal Mind | Building Mobile Applications: Strategies and Technologies Adobe PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022052001/60140a0cb48bfe5b6715f115/html5/thumbnails/19.jpg)
Universal Mind | Building Mobile Applications: Strategies and Technologies
PhoneGap In The Cloud
• Build applications in the cloud
• Doesn’t require SDKs installed on the development machine
• App under development can pull new Javascript/HTML/CSS from the build server without directly updating the app - Hydration.
Sunday, September 22, 13
![Page 20: Universal Mind is a digital solutions agency.ptraeg.github.io/ncdevcon-2013/buildmobile/...Universal Mind | Building Mobile Applications: Strategies and Technologies Adobe PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022052001/60140a0cb48bfe5b6715f115/html5/thumbnails/20.jpg)
Universal Mind | Building Mobile Applications: Strategies and Technologies
PhoneGap In The Cloud
• PhoneGap Build• Free for one app, $9.99/mo for up to 25 apps• Push code to PhoneGap by uploading it as a ZIP
file, via GIT integration, or through the PhoneGap CLI in PhoneGap 3.
• ICENIUM
• Cloud hosted IDE with cloud build as well
• Just hit ‘save’ in the IDE and your app is rebuilt on the server.
• Cost $19/mo
Sunday, September 22, 13
![Page 21: Universal Mind is a digital solutions agency.ptraeg.github.io/ncdevcon-2013/buildmobile/...Universal Mind | Building Mobile Applications: Strategies and Technologies Adobe PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022052001/60140a0cb48bfe5b6715f115/html5/thumbnails/21.jpg)
Universal Mind | Building Mobile Applications: Strategies and Technologies
PhoneGap Learning Resources
• Requires a good foundation in HTML, CSS, and Javascript
• Getting Started Guides
• Appliness - free monthly digital magazine
• Blogs - Andrew Trice, Christophe Conraets, Ray Camden
Sunday, September 22, 13
![Page 22: Universal Mind is a digital solutions agency.ptraeg.github.io/ncdevcon-2013/buildmobile/...Universal Mind | Building Mobile Applications: Strategies and Technologies Adobe PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022052001/60140a0cb48bfe5b6715f115/html5/thumbnails/22.jpg)
Universal Mind | Building Mobile Applications: Strategies and Technologies
Appcelerator Development• Cross device development:• iOS• Android• Blackberry• Tizen
• Coming soon:• Windows Phone
• Uses native controls instead of HTML5
Sunday, September 22, 13
![Page 23: Universal Mind is a digital solutions agency.ptraeg.github.io/ncdevcon-2013/buildmobile/...Universal Mind | Building Mobile Applications: Strategies and Technologies Adobe PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022052001/60140a0cb48bfe5b6715f115/html5/thumbnails/23.jpg)
Universal Mind | Building Mobile Applications: Strategies and Technologies
Appcelerator Development
• Works on Mac, Windows, or Linux• Tools are free. Support packages are
available at additional cost.
Language: Javascript
Dev Tools: • Titanium Studio• Platform SDKs
Sunday, September 22, 13
![Page 24: Universal Mind is a digital solutions agency.ptraeg.github.io/ncdevcon-2013/buildmobile/...Universal Mind | Building Mobile Applications: Strategies and Technologies Adobe PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022052001/60140a0cb48bfe5b6715f115/html5/thumbnails/24.jpg)
Universal Mind | Building Mobile Applications: Strategies and Technologies
Tour of Appcelerator Development
• Titanium Studio
• Alloy Framework
•May need to handle iOS and Android views differently
•Deployed .IPA and .APK files will be larger than most PhoneGap or native apps.
Sunday, September 22, 13
![Page 25: Universal Mind is a digital solutions agency.ptraeg.github.io/ncdevcon-2013/buildmobile/...Universal Mind | Building Mobile Applications: Strategies and Technologies Adobe PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022052001/60140a0cb48bfe5b6715f115/html5/thumbnails/25.jpg)
Universal Mind | Building Mobile Applications: Strategies and Technologies
Appcelerator Learning Resources
• Video and Tutorials on the Appcelerator Site
• Many of the books available offer little more than can be found with the above resources.
Sunday, September 22, 13
![Page 26: Universal Mind is a digital solutions agency.ptraeg.github.io/ncdevcon-2013/buildmobile/...Universal Mind | Building Mobile Applications: Strategies and Technologies Adobe PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022052001/60140a0cb48bfe5b6715f115/html5/thumbnails/26.jpg)
Universal Mind | Building Mobile Applications: Strategies and Technologies
Conclusion: Mobile App Development
4WAYS 40Sunday, September 22, 13
![Page 27: Universal Mind is a digital solutions agency.ptraeg.github.io/ncdevcon-2013/buildmobile/...Universal Mind | Building Mobile Applications: Strategies and Technologies Adobe PhoneGap](https://reader033.vdocuments.site/reader033/viewer/2022052001/60140a0cb48bfe5b6715f115/html5/thumbnails/27.jpg)
Universal Mind | Building Mobile Applications: Strategies and Technologies
Thank You !
Sunday, September 22, 13