CST 594 Mobile Computing
Kavitha Elamparith
Pratibha Channamsetty
Eshwari Mente
Shruti Shivashankaraiah
Pranay Mahendra
Adit Shah
Naveen Kumar
The Biggest Mobile Development Challenges
Integrating mobile apps with ERP data systems
46%
Developing apps quickly
43.3%
Testing and Quality Assurance
36.8%
Compelling Experiences
34.9%
Supporting multiple platforms from a common codebase
Cross platform development
Supporting multiple platforms
0
10
20
33.3%
32.8%
27.7%
30
40
50
Why Titanium?
Faster Development
Develop native applications 20% faster
than writing in the native language
Code Reuse
Reuse 60%-90% of developed code
when supporting multiple platforms
Reduce Cost
Most apps take at least six months of full-time work
and cost between $20,000 and $150,000 to develop.
Reduce cost of development cross-platform
by using a JavaScript based SDK
History
2006 - Appcelerator in Atlanta, Georgia
- Jeff Haynie (CEO) and Nolan Wright (CTO)
2008 - New HQ in Mountain View, CA
- raised $6.2 M from Storm Ventures and Lary Augustin
2009 - Titanium launched at the Apples WWDC
-1200 developers downloaded Appcelerator in 48 hrs
- iPhone- and Android-based mobile applications in June
2010 - April - BlackBerry, iPad-based tablet apps
- raised $9M in Series B form Sierra Ventures and eBay.
History - (continued)
2011 - Acquired Aptana Inc and Particle Code.
2012 - New Office in Beijing, China
- Europe HQ opens in UK
- Acquired Cocoafish and Nodeable
- Launched Appcelerator Cloud Services (ACS)
- Launched Titanium 3.0
Appcelerator Announces CODESTRONG 2012 Mobile
Conference To Be Held in San Francisco
2013 - Opens an office in SFO
408,612 registered developers have launched 51,208 apps
Growth Chart
• 1.5 Million Developers - 22.1k Apps in the Wild - 20 Million
Active Users
Making Titanium a Leading Mobile Development Platform
among many
Appcelerator Titanium
• Open source SDK, Tools (Apache)
• Cross-platform (Win32, OSX, Linux)
• Based on WebKit
• Modular and extensible
• Supports JavaScript, Python, Ruby
Titanium Overview
Applications are built entirely in JavaScript
Cross Platform !== “Write Once, Run Everywhere”
Cross Platform == “Write Once, Adapt Everywhere”
Best Practices
– Protect global scope
– Be modular
– Keep code DRY – (Don’t Repeat Yourself)
Similar to rich web based client applications
– Sophisticated UI controls
– Client-side Data Models
– Local Storage and focused remote data access
Component Oriented, Event Driven
Products
Titanium Mobile
Appcelerator
Network
Develop Native iPhone,
Android, and iPad apps
with full access to each
device’s APIs.
Cloud services used for
testing, packaging,
distribution, and
analytics.
Titanium Desktop
Build Desktop apps
that can be deployed
with one code base on
the PC, Mac, or Linux
platforms.
Titanium Alloy
It is an MVC framework
used to develop applications
in a structured way
Architecture
Product Architecture
Pros and Cons
1. Rapid prototyping
2. JavaScript
3. Cross-platform
4. Growing community
Cons
1. Increasing complexity
Development complexities (and costs) rise more than
proportionally to application complexity increases
2. No Freemium
StoreKit, a module to enable In-App Purchase to Apple’s App
Store, poorly documented and it seems to work only partially.
unstable for production use
3. Laggy
Obviously you can have the most smooth, fast and
comfortable user experience possible only with apps
developed with a native development environment.
System Requirements
Memory:
RAM
Titanium Studio
Host Operating
System
All
Latest Android SDK
OS X
1.5GB (contiguous)
Latest Android SDK
Windows
1GB (contiguous)
Latest Android SDK
Ubuntu
1.5GB (contiguous)
Product
1GB (contiguous)
System Requirements
Operating System:
Operating System
Min Version
Max Version
Apple Mac OS X
10.7 (Lion) 10.6 (Snow
Leopard) supported for
SDK 2.1.X and earlier.
10.8 (Mountain Lion)
Windows
Windows 7
Windows 8
Ubuntu Linux
10.04 LTS (Lucid Lynx)
12.04 (Precise Pangolin)
Downloading & Installing
Valid Appcelerator Network account.
Download the installer from:
https://my.appcelerator.com/resources
Launch the installer
Things to setup
Installing native sdks
Installing android sdk
Launching Titanium Studio
Android SDK Manger
Packages to install
Useful software
Git (optional, but recommended)
Operating
System
Package Name
Package
Version
Download
Location
OS X
git
Latest(1.8.1.3)
Windows
msysgit
Latest(1.8.1.2)
Ubuntu
git
Latest
http://gitscm.com/downlo
ad/mac
http://gitscm.com/downlo
ad/win
Default
Repositories
Importing a Sample Project
Creating a new project
New Titanium mobile project
Selecting template
Project File system Layout
Configuring the tiapp xml file
Run the project
How Titanium Works
Code your pages
“Run”
Running!
(in simulator)
Titanium
SDK
Project in XCode/ObjC
Window structure
window
view
Titanium Features
• Native UI
– Real Native tables, tabs, sliders and views
• Rich Media APIs
– Local and streaming audio and video, media recording
• Local and streaming
– Native Maps, compass and Geo location
• Open Source and Extensible
– Extend titanium with custom modules in native code.
Cont..
• Local and Remote Data
– Local SQL database, Light weight Key/Value store, XHR.
• Integrated Analytics
– Baked-in analytics APIs to measure results and
behavior.
• Social APIs
– Integrated Face book connect and YQL.
• Development Tools
– Development and distribute your app for multiple
platform from a single tool.
Native UI controls
• Use native UI controls through a JavaScript interface
UI in Native and Titanium
Application
• iOS Phones have one screen resolution.
• Building Android apps require you to take the various
screen sizes and aspect ratio into account.
• Titanium relies on native controls and UI.
• We write code in JavaScript , using special API that builds
the UI controls.
• Recent addition of commonJS module made developing
apps more fast and modular.
Cont..
• Writing same code for both the UI makes thing difficult to
handle.
Reasons:
1. They have different screen resolution
2. Different controls
3. iOS takes 45% of the screen, while android has more
dropdowns.
So In Titanium we create separate UI modules that
communicate with same code.
Common APIs
Media
• Stream or package audio and video content same for
both platforms
Accelerometer
• Use advance gesture and track movement to
create groundbreaking user interface.
Geo location
• Use Geo location to leverage your user’s
position in the world
Face book connect
• Facebook module is available which uses new
authentication features on both Android and iOS as well as
a new set of methods to retrieve and submit data.
We can either use
1. Titanium.Facebook.authorize() method
2. Facebook LoginButton
(Titanium.Facebook.createLoginButton()) on to your
view and, when the user clicks it, we’ll handle
calling ’authorize’.
Set Titanium.Facebook.appid to your Facebook
application id before initiating authorization
For more basic permission set
Titanium.Facebook.permissions property to an array of
the permissions you need.
Cont..
The Pizza App
Main Javascript files:
1. App.js
2. Main.js
3. Crust.js
4. Toppings.js
5. Details.js
6. End.js
How to ?
1. Display Clock
2. Create view
3. Create Scrollable view
4. Navigate
5. Animate
6. Fire an Event
7. Handle an Event
 Listening to Custom events
 Adding the Toppings List
 Persisting Crust Selection
Working With Data on Titanium
Titanium Data Options:


Local Data
Remote Data
Working With Local Data
Titanium Local Storage Options:

Application Properties

File System

Database
To use a device's local storage, Titanium provides
* Titanium.App.Properties :ideal for storing application-related settings
* Titanium.Filesystem :facilitates file and directory manipulation
* Titanium.Database :gives access to local SQLite databases
Each of these enable data to persist on a device across application
restarts, power cycles, re-installation and even migration to a new
device.
What kind of data storage should I
use?
Application Properties –
• data consists of simple key/value pairs
• data is related to the application rather than the user
• data does not require other data in order to be meaningful
or useful
Filesystem –
• the data is already provided in file format
• the data is an image file
Database –
• There are many similar data items
• Items of data relate to each other
• require flexibility over how the data will be presented when
you retrieve it
• the data accumulates over time, such as transaction, logging
or archiving data
Application Properties
Reading and Writing Properties - six sets of get/set
methods for handling six different data types:
• getBool() / setBool(): for booleans (true, false)
• getDouble() / setDouble(): for double-precision floating
point numbers
• getInt() / setInt(): for integers
• getList() / setList(): for arrays
• getString() / setString(): for strings
Filesystem Storage
Objects
• Titanium.Filesystem is the top level Filesystem module
used for reading and saving files and directories on the
device.
• Titanium.Filesystem.File is the file object which
supported common filesystem based operations such as
create, read, write, delete, etc.
Properties
• Data storage locations:
• applicationDataDirectory: A read-only constant that
indicates where your application data directory is located.
Place application-specific files in this directory.
• resourcesDirectory: A read-only constant where your
application resources are located
• tempDirectory: A read-only constant that indicates where
your application can place temporary files
Filesystem Storage cont...
Filesystems Methods
• getFile( ): return a file path as a Titanium.Filesystem.File
object
• read(): return the contents of file as blob
• write(): write the contents to file
• deleteFile(): delete the file
• exists(): return true if the file or directory exists on the device
• move(): move the file to another path
• rename(): rename the file
• nativePath(): return the fully resolved native path
Database and file system
• Pre requisites: SQLite Database
Easy ways to create a sqlite database – SQLite Manager (Firefox add on)
– SQLite database Browser.
• Place your database file in the resource folder in your titanium
project. The database installation will reference that folder to
install your database.
SQLite Databases
SQLite3 is the latest version of the mobile SQL-based
relational database management system (RDMS), chosen by
Apple, Google and RIM to provide local data storage on their
mobile devices.
Objects
• Titanium.Database the top level Database module. The
Database module is used for creating and accessing the inapplication Database.
• Titanium.Database.DB is the Database instance returned
by Titanium.Database.open or Titanium.Database.install.
• Titanium.Database.ResultSet is the ResultSet instance
returned by invoking a database SQL execute.
SQLite Databases
Database Methods
• open( ): open a database. if it doesn't yet exist, create it.
• execute( ): execute a SQL statement against the database and
returns a ResultSet.
• close( ): close the database and release resources from memory.
• install( ) : installs the database on the device/emulator
ResultSet Methods
• isValidRow( ): return true if the row is a valid row.
• fieldByName( ): retrieve a row value by field name.
• next( ): iterate to the next row in the result set.
Working With Remote Data
Remote Data in Titanium
• Your Titanium application can interact with remote servers over
HTTP using the HTTPClient object provided through the
Titanium.Network namespace.
Objects
• Titanium.Network.HTTPClient is the HttpClient instance
returned from Titanium.Network.createHTTPClient.
HTTPClient Methods
• open(): open the request and ready the connection.
• send(): send the request (Only async is currently supported).
• SetRequestHeader(): set the request header. Must be called after
open but before send.
• setTimeout(): set the request timeout
RSS Reader
• Fetches the latest 10 items off the New York Times RSS
feed and displays them in a TableView.
• Clicking on one of the items will open the link in a web
browser.
• Titanium’s HTTPClient object allows remote requests
similar to Ajax/JS in a web browser.
• An onload() method that handles the response of the
request and an open() method in which we specify the
type of request (GET/POST/PUT/DELETE) and the URL we
are requesting. Finally we initiate the request by calling the
send() method.
RSS Reader
• Even though we are coding in Javascript, we are not in a
web browser environment, so the usual document and
window objects do not exist.
• This means frameworks which make XML manipulation
easy, such as jQuery and Mootools, will not work. However
Titanium offers us the DOMDocument object, which acts
and has a similar API to the web browser document object.
• We can get the output of the HTTP request and
automatically turn it into a DOMDocument object by
accessing it as this.responseXML.documentElement.
RSS Reader
• After the DOMDocument instance is set up, we do a simple
XPath query to get the title and iterate over the items to get
the data about the individual posts.
• Next step is to populate the TableView. To do this we
create several Titanium.UI.TableViewRow objects and then
append them to our TableView.
• Last step is to add functionality so that when an item in the
TableView is clicked, the Android web browser will open to
that specific post. Our code needs to listen for a click event
on a TableViewRow and then launch a
Titanium.Android.Intent.
RSS Reader
Click on a link
Competitors
Purpose to enable cross-platform mobile application
development
PhoneGap vs Titanium
•
•
•
•
•
•
PhoneGap-HTML based solution.
Titanium-Pure javaScript API.
PhoneGap runs in a native web browser view.
Appcelerator compiles to Native Code.
PhoneGap promotes code re-use and easiest transition from
desktop to mobile.
Appcelerator higher level API for native mobile development.
Differences
How to Choose???
•
•
•
•
•
•
•
Options seem endless.
Native app?
Cross-platform solution?
HTML5? Or A mix?
Where should a developer to start?
What should a growing business invest in?
Like most things in life, it depends.