Skip to main content

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



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

Aaron Saunders

ISBN: 978-1-118-67324-9 October 2014 384 Pages

Download Product Flyer

Download Product Flyer

Download Product Flyer is to download PDF in new tab. This is a dummy description. Download Product Flyer is to download PDF in new tab. This is a dummy description. Download Product Flyer is to download PDF in new tab. This is a dummy description. Download Product Flyer is to download PDF in new tab. This is a dummy description.


Skip Objective-C and Java to get your app to market faster, using the skills you already have

Building Cross-Platform Apps using Titanium, Alloy, and Appcelerator Cloud Services shows you how to build cross-platform iOS and Android apps without learning Objective-C or Java. With detailed guidance given toward using the Titanium Mobile Platform and Appcelerator Cloud Services, you will quickly develop the skills to build real, native apps— not web apps—using existing HTML, CSS, and JavaScript know-how. This guide takes you step-by-step through the creation of a photo-sharing app that leverages the power of Appcelerator's cloud platform, and establishes fundamental concepts before adding advanced techniques. Coverage extends beyond the development process to include expert advice for deployment on the App Store or Google Play, and more.

The mobile app market is estimated at over $2.4 billion per year. These apps were traditionally built using Objective-C or Java, which can be complex and daunting to learn. Now you can use JavaScript on the Titanium framework to build amazing apps that run native on iOS and Android devices, and get your app to market faster with this guide.

  • Integrate Cloud Services APIs into the app framework and UI
  • Set up user accounts, and capture and store photos
  • Work with location-based services and share via social media
  • Deploy on the App Store, Google Play, and more

When a great idea is in the works, no one wants to put it on hold to learn an entirely new skillset. Now there's an alternative. Get that app to market fast, using existing skills and powerful new tools, and grab a piece of that multi-billion-dollar market. Building Cross-Platform Apps using Titanium, Alloy, and Appcelerator Cloud Services is your ticket to the front of the line.

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

Downloadable Source Code from Entire Book