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

 cd ~/SenchaTouch2/sdk  

2.  create a new app in the projects folder with the sencha command

 sencha app create SenchaApp ~/SenchaTouch2/projects/SenchaApp 

Test your Application with the Apache Webserver 

1. go to the apache server directory

cd /etc/apache

2. add write permissions to the apache config file

sudo chmod +r httpd.conf

3. open the apache config with the nano editor

sudo nano httpd.conf

4. add the following folder alias at the end of the config file (change <username> to your username)

Alias /st2 /Users/<username>/SenchaTouch2/projects
<Directory "/Users/<username>/SenchaTouch2/projects">
    Options Indexes FollowSymLinks MultiViews
    AllowOverride All
    Order allow,deny
    Allow from all
</Directory>

5. start the apache webserver - goto System Preferencences -> Sharing and activate "Web Sharing"
6. open a chrome/safari browser and go to the url http://localhost/st2/SenchaApp/
7. 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

cd ~/SenchaTouch2/projects/SenchaApp

2. start a simple python http server

python -m SimpleHTTPServer 8000

3. open chrome/safari and go to the url http://localhost:8000
4. now you should see your new application running in the browser

Tutorial - Installation of Sencha Touch 2 on a Mac

Install the SenchaTouch2 SDK Tools

1. Download the Sencha Touch 2 SDK Tools 
2. Extract the zip file and start the installer
3. Complete the installation with the default settings

Verify the Installation of the SDK Tools

1. Open a terminal window and test the "sencha" command - you should see something like:

Sencha Command v2.0.0 Beta 3
Copyright (c) 2012 Sencha Inc.

usage: sencha COMMAND [ARGS]

The available commands are:
   build   build a JSB project
   create bootstrapdata  generate boostrap data
   create jsb   generate a minimal JSB project for an app
   create locale  generate a template locale file from source
   create manifest  generate classes manifest
   package   package your Touch web app into a native bundle
   slice theme   slice a custom theme's images for IE

See 'sencha help COMMAND' for more information on a specific command.

Setup SenchaTouch2 SDK

1. Download Sencha Touch (you need a email address to receive the download link) 
2. Create a new folder in your home directory called "SenchaTouch2"
3. Extract the contents of the downloaded zip file to the SenchaTouch2 folder
4. Rename the extracted folder to "sdk"