Sencha Architect 3x with Cordova / PhoneGap

We are encouraging our users to leverage PhoneGap/Cordova with their touch applications as we are moving away from stbuild. It is our plan to have a more streamlined workflow in place for Sencha Architect 3.1, but for now there is a bit of a manual process to follow.

Prerequisites

First and foremost there are some prerequisites:

1) Java 1.7 (http://www.oracle.com/technetwork/ja...ads/index.html)
2) NodeJS (http://nodejs.org/)
3) PhoneGap and/or Cordova NodeJS modules

Both Java and NodeJS are installed via downloaded binaries. PhoneGap and Cordova are installed on the command line via npm. For example:

Code:
c:\> npm install -g phonegap
or
Code:
c:\> npm install -g cordova
Once you have installed PhoneGap and/or Cordova, you can test by running the following.

Code:
c:\> phonegap -v
or
Code:
c:\> cordova -v
Either command should report back with the installed version. This should get you ready to use PhoneGap/Cordova with Sencha Architect. For a more in-depth look at installing these prerequisites, have a look at this tutorial (http://vimeo.com/76568053) created by Ross Gerbasi from the Sencha Touch team. The first part of the video concentrates on getting the prerequisites installed.

Workflow in Sencha Architect

After starting Sencha Architect 3 (SA3), you will get the first part of the process for free by simply hitting the save button. This will initialize your project with Sencha Cmd.

After the project has been successfully saved for the first time; you will then move to the command line for the next step.

Launch your command line tool of choice and navigate to the project folder that was just saved. Now run the following command with the optional APP_ID and APP_NAME arguments:

//sencha phonegap init [APP_ID] [APP_NAME]

Code:
c:\> sencha phonegap init com.mycompany.MyApp MyApp
or
Code:
c:\> sencha cordova init com.mycompany.MyApp MyApp
When the command has finished running you should now see two key files in the project folder:

1) config.xml
2) phonegap.local.properties (or cordova.local.properties)

These files are created when initializing phonegap or cordova, and can be used for advanced configuration of your build. For more information, check out another great resource produced by Ross Gerbasi here http://www.sencha.com/blog/leveragin...-sencha-touch/.

Note: If you change your mind and would like to remove PhoneGap or Cordova from your project, use one of the following commands:

Code:
c:\> sencha phonegap remove
or
Code:
c:\> sencha cordova remove
You should also see a phonegap (or cordova) directory in the project folder. You are now ready to start building. When you are ready to actually perform a build, run the following command for either PhoneGap or Cordova:

Code:
c:\> sencha app build -run native
Custom Configuration / Development

For custom configuration and development tips, also see: http://www.sencha.com/blog/leveragin...-sencha-touch/.

Resources

http://vimeo.com/76568053
http://www.sencha.com/blog/leveragin...-sencha-touch/
http://docs.phonegap.com/en/3.3.0/index.html
http://cordova.apache.org/docs/en/3...._index.md.html
http://www.oracle.com/technetwork/ja...ads/index.html
http://nodejs.org/