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 Introduction Titanium, Difficulties with Cross-Platform Development, Handling These Difficulties

Titanium Development Environment Free-to-use multi-platform development environment Handles 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 languages Restricts what can be done Functionality added with environment-specific APIs Designing for a large variety of device configurations Different hardware specifications and software options available depending on device Special ways of handling platform-specific code within the development environment

Handling These Difficulties Built in functions/APIs in the development environment Using special cases to determine available features/settings Simplifying everything as much as possible Can result in convoluted code

Cross-Platform Development The Development Environment

Requirements iOS and Android have specific development paths and environments Titanium works within these processes

iOS Applications built with Xcode using Objective-C iOS SDK iOS Simulator Xcode obtained via Apple App Store, others obtained via Xcode Requires OSX

Android C allowed, but limits targets Java preferred, requires JDK Android SDK Android Emulator Eclipse is endorsed Java IDE, but not necessary

Titanium Titanium uses Javascript and provides libraries with access to platform functionality IDE with debugging capabilities on both real and virtual devices

Cross-Platform Development Handling 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 Examples Example 1: Titanium.Platform.openURL(‘tel:’+phoneNum); Example 2: var = Titanium.UI.create Dialog(); .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 button Gradient colors Only supported by iOS Set a gradient image as the background You can review the whole API at:

GUI While 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 only If your app does not support Landscape mode, you must account for what happens when your app launches from a device held in landscape mode Your platform height and width values will be reversed The API does not support a call to determine orientation If height > width, portrait mode Else, landscape mode

GUI – Splash Screen Required for all apps in iOS Displays an image while the rest of the application loads in the background If 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 Titanium You could use a black splash screen to get around this problem

GUI – Font Size Every 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 device Density 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 created Javascript code is optimized Code is either compiled or stored to be interpreted Result is packaged and signed

iOS Compilation Javascript code compressed and included as a string in a C file Interpreted at runtime through interpreter provided by Titanium

Android Compilation Javascript compiled to Java bytecode with Rhino Runs directly on Android’s Dalvik VM

Deployment iOS requires distribution through App Store Android has official Play Store, but can download apps from anywhere Both require certified accounts App Store has a manual review process Play Store has automated dynamic analysis

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

Summary of Experience

What You’ll Need PC Mac if developing for iOS Apple Developer Account to test on iOS Apple Developer License to deploy to App Store Google Development License to deploy to Play Store Testing devices Best to have one of every type of device you plan on deploying to iPhone, iPad, Android phone, Android tablet

Where to get started Example program Titanium’s ‘kitchen sink’ app Great resources to help you get started

Any questions?