Going Native: How to build mobile apps

needlessoybeanMobile - Wireless

Dec 10, 2013 (3 years and 6 months ago)

54 views

Going Native:
How to
build mobile apps

Stefan Wittmann

Zen Product Specialist

‘Killer app‘?

* www.dilbert.com

I have to build a mobile app

But

how?

The native approach


iOS



Objective
-
C


Android


Java


Windows


.NET

The native approach

Pro‘s *

Con‘s *

Full access to the device features

Users can skip

updates

Easy payment process

Expensive

to develop

Higher visibility

Needs

multiple code bases

Perform faster than mobile apps

* This listing is neither

complete nor prioritized

The web approach


Leverages HTML
5 + CSS3


The web approach

Pro‘s *

Con‘s *

Needs

only one code base

Limited access to the device features

Can be launched and updated at any time

No payment process

No installation process

Needs to support multiple browsers

Existing web apps can be retrofitted

* This listing is neither

complete nor prioritized

So many roads…


Native Development


Longer release cycles


Rewrite code for device types


Web base Development


Not a native app


Browser Feeling


Limited access to device features


What about a hybrid?

Native App

Device

API

Native Code

Native

Native App

Device

API

HTML Code

Hybrid

Browser

Device

API

HTML Code

Web

What does
PhoneGap

offer?


Native Stub


Native App


Runs web pages in a container


Provides access to device features




Supports and more!

Four steps to your mobile app

1.
Setup
PhoneGap

2.
Develop mobile app with ZEN

3.
Point the stub to your start
URL

4.
Test mobile app and deploy stub

Setup


iOS


Install
Xcode

(part of the
iOS

SDK)


iOS

Developer License


Android


Install Java SDK + Eclipse


Install Android SDK Tools


Etc.

Step 1: How do I setup
PhoneGap
?


http://
phonegap.com


Mac:


Install
Node.js


$ sudo npm install
-
g
phonegap


$ phonegap create my
-
app


$ cd my
-
app


$ phonegap run
ios


Point it to your start URL


Choose an app name


Configure permissions and device support


Add icons


Configure whitelist URL’s!

Step 2: How do I setup the stub?

Step 3+4: Getting access to the device


Include
cordova.js

in your page


Gives access to multiple API’s


Wraps plugin API


Communication based on request/response
to native stub

Using the camera is easy!

navigator.
camera.getPicture(onSuccess, onFail, { quality: 50,





destinationType:
Camera.DestinationType.FILE_URI });


function onSuccess(imageURI) {





var image = document.getElementById('myImage');





image.src = imageURI;

}

function onFail(message) {





alert('Failed because: ' + message);

}

What about the content?


Zen Mobile


Zen Desktop

START WRITING

YOUR

MOBILE
APP

TODAY