PDA

View Full Version : Building Sencha Touch 2 + Phonegap Application for Android : Windows



good_c_ryan_19
23 Aug 2013, 1:08 AM
Good day, i just want to share on how i successfully build Sencha Touch Application for Android (.Apk) devices.


Below are the steps:


Requirements:
1. Install Phonegap on CMD: download first nodeJS then execute npm install -g phonegap on command prompt - http://phonegap.com/install/
2. Download Android SDK : http://developer.android.com/sdk/index.html
3. Download Sencha Touch 2.1 : http://www.sencha.com/products/touch/download/
4. Download and Install Sencha CMD 3.0 beta : http://www.sencha.com/products/sencha-cmd/download
5. Download ANT : http://ant.apache.org/
6. Java SDK






Building Sencha Touch 2 + Phonegap Application to .APK Android file Steps:
1. Cd to Sencha Touch SDK Folder(sencha touch 2.2.1) then Create Sencha Touch Project in Command Prompt : Sencha generate app AppNAme Path
ex:
sencha generate app Device C:\MobileProject\Device
2. cd on created project folder then package it by :
sencha app build package
3. Create Phonegap Android Project by cd on
C:\phonegap-2.9.0\lib\android\bin then type create.bat <path> <appid> <appname>
eg:
create.bat C:\MobileProject\Device\build\Device\android com.company.Device Device
4. Update Android Project for ant to be working android update project --name <project_name> --target <target_ID>
--path <path_to_your_project> on default Users\yourname path on cmd
to check available target type android target list
eg:
android update project --name Device --target 1 --path C:\MobileDeviceProject\Device\build\Device\android
5. Now copy cordova js from C:\MobileProject\Device\build\Device\android\assets\www to your sencha touch default project folder and add cordova.js to app.json

{ "path": "cordova.js"} then build package again
Now edit build.xml on Sencha Project then add

<target name="-after-build">
<!--Delete content og android web root -->
<delete dir="${build.dir}/android/assets/www"/>




<copy todir="${build.dir}/android/assets/www">
<fileset dir="${build.dir}/package"/>
</copy> </target>

Step 6: Create apk file. By cd on C:\MobileProject\Device\build\Device\android then type
ex:
ant debug && adb install -r ./bin/MyApp-debug.apk




Regards.




Online Reference:
http://robertcorvus.com/how-to-really-get-phonegap-to-work/
http://vimeo.com/55335529
http://stackoverflow.com/questions/5607664/installing-ant-ant-home-is-set-incorrectly-on-windows-7
https://baach.de/Members/jhb/setting-up-phonegap-to-use-from-the-command-line

leizi
23 Aug 2013, 3:29 AM
Thank , i will test it.
Do you know sencha 2.2.1 wil work too ?

leizi
23 Aug 2013, 4:29 AM
I have done that , but still get error on using cordova functions.
Example TypeError: navigator.notification is undefined

fmoseley
26 Aug 2013, 12:16 PM
Thanks for putting this together.

feiqiao
26 Aug 2013, 6:27 PM
what version of phonegap do you use? phonegap 2.9?

can you provide an guide of integration sencha touch 2.X +phonegap 3.0

good_c_ryan_19
27 Aug 2013, 5:08 PM
Hi feiqiao, i used phonegap 2.9.0. There is nothing change on the steps even you used phonegap 3.0.

Best Regards

The Developer
12 Sep 2013, 12:53 PM
Hello, i followed the steps and everything was going smooth but the last step that is:


ant debug && adb install -r ./bin/Expo2013.apk


gave me this error:


BUILD FAILED
F:\android-sdk_r22.0.5-windows\android-sdk-windows\tools\ant\build.xml:649: The
following error occurred while executing this line:
F:\android-sdk_r22.0.5-windows\android-sdk-windows\tools\ant\build.xml:690: null
returned: 1

Total time: 1 second
can't find './bin/Expo2013.apk' to install


Do you have any solution for this?

Thanks.

MYlover
17 Sep 2013, 10:00 PM
I have some issues here after the apk built and installed, the splash screen (cordova showing device is ready) but it will never go to the page that I code. Please help...

good_c_ryan_19
18 Sep 2013, 6:12 PM
Hi please try Sencha Cordova builder https://github.com/bricemason/sencha-cordova-builder/tree/master created by Brice Mason to create phonegap android project then do my step 6 to create apk file.

zhazhengyin
10 Oct 2013, 5:39 PM
Sencha Cmd version 4.0 and later provides access to Cordova and PhoneGap. You can easily enable or disable access, package an app, and run an emulator or simulator. You can use the Sencha Cmd Cordova and PhoneGap commands to package and emulate a Touch or an Ext JS app. (from Sencha Touch 2.3 documents, see here (http://docs.sencha.com/touch/2.3.0/?print=/guide/cordova)).

It's simple. but I don't know how to package a production apk with Sencha Cmd 4.0. Are there any configurations for packaging?

tt88
10 Oct 2013, 11:23 PM
Sencha Cmd version 4.0 and later provides access to Cordova and PhoneGap. You can easily enable or disable access, package an app, and run an emulator or simulator. You can use the Sencha Cmd Cordova and PhoneGap commands to package and emulate a Touch or an Ext JS app. (from Sencha Touch 2.3 documents, see here (http://docs.sencha.com/touch/2.3.0/?print=/guide/cordova)).

It's simple. but I don't know how to package a production apk with Sencha Cmd 4.0. Are there any configurations for packaging?

1. To create a native sencha package of your app use:
sencha app build native

2. To create a packaged build use:
sencha app build package
(copy these files into the www of the cordova/phonegap project)

I have managed to get both methods to work to create an android package for a fairly complex app.

For 2., I followed the cordova (3) documentation by the book & it worked:
http://cordova.apache.org/docs/en/3.1.0/guide_cli_index.md.html#The%20Command-line%20Interface
(http://cordova.apache.org/docs/en/3.1.0/guide_cli_index.md.html#The%20Command-line%20Interface)
46283

Above is a sequence of screen grabs of the project setup.
1. Generated Cordova project
2. Sencha packaged project pasted into the top level www folder of the generated Cordova project
3. The platform-specific output (android apk) after running my .bat file, which is simply:
# Build sencha package ...
# >sencha app build package
# Copy ../build/App/package/* ./www
# Building cordova android package ...
cordova build android

-tt88

fmoseley
11 Oct 2013, 12:05 AM
The guide that you posted the link for tells you everything that need to do. I would suggest rereading it. Is there a particular point you are stuck at?
1. Generate your app
sencha -sdk ../builds/touch-2.3.0 generate app MyTestApp mytestapp

2. cd to your apps base directory
3. Create config.xml file in your app root directory. You can find base config.xml here: https://github.com/phonegap/phonegap-start/blob/master/www/config.xml
4. Enable support for Cordova (run command)
sencha cordova init com.example.MyTestApp MyTestApp

5. edit cordova.local.properties cordova.platforms=android
6. Package your app. (run command)
sencha app build native
6. apk will be generated to:
mytestapp/cordova/platforms/android/bin/

zhazhengyin
12 Oct 2013, 2:41 AM
Dear fmoseley,

yes, I followed all steps. but I only found mytestapp-debug.apk in mytestapp/cordova/platforms/android/bin/ folder.

Coz it don't need me providing certification parameters,I guess the apk generated is only for debug,not for production which need signed with a cert.

thanks.

zhazhengyin
12 Oct 2013, 3:07 AM
1. To create a native sencha package of your app use:
sencha app build native

2. To create a packaged build use:
sencha app build package
(copy these files into the www of the cordova/phonegap project)

I have managed to get both methods to work to create an android package for a fairly complex app.

For 2., I followed the cordova (3) documentation by the book & it worked:
http://cordova.apache.org/docs/en/3.1.0/guide_cli_index.md.html#The%20Command-line%20Interface
(http://cordova.apache.org/docs/en/3.1.0/guide_cli_index.md.html#The%20Command-line%20Interface)
46283

Above is a sequence of screen grabs of the project setup.
1. Generated Cordova project
2. Sencha packaged project pasted into the top level www folder of the generated Cordova project
3. The platform-specific output (android apk) after running my .bat file, which is simply:
# Build sencha package ...
# >sencha app build package
# Copy ../build/App/package/* ./www
# Building cordova android package ...
cordova build android

-tt88

Dear tt88,

your post is very clear. thanks.
My problem is how to package a production apk. In the picture you posted, only App-debug.apk exists.

According to http://docs.sencha.com/cmd/4.0.0/?print=/guide/native_packaging, packaging touch app for android need three steps:


step1 - provisioning , for android, obtain a certificate to sign app
step2 - create a packing configuration file. (like packager.json which is auto-created by sencha phonegap init command? In this file, I can find some parameters).
step3 - run packager to create : sencha app package run <configFile.json>


If only Sencha touch application, it's OK. but if I use cordova or phonegap, does these steps need change? there is a note in the guide:


Important Touch 2.3 and later provides support for creating Cordova and PhoneGap apps. If you use Cordova or PhoneGap, refer to Cordova and PhoneGap Apps (http://docs.sencha.com/touch/#%21/guide/cordova) for information on packaging and emulating.


Does it mean if I use phonegap with sencha touch, the packaging steps is different.

Maybe I misunderstood the guide coz my poor english.

tt88
13 Oct 2013, 11:58 PM
Dear tt88,

your post is very clear. thanks.
My problem is how to package a production apk. In the picture you posted, only App-debug.apk exists.

According to http://docs.sencha.com/cmd/4.0.0/?print=/guide/native_packaging, packaging touch app for android need three steps:

step1 - provisioning , for android, obtain a certificate to sign app
step2 - create a packing configuration file. (like packager.json which is auto-created by sencha phonegap init command? In this file, I can find some parameters).
step3 - run packager to create : sencha app package run <configFile.json>

If only Sencha touch application, it's OK. but if I use cordova or phonegap, does these steps need change? there is a note in the guide:


Does it mean if I use phonegap with sencha touch, the packaging steps is different.

Maybe I misunderstood the guide coz my poor english.

Hi zhazhengyin (http://www.sencha.com/forum/member.php?631758-zhazhengyin)

I have not yet packaged a production version of my own app yet, so what I can say is only theoretical.
Anyone with more accurate experience, please correct where I am wrong.

As I see it, for a Sencha production package, only 2 things need to change:
1. Your packager.json file, change the key-value of 'configuration:Debug' to 'configuration:Release'
2. Your certificate needs to change to a proper formal certificate (the value for "certificatePath")

For phonegap / cordova I would guess that you also need to change a configuration value in one of the configuration files. I tried to find documentation to build for a release version & there was no obvious configuration file updates that I could find. I found these 2 links from Android:
http://developer.android.com/tools/publishing/preparing.html
(http://developer.android.com/tools/publishing/preparing.html)http://developer.android.com/distribute/googleplay/publish/preparing.html
(http://developer.android.com/distribute/googleplay/publish/preparing.html)They can give you an idea of what is required for an Android app. A Sencha phonegap/cordova app is a small sub-section (Android web-view) of an Android app, so some of these items might not be relevant or might already be covered in the Sencha packaging step.

What I would do is create a production version as a test & run it in beta mode while getting a better understanding of what is involved in packaging an Android app before releasing the formal / final Android package.

Good luck!

- tt88

tt88
29 Oct 2013, 6:53 AM
The guide that you posted the link for tells you everything that need to do. I would suggest rereading it. Is there a particular point you are stuck at?
1. Generate your app
sencha -sdk ../builds/touch-2.3.0 generate app MyTestApp mytestapp

2. cd to your apps base directory
3. Create config.xml file in your app root directory. You can find base config.xml here: https://github.com/phonegap/phonegap-start/blob/master/www/config.xml
4. Enable support for Cordova (run command)
sencha cordova init com.example.MyTestApp MyTestApp

5. edit cordova.local.properties cordova.platforms=android
6. Package your app. (run command)
sencha app build native
6. apk will be generated to:
mytestapp/cordova/platforms/android/bin/

I only saw this post now. I didn't realize there was tighter integration with phonegap/cordova - making the manual process of packaging an app for phonegap described in my previous post redundant. This link, previously mentioned in this thread is clear: http://docs.sencha.com/touch/2.3.0/?print=/guide/cordova

manishroy
25 Feb 2014, 4:59 AM
Hi All,I am getting this error while packaging the app in step 2.
Platform : Windows 7
Error :


BUILD FAILED
com.sencha.exceptions.ExNotFound: Failed to detect ruby

Anyone?

good_c_ryan_19
25 Feb 2014, 4:59 PM
Hi @manishroy , on the error it self you must need to install ruby , get it here http://rubyinstaller.org/downloads/

fmoseley
25 Feb 2014, 5:18 PM
run ruby -v at command line to see if you have ruby installed.
If it is installed then you need to add to your PATH.

manishroy
26 Feb 2014, 10:08 PM
Ok. I will install it. But i have a stupid question.

I am really confused about why we need to install so many things just to have a simple Hello World app on Android using Sencha??

1> PhoneGap
2>Android SDK
3>Sencha SDK
4> Sencha CMD
5>Apache Ant
6> Ruby

Can someone please explain for each of the points mentioned above about why we need them and how they felicitate in creating a Android App.

Also in the tutorial to create the App in this thread there is no mention of Ruby. Whatever was mentioned i installed then why i need Ruby?

manishroy
9 Mar 2014, 9:59 AM
Anybody??

fmoseley
10 Mar 2014, 9:02 AM
All of this is explained in the guides. I would suggest reading them.
http://docs.sencha.com/touch/2.3.1/#!/guide

1> PhoneGap- Alternative to using Sencha Native Packaging. Advantage of using Phonegap is it provides a large number of plugins that allow access to device level api's
2>Android SDK- Needed to build native packaged apps. Not needed if you are building a web app that will run in browser.
3>Sencha SDK-- Needed to build Sencha Touch Apps.
4> Sencha CMD-- http://docs.sencha.com/touch/2.3.1/#!/guide/command
5>Apache Ant-- http://docs.sencha.com/touch/2.3.1/#!/guide/command_ant
6> Ruby-- http://docs.sencha.com/touch/2.3.1/#!/guide/getting_started

manishroy
10 Mar 2014, 9:07 AM
Thanks!!

saboor
2 Jul 2014, 1:33 AM
perfect steps