1 / 55

Before You Begin

Before You Begin. Prerequisite Software Latest iPhone SDK Android SDK with 1.6 and any later SDKs installed Titanium Developer Getting Started Guide http://developer.appcelerator.com/doc/mobile/get_started Linked in tutorial notes at http://oscon.com.

wileyr
Download Presentation

Before You Begin

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Before You Begin • Prerequisite Software • Latest iPhone SDK • Android SDK with 1.6 and any later SDKs installed • Titanium Developer • Getting Started Guide • http://developer.appcelerator.com/doc/mobile/get_started • Linked in tutorial notes at http://oscon.com

  2. Native Mobile Applications USING Open Source

  3. Want to give this talk? • Your local user group • Your company • To your wife and kids • Package includes: • Slides in various formats • Example code • Resources for presenters http://github.com/kwhinnery/MeetupPack

  4. Today’s Agenda • Titanium Mobile Overview • Hello World and Project Walkthrough • Building Titanium Apps: Fundamentals • Code By Numbers: Oh Snap! • Where To Go From Here • Questions and Answers • Independent Hacking

  5. About Me Kevin Whinnery Engineer/Platform Evangelist http://kevinwhinnery.com Twitter: @kevinwhinnery Web developer by trade and training, lover of JavaScript and open web technologies in general

  6. About Appcelerator • Open Source Software Company based in Mountain View • ~25 employees and growing • Developing Titanium for about two years, with Mobile coming in the last year • 95% Developers

  7. About You New To Mobile Development Mobile Dev Veteran

  8. Either way, you’ve come to the right place.

  9. Amazing Mobile Platforms

  10. Which is great and exciting!

  11. ...only how do we target all these cool platforms?

  12. Well, you could build native, but... • Which platforms do you choose? • How many codebases do you want to (or even can you) support? • How long will it take to build native on N platforms? • How much effort will be duplicated? • What if you bet on the wrong platform? • Who writes the code? Hire out? Retrain/retool yourself or your devs?

  13. The Web Is An Option... • ...and should be preferred when feasible • Mobile browsers are progressing fast and converging around WebKit • But there are limitations • Native apps are inherently more capable than web apps • Native apps run faster and smoother on resource constrained devices

  14. Ideally, we build cross-platform native apps...

  15. ...but we don’t want to “write once, suck everywhere”* *Loren Brichter, creator “Twitter for iPhone”/Tweetie

  16. X-Platform 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 Hmmm, I wonder if he has a specific technology in mind...

  17. Enter Titanium Titanium is an open source framework for building native mobile (or desktop) applications using open web technologies (JavaScript - optionally HTML and CSS)

  18. Titanium Key Facts • Open Source (Apache 2.0) • Professional Services, SLA Support, Training, and Analytics available from Appcelerator Titanium Platforms • Desktop: Win32, OS X, Linux • Mobile: iOS, Android, BlackBerry, webOS (soon)

  19. Titanium Projects • Titanium Developer (1.2.1) • Titanium Mobile SDK (1.3.0) • Titanium Desktop SDK (1.0.0) • Versioned separately, different release schedules • We will focus on Developer and the Mobile SDK

  20. Titanium Features Native UI Rich Media APIs Local and streaming audio and video, media recording Real native tables, tabs, sliders, and views Location APIs Open Source and Extensible Native Maps, Compass, and Geolocation Extend Titanium with custom modules in native code Local and Remote Data Integrated Analytics Local SQL Database, Lightweight Key/Value Store, XHR Baked-in analytics APIs to measure results and behavior Social APIs Development Tools Integrated Facebook Connect and YQL Develop and distribute your app for multiple platforms from a single tool

  21. Who Uses Titanium? • NBC Universal • PayPal • MTV • Anheuser-Busch • Computer Sciences Corporation • Intridea (Oil Reporter) • 100s of Titanium apps hitting the stores each month (should soon eclipse 1000/month)

  22. Titanium Architecture • Desktop is HTML focused • Can use other scripting languages • Mobile: JavaScript interpreted at runtime • JavaScript API >> native APIs

  23. What Titanium Mobile is not: • Not a native wrapper around a web view • 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

  24. Example

  25. Example

  26. Example

  27. Titanium Developer • Manage and run Titanium applications • Package applications for distribution • Run on a device for testing • Manage Appcelerator account

  28. Demo: Hello World! • Creating a mobile project • Mobile project structure • Editing code, adding UI widgets to the app • Deploy to simulator

  29. Demo: Kitchen Sink • Example Code • Living Reference Document • Demonstrates API coverage

  30. Questions So Far? • Titanium as a product • Titanium capabilities • About Appcelerator

  31. Titanium Fundamentals • A 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 that we are not running in a browser • We use the WebKit KJS JavaScript engine (iOS) or Rhino (Android/BB)

  32. Titanium JavaScript API • 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

  33. Typical App Composition • A single window or stack of windows • Tab Group containing many windows • Windows contain views

  34. Windows and Contexts • 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) 3

  35. Demo: Contexts • New Project - Two Tabs with “Lightweight” windows • Switch to contain urls and contexts • Symbols not defined in other contexts

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

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

  38. Demo: Custom 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

  39. Hey, what about layouts? We’ll demo that later in the tutorial...

  40. Cross-Platform Development • Not all UI is available across platforms • Titanium != “Write Once, Run Everywhere” • We try 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 dev cycle

  41. Cross-Platform Tips • iPhone/Android subdirectories • Ti.Platform.osname • Display height/width • OS version • Check Out Kitchen Sink Platform example 10

  42. Questions? • App Composition • Runtime environment • UI Layouts

  43. “Code By Numbers” • Demo App: Oh Snap! • Condensed version of Snapost • Source: http://github.com/kwhinnery/Snapost • 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

  44. A Nicer Version... • Our example will be somewhat basic • For a nicer example with better styling and slightly more robust handling of images, check out Snapost • 3D iPhone transitions, laser noises! http://github.com/kwhinnery/Snapost

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

  46. 0: Create “Oh Snap!” http://gist.github.com/481044 • New Project via Titanium Developer • Grab new icons from Glyphish • Configure tab icons, new windows/execution contexts

  47. 1: Arrange Basic UI http://gist.github.com/481058 • Create necessary buttons, image placeholders, text labels • Arrange using vertical layout • Check out styling options

  48. 2: Persist Un/Pw Combo http://gist.github.com/481078 • Pre-populate text fields with Properties • Persist un/pw combo • Add event listener to save button

  49. 3: Select Media http://gist.github.com/481081 • Open Photo Gallery • Show Camera • Dynamically update ImageView source file

  50. 4: Upload Image http://gist.github.com/481111 • Create HTTPClient object • Open a POST request • Upload image media and Twitter update

More Related