Build a simple app using Sencha, not working on Android 4

Question

I would like someone to help me verify what I've done to build a simple mobile app using Sencha Touch and Sencha Cmd.

I've been trying to build an Android app for awhile and I cannot get it run on Android 4.0 emulator or phone, and no luck at all.

This is what I've done.

Step 1: Create a new application

Sencha generate app MyTouch22 ../projects/MyTouch22

This step automatically creates all the necessary folders and files to start your app. It also generated the default Main.js (the main view).

Step 2: Modify the packaging file (packager.json) to comply with Android 4.0 (level 14) as shown below.

{
/**
 * @cfg  applicationName
 * @required
 * This is the name of your application, which is displayed on the device when the app is installed. On IOS, this should match
 * the name of your application in the Apple Provisioning Portal.
 */
"applicationName":"My Touch22",

/**
 * @cfg  applicationId
 * This is the name namespace for your application. On IOS, this should match the name of your application in the Apple Provisioning Portal.
 */
"applicationId":"com.test.mytouch22",

/**
 * @cfg  versionString
 * @required
 * This is the version of your application.
 */
"versionString":"1.0",

/**
 * @cfg  versionCode
 * @required
 * This is the integer version code of your application, or you can refer to it as a build number. Used only for Android builds.
 */
"versionCode":"1",

/**
 * @cfg  icon
 * For iOS, please refer to their documentation about icon sizes:
 * https://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/IconsImages/IconsImages.html
 *
 * For Android, please refer to the Google Launcher icons guide:
 * http://developer.android.com/guide/practices/ui_guidelines/icon_design_launcher.html
 * iOS uses 57, 72, 114 and 144; Android uses 36, 48 and 72; if you package for Android you can ignore iOS icons and vice verca
 */
"icon": {
    "36":"resources/icons/Icon_Android36.png",
    "48":"resources/icons/Icon_Android48.png",
    "57":"resources/icons/Icon.png",
    "72":"resources/icons/Icon~ipad.png",
    "114":"resources/icons/Icon@2x.png",
    "144":"resources/icons/Icon~ipad@2x.png"
},

/**
 * @cfg  inputPath
 * @required
 * This is location of your Sencha Touch 2 application, relative to this configuration file.
 */
"inputPath":"./",

/**
 * @cfg  outputPath
 * @required
 * 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 
 */
"outputPath":"c:\\Apps\\build\\",

/**
 * @cfg  configuration
 * @required
 * 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.
 */
"configuration":"Debug",

/**
 * @cfg  platform
 * @required
 * This is the platform where you will be running your application. Available options are:
 *  - iOSSimulator
 *  - iOS
 *  - Android
 *  - AndroidEmulator
 */
"platform":"AndroidEmulator",


/**
 * @cfg  certificatePath
 * This is the location of your certificate.
 * This is required when you are developing for Android or you are developing on Windows.
 */ 
"certificatePath": "C:\\Sencha Architect\\keystore\\test-mytouch22.keystore",


/**
 * @cfg  sdkPath
 * This is the path to the Android SDK, if you are developing an Android application.
 */
"sdkPath": "C:\\Android Development\\adt-bundle-windows-x86_64-20130219\\sdk",  

/**
 * @cfg  androidAPILevel
 * This is android API level, the version of Android SDK to use, you can read more about it here: http://developer.android.com/guide/appendix/api-levels.html.
 * Be sure to install corresponding platform API in android SDK manager (android_sdk/tools/android)
 */
"androidAPILevel":"14",

    /**
 * @cfg {Array[String]} permissions
 * Array of permissions that is used by an application (Android only) 
 * Full list of permissions for Android application can be found here: http://developer.android.com/reference/android/Manifest.permission.html#ACCESS_CHECKIN_PROPERTIES
 */
"permissions":[
        "INTERNET"
    ],

/**
 * @cfg {Array[String]} orientations
 * @required
 * This is orientations that this application can run.
 */
"orientations": [
    "portrait",
    "landscapeLeft",
    "landscapeRight",
    "portraitUpsideDown"
]
}

Step 3: build app to an APK file

sencha app package build packager_android.json

Step 4: Run my android 4.0 emulator

android -avd Android_4_Phone

Step 5: Install APK file into the emulator

adb install MyTouch22.apk

By following the steps I mentioned above, I get stuck on the loading screen. When I re-did the whole process for Android 3.0 (level 11), and using Android emulator, it works file. However, when I deploy the working version APK file (Android 3.0) into Android 4.0 emulator, I got the same problem at the loading page.

The tools I'm using are Sencha Touch 2.2, and Sencha Cmd 3.1.1.274.

Documentation / Source:

1. http://docs.sencha.com/touch/2.2.0/#!/guide/native_packaging
2. http://docs.sencha.com/touch/2.2.0/#!/guide/command_app

Answer 1

I suggest you to make a test app with the following steps, If you are getting error on any step, just paste me the error.

1)`sencha generate app Appname ../Appname`
2)open ../Appname and do ur code..make it 100% working on browser
3)open packager.json and fill the necessary fields..the comment shows how to fill it
4)change API level to 7 in it.
5)install android sdk in ur computer and assign it to `sdkPath` variable
6)cd to app directory (Appname)
7)compass compile resources/saas
(Here you have to install ruby if its not installed, just search with the error in google you will get solution)
8)then `sencha app build native`

it will deploy apk file to Appname/build/Appname/native