Mobile App Development on Multiple Platforms Using Titanium

2. Mobile App Development on Multiple Platforms Using Titanium Campus Compass Team Student Led Seminar Adam Plisch, Brian Russell, Jonathan LeFeber

3. 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

4. Seminar Introduction Titanium, Difficulties with Cross-Platform Development, Handling These Difficulties

5. 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

6. 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

7. 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

8. Cross-Platform Development The Development Environment

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

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

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

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

13. Cross-Platform Development Handling Cross-Platform Issues

14. 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

15. API Examples • Example 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();

16. 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: • http://docs.appcelerator.com/titanium/latest/#!/api/Titanium

17. 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!

18. 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

19. 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

20. 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

21. 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”;

22. Cross-Platform Deployment Getting your iOS and Android Apps compiled and out there

23. 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

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

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

26. 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

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

28. Summary of Experience

29. 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

30. Where to get started • Example program • Titanium’s ‘kitchen sink’ app • Great resources to help you get started • http://docs.appcelerator.com • https://wiki.appcelerator.org • http://developer.appcelerator.com • https://developers.google.com • http://developer.android.com • http://docs.appcelerator.com/titanium/latest/#!/api/Titanium

31. Any questions?