• Save
Sencha Touch Development Process_InnovationM
Upcoming SlideShare
Loading in...5
×
 

Sencha Touch Development Process_InnovationM

on

  • 997 views

Guidelines to set-up the Development Environment and Build process to get you ready on Sencha Touch.

Guidelines to set-up the Development Environment and Build process to get you ready on Sencha Touch.

http://blogs.innovationm.com/sencha-touch-development-environment-and-build-process/

Statistics

Views

Total Views
997
Views on SlideShare
997
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Sencha Touch Development Process_InnovationM Sencha Touch Development Process_InnovationM Document Transcript

  • | Build a Mobile Experience www.innovationm.com Sencha Touch – Development Environment and Build Process Corporate Office: InnovationM Mobile Technologies E-3 (Ground Floor), Sector-3, Noida 201301 (India) t: +91 8447 227337 | e: info@innovationm.com
  • | Build a Mobile Experience www.innovationm.com Sencha Touch – Development Environment and Build Process Sencha Touch is a high-performance HTML5 mobile application framework. You can use Sencha Touch to produce a native-app-like experience inside a browser or in a hybrid shell. Sencha Touch supports Android, iOS, Windows Phone, Microsoft Surface Pro and RT, and BlackBerry devices. For more information go to http://docs.sencha.com/touch I am going to talk about how to set-up the Development Environment and Build process to get you ready on Sencha Touch. Development Environment Set-up To create a Sencha Touch application, Development Environment is required. It is very simple to set-up the Environment. Before setting-up the Environment, we need some software. These are mentioned next. Required Software: 1. Sencha Cmd 2. JRE (Java Runtime Environment) Version 1.7 3. Ruby version 1.9.3 4. A Web Server installed locally 5. A modern web browser such as Chrome or Safari 6. Sencha Touch SDK Corporate Office: InnovationM Mobile Technologies E-3 (Ground Floor), Sector-3, Noida 201301 (India) t: +91 8447 227337 | e: info@innovationm.com
  • | Build a Mobile Experience www.innovationm.com Download and Installation: 1. Sencha Cmd Sencha Cmd provides full set of application development life-cycle management features. Download – http://www.sencha.com/products/sencha-cmd/download Installation – You will get an .exe file in Windows. Run it and follow the wizard. (Example Location for Sencha Cmd-D:SenchaTouchSenchaCmd) 2. JRE (Java Runtime Environment) Version 1.7 Sencha Cmd is written in Java and hence needs JRE to run. JRE version 1.7 (1.6 also works, but 1.7 is best). Download - http://www.oracle.com/technetwork/java/javase/downloads/jre7-downloads1880261.html Installation - You will get an .exe file in Windows. Run it and follow the wizard. 3. Ruby version 1.9.3 Ruby is required to create compiled CSS used by Touch. In Sencha Touch app, we do not use CSS directly. We use SASS (Syntactically Awesome Stylesheets) for styling. So Ruby is required to compile SASS. After compilation a CSS file is generated. Windows: Download Ruby 1.9.3.x from http://rubyinstaller.org/downloads/. Mac: Ruby is pre-installed. You can test which version you have with the ruby vcommand. Note - If you have version 2.0, download the Ruby Version Manager (rvm) and use command to download and install Ruby: rvm install 1.9.3 --with-gcc=clang Set your PATH variable to point to the Ruby 1.9.3 install directory. Corporate Office: InnovationM Mobile Technologies E-3 (Ground Floor), Sector-3, Noida 201301 (India) t: +91 8447 227337 | e: info@innovationm.com this
  • | Build a Mobile Experience www.innovationm.com Installation – You will get an .exe file in Windows. Run it and follow the wizard. (Example Location for Ruby installation directory – D:SenchaTouchRuby193) Note - Check for path has been set for JRE, SenchaCmd and Ruby in environment variables. If not set then set it. Ex. JRE – C:Program FilesJavajre7bin SenchaCmd – D:SenchaTouchSenchaCmdSenchaCmd3.1.2.342 Ruby – D:SenchaTouchRuby193bin 4. A Web Server installed locally. For this, XAMPP can also be used. XAMPP is an easy to install Apache distribution containing MySQL, PHP and Perl Download - http://download.cnet.com/XAMPP/3000-10248_410703782.html Installation – You will get an .exe file in Windows. Run it and follow the wizard. 5. A modern web browser such as Chrome or Safari. 6. Sencha Touch SDK Download link- http://www.sencha.com/products/touch/download/ You will get a zip file. Extract it to any location on your computer. Example – D:SenchaTouch Corporate Office: InnovationM Mobile Technologies E-3 (Ground Floor), Sector-3, Noida 201301 (India) t: +91 8447 227337 | e: info@innovationm.com
  • | Build a Mobile Experience www.innovationm.com Create simple Sencha Touch Application 1. Open command prompt. 2. Change directory to Touch SDK (For Example – D:SenchaTouchtouch-2.2.1). 3. Create a new Project – Type command sencha generate app <AppName> <Path to Folder for this project> Ex – sencha generate app SampleApp C:projectsSampleApp To know about Sencha Cmd and its http://docs.sencha.com/touch/2.2.1/#!/guide/command commands check this link- Now a simple Sencha Touch app is ready. Your app structure should look like this- 4. To run the application, copy the folder (Ex SampleApp) on the web server. Start web server. Open the browser and access the app http://localhost/SampleApp Corporate Office: InnovationM Mobile Technologies E-3 (Ground Floor), Sector-3, Noida 201301 (India) t: +91 8447 227337 | e: info@innovationm.com
  • | Build a Mobile Experience www.innovationm.com If you are using XAMPP, create your application inside htdocs folder (Ex C:xampphtdocs). To Start server in XAMPP (open ‘xampp control panel’ then start Apache). After this open a browser and type localhost/appName. To create applications build To create build of your application1. Open command prompt. 2. Change to Application Folder (Ex - D:SenchaTouchProjectsSampleApp) 3. Type sencha app build package Open your appFolder. Inside it you can see a build folder. This folder contains another folder named as your appName. For example – my app name is SampleApp. So the structure of this folder is as below: Corporate Office: InnovationM Mobile Technologies E-3 (Ground Floor), Sector-3, Noida 201301 (India) t: +91 8447 227337 | e: info@innovationm.com
  • | Build a Mobile Experience www.innovationm.com Your build folder structure should also be same as above described structure. To check your build is running properly, open index.html. You can see the same app as it was earlier. Now either you can distribute this build or can deploy it on server. So in this way we can create a simple Sencha Touch App and can make build. For more information please visit- http://docs.sencha.com/touch/ Corporate Office: InnovationM Mobile Technologies E-3 (Ground Floor), Sector-3, Noida 201301 (India) t: +91 8447 227337 | e: info@innovationm.com