Post on 02-Jul-2015
description
grow
Mobile apps with Umbraco and PhoneGap
Theo Paraskevopoulos. CodeGarden 2014
grow
Hello!
Theo Paraskevopoulos Director, Designer, Developer GrowCreate, Oxford, UK www.growcreate.co.uk @theotron
grow
CodeGarden app
grow
A lot of moving parts.
grow
grow
Moving parts
§ 4 Operating systems iOS, Android, Mac OS, Windows
§ 3 web servers
Node, IIS, mini-Python
§ 4 frameworks Umbraco, PhoneGap, Angular, Ionic, Sass
§ 3 IDEs
Sublime, Visual Studio, XCode
grow
Here’s the plan
§ What is PhoneGap § Discuss UI frameworks § Make an app with Ionic § Hook up Umbraco § Build, test, release!
grow
What is PhoneGap?
HTML5 stack App wrapper Device features
grow
PhoneGap AKAs
PhoneGap Apache Cordova Adobe Build
grow
App architecture
JSON feed Single-page app Touch UI
grow
UI frameworks
TOPCOAT R
Full stack Custom stack
DOM
MV*
UI
Credit: Christophe Coenraets http://coenraets.org
grow
Why Ionic
“…built with Sass and optimized for AngularJS.… …minimal DOM manipulation, zero jQuery, and hardware accelerated transitions… …focused on native or hybrid apps instead of mobile websites… ionicframework.com
grow
The winning stack
Umbraco API Angular app Ionic UI
grow
grow
Let’s do this.
grow
Let’s do it!
§ Install Node § Command-line rocks! > npm install –g cordova > npm install –g gulp ionic
> ionic start cg14 …
grow
Beta testing
> ionic build android > generate unsigned .apk > distribute OTA
> ionic build ios > generate .ipa [!] > distribute OTA
:|
:(
grow
Better testing
Our app Adobe Build Test Flight
grow
Release
> add icons and splash screen > create key + sign file > generate final .apk > upload to play store ($25)
6H
> add icons and splash screen > sign + add provisioning file > generate .ipa in xcode > upload to app store ($99)
5D+
grow
We covered a lot of ground
§ PhoneGap wrapper § Big choice for frameworks § Clever little Ionic § Umbraco solid as ever § App stores. Meh
grow
Big picture
“…we believe that HTML5 will rule on mobile, exactly as it has on the desktop… ionicframework.com
grow
Big picture, small devices
grow
Until next year. @theotron
grow