Developing and native packaging for Sencha Touch applications

---

REQUIRED PROGRAMS

---

1. Java
2. Sencha Touch
3. Ruby
4. Compass and Sass
5. node.js
6. Sencha Cmd
7. Android SDK
8. Cordova

Java
Version: No particular version is required; Latest stable version is preferrable
URL : http://www.oracle.com/technetwork/java/javase/downloads/index.html
Note: Android SDK requires Java
1. Download and install a Java Run-time Environment or JRE
2. The JRE version must be at least JRE 6, JRE 7 is best.
3. Set the JAVA_HOME path on your respective operating systemcls

Sencha Touch (ST)
Version: 2.1.*, Previous apps were built over ST2.1
URL: http://www.sencha.com/products/touch/
Download URL: http://cdn.sencha.com/touch/sencha-touch-2.2.1-commercial.zip
1. Download the appropriate version of Sencha touch bundle from the url.
2. Unzip the downloaded archive
3. The 'sencha-touch-' directory consists of 'touch-', a container of the sencha touch install, examples and documentation.

Ruby
Version: Ruby 1.9.3 is required (Ruby 2.0 is not supported).
URL: http://www.ruby-lang.org/en/downloads/
Note: Compass and SASS use Ruby.
[Windows]
Download Ruby 1.9.3 from rubyinstaller.org. Download the RubyInstaller .exe file and run it.
[Linux]
1. Install distro-specific RVM [Ruby Version Manager]
curl -L https://get.rvm.io | bash -s stable --ruby
2. Install Ruby 1.9.3
rvm install 1.9.3
rvm use 1.9.3
rvm rubygems latest

Compass and Sass
URL: http://compass-style.org/install/
Note: Sencha uses Compass and Sass to develop CSS content.
1. Open terminal / command line on your system.
2. Enter the command 'gem install compass'. This will install the Compass and Sass

Node.js
Version: Latest stable version is preferred; using 0.10.13
URL: http://nodejs.org/
Node.js is requried by Sencha cmd to build the applications
Note: node.js requires python.
[Windows]
1. Download and run the .msi installer
[Linux]
1. $ wget
2. $ tar.gz $ tar -xvzf  
3. $ cd
4. $ ./configure
5. $ make # takes approx. 5-10 minutes
6. $ sudo make install

Sencha Cmd
URL: http://www.sencha.com/products/sencha-cmd/download
1. Download appropriate Sencha Cmd version.
2. Unzip the Sencha Cmd zip file and save the path in environment.
3. [Linux only]  Run the sencha cmd run file using command
./SenchaSDKTools-.run --mode text
4. Save the sencha SDK path in environment variables
5. To verify installation, open terminal/ command line and type 'sencha'. This would give help page of sencha.

Android SDK
Version: api-7 is required by Sencha Touch
URL: http://developer.android.com/sdk/index.html
1. Download the appropriate version of Android SDK for your platform.
2. Install SDK and download required Android platforms
3. Save the android installation directory path in environment variables

Cordova
Version: Currently packaging using 2.8.0
URL: http://cordova.apache.org/#download
Note: Phonegap is an extended feature set of cordova platform
Note: Cordova installation requires node.js to be installed
[Windows]
1. Download the latest version of Cordova
2. Unzip the cordova installation and unzip the required version (Android) platform
3. Set the cordova unzipped directory path into environment variables
[Unix\ Linux]
1.npm install -g cordova

---

Working with Sencha app

---

Creating a Sencha application
1. Verify Sencha Cmd is installed
2. We are using ST2.1, not latest 2.2. Latest ST build comes along Sencha Cmd tools
3. Make sure you have the required ST SDK
4. Create sencha app from command using command
sencha generate app app_name /path/to/app
sencha --sdk-path /path/to/specific/sencha/sdk generate app app_name /path/to/app
5. You have app created with the specified or default Sencha version in the specified directory

---

Converting from Sencha touch application to native android application

---

There are two different ways to package a sencha touch application to native application. Theya are
1. Cordova native packaging
2. Sencha native packaging

Cordova native packaging
1. Develop the Sencha touch application independently
2. Add cordova.js into resources/js of Sencha application and also add reference of it in app.json
3. Get the sencha touch production build using the command
'sencha app build production'
4. Create a new cordova application (Not in the previous sencha application directory) using command
'cordova create '
where,
- Name of the application like DriveTime
- Package name of the application like com.rr.drivetime
- Physical path of the application on disk
5. Add android to the required cordova application using command
'cordova platform add android'
'cordova build'
which, creates an android folder with the android project structure.
6. Create an Android project over cordova application.
i. Open eclipse
ii. Go to 'File'->'New'->'Project'->'Android Project from existing code'
iii. Select the 'android' directory in the cordova app created above
7. Create a 'www' folder in the 'asssets' directory of the android project
8. Copy and paste the production build created in (3) into the 'www' folder.
9. Deploy the project to device using adb, installed part of Android SDK

Sencha native packaging
1. Develop the sencha application.
2. Go to the sencha application path
3. Add cordova.js to 'resources/js' folder
4. Add cordova.js reference to js category in app.json file
5. Complete the packager.json file [Android sdk, device to install, application name, package name, 'key']
6. Build the native package of the application using Sencha Cmd using command
'sencha app build native'
7. The above step produces a 'apk' file. You can deploy or distribute this apk to devices.