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