Develop your first mobile App for iOS and Android

Develop your ﬁrst mobile App
for iOS and Android!
Ricardo Alcocer // Platform Evangelist!
March 12, 2013!
Silicon Valley Titanium User Group!

Our objective for today!

!
BUILD AN APP!

Base assumptions!

•  You are not a “hardcore coder”!
•  You know how to build websites with
HTML and CSS!
•  You have seen at least a little bit of
Javascript!

About Appcelerator Titanium!

•  Not a language, but a high-level
Javascript SDK!
•  Allows you build Native Apps for
iOS (iPhone, iPod Touch, iPad),
Android (Phone and Tablet),
Mobile Web, Blackberry 10 (beta),
soon for Windows 8 and Tizen!
•  Free/Open Source!!
•  It’s Native, NOT web app !

The design of your App is 
SUPER important!

If the users don't like how
your App LOOKS !
!
they will delete it!!

h"p://www.itexico.com/blog/bid/91499/Why-‐your-‐Mobile-‐App-‐s-‐UX-‐UI-‐must-‐be-‐Awesome

h"p://blog.planetargon.com/entries/2010/3/1/designer-‐vs-‐developer

Harmony between design and functionalities!

The MVC Pattern!
JS

Model

XML
JS

View
TSS
Controller

User
Interface
Components
Invisible
to
the
end-‐user

Designers and developers can now get along!

h"p://images.elephantjournal.com/wp-‐content/uploads/2012/01/dog-‐and-‐cat-‐sleeping-‐together.jpg

Make sure you download Studio!

Conﬁgure platform SDKs!

SDKs
allow
you
to
compile
with
the
naRve
tools
and
provide
you
with
Phone
Simulators
for
tesRng

Now you can follow the “Quick Start
Guide”, or….!

…you can try to ﬂy!

h"p://amazingjpg.blogspot.com/2012/11/reckless-‐abandon-‐photo-‐by-‐peter-‐brannon.html

Titanium is very powerful, so better get
your training wheels on!

h"p://www.justsaypictures.com/images/training-‐wheels-‐01.jpg

Let’s build a “Jokes” App!

Select Alloy as your Titanium Project
Type!

Conﬁgure your project!

Name
for
your
App

In
reverse
URL
format:
ie.
(com.mycompany.myapp)

Select
target
plaYorms
for
this
project

Are
you
using
Appcelerator
Cloud
Services?

These
one
implement
funcRonaliRes

and
interacRvity

We
won’t
look
at
these

These
two
work
together
to
build
UI

Remember?

Running an App!

You’ll
only
see
the
target

plaYorms
you
explicitly

conﬁgured

iPhone
is
only
available
on
Mac

Android
is
available
on
Win,

Mac
and
Linux

Default App running on iPhone Simulator!

Default index.xml!

<Alloy>

<Window
class="container">

<Label
id="label"
onClick="doClick">Hello,
World</Label>

</Window>

</Alloy>

Objects in index.xml!

<Alloy>

<Window
class="container">

<Label
id="label"
World</Label>

</Window>

</Alloy>

index.xml + index.tss working together!

XML

<Alloy>

<Window
class="container">

<Label
id="label"
World</Label>

</Window>

</Alloy>

TSS

".container":
{

backgroundColor:"white"

},

"Label":
{

width:
Ti.UI.SIZE,

height:
Ti.UI.SIZE,

color:
"#000"

}

!
Enough of the basics.
Let’s get started!!

Thinking as a Web developer!

PAGE

DIV

DIV
DIV

DIV

DIV

DIV

DIV
DIV

Thinking as a Web developer!

PAGE

DIV

DIV
DIV

DIV

Native iOS and Andoroid UI Elements!

h"p://www.teehanlax.com/blog/ios-‐6-‐gui-‐psd-‐iphone-‐5/

h"p://www.teehanlax.com/blog/android-‐2-‐3-‐4-‐gui-‐psd-‐high-‐density/

Titanium allows you to use native
platform elements!

h"p://docs.appcelerator.com/Rtanium/3.0/#!/api

The vocabulary is well documented!

h"p://docs.appcelerator.com/Rtanium/3.0/#!/api/Titanium.UI.Window

In Titanium Terms!

Window

VIEW

VIEW
VIEW

TableView

VIEW

VIEW

VIEW

VIEW
VIEW

In Titanium Terms!

WINDOW

VIEW

VIEW
VIEW

VIEW

Building the App Structure (XML)!
Expected
Result

<Alloy>

<Window
class="container">

<View
id="header">

<View
id="appicon"></View>

<Label
id="apptitle">Funny
Stuff</Label>

</View>

<TableView
id="mainlist">

<TableViewRow
id="listrow">

<View
id="rowContainer">

<View
id="rowIcon"></View>

<Label
id="rowTitle">Some
Title</Label>

<View
id="rowTypeContainer">

<Label
id="rowTypeCaption">Type:</Label>

<Label
id="rowTypeData">Some
Type</Label>

</View>

</View>

</TableViewRow>

</TableView>

</Window>

</Alloy>

Hey! That’s not what I wanted!

We
need
to
apply
styling
to
the
elements.

Let’s
start
with
container
and
header

Styling the main “container” and
“header”!

".container":
{

backgroundColor:"white",

layout:
'vertical'

},

"#header":{

height:
"50dp",

backgroundColor:
"blue"

}

Next:
the
“appicon”
area

Styling the “appicon”!

"#appicon":{

width:
"50dp",

height:
"50dp",

left:
"0",

backgroundColor:
"#fff"

}

Next:
let’s
specify
a
height
for
the
“rowContainer”

The App so far!

"#rowContainer":{

height:
"60dp"

}

Next:
the
“rowIcon”
area

The App so far!

"#rowIcon":{

lek:
“5dp”,

height:
"50dp",

width:
"50dp",

backgroundColor:
"red
"

}

Next:
the
rest
of
the
elements
in
the
“rowContainer”

The App so far!
"#rowTitle":{

lek:
"60dp",

top:
"5dp",

width:
Ti.UI.SIZE,

},

"#rowTypeContainer":{

bo"om:
"5dp",

height:
"20dp",

width:
Ti.UI.SIZE,

layout:
"horizontal",

lek:
"60dp"

},

"#rowTypeCapRon":{

height:
Ti.UI.SIZE,

width:
Ti.UI.SIZE

},

"#rowTypeData":{

height:
Ti.UI.SIZE,

width:
Ti.UI.SIZE

}

Next:
some
colors
on
the
row
elements

The App so far!
"#rowTypeCapRon":{

height:
Ti.UI.SIZE,

width:
Ti.UI.SIZE,

font:
{

fontSize:
"12dp"

}

},

"#rowTypeData":{

height:
Ti.UI.SIZE,

width:
Ti.UI.SIZE,

font:
{

fontSize:
"12dp"

}

}

Next:
some
colors
on
the
“header”
area

The App so far!

"#header":{

height:
"50dp",

backgroundColor:
"#4698D6"

},

"#appRtle":{

font:
{

fontSize:
"20dp",

fontWeight:
"bold"

},

color:
"#ﬀf"

}

Next:

more
styling
on
the
table
rows

The App so far!

"#rowContainer":{

height:
"60dp",

top:
"5dp",

right:
"5dp",

bo"om:
"5dp",

lek:
"5dp",

borderWidth:
1,

borderColor:
"#cacaca",

borderRadius:
5

}

Next:
some
more
colors
on
the
table
row

The App so far!
"#rowContainer":{

height:
"60dp",

top:
"5dp",

right:
"5dp",

bo"om:
"5dp",

lek:
"5dp",

backgroundColor:
"#f9f9f9",

borderWidth:
1,

borderColor:
"#cacaca",

borderRadius:
5

},

"#rowTypeCapRon":{

height:
Ti.UI.SIZE,

width:
Ti.UI.SIZE,

font:
{

fontSize:
"12dp",

fontWeight:
"bold"

},

color:
"#B73B22"

}

Next:
the
icon
on
the
row

The App so far!

Images
live
inside
the
/assets
folder.

We’ll
make
this
change
on
the
XML,
so
we
can

assign
diﬀerent
images
to
each
row:

<View
id="rowIcon"
backgroundImage="/happyface.png"></View>

Next:
the
icon
on
the
“header”

The App so far!

"#appicon":{

width:
"50dp",

height:
"50dp",

lek:
"0",

backgroundImage:
"/topicon.png"

}

Finally:
some
real
data
on
the
table
row

The App so far!
Go
to
your
index.xml
ﬁle
and
change
the
placeholder
data

<TableViewRow
id="listrow">

<View
id="rowContainer">

<View
id="rowIcon"
backgroundImage="/happyface.png"></View>

<Label
id="rowTitle">Why
did
the
turkey
cross
the
road?</Label>

<View
id="rowTypeContainer">

<Label
id="rowTypeCapRon">Type:</Label>

<Label
id="rowTypeData">Joke</Label>

</View>

</View>

</TableViewRow>

To
add
more
rows,
copy
and
paste
this
code
block!

The App so far!
Use
the
same
procedure
to
create
the
template
for

the
second
page.

I’ll
leave
that
to
you

TIPS:

1.  In
Studio,
right-‐click
in
the
ﬁles
area,
select
New
>

Alloy
Controller

2.  You
could
move
ALL
your
TSS
to
“app.tss”.

This
is

a
global
ﬁle
that
holds
styling
that
will
be
shared

by
all
screens

A little bit of code to link both files (1/4)!

The
index.xml
file
needs
to
know
what
to
do
when
you
click
on
the
rows

<TableView
id="mainlist"
onClick="onTableClick">

<TableViewRow
id="listrow"
ezawin="turkeycrossing">

The
name
of
a
previously
created
XML
file


The
index.js
needs
to
deﬁne
the
acRon
for
onTableClick

var
ezR=require('ezR');

funcRon
onTableClick(e){

ezR.openWinFromRow(e.rowData);

}

$.index.open();

Remember:
every
screen
or
controller
is
a
combinaRon
of
3
ﬁles:
XML,
TSS,
JS


On
each
“joke”
page,
deﬁne
the
acRon
for
the
“back”
bu"on

<Bu"on
id="backbu"on"
plaYorm="ios"
onClick="closeme">Back</Bu"on>


Deﬁne
the
acRon
for
the
closeme

var
ezR=require('ezR');

funcRon
closeme(e){

ezR.closeWin($.turkeycrossing);

}

Startup images and App Icons!

Titanium
provides
templates
for
all
the
images
you
need.

Simply

replace
with
your
own.

h"p://ratking.de/2012/10/06/mini-‐ludum-‐dare-‐37-‐a-‐not-‐game-‐jam-‐part-‐2/

The same code could be repurposed!

Some Apps built with Titanium!

Much more!

•  Command-line interface!
•  Modules, Widgets, Sync Adapters!
•  ACS – Appcelerator Cloud Services!
•  Gaming via Lanica.com!
•  Enterprise-ready!!

Code + Slides!

Code available at !
http://github.com/ricardoalcocer!
!
Slides available at!
http://speakerdeck.com/ricardoalcocer!
http://slideshare.net/ralcocer!
!
!

Community Support!

!
!
Appcelerator Q&A !
https://developer.appcelerator.com/questions/newest!
!
Twitter!
https://twitter.com/appcelerator!
!
!
!

?

Questions? 
 
!

Thank you!

ralcocer@appcelerator.com!
!
Twitter: @ricardoalcocer!

Develop your first mobile App for iOS and Android

Recommended

More Related Content

What's hot (9)

Similar to Develop your first mobile App for iOS and Android (20)

More from ralcocer (15)

Recently uploaded (20)

Develop your first mobile App for iOS and Android