You are on page 1of 12

PhoneGap demo

Sebastian Lopienski
CERN IT

1
Developing for

• Language: Objective-C

• Development:
– IDE: Xcode
– OS: Intel-based Macs only
– developer’s fee required for testing on a device

• Distribution:
– via App Store only
– prior review and approval by Apple

2
Developing for

• Language: Java

• Development:
– IDE: Eclipse

• Distribution:
– via Google Play (called Android Market before)

3
Developing for (mobile) Web

• Language
– server side (if needed): whatever you want
– client side: HTML5, CSS, JavaScript

• Development:
– IDE: whatever you want
– OS: whatever you want

• Distribution:
– deploy on a web server, and just advertise the URL

4
Web – accessing native features

× Accelerometer  Media

× Barcode scanner  Network

~ Camera × Notification

× Compass • alert, sound, vibration

× Contacts  Phone

× File  Storage

 Geolocation/GPS  Offline mode


5
Bridging Web and native together

PhoneGap is a tool to create


native applications
with web technologies
such as HTML5, JavaScript
and CSS

– http://phonegap.com
– supported by Adobe
– aka Apache Cordova:
http://incubator.apache.org/cordova

6
Single code – multiple devices

Hybrid applications:
developed as web,
packaged as native
7
Supported platforms

8
Accessing native features

 Accelerometer  Media

 Barcode scanner  Network

 Camera  Notification

 Compass • alert, sound, vibration

 Contacts  Phone

 File  Storage

 Geolocation/GPS  Offline
9
A demo

10
Commands
cd ~/Projects; rm -rf pg_Timer

# create a new Cordova/PhoneGap project called “Timer”


cordova create pg_Timer ch.cern.slopiens.Timer Timer
cd pg_Timer

# add iOS as a target platform


cordova platform add ios

# remove the default Cordova/PhoneGap app; copy Timer app


rm –rf www/*; cp –r ../Timer/src/* www/

# build the app for iOS


cordova build ios

11
Timer HTML5 app
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<link rel="stylesheet" href="js/jquery.mobile-1.3.0/jquery.mobile-


1.3.0.min.css" />
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.mobile-1.3.0/jquery.mobile-1.3.0.min.js"></script>

<meta name="format-detection" content="telephone=no" />


<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1,
minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<title>Timer</title>
<script type="text/javascript" src="cordova.js"></script>

</head>
<body>
<div data-role="page" id="home">

<div data-role="header" data-theme="b">


<h1>Timer</h1>
</div>
12
<div data-role="content">

You might also like