How to Run your Sencha Touch App in Android Emulator


Problem Statement :

In this article we will discuss how to test the Sencha Touch application in Android Emulator .

Pre-Requisites :

  • Sencha Touch SDK 2.2.1
  • Sencha CMD 3.1
  • Android SDK
  • Sencha Touch knowledge
  • Sencha Cmd Knowledge
  • Working Sencha Touch application

Details :

We will discuss how to run the application in Android Emulator and in Android device step by step.

In this article am taking our Voodoo Music App as an example. i.e working Sencha Touch application

Step 1:  Install Sencha Cmd and create Sencha Touch Project

If your project is not created with the sencha Cmd then

Install Sencha Cmd and create Sencha Touch project

Step 2 : Build your Application

Build the application using sencha app build  Command, and move all the required images and build output files to single folder.

For More Information Refer : Create, Build & Package Sencha Touch project using Sencha Cmd

Step 3: Install Android SDK

Install Android SDK in your Machine

Step 4: Create packaging Configuration Template File

Open Terminal

cd to the project root folder.

issue the following command to generate the template for native build configuration file

$ sencha app package generate <androidpackager.json>
This will generate andoidpackger.json file in project root directory .

Step 5: Update the configuration file with your details

open the androidpackger.json in your favorite editor. Fill the valid configurations with the valid values

applicationName

Name of the application to be displayed on the app, in my case Voodoo Music

applicationId 

This is the name namespace for your application, in my case in.wtc.voodoo

versionString

 This is the version of your application, initially it will  be 1.0

versionCode

This is the integer version code of your application, or you can refer to it as a build number, initially it will  be 1.0

icon

{
"36":"resources/icons/Icon_Android36.png",
"48":"resources/icons/Icon_Android48.png",
"72":"resources/icons/Icon~ipad.png"
}

Please refer to the Android Icon Sizes

Note : paths of the icons should be relative to the config file

inputPath

This is location of your Sencha Touch 2 application, relative to this configuration file, in my case ./build/

outputPath

 This is where the built application file with be saved. Make sure that output path is not in your input path, you may get into endless recursive copying. Provide the absolute path of the output folder

configuration

This is configuration for your application. `Debug` should always be used unless you are submitting your app to an online store – in which case `Release` should be specified. For the first time to test the app in Emulator provide Debug.

platform

 This is the platform where we will be running the application . For now it will Android Emulator, as we are building the application to run in Android Emulator

certificatePath

This is the location of your certificate. i.e the path of the keystore file . for emulator it is not mandatory to mention. Will discuss about this

sdkPath

This is the path to the Android SDK, use absolute path

androidAPILevel

This is android API level, the version of Android SDK to use, you can read more about it HERE, In my case i have installed Android 4.1 so am using API 16.

  1. Be sure to install corresponding platform API in android SDK manager (android_sdk/tools/android)
  2. Open terminal cd to the android_sdk/tools/ and issue command ./android you will be able to see Android SDK Manager where you can verify which version is installed.Screen Shot 2013-05-21 at 7.14.40 PM

permissions

Array of permissions that is used by an application,Full list of permissions for Android application can be found HERE

in my case i have used  default values which were there in the template file

orientations

Indicates the device orientations in which the application can run. Options are:

  • portrait
  • landscapeLeft
  • landscapeRight
  • portraitUpsideDown

Note. If this omitted, default orientations setting is all four orientations.

Step 6: Run the Android Emulator in your machine

open command prompt cd  to the tools directory inside the android sdk directory.

Issue command  $ ./android – avd 

you can see the avd manager ( Android Vitual Deivce Manager) opened.

This is a tool to create a virtual android device i.e emulator. To run your app and Unit test it.

Screen Shot 2013-06-16 at 12.25.05 PM

You can cerate a new Virtual device using New button. If you have already created a virtual device select the virtual device which you want your app to be tested, And click on start.

You can see the a virtual device opened as below.

Screen Shot 2013-06-16 at 1.01.58 PM

Step 7: Run your app on Android Emulator

The final step is to run your app in Android Emulator.

Sencha Cmd helps  to build the .apk file for you application and run in the Active Android Emulator in your Machine.

Cd to the project root directory, And issue the below command

$ sencha  app package run <path to configuration file>.json

Path to the Configuration file which is prepared in the earlier steps.

After Issuing this command you can see the app opening in Android Emulator.

Screen Shot 2013-06-16 at 12.36.33 PM

Summary

In this article, I have explained how to run Sencha Touch application in Android Emulator,I hope by going through this article you are able to test your Sencha touch application in Android Emulator in your machine’s.

At Walking Tree we practice and recommend Sencha Products like ExtJS and Sencha Touch to build amazing web / touch apps. In case you are looking for training or professional assistance, contact us by visiting our website.

References

 

Posted in Sencha Touch
2 comments on “How to Run your Sencha Touch App in Android Emulator
  1. Prabhat says:

    It no longer works with Sencha CMD 5

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

We Have Moved Our Blog!

We have moved our blog to our company site. Check out https://walkingtree.tech/index.php/blog for all latest blogs.

Sencha Select Partner Sencha Training Partner
Xamarin Authorized Partner
Do More. With Sencha.

Recent Publication
%d bloggers like this: