1. 27 January 2012 · 09:55 AM · 9 notes

    The basics of going mobile with Appcelerator Titanium and Javascript. (Part 1)

    BUT WAIT, THERE’S MORE!  (My first experience with mobile)

    iMays, the Billy Mays Simulator

    A few years ago, I got to write my first mobile app using Objective-C and XCode.  It was an incredibly simple app for the best Pitchman in the land, Billy Mays. The one thing I remember was the learning curve. To effectively develop for iOS, you need to understand a vast ecosystem of technologies and concepts that involved more than just Objective-C, Cocoa Touch, and XCode.

    The concepts are still important, and you’ll learn them later, but they can certainly be intimidating when you just want to get started with a simple (or as complex as you want) app.

    All I wanted to do was write a simple app to enable people to outfit themselves with the legendary beard and blue shirt, so that they might feel an ounce of his awesomeness.  It took me 3 months of hacking away at night in my free time…thats like a year in internet time.  

    Now, I don’t want this to sound like I am or was afraid to learn something new, or that the iOS platform is impossible or not developer-friendly.  In fact, I tend to sink my teeth into anything new and exciting, and I still think there are many scenarios where it makes sense to go with platform-specific languages and frameworks.  The rub was that just that to get the simplest of apps up and running was like climbing Everest just to see if you like snow…there might just be easier and more efficient ways to do it.

    For a few years, I hacked away with Objective-C and never really fell in love with it.  Then Titanium from Appcelerator came along…

    Titanium empowers developers to write native* applications for iOS and Android using the language so many of us know and love (to hate on), Javascript.  Titanium gave me the tools to write less code and create apps in days and weeks…not months. 

    At Bunchball, we recently had a 24-hour hackathon to combine our Nitro Gamification Platform with another 3rd party API.  In around 18 hours, I had a completed application that did the following:

    • Scanned barcodes and communicated with a web service to pull in product information
    • Authenticated users using the Facebook platform and pulled in their info using the Graph API
    • Connected to the Nitro platform and processed user’s challenges and accomplishments
    • Generated barcodes for scan-able coupons
    • Pulled in YouTube videos
    • And…it didn’t look half-bad either.

    Being able to rapidly create a prototype like this was an incredible experience, it spoke to the power of Titanium, and it even won me a trip to SXSW (again, I love this company).

    jibba jabbaWhile Titanium is relatively easy to start with, there are a lot of new terms, concepts and idioms that are unique to the two large mobile platforms as well as the Titanium APIs.  That’s why this is going to be a multi-part installment :)

    Ok, that’s enough jibba-jabba…let’s dive in and cover the basics of getting started with Titanium…

    First, download and install Titanium (It’s Free, like Free Beer)

    I won’t spend time here re-writing what can be Googled.  After all, learning how to find information yourself is important!  But, here are some handy links…

    1. Download Titanium IDE - The IDE is built on Eclipse, so if you’re an Eclipse user, you’ll feel right at home!
    2. Download XCode (Mac OSX only) and/or the Android SDKs (if you wish to use either of these platforms).  Titanium will use each of these SDK’s to build your app and either run on a device or the simulator for that platform.

    Then, peruse the API Docs, watch some videos and play with The Kitchen Sink

    Titanium Kitchen SinkTitanium’s raw API documentation isn’t the best I’ve seen…but I’ve seen worse. That said, it’s a great place to know exactly what tools you have at your disposal.  You can view the raw API documentation here.

    While the API documentation isn’t always the most complete, Appcelerator really does go out of the way to produce some really top-notch training videos and tutorials to get you going.  For true beginners, the Zero-To-App videos are indispensable and a logical starting point.  Within about a half hour, you should have a really good grasp of the Titanium environment.  If you’re ready to go deeper, the Building Native Mobile Applications videos are incredibly in-depth and will open many doors for you on your journey through Titanium.  I’ve been using Titanium for some time now, and I still find these videos to be a helpful refresher.

    Another really great way to learn some of the basics of Titanium is to download the “Kitchen Sink” App.  As with anything, it’s always fun to just be able to tinker with someone else’s code and see what you can break.  The Kitchen Sink App is essentially an App with about 95% of the available Titanium APIs demonstrated.  You can simply import the project into Titanium and run it in the simulator of your choice. 

    Again, for the sake of getting into a few of the basics of a Titanium App, I won’t go into extensive detail as to how to import a project.  (You basically create a new project from an existing source…I’m confident you can figure that out)…or, you can click here to watch a video detailing importing a project. 

    One important note about the Kitchen Sink, however: the structure of the code sucks.  Terribly.  One lesson I learned early on was how much your life will suck if you structure your Titanium projects like the Kitchen Sink example.  It’s not DRY, it pollutes the global scope like a coal factory of code, it essentially has one file-per-screen and well, it’s just a shining example of how NOT to structure your project.

    Let’s write your first app.

    1. From the file menu, select “New -> Titanium Mobile Project”
    2. You should see a dialog like this: new titanium project
    3. You’ll need to fill in just a few fields to get rolling:
      • Project Name: this is what your app will be named when installed on someone’s device
      • App Id:  This is the Android Application Package Name or CF Bundle Identifier. There are a few rules around the allowable values in this field.
      • Company/Personal URL: Your website…
      • Titanium SDK Version: Generally, the latest and greatest is ok.
      • Deployment Targets: What platforms do you want to support with this project?

    The structure of a New Titanium App

    New Titanium Project LayoutWhen you create a new Titanium project, you’ll be greeted with the structure to the left.  Some of the more pertinent items are:

    tiapp.xml - Your application’s primary configuration file.  It contains everything from deployment targets to supported orientations to the copyright and description of your app.  This file is important to get to know, but you won’t spend a bunch of time in it once you have stuff configured.

    build - this folder is where any projects you build will end up, whether on the simulator or to your device. 

    Resources - This is where you will spend most of your time.  The resources directory contains the Javascript files that will run your application, directories and sub-directories of images, as well as any other supporting files your application may need.

    Resources/App.js - The bootstrap file for your application.  When your app launches, whatever is in this file will be executed.  Generally, you want to leave as much code as possible out of this file, and instead include the files that kick off your application in here.  Good Titanium projects are usually setup with an MVC architecture in mind, so think of App.js as the “front controller.”

    Resources/android & Resources/iphone - These folders are where platform-specific icons go.  You can go nuts creating subdirectories inside of here (I usually create an “images” directory at minimum inside here).  If you create an image view in your project, you don’t need to include the full path.  You can just use a path such as ”../images/myImage.png,” and Titanium will automatically pull the image from the folder corresponding to your platform.  By default, inside each of these folders, you will see a few images when you create a new project:

    • default.png - The image that first pops up when someone launches your app and it is being initialized by the phone.  Think of it as a “splash screen” of sorts.  It’ll most likely only be visible for a few seconds…
    • appicon.png - The icon that people see on their phone when they install your app.  On iOS, there is an option to remove the “shine” from the icon that can be set in tiapp.xml

    Let’s Get This App Started…

    titanium run appLaunching the app is drop-dead simple.  When you first create your project, you’ll notice that app.js has code that sets a background color, creates a tab group, and creates a few windows.  An app doesn’t get any simpler.  

    To run the app, select the project in the Project Explorer on the left, and then click on the little play button above it.  Choose “iPhone Simulator” or “Android Simulator”…give it a few seconds, and your first (albeit simple) app should launch! 

    Some Titanium UI Basics

    As you look at the code that is initially placed in app.js when you create a new project, you can see a few of the basics of a Titanium app in the flesh.  Really, at the heart of any Titanium app large or small live a few basic concepts and core elements.  Here’s a few to get us started on our journey…

    1. Window: Every app needs to have at least one window.  Think of a window as a blank browser window.  It’s an empty canvas for us to put stuff on.  It can be opened and closed and fullscreened just like a browser window.  As with a browser, an app can have multiple windows, each with their own JavaScript context and scope.
    2. Tab Groups: Tab groups are basically just tabbed window managers.  You define a few tabs, and tell Titanium which tab triggers the display of which window.  Tab groups are incredibly simple, yet powerful as you dive deeper.  To use the browser example again, a tab group is just like opening a new tab in your browser.
    3. Views: Views are analogous to a <div> in an HTML document.  It’s merely a container to hold things such as buttons, text fields, or any other UI element. 
    4. Positioning: Titanium’s positioning is nearly identical to CSS’s absolute positioning.  An item’s position is calculated from the top left of it’s parent view.  Titanium does some cool stuff for higher resolution devices, such as the iPhone’s Retina display.  Because the pixel density is higher, moving something down 5 pixels on non-Retina displays will equate to around 10 real pixels on Retina displays.  This is transparent to you.  All you have to do is make sure it looks good one one, and it will be transposed automatically for various devices.
    5. Layout: Windows and views have a “layout” property.  As of this writing, the only property that really works is “Vertical,” which is like a <vBox> container in Adobe’s Flex platform, or like a <div> with a “clear:both” set in CSS.  The items will stack on top of each other…

    In Summary…

    As we’ve seen, there are a few steps to get up and running with Titanium, but really, most of the configuration is now behind us.  From here on out, we’re free to play with the framework and really start having some fun.  In later installments, we’ll go through structuring a large application, some basic Javascript best practices, and some advanced topics like memory profiling with Instruments (for iOS apps).  

    Titanium is a very powerful engine for creating near-native* apps that look great and run on several platforms with minimal effort.  Take advantages of the vast resources available, and start to dig into mobile development with Titanium.  Maybe you’ll write the next Angry Birds…

    The Asterisk*

    Titanium isn’t “Write once, run everywhere,” or as some would say, “Write once, suck everywhere.”  Titanium wants you to embrace the platforms you are targeting, and the unique experience that each platform’s users expect.  Think of Titanium as “Write once, adapt everywhere.”  Nearly all of the code you write is cross-platform (Android and iOS), but there may be some times where you need to conditionally show one thing on one platform, and a different experience on another…we’ll dive into that later.  

    Also, your Javascript isn’t transformed into Objective-C or Java, as some would believe.  The Titanium framework has a series of proxies that essentially act as a bridge between the OS of choice and your Javascript code. The performance hit is negligible, but is a factor in some instances.  If you want to learn more, check this out… 

    titaniummobile developmentandroid developmentiphone developmentjavascript