parallax background

Configuring a Sencha Dev Environment Targeting iOS and Android on OS X

HTML5 Robot Release 1.2
February 22, 2014
Digital Transformation Group LinkedIn
TestFlight is dropping Android support, here are some options
March 18, 2014

The following explains the details for configuring a development or continuous integration environment that is capable of building Android and iOS applications, using Sencha on an OS X machine. It walks you through the tools you need, the tools that can make your life easier, and how to install them. It also provides to links to more information such as how to deal with iOS certificates, and where to download these various tools.

Why these versions exactly? 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.pkg

2. Install node-v0.10.23.pkg

3. Open Terminal

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 DMG file to extract

3. Double-click to run installer

4. Open Terminal

5. Type: java -version

java version “1.7.0_51”

6. Set JAVA_HOME by doing the following:

  • Open Terminal
  • vi ~/.bashprofile
  • Add the following: JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.7.0_51/Contents/Home
  • Restart terminal

7. Type: echo $JAVA_HOME

/Library/Java/JavaVirtualMachines/jdk1.7.0_51/Contents/Home

 

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.

2. Double-click on it to extract it

3. Double-click on SenchaCmd-4.0.1.45-osx.app to launch the installer

4. Change the install location to /Applications/sencha-cmd-4.0.1.45

5. If terminal is already open, close it

6. Open Terminal

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. If you are running OS X Mavericks or later, Ruby 2.0.0 is already installed. If not, you have additional work to do. The additional work to do is a lot as described at https://github.com/Homebrew/homebrew/wiki/Installation, which is enough work to warrant you upgrading to 10.9 anyways.

 

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. Type the following: sudo -s

Password: ******

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. Move ant-1.8.4 to Applications

3. Add it to your path doing this:

  • Open Terminal
  • vi ~/.bashprofile
  • Prepend the following on “export PATH”: /Applications/ant-1.8.4/bin:
  • ESC then :wq
  • Restart terminal
  • Type the following: echo $PATH
  • (verify it is in the output)

4. 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. Double-click to extract

3. Move gradle-1.6 to Applications

4. Add it to your path doing this:

  • Open Terminal
  • vi ~/.bashprofile
  • Prepend the following on “export PATH”: /Applications/gradle-1.6/bin:
  • ESC then :wq
  • Restart terminal
  • Type the following: echo $PATH
  • (verify it is in the output)

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-mac-x86_64-20131030.zip

2. Double-click to extract

3. Move adt-bundle-mac-x86_64-20131030 to /Applications

4. Add it to your path doing this:

  • Open Terminal
  • vi ~/.bashprofile
  • Prepend the following on “export PATH”: /Applications/adt-bundle-mac-x86_64-20131030/platform-tools:/Applications/adt-bundle-mac-x86_64-20131030/tools
  • ESC then :wq
  • Restart Terminal

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 /Applications/adt-bundle-mac-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-macosx-cocoa-x86_64.tar.gz

2. Double-click to extract it

3. Move it to /Application/eclipse-4.3.1

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 “/Applications/adt-bundle-mac-x86_64-20131030/sdk”
  • Press apply (see all the found SDKs)
  • Press OK
  • Select “Use existing SDKs”
  • Enter “/Applications/adt-bundle-mac-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

  • In /Applications/eclipse-4.3.1
  • Select eclipse.app, select “Show Package Contents”
  • Edit eclipse.ini to change the memory constraints

Option 2

1. Obtain it

2. Double-click to extract it

3. Move it to /Application/eclipse-4.3.1

Running Eclipse so that it can see the various tools you installed

1. You must run Eclipse by launching the eclipse.sh alias and NOT Eclipse.app

2. If you launch Eclipse using Eclipse.app, it will not see your PATH environment variable

3. Since you installed stuff as root, you are going to have to grant read/write access for all users on several locations (chmod):

  • /Applications/sencha-cmd-4.0.1.45
  • ~/.cordova

Xcode 5.0

In order to build native iOS application you need Xcode and its associate command-line build tool called xcodebuild.

1. From the Apple icon in the upper-left corner, select App Store

2. Search for “Xcode”

3. Select to install Xcode

Note that actually using xcodebuild to turn the Cordova generated APP file into a signed IPA is an entirely different process. For an explanation on how to do this see http://www.appfoundation.com/2014/07/building-signing-ios-apps-built-sencha-andor-cordova-command-line/.

 

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.