SlideShare uma empresa Scribd logo
1 de 7
| 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

Mais conteúdo relacionado

Destaque

Азарова Татьяна+ Butterfly+Предприниматели
Азарова Татьяна+ Butterfly+ПредпринимателиАзарова Татьяна+ Butterfly+Предприниматели
Азарова Татьяна+ Butterfly+ПредпринимателиЖанна Альжанова
 
Image Handling in iOS_InnovationM
Image Handling in iOS_InnovationMImage Handling in iOS_InnovationM
Image Handling in iOS_InnovationMInnovationM
 
Токбатырова Несыпгуль+ Наша большая юрта+ Предприниматели
Токбатырова Несыпгуль+ Наша большая юрта+ ПредпринимателиТокбатырова Несыпгуль+ Наша большая юрта+ Предприниматели
Токбатырова Несыпгуль+ Наша большая юрта+ ПредпринимателиЖанна Альжанова
 
Liderazgo y habilidades de comunicación
Liderazgo y habilidades de comunicación Liderazgo y habilidades de comunicación
Liderazgo y habilidades de comunicación José Luis López
 
H3 104 s
H3 104 sH3 104 s
H3 104 sEmaser
 
Colorpainter W64s
Colorpainter W64sColorpainter W64s
Colorpainter W64sEmaser
 
Habilidades comunicativas
Habilidades comunicativasHabilidades comunicativas
Habilidades comunicativaslaurasalaza31
 
Lentera news ed. #21 Januari 2016
Lentera news  ed. #21 Januari 2016Lentera news  ed. #21 Januari 2016
Lentera news ed. #21 Januari 2016Ananta Bangun
 
Lentera news - mei 2016
Lentera news  - mei 2016Lentera news  - mei 2016
Lentera news - mei 2016Ananta Bangun
 

Destaque (11)

Азарова Татьяна+ Butterfly+Предприниматели
Азарова Татьяна+ Butterfly+ПредпринимателиАзарова Татьяна+ Butterfly+Предприниматели
Азарова Татьяна+ Butterfly+Предприниматели
 
Image Handling in iOS_InnovationM
Image Handling in iOS_InnovationMImage Handling in iOS_InnovationM
Image Handling in iOS_InnovationM
 
ISSUE_8
ISSUE_8ISSUE_8
ISSUE_8
 
THE_SHELL_ISSUE_4
THE_SHELL_ISSUE_4THE_SHELL_ISSUE_4
THE_SHELL_ISSUE_4
 
Токбатырова Несыпгуль+ Наша большая юрта+ Предприниматели
Токбатырова Несыпгуль+ Наша большая юрта+ ПредпринимателиТокбатырова Несыпгуль+ Наша большая юрта+ Предприниматели
Токбатырова Несыпгуль+ Наша большая юрта+ Предприниматели
 
Liderazgo y habilidades de comunicación
Liderazgo y habilidades de comunicación Liderazgo y habilidades de comunicación
Liderazgo y habilidades de comunicación
 
H3 104 s
H3 104 sH3 104 s
H3 104 s
 
Colorpainter W64s
Colorpainter W64sColorpainter W64s
Colorpainter W64s
 
Habilidades comunicativas
Habilidades comunicativasHabilidades comunicativas
Habilidades comunicativas
 
Lentera news ed. #21 Januari 2016
Lentera news  ed. #21 Januari 2016Lentera news  ed. #21 Januari 2016
Lentera news ed. #21 Januari 2016
 
Lentera news - mei 2016
Lentera news  - mei 2016Lentera news  - mei 2016
Lentera news - mei 2016
 

Mais de InnovationM

How to use data binding in android
How to use data binding in androidHow to use data binding in android
How to use data binding in androidInnovationM
 
Capture image on eye blink
Capture image on eye blinkCapture image on eye blink
Capture image on eye blinkInnovationM
 
How to use geolocation in react native apps
How to use geolocation in react native appsHow to use geolocation in react native apps
How to use geolocation in react native appsInnovationM
 
Android 8 behavior changes
Android 8 behavior changesAndroid 8 behavior changes
Android 8 behavior changesInnovationM
 
Understanding of react fiber architecture
Understanding of react fiber architectureUnderstanding of react fiber architecture
Understanding of react fiber architectureInnovationM
 
Automatic reference counting (arc) and memory management in swift
Automatic reference counting (arc) and memory management in swiftAutomatic reference counting (arc) and memory management in swift
Automatic reference counting (arc) and memory management in swiftInnovationM
 
Firebase crashlytics integration in iOS swift (dSYM File Required Problem Res...
Firebase crashlytics integration in iOS swift (dSYM File Required Problem Res...Firebase crashlytics integration in iOS swift (dSYM File Required Problem Res...
Firebase crashlytics integration in iOS swift (dSYM File Required Problem Res...InnovationM
 
How prototype works in java script?
How prototype works in java script?How prototype works in java script?
How prototype works in java script?InnovationM
 
React – Let’s “Hook” up
React – Let’s “Hook” upReact – Let’s “Hook” up
React – Let’s “Hook” upInnovationM
 
Razorpay Payment Gateway Integration In iOS Swift
Razorpay Payment Gateway Integration In iOS SwiftRazorpay Payment Gateway Integration In iOS Swift
Razorpay Payment Gateway Integration In iOS SwiftInnovationM
 
Paytm integration in swift
Paytm integration in swiftPaytm integration in swift
Paytm integration in swiftInnovationM
 
Line Messaging API Integration with Spring-Boot
Line Messaging API Integration with Spring-BootLine Messaging API Integration with Spring-Boot
Line Messaging API Integration with Spring-BootInnovationM
 
Basic fundamental of ReactJS
Basic fundamental of ReactJSBasic fundamental of ReactJS
Basic fundamental of ReactJSInnovationM
 
Basic Fundamental of Redux
Basic Fundamental of ReduxBasic Fundamental of Redux
Basic Fundamental of ReduxInnovationM
 
Integration of Highcharts with React ( JavaScript library )
Integration of Highcharts with React ( JavaScript library )Integration of Highcharts with React ( JavaScript library )
Integration of Highcharts with React ( JavaScript library )InnovationM
 
Serialization & De-serialization in Java
Serialization & De-serialization in JavaSerialization & De-serialization in Java
Serialization & De-serialization in JavaInnovationM
 
Concept of Stream API Java 1.8
Concept of Stream API Java 1.8Concept of Stream API Java 1.8
Concept of Stream API Java 1.8InnovationM
 
How to Make Each Round of Testing Count?
How to Make Each Round of Testing Count?How to Make Each Round of Testing Count?
How to Make Each Round of Testing Count?InnovationM
 
Model View Presenter For Android
Model View Presenter For AndroidModel View Presenter For Android
Model View Presenter For AndroidInnovationM
 

Mais de InnovationM (20)

How to use data binding in android
How to use data binding in androidHow to use data binding in android
How to use data binding in android
 
Capture image on eye blink
Capture image on eye blinkCapture image on eye blink
Capture image on eye blink
 
Mob x in react
Mob x in reactMob x in react
Mob x in react
 
How to use geolocation in react native apps
How to use geolocation in react native appsHow to use geolocation in react native apps
How to use geolocation in react native apps
 
Android 8 behavior changes
Android 8 behavior changesAndroid 8 behavior changes
Android 8 behavior changes
 
Understanding of react fiber architecture
Understanding of react fiber architectureUnderstanding of react fiber architecture
Understanding of react fiber architecture
 
Automatic reference counting (arc) and memory management in swift
Automatic reference counting (arc) and memory management in swiftAutomatic reference counting (arc) and memory management in swift
Automatic reference counting (arc) and memory management in swift
 
Firebase crashlytics integration in iOS swift (dSYM File Required Problem Res...
Firebase crashlytics integration in iOS swift (dSYM File Required Problem Res...Firebase crashlytics integration in iOS swift (dSYM File Required Problem Res...
Firebase crashlytics integration in iOS swift (dSYM File Required Problem Res...
 
How prototype works in java script?
How prototype works in java script?How prototype works in java script?
How prototype works in java script?
 
React – Let’s “Hook” up
React – Let’s “Hook” upReact – Let’s “Hook” up
React – Let’s “Hook” up
 
Razorpay Payment Gateway Integration In iOS Swift
Razorpay Payment Gateway Integration In iOS SwiftRazorpay Payment Gateway Integration In iOS Swift
Razorpay Payment Gateway Integration In iOS Swift
 
Paytm integration in swift
Paytm integration in swiftPaytm integration in swift
Paytm integration in swift
 
Line Messaging API Integration with Spring-Boot
Line Messaging API Integration with Spring-BootLine Messaging API Integration with Spring-Boot
Line Messaging API Integration with Spring-Boot
 
Basic fundamental of ReactJS
Basic fundamental of ReactJSBasic fundamental of ReactJS
Basic fundamental of ReactJS
 
Basic Fundamental of Redux
Basic Fundamental of ReduxBasic Fundamental of Redux
Basic Fundamental of Redux
 
Integration of Highcharts with React ( JavaScript library )
Integration of Highcharts with React ( JavaScript library )Integration of Highcharts with React ( JavaScript library )
Integration of Highcharts with React ( JavaScript library )
 
Serialization & De-serialization in Java
Serialization & De-serialization in JavaSerialization & De-serialization in Java
Serialization & De-serialization in Java
 
Concept of Stream API Java 1.8
Concept of Stream API Java 1.8Concept of Stream API Java 1.8
Concept of Stream API Java 1.8
 
How to Make Each Round of Testing Count?
How to Make Each Round of Testing Count?How to Make Each Round of Testing Count?
How to Make Each Round of Testing Count?
 
Model View Presenter For Android
Model View Presenter For AndroidModel View Presenter For Android
Model View Presenter For Android
 

Último

Google AI Hackathon: LLM based Evaluator for RAG
Google AI Hackathon: LLM based Evaluator for RAGGoogle AI Hackathon: LLM based Evaluator for RAG
Google AI Hackathon: LLM based Evaluator for RAGSujit Pal
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdfhans926745
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationRidwan Fadjar
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreternaman860154
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfEnterprise Knowledge
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptxHampshireHUG
 
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesUnblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesSinan KOZAK
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking MenDelhi Call girls
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slidevu2urc
 
Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Paola De la Torre
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking MenDelhi Call girls
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024The Digital Insurer
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsMaria Levchenko
 
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure serviceWhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure servicePooja Nehwal
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationSafe Software
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsEnterprise Knowledge
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking MenDelhi Call girls
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024Rafal Los
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityPrincipled Technologies
 
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...gurkirankumar98700
 

Último (20)

Google AI Hackathon: LLM based Evaluator for RAG
Google AI Hackathon: LLM based Evaluator for RAGGoogle AI Hackathon: LLM based Evaluator for RAG
Google AI Hackathon: LLM based Evaluator for RAG
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 Presentation
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesUnblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen Frames
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure serviceWhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
 

Sencha Touch Development Process_InnovationM

  • 1. | 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
  • 2. | 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
  • 3. | 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
  • 4. | 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
  • 5. | 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
  • 6. | 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
  • 7. | 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