Now a days, a lot of applications are developed for mobiles and tablets. Therefore it becomes difficult for the developers to develop the application separately for each platform. Here comes Sencha Touch. Sencha Touch is a Javascript framework for building cross platform applications using Web Development Technologies like HTML5, CSS3 and Javascript.
When I had the task of building a Sencha Touch application and deploy it to an Android Device, I went through many tutorials but none of them provided proper documentation from the start till the very end. So here I come, with a detailed tutorial on how to develop a Simple Hello Word Application in Sencha Touch and deploy it to a Android Device. This tutorial is written keeping Linux platform in mind, but should be working for Windows platform also.
PREREQUISITES:
This tutorials asssumes that you have the following installed on your laptop:
1) A Web Server.
2) Android SDK
3) Ant
For developing a Sencha Touch Application, you need two things.
1) First is Sencha CMD, which is the command line tool for building your Sencha application. From scaffolding your project to testing and production, Sencha CMD does it all for you. Sencha CMD can be downloaded from the following link.
2) The next thing you need is Sencha Touch Framework. It can be downloaded from the following link. Unzip the downloaded folder. Place this unzipped folder (touch) inside webapps folder if you are using Tomcat Server or inside www folder if you are using Apache Server.
Making a Hello World Application:
sencha generate app appname <path_to_appname>
So if I run the below command inside touch folder, it will create a Sencha touch application named HelloWorld inside webapps or www folder.
sencha generate app HelloWorld ../HelloWorld.
After running the above command, the application is created with the default contents. You can check your application on your browser. Simply start the server and see the port number on which the server is running. To see the application HelloWorld, go to the browser and type the following url.- localhost:portno/HelloWorld.
The snapshot shows how Sencha Touch application looks on the browser.
Till this step, your Sencha Touch Application is generated and running on your browser. The next thing you need to do is deploy this application on Android. To deploy it to Android, you will need a wrapper like Cordova. To download cordova, you need to install node.js which can be downloaded from the following link.
After installing node.js you should be able to download Cordova using the following command
sudo npm install -g cordova.
This will install Cordova. Now you can create a Cordova project. Navigate to the webapps or www folder through the command line. Write the following command to create a cordova application.
cordova create HelloCordova
This will create a project named HelloCordova with id io.cordova.hellocordova at location HelloCordova inside www or webapps folder.
Now navigate to the newly created HelloCordova project and add android platform to it using the following command.
cordova platform add android
Now the Cordova application with platform android is ready. To deploy the Sencha Application HelloWorld in HelloCordova, navigate to the HelloWorld directory and run the following command
sencha app build production
This will create a build folder inside your HelloWorld project. Go inside build/production/HelloWorld folder and copy all of its contents and paste inside HelloCordova/www folder. This will ask you to replace index.html. Replace the file.
Finally run this cordova application. Plug in your device and type the following commands
from inside HelloCordova folder. This will deploy your HelloWorld application in your Android Device.
cordova prepare android
cordova compile android
cordova run android
I have tried to cover each and every detail from installation to deployment. Yet if you are struck anywhere, do leave a comment. I will revert back soon.
