Build Native Mobile Apps with Web Technologies

Using Web Technologies to Build Native iPhone
and Android Applications

Mobile for the rest of us
Jeff Haynie
@jhaynie

About Me

• @jhaynie
• http://blog.jeffhaynie.us
• jhaynie@appcelerator.com
• #titanium_app on freenode

Why Mobile?

4 Billion devices worldwide

iPhone
• 50 Million iPhones - 5 Million this past
quarter
• 1.5 Billions application downloads
• 65K+ applications
• iPhone has raised bar and proven how to
make money in mobile

Android

• 1M phones already shipping (900% growth
expected)
• 20 new phones coming out EY 2009
• Thousands and thousands of applications
• It’s Google

iPhone: 8% market share but 43% of mobile web

Explosion of
opportunities

20% year over year growth anticipated for
next 5 years in smart phones

Oh no.
• iPhone (Objective-C, 28th!)
• Android (Java, Google Style)
• RIM (Java, Blackberry or Midlet style)
• Symbian (old school C)
• Palm Pre (Web 2.0)
• Windows Mobile (.NET compact)
• Maemo (GTK+)

Oh, yeah...
• Web Browsers
• Desktop Apps
• Net books
• E-Book readers
• Tablets
• etc etc.

We Web
• HTML, CSS, JavaScript
• Presentation / UI can easily be built with
HTML/ CSS
• JavaScript API for mobile features, platform,
UI
• Run locally, integrate cloud services

It’s the UX

Build applications that ﬁt the
use cases that are tailored for
the modality

What we want
• Skills
• Tools
• Reusability
• Platforms
• Portability
• Speed / Cost
• Open source / Standards

Appcelerator

Empower developers to quickly create and
commercialize web, desktop and mobile
applications

Appcelerator Products
Create, test, and commercialize native mobile and desktop
applications with the web technologies you use today.

Develop Native iPhone Build Desktop apps Cloud services used for Web development tools
and Android apps with that can be deployed testing, packaging, that enable rapid RIA
full access to each with one code base on distribution, and development.
device’s APIs. the PC, Mac, or Linux analytics.
platforms.

Product Architecture
Mobile Desktop
Titanium

Advanced Advanced Advanced APIs
APIs APIs

Analytics Advertising Social Networking Team Collaboration
Appcelerator

- uattro
Q - acebook
F - hare your Project
S
- Usage
Network

- reystripe
G - Twitter - Account Management
- Events
- ahoo
Y

Training
Support

Titanium

• Desktop: Win32, OSX, Linux
• Mobile: iPhone and Android

Programming Model

Titanium supports JavaScript, HTML, CSS for
building mobile applications

UI

• Clean separation of Design from Code
• UI is constructed via HTML, CSS
• JavaScript access to create native controls,
native views, windows, etc.

JavaScript
• JavaScript is used to program Mobile
Features, Access local Resources,
Database, Remote Web Services, etc.
• Use your favorite JS Toolkit - jQuery,YUI,
Dojo, Mootools, etc etc.

App Assembly

Titanium SDK compiles (using Titanium
Developer) the application using the Mobile
SDK into a native application

Mobile APIs

Geolocation
Accelerometer
Gesture
Analytics
Media
App
Network
Database
Platform
Filesystem
UI

Building the UI

• <html> accepted here (including HTML5)
• optimized native UI controls
• hybrid UI composition

Native UI views
Grouped View Table View

Simple APIs
Titanium.UI.setTabBadge(10)

Titanium.UI.createMenu()

Grouped View Example

var groupedView = Titanium.UI.iPhone.createGroupedView();
groupedView.addSection(optionSection);
groupedView.addSection(buttonSection);
groupedView.addSection(inputSection);
groupedView.open({animated:true});

Button Group Section
var optionData = [
{title:'Option 1', selected:true},
{title:'Option 2'},
{title:'Option 3'}
];

var optionSection =
Titanium.UI.iPhone.createGroupedSection({header:'Option
Group', type:'option', data:optionData});

optionSection.addEventListener('click',function(e)
{
});

Input Group Section

var inputData = [
{title:'Input 1',
input:switchInstance, image:'iTunes.png'},
{title:'Sound', input:sliderInstance, image:'Mail.png'},
{title:'Name', input:textInstance},
{title:'Input 2', value:'foo', hasChild:true},
{title:'Input 3'}
];

var inputSection =
Titanium.UI.iPhone.createGroupedSection({header:'Input
Group', type:'input', data:inputData});
inputSection.addEventListener('click',function(e)
{
});

Native UI Controls
• Toolbars
• Tab Bars
• Status Bars
• Dialogs
• Controls

Databases

var db = Titanium.Database.open('mydb');
db.execute('INSERT INTO DATABASETEST (ID, NAME ) VALUES(?,?)',
1,'Name 1');
2,'Name 2');
3,'Name 3');
4,'Name 4');

Camera

Titanium.Media.showCamera(
{
success:function(image,details)
{
$("status").innerHTML="Uploading...."+image.url;
}
});

Video
var video = Titanium.Media.
createVideoPlayer({ contentURL : "movie.mp4"});

var listenerId = video.addEventListener("complete", function()
{
video.removeEventListener('complete', listenerId);
var dlg = Titanium.UI.createAlertDialog({
'title' : 'Video Complete',
'message' : 'video completed',
'buttonNames' : [ 'OK' ]
});
dlg.show();
});
video.play();

Gestures
function onShake()
{
document.getElementById("status").innerHTML = 'Stop
Shaking me';

}

var listenerId = Titanium.Gesture.addEventListener("shake",
onShake);

Accelerometer

Titanium.Accelerometer.addEventListener('update',function(e){

document.getElementById('x').innerHTML = e.x;
document.getElementById('y').innerHTML = e.y;
document.getElementById('z').innerHTML = e.z
});

Titanium Info
• http://www.appcelerator.com
• http://github.com/appcelerator
• @appcelerator
• #titanium_app on irc.freenode.net
• http://slideshare.net/jhaynie

Build Native Mobile Apps with Web Technologies

Build Native Mobile Apps with Web Technologies

Recommended

Recommended

More Related Content

Similar to Build Native Mobile Apps with Web Technologies

Similar to Build Native Mobile Apps with Web Technologies (20)

More from Axway Appcelerator

More from Axway Appcelerator (20)

Build Native Mobile Apps with Web Technologies

Editor's Notes