Book Image

Creating Mobile Apps with Appcelerator Titanium

By : Christian Brousseau
Book Image

Creating Mobile Apps with Appcelerator Titanium

By: Christian Brousseau

Overview of this book

Smartphones and tablets have really changed the technological landscape over the last 3-4 years. Much like the web did in the last decade, these powerful tools have changed the way people communicate and access information. Such a wide market creates opportunities for developers who have the skills to develop mobile applications. "Creating Mobile Apps with Appcelerator Titanium" is a practical, step-by-step guide to building iPhone, iPad, and Android applications using JavaScript. This book will give you a solid grounding of the dos and don'ts of mobile development and also covers a lot of the functionalities offered by the Titanium platform. This book begins with a look at what the Titanium platform has to offer. By taking you through clear tutorials on developing each application step-by-step, it helps you to apply your newly acquired knowledge afterwards. The difficulty level gradually increases along the course of the book. Each application from this book covers different aspects of mobile development. Every chapter starts by defining the application's features as well as the user interface structure. Every single code section is then explained and put into context allowing you to gain a clear understanding of their purpose and functionality. The book takes a “small milestone” approach, allowing you to actually run the application and see the progression. Every step is accompanied by many screenshots so you can see the expected result on screen. You will learn everything you need to know to develop your very own mobile applications. The book takes a laid-back approach to Titanium development and provides information in a way designed to never overwhelm the reader with information and also uses clear diagrams, screenshots, and tips throughout.
Table of Contents (18 chapters)
Creating Mobile Apps with Appcelerator Titanium
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Index

A

  • addEventListener function / We see the buttons, but they don't do much yet!
  • addTask function / Adding a new task
  • Android Debug Monitor / Using the Android emulator
  • Android emulator
    • testing, Geolocation used / Using the Android emulator
  • app.js
    • about / What have we here?
  • Appcelerator Cloud services
    • about / Appcelerator Cloud services
    • Users / Appcelerator Cloud services
    • Photos / Appcelerator Cloud services
    • Custom Objects and Search / Appcelerator Cloud services
    • Push Notifications / Appcelerator Cloud services
    • Email Templates / Appcelerator Cloud services
    • Key Values / Appcelerator Cloud services
    • Places / Appcelerator Cloud services
    • Status / Appcelerator Cloud services
    • Posts / Appcelerator Cloud services
    • Clients / Appcelerator Cloud services
    • Social Integration / Appcelerator Cloud services
    • Checkins / Appcelerator Cloud services
    • Chat / Appcelerator Cloud services
    • Photo Collections / Appcelerator Cloud services
    • Ratings, Reviews, and Likes / Appcelerator Cloud services
    • Access Control Lists / Appcelerator Cloud services
    • Events / Appcelerator Cloud services
    • Files / Appcelerator Cloud services
    • Friends / Appcelerator Cloud services
    • Messages / Appcelerator Cloud services
    • user, creating / Creating a user
    • development sandbox / Our development sandbox
  • Appcelerator Cloud Services (ACS) / Let's see what we got here
    • about / Appcelerator Cloud Services
  • App Explorer tab / Making sure the pages actually turn
  • AudioRecorder object
    • about / Recording with a click on a single button
  • authorize function / Allowing our user to log in and log out at the click of a button

B

  • barebones game
    • creating / Creating our project
    • game engine, obtaining / Where can we get it?
    • module, installing / Installing our module
    • graphics tools, using / The map (before we code a single line), The right tool for the right job
    • Tiled map editor, using / The right tool for the right job
    • game, creating / Creating the map
    • scaffolding / The scaffolding
    • external asset, loading / Loading an external asset
    • loading / Loading the game
    • hero, adding / Hold that code, will you?
    • graphical representation, for hero / Hold that code, will you?
    • sprite sheet, working / How does a SpriteSheet actually work?
    • basic hero implementation / Let's keep it modular
    • hero, placing on map / Putting our hero on the map
    • game development concepts / Venture around the map, Creating our V-Pad, Is someone touching the V-Pad?, Aren't we forgetting something?, Seeing the future, Living the future, Is it a game yet?
    • animation, involving / Make sure he walks in the right direction, Make sure he stops in the right direction
    • finishing touch, providing / The user is touching the V-Pad, but where exactly?, Cleaning up after ourselves
  • barebones game project
    • basic design / The game's basic design
    • game engine, incorporating in project / We need an engine!, Installing our module
  • blur function / Adding a new task
  • button bar / The button bar
  • buttons
    • adding, to standalone stopwatch project / Starting and stopping the stopwatch

C

  • client side, multiplayer game
    • Web Socket module / The Web Socket module
  • close function
    • about / Close the door, you're letting the heat out
  • code, Stock Portfolio mobile application
    • user interface, coding / Coding the user interface
    • user interface elements, positioning / Sparing our fingers
  • code writing
    • pre-tasks / Before writing any code
    • native module / A native module
    • native module, getting / Where do I get it?
  • CommonJS modules / We have CommonJS modules, let's use them
  • completed tasks, To-do items management application
    • filtering out / Filtering out completed tasks
    • filter, activating / Activating the filter
  • createTabbedBar function / Developing a better switch for iOS
  • cURL utility
    • about / The cURL utility
    • URL, for downloading / The cURL utility
  • current time
    • displaying, with big numbers / Displaying the current time with big numbers

D

  • database, To-do items management application
    • about / The database
    • structure, defining / Defining the structure
    • model, implementing / Implementing our model
  • dedicated map module
    • creating / Creating a dedicated map module
    • testing / Testing this new map module
  • density-independent pixels / Sparing our fingers
  • device location, Geolocation services application
    • translating, into code / How does that translate into code?
  • DRY principle / Recording with a click on a single button

E

  • e-book pages
    • assembling / Final assembly
  • emulator
    • testing, Geolocation used / How can we test this?
  • execute function / Listing all the existing tasks
  • exporting / Moving on to the code

F

  • Facebook
    • about / Facebook Integration
    • responses, handling from / Handling responses from Facebook
    • message, posting on / Posting our message on Facebook
  • Facebook App
    • Mobile App, linking to / Linking our mobile app to our Facebook app, Allowing our user to log in and log out at the click of a button
    • authorizing / Authorizing our application
  • Facebook app ID
    • retrieving / Retrieving our Facebook app ID
  • Facebook Graph API
    • about / The Facebook Graph API
  • Facebook Integration
    • about / Facebook Integration
    • application, creating / Creating our application
    • Facebook app ID, retrieving / Retrieving our Facebook app ID
    • Mobile App, linking to Facebook App / Linking our mobile app to our Facebook app, Allowing our user to log in and log out at the click of a button
  • Facebook native module
    • about / There is a module for that
    • instantiating / Instantiating our module
  • flag / Defining the structure
  • Flickr
    • about / There is a web service for that...
  • Flickr API
    • about / The Flickr API
  • Flip Native module / The user interface structure
  • frames per second (FPS) / The scaffolding

G

  • game server, multiplayer game
    • coding / Coding our game server
    • web server, creating / Creating a web server in less than 10 lines of code
    • web server, working / Taking our server for a spin
    • tabs, keeping on connected player / Keeping tabs on our players
    • socket.io connection, creating / Creating our socket.io connection
    • game interactions / Game interactions, A player quits the game, JavaScript arrays don't have a contains function?
    • player interactions / Player interactions, A player moved around the map
    • network traffic, sparing / Sparing network traffic, Make sure everything runs smoothly
  • Gelocation
    • test, validating / Validating our test
  • geocoding / Getting the device's location
  • Geolocation
    • testing, emulator used / How can we test this?
    • testing, iOS simulator used / Using the iOS simulator
    • testing, Android emulator used / Using the Android emulator
  • Geolocation service
    • about / A better Geolocation service
  • Geolocation services application
    • about / Creating our project
    • main window / The main window, Let's dig in the right way, The header
    • device's location, obtaining / Getting the device's location
  • Google Maps v2
    • using, for Android / What about Android?, It's good that maps are their own thing, Testing this new map module
    • about / Google Maps v2
    • URL / Google Maps v2
  • guID
    • about / Creating our project

H

  • header view / The header view
  • Home button / Why not just LANDSCAPE?
  • HTML page
    • about / The rich HTML page
  • htmlPage variable / The rich HTML page
  • HTTPClient object
    • creating / Creating an HTTPClient object
    • opening / Opening the HTTPClient object

I

  • Image View component / The photo viewer window
  • installation, Node.js / Installation
  • installation, Web Socket module / Installing the module
  • Internet
    • stock values, retrieving from / Retrieving the stock values from the Internet
  • iOS
    • about / Developing a better switch for iOS
  • iOS simulator
    • testing, Geolocation used / Using the iOS simulator

J

  • JRPG, into multiplayer game
    • project, creating / Creating our project
    • prerequisites / Before we get our hands dirty, WebSockets
    • server side requisites / The server side
    • client side requisites / The client side
    • game server, coding / Coding our game server
    • online functionality, providing / Let's bring this game online!

L

  • label
    • creating, for timer display / Displaying the current time with big numbers
  • Label component
    • about / Displaying the current time with big numbers
  • landscapeShowsTwoPages property / Adding some colorful views
  • Lanica
    • about / The QuickTiGame2d game engine
    • URL / The QuickTiGame2d game engine
  • Lanica, Inc / Where can we get it?
  • lap times
    • capturing / Capturing lap times
    • displaying, in scrollable list / Showing lap times in a scrollable list
  • layers
    • using / Using layers
    • need for / Why layers?
  • list
    • stock, adding to / Adding a new stock to the list
  • ListView component
    • about / The ListView component
    • template / The template
    • ListView object, creating / Creating our ListView object
  • ListView object
    • creating / Creating our ListView object

M

  • main window, Geolocation services application
    • about / The main window, Let's dig in the right way
    • header, creating / The header
    • ListView component / The ListView component
    • calling / Calling our main window
    • testing / Testing our work so far
  • map
    • about / Creating the map
    • creating / Creating the map
    • convering, into game / Let's turn this map into a game
  • map variable / The map view
  • Map View
    • about / Our tabbed user interface
  • map view / The map view
  • Marco Polo-like game project
    • about / We know the drill
    • ACS functionality, adding / Let's see what we got here
    • tabbed user interface / Our tabbed user interface, The chicken and the egg
    • Polo window / The Polo window
    • Marco window / The Marco window
    • Google Maps v2, using for Android / What about Android?, It's good that maps are their own thing, Testing this new map module
  • Marco Window
    • about / Our tabbed user interface
  • Marco window
    • using / Using those windows
    • about / The Marco window
    • dedicated map module, creating / Creating a dedicated map module
    • player locations, obtaining from Cloud / Getting player locations from the cloud, Let's play!
  • MaxMind GeoIP service
    • about / The MaxMind GeoIP service
    • URL, for documentation / The MaxMind GeoIP service
  • message
    • posting, on Facebook / Posting our message on Facebook
    • posting, on Twitter / Posting our message on Twitter
  • microblogging site
    • about / Twitter integration
  • Mobile App
    • linking, to Facebook App / Linking our mobile app to our Facebook app, Allowing our user to log in and log out at the click of a button
  • Mobile Backend as a Service (MBaaS)
    • about / Appcelerator Cloud services
  • Mobile Project wizard
    • about / Creating our project
    • tiapp.xml file / What have we here?
    • app.js file / What have we here?
  • modules
    • about / The application structure

N

  • navigation, Geolocation services application
    • about / Connecting the wires
    • photo, selecting / Selecting a photo
    • Refresh button / The Refresh button
    • testing / Testing out the navigation
  • Node.js
    • about / Enter Node.js, Node.js
    • installing / Installation
    • URL / Installation
    • URL, for downloading / Node.js
  • NPM
    • about / Installing a JavaScript module on our server sounds complicated, NPM
    • URL, for downloading / NPM

O

  • old recordings
    • deleting / Deleting old recordings
  • online functionality, multiplayer game
    • connecting, to game server / Connecting to the server, Designing the hero selection window, Gathering new assets, To the code!, Changing the hero's appearance, Making this work
    • interactivity, providing / Making our hero speak, Back to the drawing board, How to reach the window, Wiring it up, Displaying what the hero is saying
    • interacting, with game server / Interacting with the game server, When our hero moves
    • events / This looks familiar, Someone moved, Where is everybody?, Be sure to hang up that connection
  • open function / Displaying the current time with big numbers
    • about / Close the door, you're letting the heat out
  • orientationModes property / Orientation

P

  • Page Flip Module
    • about / The Page Flip Module
    • URL, for downloading / The Page Flip Module
  • photo gallery integration, Geolocation services application
    • about / Photo gallery integration
    • Android photo gallery integration / Android photo gallery integration
    • iOS photo gallery integration / iOS photo gallery integration
  • photos
    • retrieving, from web to application / Photos from the Web to our application, Getting our API key, Remembering that key, Making the call, Handling the response, Having a second look at our main window
  • photo viewer window, Geolocation services application
    • about / The photo viewer window
    • code / On with the code, Returning to our main window
  • PhotoViewerWindow module / Selecting a photo
  • Polo window
    • using / Using those windows
    • about / The Polo window
    • user interface / The user interface
    • location, determining of player / Determining the player's location
    • location, pushing to Cloud / Pushing our location to the Cloud
    • Polo feature, testing / Testing our Polo feature
  • Polo Window
    • about / Our tabbed user interface
  • portfolio
    • saving / Saving our portfolio, Saving
    • retrieving / Retrieving
  • portfolio management
    • about / Portfolio management
    • portfolio, saving / Saving
    • portfolio, retrieving / Retrieving
    • stock, updating / Updating a particular stock
  • portfolio management window
    • about / The portfolio management window
    • coding / Coding what we have designed
    • stock list / The stock list
  • preference service
    • wiring, to UI / Wiring the preference service to the UI
  • preference service, wiring to UI
    • stock, adding to list / Adding a new stock to the list
    • custom look, creating for table rows / Creating a custom look for our table rows
  • project
    • creating / Creating our project
    • module, adding to / Adding the module to our project

Q

  • QuickTiGame2d game engine
    • about / The QuickTiGame2d game engine

R

  • RDMS
    • about / The database
  • recordings
    • listening / Listening to a recording
  • require function / Final assembly
  • responses
    • handling, from Facebook / Handling responses from Facebook
  • REST
    • about / Creating a user
  • reverse geocoding / Getting the device's location
  • Role Playing Game
    • about / The scaffolding
  • Role Playing Games (RPG)
    • about / Hey! Don't stay in the corner
  • Run button / Making sure the pages actually turn

S

  • Scale-independent Pixels / Starting and stopping the stopwatch
  • ScrollableView component
    • about / Designing the hero selection window
  • server side, multiplayer game
    • about / The server side
    • Node.js / Enter Node.js
    • server project, creating / Creating our server project
    • socket.io / socket.io, Installing a JavaScript module on our server sounds complicated
  • single call
    • stocks, retrieving in / Retrieving all stocks in a single call
  • single stock
    • retrieving / Retrieving one stock
  • social networks project
    • creating / Creating our project
    • application, creating in single window / One window to rule them all
    • user interface, creating / Code while it is hot!
  • social_plus library
    • about / The social_plus library
    • URL / The social_plus library
  • Socket.IO
    • about / Socket.IO
  • socket.io
    • about / socket.io
  • socket.io connection
    • creating / Creating our socket.io connection
  • sprite sheet
    • about / How does a SpriteSheet actually work?
    • working / How does a SpriteSheet actually work?
  • sprite sheets
    • about / Sprite sheets and tilesets
  • SQLite
    • about / The database
  • standalone stopwatch project
    • creating / Creating our project
    • user interface elements / The UI structure
    • Window object / It all starts with a window
    • current time, displaying with big numbers / Displaying the current time with big numbers
    • launching / We can now do our first run
    • stopwatch, starting / Starting and stopping the stopwatch
    • stopwatch, stopping / Starting and stopping the stopwatch
    • buttons, adding / Starting and stopping the stopwatch
    • GO! button / We see the buttons, but they don't do much yet!
    • start() method / Stopwatch is not defined, but it's okay
    • stop() method / Stopwatch is not defined, but it's okay
    • toString() method / Stopwatch is not defined, but it's okay
    • reset() method / Stopwatch is not defined, but it's okay
    • interactions, creating between UI elements / Stopwatch is not defined, but it's okay
    • lap times feature / Keeping up with lap times
    • lap times feature, capturing / Capturing lap times
    • lap times, displaying in scrollable list / Showing lap times in a scrollable list
    • timer, resetting / Resetting the timer
  • stock
    • updating / Updating a particular stock
    • adding, to list / Adding a new stock to the list
  • stock information
    • saving / Saving all that
  • Stock Portfolio mobile application
    • creating / Creating our project
    • structure / The application structure
    • main application window / The main application window
    • code / Moving on to the code
    • first run, preparing / Preparing for our first run
    • form, designing / The form at the top
  • Stock quote API
    • about / The Stock quote API
  • Stock Quotes API
    • about / Let's see what we get from it
  • stocks
    • moving / Moving stocks around
    • retrieving, in single call / Retrieving all stocks in a single call
    • handling, on updation / Handling when stocks are updated
    • updating, on portfolio modification / Updating stocks when the portfolio has changed
    • updating, on application start / Updating stocks as the application starts
  • stocks, moving
    • portfolio, saving / Saving our portfolio
  • stock values
    • retrieving, from Internet / Retrieving the stock values from the Internet
  • stopwatch
    • starting / Starting and stopping the stopwatch
    • stopping / Starting and stopping the stopwatch
  • stopwatch.js file / Stopwatch is not defined, but it's okay
  • Stopwatch library
    • about / The source code for this book
  • stored recordings
    • listening / Listing stored recordings

T

  • tabbed bar
    • about / Developing a better switch for iOS
  • tabbed user interface, Marco Polo-like game project
    • application, running / Running our application for the first time
  • Tab Group component
    • about / Our tabbed user interface, Getting this show on the road
  • table rows
    • custom look, creating for / Creating a custom look for our table rows
  • table view rows / Filtering out completed tasks
  • table view sections / Filtering out completed tasks
  • tasklist / The tasklist
  • tasks, To-do items management application
    • adding / Adding a new task
    • existing tasks, listing / Listing all the existing tasks, Before executing the code
    • marking as completed / Marking a task as completed
    • completed tasks, filtering out / Filtering out completed tasks
    • completed tasks, deleting / Deleting the completed tasks
  • template, ListView component / The template
  • Ti.Map.createView function / The map view
  • Ti.PageFlip.TRANSITION_FADE / Adding some colorful views
  • Ti.PageFlip.TRANSITION_FLIP / Adding some colorful views
  • Ti.PageFlip.TRANSITION_SLIDE / Adding some colorful views
  • Ti.Ui.createWindow function / It all starts with a window
  • tiapp.xml file
    • about / What have we here?
  • Tiled map editor
    • about / The right tool for the right job
    • using / The right tool for the right job
  • tiled map editor
    • about / The tiled map editor
    • URL, for downloading / The tiled map editor
  • tileset
    • about / Tilesets
    • using / Using the tileset
  • tilesets
    • about / Sprite sheets and tilesets
  • timer
    • resetting / Resetting the timer
  • Titanium.UI namespace / It all starts with a window
  • Titanium Studio
    • about / Creating our project
    • Wizard form / Creating our project
  • TiWS (Titanium Web Sockets)
    • about / The Web Socket module
  • TiWS module
    • about / This will work, but at the same time, it won't, The TiWS module
  • To-do items management application
    • about / Creating our project
    • user interface structure / The user interface structure
    • database structure, creating / The database, Defining the structure
    • user interface / The user interface
    • running / Let's have a look
    • switch, developing for iOS / Developing a better switch for iOS
    • task, adding / Adding a new task
    • existing tasks, listing / Listing all the existing tasks, Before executing the code
    • task, marking as completed / Marking a task as completed
    • completed tasks, filtering / Filtering out completed tasks
    • completed tasks, deleting / Deleting the completed tasks
  • toggleAllTasks function / Activating the filter
  • Twitter
    • about / Twitter integration
    • message, posting on / Posting our message on Twitter
  • Twitter application
    • consumer key, retrieving / Retrieving our consumer key and secret
    • JavaScript library, instantiating / Instantiating the library
    • linking with / Linking with our Twitter application
    • authorizing / Authorizing our application
    • Settings window / Settings
    • Settings, for iOS / Settings for iOS, Now to see if this works
    • Settings, for Android / Settings for Android, Where are those settings?
    • Android menus / Android menus
  • Twitter connection
    • state, toggling / Toggling the state of the Twitter connection
  • Twitter integration
    • about / Twitter integration
    • application, creating / Creating our application

U

  • UDID (unique device ID)
    • about / Making this work
  • UI
    • preference service, wiring to / Wiring the preference service to the UI
  • UI structure
    • about / The UI structure
  • user, Appcelerator Cloud services
    • creating / Creating a user
    • connecting, to Cloud / Connecting to the cloud
  • user interface
    • structure / The user interface structure
    • about / The user interface
    • PageFlip module, importing / Importing the PageFlip module
    • colourful views, adding / Adding some colorful views
    • Run button / Making sure the pages actually turn
    • orientation, choosing / Orientation
    • LANDSCAPE, using / Why not just LANDSCAPE?
  • user interface, Polo window
    • about / The user interface
  • user interface, social networks project
    • about / Code while it is hot!
    • top section / The top section, Staying within the limits
    • bottom section / The bottom section
    • device rotation, handling / What if the user rotates the device?
    • landscape mode, activating / What if the user rotates the device?
    • implementing / See it in action
    • polishing / Polishing it up a little
  • user interface, To-do items management application
    • about / The user interface
    • header view / The header view
    • tasklist / The tasklist
    • button bar / The button bar
  • user interface structure
    • WebView page / The user interface structure
    • MapView page / The user interface structure
    • VideoPlayer page / The user interface structure
  • user interface structure, voice recorder application
    • about / The user interface structure

V

  • V-Pad
    • about / No directional pad, but that's okay
    • creating / Creating our V-Pad
    • interacting with / Is someone touching the V-Pad?
    • visual feedback, providing to user / Giving some visual feedback to the user
  • video player / The video player
  • Video Player component / The video player
  • views
    • about / Why do we use views?
  • voice recorder application
    • project, setting up / Creating our project
    • user interface structure / The user interface structure
    • coding / Coding the application, Let's do some scaffolding
    • first run, performing / Let's see how this looks
    • recoring, with single click on button / Recording with a click on a single button, What good is a buffer if we're not using it?
    • stored recordings, listening / Listing stored recordings
    • recordings, listening / Listening to a recording
    • old recordings, deleting / Deleting old recordings

W

  • Web Socket module
    • about / The Web Socket module
    • downloading / Downloading the module
    • installing / Installing the module
  • Web Sockets
    • about / WebSockets
  • window
    • about / Why do we use views?
  • Window object, standalone stopwatch project / It all starts with a window
  • windows
    • navigating between / Navigating between the two windows, Let's see if it works