Mobile App Development on Multiple Platforms Using Titanium

Campus Compass Team Student Led Seminar

Adam Plisch, Brian Russell, Jonathan LeFeber

Team/Project Introduction Project: Campus Compass Mobile App

Android and iOS app for Cedarville Admissions Department Designed to provide information about Cedarville as well as

directions

Team and Roles: Adam Plisch:

GUI guru, on-campus connections and testing Brian Russell:

Data master, in-depth code analysis and development environment

Jonathan LeFeber:Team leader and head of organization/communication

Seminar IntroductionTitanium, Difficulties with Cross-Platform Development, Handling These Difficulties

Titanium Development Environment

Free-to-use multi-platform development environmentHandles multiple target OSs with (mainly) one set of

code Write your App in Javascript Ports out to iOS, Android, Blackberry and HTML5 versions

Can be run on Mac or PC

Difficulties With Cross-Platform Development

Code is being ported from Javascript to several different languagesRestricts what can be doneFunctionality added with environment-specific APIs

Designing for a large variety of device configurationsDifferent hardware specifications and software

options available depending on deviceSpecial ways of handling platform-specific code

within the development environment

Handling These DifficultiesBuilt in functions/APIs in the development

environmentUsing special cases to determine available

features/settingsSimplifying everything as much as possibleCan result in convoluted code

Cross-Platform Development

The Development Environment

RequirementsiOS and Android have specific development

paths and environmentsTitanium works within these processes

iOSApplications built with Xcode using Objective-CiOS SDKiOS SimulatorXcode obtained via Apple App Store, others

obtained via XcodeRequires OSX

AndroidC allowed, but limits targetsJava preferred, requires JDKAndroid SDKAndroid EmulatorEclipse is endorsed Java IDE, but not necessary

TitaniumTitanium uses Javascript and provides libraries

with access to platform functionalityIDE with debugging capabilities on both real and

virtual devices

Cross-Platform DevelopmentHandling Cross-Platform Issues

Differences between Android and iOS

Titanium handles most differences between iOS and Android behind the scenes, but not all of them

Titanium.Platform.name can be used in an if-statement to make platform specific decisions

API ExamplesExample 1:

Titanium.Platform.openURL(‘tel:’+phoneNum);Example 2: var email =

Titanium.UI.createEmailDialog();email.open()

Example 3: var button = Titanium.UI.createButton();

Example 4: var view = Titanium.UI.createView();

Some Differences not handled by Titanium

Back button Android’s has a back button implemented in hardware

and needs no added code iPhone requires the addition of a navigation bar at the

top of your app which can include a simple back buttonGradient colors

Only supported by iOS Set a gradient image as the background

You can review the whole API at: http://docs.appcelerator.com/titanium/latest/#!/api/

Titanium

GUIWhile Titanium.Platform.name allows you to separate

functionality by platform, only careful planning can make a robust GUI that works on all devices

There are many different types and sizes of devices for both Android and iOS

Screen resolution and orientation provide added challenge

There are 2 different screen sizes and 3 different resolutions for iPhone, and a really wide variety for Android Not even counting tablets!

GUI – Dynamic Sizing Titanium provides a call to get the height and width of the

current platform Titanium.Platform.displayCaps.platformWidth Titanium.Platform.displayCaps.platformHeight

Start by dividing these values into separate views Titanium.UI.SIZE Titanium.UI.FILL

Each view has its own height and width and an array of children Each child is confined to a maximum height and width of the

parent view Can contain text, images, or buttons

GUI – Portrait-mode onlyIf your app does not support Landscape mode,

you must account for what happens when your app launches from a device held in landscape modeYour platform height and width values will be

reversedThe API does not support a call to determine

orientationIf height > width, portrait modeElse, landscape mode

GUI – Splash ScreenRequired for all apps in iOSDisplays an image while the rest of the

application loads in the backgroundIf your portrait-mode only app is launched from a

device in landscape mode, your splash screen will rotate

There is no good solution to this in TitaniumYou could use a black splash screen to get around

this problem

GUI – Font SizeEvery other aspect of a GUI is a percentage of

its parent. What about font size?A font size of 18 will use the same number of

pixels on any deviceDensity Pixels

1 dp should look the same relative to the rest of the GUI on any device

Javascript is not a strongly-typed language fontsize = 18 + “dp”;

Cross-Platform Deployment

Getting your iOS and Android Apps compiled and out there

Overall Compilation Process

Platform project is createdJavascript code is optimizedCode is either compiled or stored to be

interpretedResult is packaged and signed

iOS CompilationJavascript code compressed and included as a

string in a C fileInterpreted at runtime through interpreter

provided by Titanium

Android CompilationJavascript compiled to Java bytecode with RhinoRuns directly on Android’s Dalvik VM

DeploymentiOS requires distribution through App StoreAndroid has official Play Store, but can download

apps from anywhereBoth require certified accountsApp Store has a manual review processPlay Store has automated dynamic analysis

In Closing…Summary of experience, what you’ll need, where to

get started

Summary of Experience

What You’ll NeedPC

Mac if developing for iOSApple Developer Account to test on iOS

Apple Developer License to deploy to App StoreGoogle Development License to deploy to Play

StoreTesting devices

Best to have one of every type of device you plan on deploying toiPhone, iPad, Android phone, Android tablet

Where to get startedExample program

Titanium’s ‘kitchen sink’ appGreat resources to help you get started

http://docs.appcelerator.comhttps://wiki.appcelerator.orghttp://developer.appcelerator.comhttps://developers.google.comhttp://developer.android.comhttp://docs.appcelerator.com/titanium/latest/#!/

api/Titanium

Any questions?