To build a native mobile application, you need to know Objective-C or Java and specialized SDKs that are likely very unfamiliar. Not in this session! Yes, you can still build native mobile applications without using these specialized languages and libraries. This presentation will introduce Titanium Mobile and show you how to build a native mobile application for Android, Blackberry and iPhone/iPad using one JavaScript code set.
Building Native Cross Platform Mobile Applications
1. Building Native Cross-Platform
Mobile Applications
Rob Rusher
Twitter: @robrusher | http://robrusher.com
More Information:
Twitter: @appcelerator | http://appcelerator.com
http://www.on3solutions.com | Yeah, I built an app for that! 1
2. Why listen to me
Rob Rusher
Principal Consultant
•Rich Client Application Team Mentor
•Mobile Application Architect
•Adobe Technologies Expert
http://www.on3solutions.com | Elements to grow from within 2
4. About this Session
• The Good, the Bad and the Ugly
http://www.on3solutions.com | Elements to grow from within 3
5. About this Session
• The Good, the Bad and the Ugly
• An alternative
•Titanium Mobile
•API Overview
http://www.on3solutions.com | Elements to grow from within 3
6. About this Session
• The Good, the Bad and the Ugly
• An alternative
•Titanium Mobile
•API Overview
• Example App
http://www.on3solutions.com | Elements to grow from within 3
7. The Good
• The Apps!
http://www.on3solutions.com | Elements to grow from within 4
8. The Bad
• Xcode and Interface Builder
http://www.on3solutions.com | Elements to grow from within 5
9. And the ugly
• The worst thing about iPhone development
• Objective-C
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath
*)indexPath
{
UITableViewCell *cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero reuseIdentifier:nil]
autorelease];
cell.text = [photoNames objectAtIndex:indexPath.row];
NSData *imageData = [NSData dataWithContentsOfURL:[photoURLs objectAtIndex:indexPath.row]];
cell.image = [UIImage imageWithData:imageData];
return cell;
}
• Seriously?!
http://www.on3solutions.com | Elements to grow from within 6
10. Reality sets in...
How do you target all these
platforms
http://www.on3solutions.com | Yeah, I built an app for that! 7
11. Reality sets in...
How do you target all these
platforms
Build them all separately
http://www.on3solutions.com | Yeah, I built an app for that! 7
12. Reality sets in...
How do you target all these
platforms
Build them all separately
Web Browser version
http://www.on3solutions.com | Yeah, I built an app for that! 7
13. Reality sets in...
How do you target all these
platforms
Build them all separately
Web Browser version
Write once, suck everywhere
http://www.on3solutions.com | Yeah, I built an app for that! 7
15. Our Requirements
• Target multiple platforms from a single codebase
http://www.on3solutions.com | Elements to grow from within 8
16. Our Requirements
• Target multiple platforms from a single codebase
• Apps must feel like they belong on the platform
http://www.on3solutions.com | Elements to grow from within 8
17. Our Requirements
• Target multiple platforms from a single codebase
• Apps must feel like they belong on the platform
• Apps need to perform like native
http://www.on3solutions.com | Elements to grow from within 8
18. Our Requirements
• Target multiple platforms from a single codebase
• Apps must feel like they belong on the platform
• Apps need to perform like native
• Bonus: Open source and extensible
http://www.on3solutions.com | Elements to grow from within 8
19. Our Requirements
• Target multiple platforms from a single codebase
• Apps must feel like they belong on the platform
• Apps need to perform like native
• Bonus: Open source and extensible
• Bonus: Use skills we already have
http://www.on3solutions.com | Elements to grow from within 8
20. A Solution
• Titanium Mobile
• JavaScript library for building native applications
• Open Source (Apache 2.0 License)
• Mobile Platforms
• iPhone, Android, Blackberry, webOS (soon)
• Desktop Platforms
• Win32, Mac, Linux
• Website: http://appcelerator.com
http://www.on3solutions.com | Elements to grow from within 9
21. Why Titanium Mobile?
• Build Native Apps (not WebKit apps)
• Responsive
• Leverage Device Capabilities
• Use Web Technologies
• Common Skill Set
• Very Fast Development
• No Objective-C
• Best of both worlds
• One set of technologies, many platforms
http://www.on3solutions.com | Elements to grow from within 10
22. Titanium Mobile – Architecture
UI API contains mappings to native
UI components Application Source Files
• Navbar, Tabbar, Toolbar, Menus (HTML, CSS, and JavaScript)
• Dialogs, Alerts, Buttons
Phone API contains mappings to native
phone capabilities
• Geo, Accelerometer, Maps, Sound
• Database, File System, Network
Your Application Your Application
UI API Phone API UI API Phone API
JavaScript - Objective-C Bridge JavaScript - Java Bridge
iPhone Objective-C API Android Java API
Native iPhone App Native Android App
http://www.on3solutions.com | Elements to grow from within
23. Titanium Features
Native UI Rich Media APIs
Real native tables, tabs, sliders, Local and streaming audio and
and views video, media recording
Location APIs Open Source and Extensible
Native Maps, Compass, and Extend Titanium with custom
Geolocation modules in native code
Local and Remote Data Integrated Analytics
Local SQL Database, Lightweight Baked-in analytics APIs to measure
Key/Value Store, XHR results and behavior
Social APIs Development Tools
Integrated Facebook Connect Develop and distribute your app for
and YQL multiple platforms from a single tool
http://www.on3solutions.com | Elements to grow from within 12
24. What its not
• Not a native wrapper around a web view
(PhoneGap being an example of this approach)
• However, you do have a web view component for
HTML/CSS UI if that is your preference
• Your JavaScript code is invoking native APIs for
UI and other native functions
• Think MacRuby/Hot Cocoa on the desktop or
some AAA mobile games which ship with a Lua
interpreter
http://www.on3solutions.com | Elements to grow from within 13
28. Titanium Developer
• Manage and run Titanium
applications
• Package applications for
distribution
• Run on a device for
testing
• Manage Appcelerator
account
http://www.on3solutions.com | Elements to grow from within 17
29. Getting started
• Project created/managed via Titanium
Developer
• Titanium Developer
• deploys code to simulators
• helps with testing and packaging for devices
• Requires sign-up for Appcelerator Network
(support, e-mail list, other services)
http://www.on3solutions.com | Elements to grow from within 18
30. Getting started
• Project created/managed via Titanium
Developer
• Titanium Developer
• deploys code to simulators
• helps with testing and packaging for devices
• Requires sign-up for Appcelerator Network
(support, e-mail list, other services)
Its FREE (as in beer!)
http://www.on3solutions.com | Elements to grow from within 18
31. Hello World
• Prerequisites
• iPhone and/or Android SDK
• Titanium Developer
• Your First Project
•Creating a mobile project
•Mobile project structure
•Editing code, adding UI widgets to the app
•Deploy to simulator
http://www.on3solutions.com | Elements to grow from within 19
32. KitchenSink
• Example Code
• Living Reference Document
• Demonstrates API coverage
http://www.on3solutions.com | Elements to grow from within 20
33. Titanium Fundamentals
• Titanium application is a
JavaScript program that is
interpreted at runtime on the
device
• app.js defines the root
execution context of the app
• Note: not running in a browser
• It uses the WebKit KJS
JavaScript engine (iOS) or
Rhino (Android/BB)
http://www.on3solutions.com | Elements to grow from within 21
34. How it works
• Titanium takes the Javascript code
•Analyzes and preprocesses it
•Pre-compiles it into a set of symbols
•Symbols are resolved based on your applications uses
of the Titanium APIs
• From this symbol hierarchy
•Build a symbol dependency matrix that maps to the
underlying Titanium library symbols
•Understand which APIs specifically your app needs
• Compiled almost one to one into the representative
symbols in native-land
http://www.on3solutions.com | Elements to grow from within 22
35. Scripts and Stylesheets
• Organized into logical namespaces
• “Titanium” (or just “Ti” for short) is the root
namespace for all Titanium functionality
• A few other odds and ends in the global space
– setTimeout/setInterval
– alert
– JSON
http://www.on3solutions.com | Elements to grow from within 23
36. Design the UI
• A single window
or stack of
windows
• Tab Group
containing many
windows
• Windows contain
views
http://www.on3solutions.com | Elements to grow from within 24
37. Windows and Context
• Windows are the top level container for Titanium
applications
• Applications usually consist of one window or
several windows in a tab group
• Windows usually create new execution contexts
•Execution context == A unique JavaScript symbol
space
• Such windows are “Heavyweight” windows
• Can also create “Lightweight” windows (for apps
that run in a single context)
http://www.on3solutions.com | Elements to grow from within 25
38. Demo Contexts
• New Project - Two Tabs with “Lightweight”
windows
• Switch to contain urls and contexts
• Symbols not defined in other contexts
http://www.on3solutions.com | Elements to grow from within 26
39. View Hierarchy
• Views are the building blocks of
Titanium UIs
– Specialized views: table views,
image views, map views, etc.
• Views can contain child views,
which are positioned relative to
the parent
• Layout Options: Absolute,
vertical, or horizontal (currently
iPhone only)
• Vertical layouts require height to
be set
http://www.on3solutions.com | Elements to grow from within 27
40. Custom Events
• Use for cross-context messaging
• Events are received across all ACTIVE contexts
• Windows not yet open do not receive events
• Use also as an inversion of control mechanism
– Publish message when the database has been updated
– Publish message when contacting a server
– Using pub/sub messaging is very useful in a
component-oriented framework like Titanium
http://www.on3solutions.com | Elements to grow from within 28
41. Demo: Events
• Now lets use custom events in our new app
• Events can have a data payload
• Remember that events are only received in
active contexts
http://www.on3solutions.com | Elements to grow from within 29
42. Cross Platform
• Not all UI is available across platforms
• Titanium != Write Once, Run Everywhere
• It tries to enable native apps that look and feel
like they were created in Objective-C or Java
• Also note that even cross-platform UI
components (like table views) will render
differently cross platform
• Cross Platform testing is critical during
development cycle
http://www.on3solutions.com | Elements to grow from within 30
43. Cross Platform Tips
• iPhone/Android
subdirectories
• Ti.Platform.osname
• Display height/width
• OS version
• Check Out Kitchen
Sink Platform
example
http://www.on3solutions.com | Elements to grow from within 31
44. Build an Example
• App Features:
– Multiple Window/Tabbed UI
– Properties API
– Camera and Local Photo Gallery
– Upload to remote web service (TwitPic)
• Want to develop and deploy to a device in the
space of a few minutes
http://www.on3solutions.com | Elements to grow from within 32
45. iPhone SDK Users
• Will need to download build to address iOS 4
issues that is not in basic 1.3.0 release
• Nightly Builds:
– http://builds.appcelerator.com.s3.amazonaws.com/index.html
• Let’s go through install of “latest and greatest”
build...
http://www.on3solutions.com | Elements to grow from within 33
46. OhSnap!
• New Project via
Titanium Developer
• Grab new icons
from Glyphish
• Configure tab icons,
new windows/
execution contexts
http://www.on3solutions.com | Elements to grow from within 34
47. 1. Gather UI
• Create necessary
buttons, image
placeholders, text
labels
• Arrange using
vertical layout
• Check out styling
options
http://www.on3solutions.com | Elements to grow from within 35
48. 2. Login Screen
• Pre-populate text
fields with
Properties
• Persist un/pw
combo
• Add event listener
to save button
http://www.on3solutions.com | Elements to grow from within 36
49. 3. Media
• Open Photo Gallery
• Show Camera
• Dynamically update
ImageView source
file
http://www.on3solutions.com | Elements to grow from within 37
50. 4. Upload Image
• Create HTTPClient
object
• Open a POST
request
• Upload image media
and Twitter update
http://www.on3solutions.com | Elements to grow from within 38
51. Deploy
• Demo: Deploy via Titanium Developer
• On your own, provision your system for
development on device
• Android == super easy
• iPhone... not so much
• Video Tutorial:
– http://vimeo.com/10278960
• All Appcelerator Videos:
– http://vimeo.com/appcelerator
http://www.on3solutions.com | Elements to grow from within 39
52. Recap OhSnap!
• < 200 Lines of code
• Persistent App Preferences
• Fully native UI (ugly, but see Snapost for the
pretty...)
• Integrated camera/photo gallery
• XML HTTP Request upload to remote server
• 100% Cross-Platform
http://www.on3solutions.com | Elements to grow from within 40
54. Next Steps
• Deploy to device
http://www.on3solutions.com | Elements to grow from within 41
55. Next Steps
• Deploy to device
• Submit to market
http://www.on3solutions.com | Elements to grow from within 41
56. Next Steps
• Deploy to device
• Submit to market
• Make (or save) your
company millions!
http://www.on3solutions.com | Elements to grow from within 41
57. Next Steps
• Deploy to device
• Submit to market
• Make (or save) your
company millions!
• Buy me a Bookers -->
http://www.on3solutions.com | Elements to grow from within 41
58. Thank you
• On3 Grow
Your Own
• Consulting, Mentoring, Training Flex Team
• http://www.on3solutions.com
•Twitter: on3solutions
Tired of IT outsourcing?
Cultivate expertise from within with the help
• Rob Rusher
of On3. We mentor development teams
through the process of implementing,
developing and mastering next-generation
• http://www.robrusher.com technologies. We also o er traditional needs
assessment and e ective instruction. Call On3,
and prepare to watch your capabilities grow.
•Twitter: robrusher On3 Solutions
sales@on3solutions.com 3
www.on3solutions.com
877.885.7044
303.885.7044
On
http://www.on3solutions.com | Elements to grow from within 42
59. Resources
• Get Titanium Mobile
• http://www.appcelerator.com
• Titanium Reference
• http://www.codestrong.com
• Kevin Whinnery
• http://kevinwhinnery.com
• Code for this presentation
• http://github.com/kwhinnery
http://www.on3solutions.com | Elements to grow from within 43