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

387 Pages·2014·16.16 MB·English

by  Aaron Saunders

Building Cross-
Platform Apps
Using Titanium ,
™
Alloy, and
Appcelerator
®
Cloud Services
Aaron Saunders
This edition first published 2015
© 2015 Aaron Saunders
Registered office
John Wiley & Sons Ltd, The Atrium, Southern Gate, Chichester, West Sussex, PO19 8SQ, United Kingdom
For details of our global editorial offices, for customer services and for information about how to apply for permission to
reuse the copyright material in this book please see our website at www.wiley.com.
The right of the author to be identified as the author of this work has been asserted in accordance with the Copyright,
Designs and Patents Act 1988.
All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form
or by any means, electronic, mechanical, photocopying, recording or otherwise, except as permitted by the UK Copyright,
Designs and Patents Act 1988, without the prior permission of the publisher.
Wiley also publishes its books in a variety of electronic formats. Some content that appears in print may not be available in
electronic books.
Designations used by companies to distinguish their products are often claimed as trademarks. All brand names and prod-
uct names used in this book are trade names, service marks, trademarks or registered trademarks of their respective own-
ers. The publisher is not associated with any product or vendor mentioned in this book. This publication is designed to
provide accurate and authoritative information in regard to the subject matter covered. It is sold on the understanding that
the publisher is not engaged in rendering professional services. If professional advice or other expert assistance is required,
the services of a competent professional should be sought.
Trademarks: Wiley and the Wiley logo are trademarks or registered trademarks of John Wiley & Sons, Inc. and/or its
affiliates in the United States and/or other countries, and may not be used without written permission. All other trade-
marks are the property of their respective owners. John Wiley & Sons, Ltd. is not associated with any product or vendor
mentioned in the book.
A catalogue record for this book is available from the British Library.
ISBN 978-1-118-67325-6 (paperback); ISBN 978-1-118-67324-9 (ePub); 978-1-118-67322-5 (ePDF)
Set in 10/12.5 ChaparralPro-Light by TCS/SPS
Printed in the United States by Bind-Rite
I dedicate this book to my father, Dennis Francis Saunders Sr., who supported me in my interest
with computers way before computers where commonplace in society. He bought me my first
computer—a Timex Sinclair—and I also remember the TRS-80 from Radio Shack. He passed
away before the book could be finished, but he is the reason I became involved with computers.
Publisher’s Acknowledgements
Some of the people who helped bring this book to market include the following:
Editorial and Production Marketing
VP Consumer and Technology Marketing Manager:
Publishing Director: Lorna Mein
Michelle Leete
Assistant Marketing Manager:
Associate Director–Book Content Dave Allen
Management:
Martin Tribe
Associate Publisher:
Chris Webb
Project Editor:
Kezia Endsley
Copy Editor:
Kezia Endsley
Technical Editor:
Chaim Krause
Editorial Manager:
Rev Mengle
Senior Project Editor:
Sara Shlaer
Editorial Assistant:
Claire Johnson
About the Author
AARON SAUNDERS is the CEO/Founder of Clearly Innovative Inc., a minority-owned digi-
tal solutions provider headquartered in Washington DC with offices in New York City. The
firm shapes ideas into viable products and transforms clients’ existing technologies into
stunning solutions. Clearly Innovative is a leader in early adaption and implementation of
cutting edge technologies, from mobile strategy and design to developing innovative web-
based solutions. Clearly Innovative provides support and expertise through services focused
on product strategy, user experience, design, and development.
Aaron is an experienced software developer with over 30 years of experience and has strong
technical, communication, and collaboration abilities. He is highly adept at helping organiza-
tions add business value using mobile and web applications.
Aaron has a BA in Computer Science from Ohio Wesleyan University and an MBA with con-
centrations in Information Technology Strategy and Marketing from the NYU Stern School
of Business.
Acknowledgments
This book would never have been started without the encouragement of Kwasi Frye to keep
pressuring me to respond to requests to write a book.
This book would have never been completed without the patience and understanding of my
wife Andrea Saunders who consistently gave me the time I needed to get this done, which
was above and beyond the long hours of running a small digital agency, when I got home
nights and sometime the whole weekend was spent writing code, reviewing chapters, and
retesting the application for the book.
Thank you to Appcelerator for the platform you provided for me to start Clearly Innovative
on, and thanks to all of the clients we worked with to develop mobile solutions and expand
my knowledge of the Appcelerator platform and mobile application development.
Thanks to the team at Wiley who has been patient with me through the changes in the
underlying Appcelerator platform that caused chapter rewrites, changes in the mobile user
interface that required new screenshots, and delays in scheduling due to personal matters.
Thanks to Chaim Krause for being a great technical reviewer. I hope you learned something
through the process.
Contents
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
vi
BUILDING CROSS-PLATFORM APPS USING TITANIUM
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
vii
TABLE OF CONTENTS
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
viii
BUILDING CROSS-PLATFORM APPS USING TITANIUM
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