Sunday, September 15, 2013

Building native android app with Sencha Cmd on linux

Recently I started to work on project with  Sencha Touch framework (client requirement) and my first task  was to build simple screen with some GUI components and make it run on android as native app.

I was required to use Sencha Architect for development and app building but since I use Linux  and Sencha Architect supports app packaging only on windows and Mac, I had to use Sencha Cmd utility for building native app.

Before I go any further let me throw some info on my development environment:

OS: Ubuntu 13.04
Java 1.7
Ruby 1.9.3
Sencha Arcitect 2.2.2 build 991
Sencha Cmd v3.1.3.372

After reading quick start docs it all looked easy, but as it often happens when using new tools, I quickly run into some frustrating problems.

I made simple app, tested it in browser, and I thought I was ready to package it for android. Before building native app, I configured packager file (which contains mobile app configuration, such as app name, package id, android API level, android sdk path etc...)

Fired up terminal, navigated to project folder, and as Sencha documantation instructs, I run build command : sencha app build native

And... after few seconds my apk is generated... NOOOT!

First bump, tool complained that it misses nimblekit.jar.

I haven't found anything about this in official Sencha documentation, but some people out there on the net  experienced same problem and found the solution: copy st-res folder from $sencha_cmd_install/stbuild to your project folder.
I am not sure why Sencha Cmd doesn't know where to find st-res folder, documentation doesn't says anything about it (AFAIK). Same problem happens on windows. However, copying st-res folder solves the problem both on linux and windows.

OK, problem solved, let's continue...

sencha app build native ...  and... after few seconds my apk is generated...  NOOOT!

Second problem caused me saying "WTF" quite a few times.

Command runs for a long time (minute or two) and then reports "Zip add failed" error on Icon.png file.
Since I haven't change icon configuration in packager component, I expected default icons to be used.
After unsuccessful googling for the problem and running the command few times, I noticed that Icon.png file in build/native/res/drawable-mdpi grows up to 2 G !!! Same goes for drawable-mdpi.
But in drawable-hdpi , Icon size is normal, about 3.5 K.  I checked packager icon config and realized that default icon config doesn't define low dpi and medium dpi at all.
On windows this problem doesn't appear event though icon config is same.
Obviously, there is some bug on linux version of Sencha Cmd that causes the problem.
I managed to solve the problem by defining low and medium dpi icons (36 and 48 px).

Since I 'm pretty new to Sencha, it's probably to early to judge, but my first impression is not very positive.
Besides the problems I described what's bothering me  the most is that Sencha Architect doesn't have code completion.

Feel free to throw a comment, especially if you had similar experiences with Sencha.


Davor Kapša said...

This suit is black pause nooot ;)

Kevin Angulo said...

I am agree with you, I has expended almost a week trying to figure it out how generate a apk file, I must to say that i tried everything possible, when almost I decide install eclipse (which I dont like it too much) , at last made to generate an apk file and i tried in my phone and everything it's ok. So I decided make an little guide to help others with this karma

Crear una aplicacion Movil

* Linux Mint 15
• Java Runtime Environment version 1.6 or 1.7 (required for the Sencha Cmd 4 app watch feature)
• Sencha Architect 3 Trial Version.
• Sencha Cmd v4.0.0.203
• Sencha-touch-2.3.0-gpl
• node-v0.10.22
• cordova 3.1.0-0.2.0.
• Ruby 1.9.1
• adt-bundle-linux-x86-20130917.
• API level 17 = Android SDK version 4.2 - Jelly Bean
• API level 18 = Android SDK version 4.3 - Jelly Bean
• compass.
• ant

• Crear las siguientes variables de entorno en el archivo ~/.profile
∘ export PATH=/home/angulokf/bin/Sencha/Cmd/$PATH
∘ export SENCHA_CMD_3_0_0="/home/angulokf/bin/Sencha/Cmd/"
∘ export PATH=$PATH:/home/angulokf/Descargas/adt-bundle-linux-x86-20130917/sdk/tools:/home/angulokf/Descargas/adt-bundle-linux-x86-20130917/sdk/platform-tools
∘ export JAVA_HOME=/usr/lib/jvm/java-7-openjdk-i386
∘ export PATH=$JAVA_HOME/bin:$PATH
• cerrar todas las consolas.
• Luego abrir una y ejecutar souce ~/.profile para recargar las variables.
• ejecutar ~/Descargas/adt-bundle-linux-x86-20130917/sdk/tools $ android y descargar los sdk necesarios en este caso el API 17 es necesario, yo tengo el Android 4.1 API 17 y Android 4.2 API 18.

• Abrir el Sencha Architect 3
• Crear el Proyecto
• Guardarlo en /var/www/KMobile
• copiar un enlace simbolico de la carpeta st-res ubicada en /home/angulokf/bin/Sencha/Cmd/ y copiarla en el directorio de la aplicacion
• Crear la clave de la aplicacion keytool -genkey -v -keystore kmobile.keystore -alias kmobile -keyalg RSA -keysize 2048 -validity 10000
• Editar el archivo sencha.cfg en /var/www/KMobile/.sencha/workspace/sencha.cfg y /var/www/KMobile/.sencha/app/sencha.cfg y cambiar la version del workspace.cmd.version= y agregar skip.sass=1 y app.cmd.version=
• Editar el archivo /var/www/KMobile/packager.json
• sencha app build native
• cordova create kmobile KMobile
• cambiar al directorio /var/www/KMobile/kmobile/www y borras todos los archivos menos config.xml
• copiar el contenido de la carpeta /var/www/KMobile/build/native/KMobile en la carpeta /var/www/KMobile/kmobile/www
• $cordova platform add android
• $cordova build android

Anderson Joey said...

Gran entrada en el blog . Yo solía ser comprobando continuamente este blog y estoy impresionado! Extremadamente útil informationspecially la fase de cierre :) Me ocuparse de tales datos mucho. Solía ​​ser la búsqueda de información para un muy largo tiempo particularmente ESTA. Gracias y buena suerte.
Mobile App Builder LA

bar kerark said...

Excellent post man!
I strongly agree with your point that the Strong Relationships with your customer is the key,and Use the Language Your Customers Use. These two points are the main key points which we have to focus in B2B Marketing.
mejor abogado accidente trafico

bar kerark said...
This comment has been removed by the author.