As I did mention last weekend, this weekend I am going to show you how to run your app using Sencha Touch Framework. Sencha Touch is a user interface (UI) JavaScript library, or we can say a framework, specifically built for the Mobile Web. You can use it to develop user interfaces for mobile web applications that look and feel like native applications on supported mobile devices. That's the beauty of it.
Sencha Touch is fully based on web standards such as HTML5, CSS3 and JavaScript. The magnificent of Sencha Touch is this framework enable developers to quickly and easily create HTML5 based mobile apps that work on Android, iOS, Windows, Tizen and BlackBerry devices, and produce a native-app-like experience inside a browser.
So, today I'm gonna show you the step-by-step to run Sencha via browser or via Apache Cordova, if you will.
Let' move it on:
Step 1: Go to https://www.sencha.com/ and download your Sencha Touch Framework as below:
You Should get a folder like this. The release that I am using is touch-2.4.2.
Step 2: I do recommend you to download the Sencha Cmd library, install and add in in your .bash_profile to make it easy to execute Sencha commands as I'm gonna show here today.
Go to https://www.sencha.com/products/extjs/cmd-download/ and download it to you machine.
Step 3: Install Sencha Cmd as it's showed below and check if there is any upgrade pending doing the commands I am showing on the next pictures. Eg: Sencha upgrade --check
sencha generate app -ext MyApp /path/to/MyApp
Note:If your app is not upgraded for the latest sencha version you should get this issue below when running generate command. The solution is just run as It shows below sencha app upgrade command.
sencha -sdk /path/to/ext generate app MyApp /path/to/MyApp
sencha app build
Then run sencha diag show to see what sencha framework can get from your app that was already built based on Sencha.
Step 5: Now you should be able to launch your app running sencha app run command.
You should be able to get your app running over your browser, eg: http://localhost:1841/yourapp
NOTE: If you get any issue on running part of your app, just run sencha app watch command as below.
Now, that you have your Sencha app running fine, I want to tell you the good thing. We can run it from Apache cordova as well. So, let's see how it goes:
Step7 - Run the command sencha cordova init to initialize cordova folder over your sencha app project folder.
You will see that you have a folder for cordova inside of your app folder as I am showing below:
So, Apache Cordova requires you to add the platform that you want to launch your emulator. In this example is IOS. Note: You must run cordova platform add ios under the cordova folder that was created during sencha cordova initialization.
Don't forget to replace the files in cordova to make it part of your previous sencha app, eg:index.html and others.
type: cordova run
then have fun using cordova emulator. If you get stuck with cordova, you can see more about it on my previous blog related of cordova last year:
Happy coding,
Thiago Leoncio.
