Sup?

about:me

@njncalub

Nap Joseph N. Calub

Web Developer at Ingenuity

Part-time instructor at AdDU

Open source enthusiast

ʕ ∗ •́ ڡ •̀ ∗ ʔ

What is Mobile Development?

Mobile application development is the process by which application software is developed for handheld devices, such as personal digital assistants, enterprise digital assistants or mobile phones.

Responsive Web Design

Snippets to make your life easier.

So (RWD == Native) ?

False

What is a Native app?

Has to be built from scratch for each different type of device (Apple’s iOS, Android, Windows, etc.)
Has to be downloaded from an app store, specific to each type of device
Some can be used offline after the app has been downloaded
Separate from both desktop and mobile websites, need to be updated and maintained separately
Can incorporate the mobile device’s functionality such as camera or maps

You gotta learn them all!

You are a native developer now.

Enter

Why use Titanium?

Rapid Prototyping
Web-oriented
JavaScript
Cross-platform
Growing Community

Increasing complexity
Toolkit pain
Flexibility limitations

Pros

Cons

TL;DR...

Titanium:

If you want to develop apps rapidly

Great! How do I start?

Node.js and Node Package Manager
Android and Xcode SDKs
Titanium Alloy SDK
Genymotion (optional)
Titanium Studio (optional)
http://docs.appcelerator.com/titanium/3.0/
https://github.com/njncalub/TiProjectTemplate

Demo

Sample Commands

ti create
alloy new

alloy generate controller "name"

ti build -p ios -C ?
ti build -p android -C "Google Nexus 4 - 4.1.1 - API 16 - 768x1280"

The Anatomy

of Your Titanium Application

Models (.js)

provides the business logic, containing the rules, data and state of the application.
e.g. a Person model with the properties: lastName, firstName, middleName , and the methods create, delete, update

Views (.xml)

provides the GUI components to the user, either presenting data or allowing the user to interact with the model data.
e.g. a registration form for a Person with the text fields: lastName, firstName, middleName .

Styles (.tss)

provides the styling and configuration for the GUI components of a View.
e.g. the TextFields will have a backgroundColor of blue and fontSize of 15.

Controllers (.js)

provides the glue between the Model and View components in the form of application logic.
e.g. when the Signup Button is clicked, the application will save the Person and display an alert.

The MVC Pattern