Building An iOS App With Sencha Touch 2 And Phonegap (Cordova)

In this tutorial i am going to explain about Packaging Sencha Touch 2 with PhoneGap ( Cordova). By the help of phonegap / Cordova any HTML developers can develop iPhone / Android /  Bada / BadaWac / Blackberry / symbian / webos /windows native applications.

About Phone Gap

It will help you to take the advantage of HTML5 and css3, Javascript to manage the code, Access the native features of mobile device etc. you can learn more about phonegap from here 

About Sencha Touch 2

Sencha Touch 2, a high-performance HTML5 mobile application framework, is the cornerstone of the Sencha HTML5 platform. You can learn more about Sencha Touch 2 from here 

System Requirements & Downloads 

To follow this tutorial you have to download the following thing to your mac machine.

1. Sencha Touch  2. Sencha SDK Tools  3. Phonegap / Cordova

here is the downloading link.

• Sencha Touch 2.0.1
• Sencha SDK Tools 2.0.0 Beta 3 (for Mac)
• Cordova/PhoneGap 1.7.0 (You must install the iOS SDK)

lets get start…

extract the sencha touch 2.0.1 to your webserver, install the sencha Touch sdk tool, after that install the phonegap / Cordova template  to the Xcode.

Step 1:- Creating Sencha Touch 2.0 app

In the first step,  navigate into the Sencha Touch SDK directory usingTerminal.app, Next we need to create a web app named phonegap,

for that we can use following code snippet in the terminal.

sencha app create PhoneGap ~/path-to-your-new-app all

Step 2:- get in to the app Directory using the following code snippet

cd PhoneGap/

 sencha package build -e native

After that delete the content’s inside the build folder .

Your application can now be viewed in a browser:

now We need to now link that JavaScript file up into our Sencha Touch application. Traditionally you would do this by including it in the index.html file, but that is no longer the case. Simply open up app.json and add it to the top of the js array of files:

"js": [
    {
        "path": "cordova-1.7.0.js"
    },
    {
        "path": "sdk/sencha-touch-all.js"
    },
    {
        "path": "app.js",
        "bundle": true,
        "update": "delta"
    }
]

Now you finished with your web app. Next we need to create a IOS web wrapper, for that we need to use the Phonegap.

Creating the Xcode Project
Open up Xcode and create a new project (File > New > Project). You will be presented with the following dialog:

Ensure Cordova-based Application is selected under the iOS > Application section. Press next.Give your application a name as phonegap and a company identifier and press next.
Next you must select where you want to save your Xcode Project. Put this inside the build folder of your new Sencha Touch Application

Next step, we need to build the iphone project. After that we need to drag a generated www folder onto the Project in Xcode. Do this by right clicking on the project name in Xcode and selecting Show in Finder:

You will now see the www folder which you need to drag onto the project:

On the next dialog it is important to select Create folder references for any added folders:

Now go back to the www folder and delete everything inside it. Our Sencha Touch Application will be going there. At this point it is a good idea to rename the Xcode Project folder inside the build folder to phonegap – just to make it a little cleaner.

Configure your sencha application where to build

The final step is to open app.json and change the buildPath (right at the bottom of the file) of the package version of your app. We want it to point to the www folder:

"buildPaths": {
    "testing": "build/testing",
    "production": "build/production",
    "package": "build/phonegap/www",
    "native": "build/native"
}

Now you can run the following command in the terminal

sencha app build package

You are done. now just run the xocde project. you are successfully packed the senha touch project to the phone gap.

You can download the code from here