Thursday, July 26, 2012

Tutorial - Create and Run your first Sencha Touch App in the Browser

The following prerequisites exists for this tutorial:
  • Sencha Touch SDK Tools installed
  • Sencha Touch SDK downloaded and extracted

I'm also assuming that your folder structure looks like:
  • <UserDir>
    • SenchaTouch2
      • sdk
        • <sencha touch sdk contents>
      • projects
        • <we will create all new projects in this folder>
  
Create a new SenchaTouch Project
  1. open a terminal and switch to the sdk folder
  2.  cd ~/SenchaTouch2/sdk  
    
  3.  create a new app in the projects folder with the sencha command
  4.  sencha app create SenchaApp ~/SenchaTouch2/projects/SenchaApp 

Test your Application with the Apache Webserver 
  1. go to the apache server directory
  2. cd /etc/apache
    
  3. add write permissions to the apache config file
  4. sudo chmod +r httpd.conf
    
  5. open the apache config with the nano editor
  6. sudo nano httpd.conf
    
  7. add the following folder alias at the end of the config file (change <username> to your username)
  8. Alias /st2 /Users/<username>/SenchaTouch2/projects
    <Directory "/Users/<username>/SenchaTouch2/projects">
        Options Indexes FollowSymLinks MultiViews
        AllowOverride All
        Order allow,deny
        Allow from all
    </Directory>
  9. start the apache webserver - goto System Preferencences -> Sharing and activate "Web Sharing"
  10. open a chrome/safari browser and go to the url http://localhost/st2/SenchaApp/
  11. now you should see your new application running in the browser


Test your Application with a Python Webserver
  1. go to directory of your new sencha application
  2. cd ~/SenchaTouch2/projects/SenchaApp
    
  3. start a simple python http server
  4. python -m SimpleHTTPServer 8000
    
  5. open chrome/safari and go to the url http://localhost:8000
  6. now you should see your new application running in the browser

15 comments: