parallax background

Configuring a Sencha Dev Environment Targeting Android on Windows

Project Bolletta: Native Android and iOS, Rambler Reader and Blue Bamboo Plugins, Signature Pad, and Continuous Integration
July 30, 2014
Testing Enterprise Applications with Selenium and HTML5 Robot
August 20, 2014

The following explains the details for configuring all of the tools required to build native Android applications using Sencha on an Windows machine.

Why these versions? See http://www.appfoundation.com/2014/02/automating-the-building-of-native-android-and-ios-apps-using-sencha-touch/ for a detailed explanation.

Node 0.10.23 and Cordova 3.0.0

Node is the thing you need to install Cordova. Apache Cordova is a set of device APIs that allow a mobile app developer to access native device function such as the camera or accelerometer from JavaScript (https://cordova.apache.org/). This is what Sencha Command uses behind the scenes to package their Sencha Touch framework on native devices.

1. Download: http://nodejs.org/dist/v0.10.23/node-v0.10.23.msi

2. Install node-v0.10.23.msi

4. Open a new Command Prompt

3. Type  the following: npm -v

1.3.17

4. Type the following: sudo -s

Password: *******

5. Type the following: npm install -g cordova@3.0.0

Lots of GET output

6. Type the following: cordova -v

3.0.0

 

JDK 7.51

Java is a programming language and computing platform first released by Sun Microsystems in 1995 (http://www.java.com/en/download/faq/whatis_java.xml). You need it in order to install Sencha Command, run the Sencha Command Tools, run a Java based dev environment, use the Android Tool Suite, and use Gradle.

1. Download: http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html

2. Double-click the EXE file run the installer

3. Open a new command prompt

4. Type: java -version

java version “1.7.0_51”

6. Create a  JAVA_HOME environment variable with the value that is the location where Java is installed

7. Open a new command prompt

8. Type: echo %JAVA_HOME%

C:\Program Files\Java\jdk\1.7.0_51

 

Sencha Command 4.0.1.45

From scaffolding a new project, to minifying and deploying your application to production, Sencha Cmd provides a full set of lifecycle management features to compliment your Sencha projects (http://www.sencha.com/products/sencha-cmd/download). Sencha Command is an Ant based scripting tool for natively packaging a Sencha Touch app on various native platforms, but this isn’t one step solution. In order to get it to work for you additional build process work will be required.  For a detailed description of how this process works see http://www.appfoundation.com/2014/02/automating-the-building-of-native-android-and-ios-apps-using-sencha-touch/.

1. Download: http://www.sencha.com/products/sencha-cmd/download

  • Unfortunately Sencha does not appear to keep older versions of the product.
  • I can only verify that 4.1.0.45 works with all of the other tools listed here.
  • Since I do not have permission to distribute Sencha Command, I cannot give you my copy.
  • Hopefully you can find it through some other means.

3. Double-click on the EXE to launch the installer

4. Change the install location to C:\sencha-cmd-4

5. Complete the installation

6. Open a new command prompt

7. Type the following: sencha which

Sencha Cmd 4.0.1.45

 

Ruby 2.0.0

Ruby is the technology used by the underlying Sencha theming method called Compass.

1. Download http://dl.bintray.com/oneclick/rubyinstaller/rubyinstaller-2.0.0-p451.exe?direct

2. Double-click on the EXE to run the installer

3. Follow the installation steps

4. Open a new command prompt

5. type the following: ruby -v

ruby 2.0.0p451

 

Compass

Compass is an open-source CSS Authoring Framework (http://compass-style.org/). This is what Sencha uses behind the scenes to turn SASS files into CSS files for the purposes of advanced cross platform compatible theming.  You need Ruby installed to be able to use the GEM installation command.

1. Open a new command prompt

2. Type the following: gem install compass

4 gems installed: sass, chunky_png, fssm, compass

 

Ant 1.8.4

Apache Ant is a Java library and command-line tool that help building software (http://ant.apache.org/). Ant is the underlying technology used by both Sencha Command and Cordova. Specifically you need the bin directory of the Ant installation to be on your path for Cordova to actually work behind the scenes.

1. Download from http://archive.apache.org/dist/ant/binaries/apache-ant-1.8.4-bin.zip

2. Extract it to some location on your computer

3. Add the Ant bin directory to your PATH environment variable

  • For example: C:\tools\ant-1.8.4\bin

4. Open a new command prompt

5. Type the following: ant -version

Verify the output: Ant 1.8.4

 

Gradle 1.6

You don’t need Gradle to do anything with Sencha, however in order to automate the building process you will need a scripting language. Preferably you should use a scripting language which will work on more than one platform. While you could just use Ant, I would highly recommend a more modern technology in which it is easier to do things programmatically (like use conditional logic). Gradle combines the power and flexibility of Ant with the dependency management and conventions of Maven into a more effective way to build (http://www.gradle.org/). I used Gradle to make a single automated process for building native Android, iOS, Windows 8, and Windows Phone apps with Sencha Touch and any other JavaScript based technology as Af Gradle.

1. Download: http://services.gradle.org/distributions/gradle-1.6-all.zip

2. Extract it to some location on your computer

3. Add the bin directory to your PATH environment variable

  • Example: C:\tools\gradle-1.6\bin
4. Open a new command prompt

5. The following: gradle -v

Gradle 1.6

 

Android Toolkit 2013-1030

The Android SDK provides you the API libraries and developer tools necessary to build, test, and debug apps for Android (http://developer.android.com/sdk/index.html). You need this toolkit in order to build native Android applications.

1. Download: http://dl.google.com/android/adt/adt-bundle-windows-x86_64-20131030.zip

2. Extract it to C:\adt-bundle-windows-x86_64-20131030

  • You want to keep it at a root level like this because some of the paths are very long
  • Windows does not correctly handle long paths in some cases which will result in compile and other issues later

3. Add the tools and platform-tools directory locations to your PATH environment variable:

  • C:\adt-bundle-windows-x86_64-20131030\sdk\platform-tools
  • C:\adt-bundle-windows-x86_64-20131030\sdk\tools

4. Open a new command prompt

5. Type the following: adb version

Android Debug Bridge 1.0.31

6. We now need to uninstall the 19 SDK because it is broken for Cordova 3

7. Type the following: android avd

8. Select Tools -> Manage SDK

9. Select “Deselect All”

10. Select “Android 4.3 (API 18) to install everything associated with it

11. Select “Android 4.2 (API 11) to install everything associated with it

12. Click “Delete 2 Packages”

13. Click “Install 6 Packages”

14. Delete C:\adt-bundle-windows-x86_64-20131030/sdks/android-19

 

HAXM

This tools provides you with the ability to use the x86 Atom Intel system images for Android emulation. What does that mean? It means in order to run an emulator it only takes 10 seconds to startup versus 5 minutes. The only requirement is that you have to have an Intel processor that supports VT-T emulation.

1. Download it from http://software.intel.com/en-us/android/articles/intel-hardware-accelerated-execution-manager

2. Extract it to wherever you want

3. Double-click on the installer and go through the installation process, it will either work or it won’t.

 

Eclipse 4.3.1 (Java EE)

Eclipse is a Java based development environment that I personally use to work on Sencha Touch apps, and is a nice to have tool for looking at native android projects.

There are two ways to do this:

1. Download Eclipse and update it yourself

2. Download a preconfigured version of Eclipse.

  • Someone you know somewhere has already configured Eclipse with SVN, Android, Gradle, and anything else you need.
  • You just need to have this person zip their Eclipse Application directory and give it to you (it will probably be less than 1 GB).

Option 1

1. Download:http://www.eclipse.org/downloads/download.php?file=/technology/epp/downloads/release/kepler/SR2/eclipse-jee-kepler-SR2-win32-x86_64.zip

2. Extract it to somewhere on your computer

3. Double-click on Eclipse.exe to launch it for the first time

4. Get ADT

  • Help -> Eclipse Market Place
  • Search for “ADT”
  • Select to install “ADT”
  • Install it
  • Restart Eclipse
  • Get a dialog stating that Android SDK has not been setup in the preferences
  • Select “Open Preferences”
  • Select “ C:\adt-bundle-windows-x86_64-20131030\sdk”
  • Press apply (see all the found SDKs)
  • Press OK
  • Select “Use existing SDKs”
  • Enter “ C:\adt-bundle-windows-x86_64-20131030\sdk”
  • Press “Finish”

5. Get STS Groovy/Gradle

  • Help -> Eclipse Market Place
  • Search for “GGTS”
  • Select to install it for Eclipse Kepler
  • Restart Eclipse

6. Set Eclipse Memory to 512m or 1500m

  • Edit eclipse.ini to change the memory constraints

Option 2

1. Obtain it

2. Extract it to somewhere on your computer

 

jvalentino
jvalentino
I live and work in the Dallas/Fort Worth area as a Principal Consultant for AppFoundation. I have been working with Java since 2000, Flex since it was in beta release, iOS development since 2008, and Sencha and Ext JS 4 since 2012. I have a Bachelor of Music with a double major in Music Performance and Music Composition, and a Bachelor of Science in Computer Information Science from Texas Christian University. I also have a Master of Science in Software Engineering from Southern Methodist University. I specialize in enterprise development, architecture, design, and continuous integration practices.

Comments are closed.