Set up a Titanium Workflow Without Studio

Learn how to setup Appcelerator apps without having to install Titanium Studio. I personally use IntelliJ IDEs for development work and recently switched from a Eclipse based IDE, so why reinstall another Eclipse based IDE again.

To achieve this workflow we're going to be using the Titanium-CLI to run all of our build/run commands straight from the command line instead of using a whole IDE to compile the app. I will also be focusing on Titanium 3.0.0+ since Appcelerator switched to a node.js build tool from Python, it's a little easier to setup.

Installing Titanium CLI

Follow the instruction here to get the Titanium CLI installed.

Step 1: Install node.js

Step 2: You can install Titanium CLI locally or globally.

# To install globally
npm install titanium -g

# if you installed it this way, you should just be able to run:
# titanium

# To install locally
npm install titanium

# you can use the --save or --save-dev flags to save it to your package.json
# if you installed it this way, you will need to prefix all your commands like so:
# ./node_modules/.bin/titanium

Step 3: Sign in with the Titanium CLI

titanium login

It should automatically ask for you username/email and password. You need to create an account at Appcelerator.

Step 4: Install the latest sdk

The directions in the docs are a bit off here. It says that you should run the command: titanium sdk update --branch 3_0_X --default. But that doesn't work quite right, this command only installs dev/nightly versions. Instead you can install the latest stable version of the SDK automatically with

titanium sdk install

# Or if you want a specific version
titanium sdk install <SDK_VERSION>.GA
titanium sdk install 3.5.0.GA

Create a new project

Step 1:

cd <some directory>

Step 2:

View the documentation for initializing a project here.

titanium create

Setting up the IDE (WebStorm)

Step 1:

Open the project with WebStorm

Step 2:

Generate the autocomplete/intellisense file for WebStorm to pick up. This can be done using the jsca2js project. This script generates a JSDoc annotated JS file from the SDK Docs JSON file on Appcelerator's docs site.

Clone the repository somewhere

git clone [email protected]:navinpeiris/jsca2js.git
cd jsca2js

Run the script to generate the js file

./titanium-mobile.py <titanium-version>
./titanium-mobile.py 3.5.0

This generates a file: titanium-mobile-<titanium-version>.js. This file can be placed inside the project root directory and Webstorm should automatically pick up this file and index it.

Step 3: (optional)

If you choose not to put this file in your project root. It can be added as a global js library instead.

In WebStorm open: Settings > Languages & Frameworks > Libraries Here click the Add button. Name the library: Titanium Fill in version: <titanium-version> from earlier ex. 3.5.0 Click the + on the right and Attach Files... then look for the file that was generated earlier.

Set up a git pre-commit hook

If the project was set up with a git repository, let's set up a pre-commit hook to validate our js files.

Install jshint and jscs globally (or locally)

npm install -g jscs jshint

Download the git pre-commit hook

curl https://gist.githubusercontent.com/weikinhuang/e8fc437e4acf6503f8d1/raw/js-pre-commit-hook.sh > .git/hooks/pre-commit
chmod +x .git/hooks/pre-commit

We can set up a file to exclude files with .precommitignore

node_modules/*

Set up JSCS rules in .jscsrc. Rules can be viewed here.

Set up JSHint rules in .jshintrc. Rules can be viewed here. However, make sure this block is there

{
  "globals": {
    "Titanium": true,
    "Ti": true
  },
  "predef": ["Titanium", "Ti"]
}

Set up Genymotion

Genymotion is a high speed android emulator that runs inside VirtualBox.

Step 1:

Create an account at genymotion.com

Step 2:

Download the installer at genymotion.com if you don't have VirtualBox, download the full installer. And then install it.

Step 3:

Start Genymotion. It should prompt to add a new device. Then add a new device with the device specs of your project.

Step 4:

Build & run the app in the android emulator with:

titanium build -p android