Building Cross–Platform Apps using Titanium, Alloy, and Appcelerator Cloud Services

Aaron Saunders is a former Platform Evangelist for Appcelerator Titanium, providing information and support for Titanium mobile developers. Aaron is the founder and CTO of Clearly Innovative Inc, a digital services agency with offices in Washington, D.C and New York City.

Introduction 1


CHAPTER 1 Installing and Configuring Appcelerator 3


Setting Up Titanium 3


Installing Titanium on the Mac 4


Installing Titanium Studio IDE 4


Installing Xcode 7


Installing the iOS Simulator 9


Installing the Titanium Command–Line Interface to Use an Alternate IDE 10


Installing the Android SDK 10


Installing Titanium Studio on Windows 11


Installing Titanium Studio 11


Installing Android SDK 13


Summary 14


CHAPTER 2 Introducing Appcelerator Cloud Services 15


Using the Appcelerator Cloud Services Console 17


Using Appcelerator Cloud Services REST API 25


Installing curl on a Device 26


Simple Test with the REST API 26


Integrating Appcelerator Cloud Services 31


Simple Example of Integrating Appcelerator Cloud Services 34


Summary 42


CHAPTER 3 Appcelerator Titanium Alloy Overview 43


Understanding the Model–View–Controller (MVC) Framework 44


Using Appcelerator Alloy with the MVC Framework 47


Backbone.js 50


Backbone.js in Alloy: Models and Collections 50


Using Sync Adapters 54


Basic Sync Adapter Construction 54


Backbone Model Events 55


Model–View Data Binding 56


Demo Project for Model View Binding 56


Creating the Model File 57


Creating the Collection Object 64


Data Binding with Models in Appcelerator Titanium Alloy 69


Updating the cars.js Controller File 69


Creating the New Controller/View for the Detail Display 70


Completing the Controller for the Detail View 71


Creating Widgets 74


Creating a More Complex Widget 78


Summary 80


CHAPTER 4 Building a Cross–Platform Social Photo–Sharing Application 81


Using Balsamiq to Design Mockups 81


Walking Through the Phone–Sharing App 89


User Accounts 90


Camera 90


Photo Uploading 90


Social Integration with Facebook 91


Finding Friends 91


Commenting and Rating of Media 91


Push Notifications 92


Application Flow 92


Summary 92


CHAPTER 5 Development Process for Cross–Platform Apps 93


Creating the Project for This Chapter 93


Preconfiguring Appcelerator Cloud Services 96


Creating the User Interface 99


Creating the Tab Group Files 99


Enabling the Camera Functionality on the Feed Tab 104


Adding a Custom Table Row to TableView 106


Integrating the Camera Functionality into the Application 109


Accessing the Device Camera in Appcelerator 109


Adding Camera API Calls to Feed Controller 110


Revisiting the FeedRow Controller 111


Revisiting the Feed Controller to Add the Rows to the Table 112


Adding Some Style to the Feed Table 112


Using the Android ActionBar for the Camera Button 114


Setting Up the index.xml View to Support the ActionBar 115


Modifying the index.xml View to Support the ActionBar 115


Adding the Alloy Sync Adapter and Appcelerator Cloud Services 116


Creating the User Model 116


Extending Alloy Models 117


Logging the User In 117


Creating Appcelerator Cloud Service Sync Adapter 120


Creating the Photo Model 121


Modifying the ACS Sync Adapter to Support the Photo Model 122


Model and Sync Adapter Working Together 124


Summary 134


CHAPTER 6 Integrating Comments 135


Creating the Comment Table View Layout 135


Rendering the Rows Using a Different View and Controller 136


Styling the Views to Match the Mockups 137


Adding Logic to the Controllers 139


Calling the New Controller from feed.js 139


Coding the comment.js Controller 140


Cross–Platform Support in Comment View 140


Coding the commentRow Controller 142


Adding Models and Collections for Querying Comments 142


Finishing the Comment Controllers 146


The commentRow Controller 147


Connecting the Dots… Showing the Comment List 148


Back to the feed and feedRow Controllers 149


Adding a New Comment to a Photo 152


Creating a New Comment Controller and View 152


Adding Code to the Comment Input Controller 154


Back to the Comment.js Controller 157


Saving the Comment and Updating the Table 158


Deleting Comments 163


Summary 166


CHAPTER 7 Integrating User Accounts with Appcelerator Cloud Services 167


Adding the Login User Interface 167


Updating the User Model 177


User Create Account Method 178


User Logout Method 179


Additional User Management Methods 180


Updating the Index Controller 181


Set Up the Basics in the Index Controller 181


Creating the Login Controller 184


Logging in the User 185


Creating the User Account 186


Using Facebook for Account Creation 188


Setting Up an Application to Use the Facebook Module 188


Facebook Button in the login.xml File 189


Facebook Method in the User Model 189


Facebook Handler in Login Controller 190


Updating User with Facebook Information 194


Check for Facebook Authentication on Startup 195


Logging Out of Facebook 196


Summary 196


CHAPTER 8 Working with Friends and Followers 197


Creating the CommonJS Library in Alloy 197


Adding the Code 198


Adding the Friends User Interface 200


Finishing Up the ListView with Style 205


Introduction to Appcelerator Cloud Services Friends Object 208


Modifying the ACS Sync Adapter to Support User Queries 209


Modifying the ACS Sync Adapter to Support Friends 210


Creating the Friend Relationship 211


Finding Friend Relationships Based on a User’s ID 212


Removing Friend Relationships from a User 212


Extending the User Model to Support User–Specific Friends Functionality 213


Integrating ListView Data–Binding with Friends Collections 216


Revisiting the friends.xml File 216


Integrating ListView Data–Binding with the Friends Controller 217


Displaying All Users 218


Displaying the Friends List 221


Working with User and Friends Lists 223


Removing a Friend from the Friends List 226


Updating the Application to Be Friend– and Location–Aware 227


Summary 228


CHAPTER 9 Working with Maps and Locations 229


Associating GPS Information When Saving a Photo 229


Modifying the Photo Model 229


Getting GPS Information from a Device 230


Creating a CommonJS Library for Geolocation 230


Updating the Feed Controller to Add Location to a Photo 233


Displaying the Photo Location on a Map 235


Android Support for Google Maps v2 235


Adding the Map Component to MapView XML 238


Displaying a Map of Photos Near Your Location 245


Querying ACS Photo Objects Using Your Current Location 246


Updating the User Interface to Show a Map View 247


Changes in the feed.js Controller 251


Responding to Clicks on Map Annotations 256


Summary 264


CHAPTER 10 Sharing via Facebook, Email, and Twitter 265


Creating the CommonJS Library for Sharing Functions 265


Facebook Permissions and Reauthorization 269


Sharing to the Facebook Wall 271


Sharing to the Facebook Album 273


Revisiting and Refactoring the Progress Window Library 276


Sharing to a Facebook Album 279


Sharing an Image as an Email Attachment 280


Twitter Integration with the social.js Module 284


Setting Up Your Twitter Developer Account 285


Adding social.js to Your Project 285


Adding the shareImage Function 285


Including the social.js Library in the Application 287


Adding Functionality to the sharing.js Library 288


Summary 290


CHAPTER 11 Push Notifications 291


Setting Up Push Notifications on Your Development Platform 292


Apple Push Notifications Configuration 292


Google Push Notifications Configuration 292


Configuring Push Notifications in Appcelerator Cloud Services 292


Creating the Push Notifications Library in an Application 293


Creating the pushNotifications.js Library 295


Getting the iOS Token 295


Getting the Android Token 297


Registering Callbacks 298


Integrating Push in Your Application 300


Registering for Push Notifications When the User Logs In 301


Sending Notifications Using the Appcelerator Cloud Services Console 303


Sending a Push Notification 304


Sending a Notification When Posting a Photo 306


Sending a Notification When Commenting on Photos 308


Sending a Notification When Adding a New Friend 310


Unregistering from Push Notifications When Logging Out 312


Further Integration of Push Notifications in Your Application 313


Summary 314


CHAPTER 12 Settings and User Management 315


Getting Started: View, Style, Controller 315


Editing the View 316


Editing the User Information in the Header Section 316


Editing the User Information Style 317


Handling Logout on Android and iOS 321


Logging the User Out 323


Logging Out of Appcelerator Push Notifications 323


Logging Out from Appcelerator Cloud Services 324


Logging Out from Social Media 324


Returning to the Login Screen 324


Setting the User’s Profile Picture 325


Adding a Few Performance Enhancements 329


Returning to the Feed Controller for Performance and UI Enhancement 333


Additional Information from the User Account 335


Adding Content to the Main View in the Settings Tab 337


Platform–Specific User Interface for Switch Control 338


Handling the Switch Initialization Values 341


Displaying Push Notification Status 344


Changing the Push Notification Status 346


Summary 347


CHAPTER 13 Going to Market: Deploying to the App Store and to Google Play 349


Process Overview 349


Registering for a Developer Account 349


Signing Your Application 349


Creating an App Record and Filling Out Metadata 350


Publishing Your Binary to the Store 350


iOS App Store Submission Process 350


Signing Up for an iOS Developer Account 350


Signing Your iOS Application 350


Creating an iTunes Connect Record 351


Publishing from Titanium Studio 351


Uploading Your Binary to the App Store 355


Google Play Submission Process 356


Signing Up for a Google Play Developer Account 356


Generating a Keystore for Publishing 358


Publishing to Google Play 359


Summary 362


Index 363