Getting started with sencha touch!

senchatouch

Sencha Touch is a HTML 5 framework that allows you to create cross platform mobile apps. When used with cordova you can build HTML apps that look and feel like a native app allowing you to cut down in your development time and budget. The frameworks learning curve is a little steep but once you get it down, development is quick and painless.

Lets get started

To get started we are going to need to download a couple things and get our environment set up. It might seem like a lot, but once you are set up you should be able to create Touch projects quick and easy. Here is what we need to download:

Now that we have everything downloaded, install MAMP to get your server up and running, and install sencha cmd. Once sencha cmd is installed run the following cmd:

sencha

You should see something like this in your terminal:
Terminal output

This means sencha cmd is installed correctly and you we are getting close to creating our app.

Next take your sencha touch sdk download  and unzip its contents into you web server directory, put mine under a touch directory. This will allow you view documentation and demo apps locally on your machine, as well as a good getting started guide http://localhost/touch/SETUP.html.

Now that everything is set up lets build our app! We will be using sencha cmd to scaffold out the app. The command we are going to use is:

sencha -sdk /path/to/sencha-touch-sdk generate app MyApp /path/to/www/myapp

With my setup this is what my command will look like for my app called PowPowPowerball

sencha -sdk /Applications/MAMP/htdocs/touch generate app PowPowPowerball /Applications/MAMP/htdocs/PowPowPowerball

And thats it, your app is created. With your web server running navigate to your project. It should look like this:
Your new sencha touch app

Take a look inside your project and you will see what sencha cmd has built out. Below is the basic layout of the project.

.sencha/                # Sencha-specific files (for example configuration)
    app/                # Application-specific content
        sencha.cfg      # Configuration file for Sencha Cmd
        plugin.xml      # Plugin for Sencha Cmd
    workspace/          # Workspace-specific content (see below)
        sencha.cfg      # Configuration file for Sencha Cmd
        plugin.xml      # Plugin for Sencha Cmd

touch/                  # A copy of the Sencha Touch SDK
    cmd/                # Sencha Touch-specific content for Sencha Cmd
        sencha.cfg      # Configuration file for Sencha Cmd
        plugin.xml      # Plugin for Sencha Cmd
    src/                # The Sench Touch source
    sencha-touch-*.js   # Pre-compiled and bootstrap files
    ...

app                     # Your application's source code in MVC structure
    controller
    model
    profile
    store
    view
        Main.js         # The main view of the application

resources
    css
        app.css         # The main stylesheet, compiled from app.scss

    sass
        app.scss        # The Sass file which compiles to app.css above,
                        # includes Sencha Touch theme by default

    icons               # Application icons for all mobile devices
                        # When replacing these default images with your own,
                        # make sure the file name and the dimension stays exactly the same
        ...
    loading             # Application start-up screens for iOS devices
                        # Similarly to icons, make sure the file names and
                        # dimension stays the same
        ...
    images              # Put other images used by your application here

index.html
app.js                  # Contains application's initialization logic
app.json                # Application descriptor
packager.json           # Configuration for native packaging

Thats it, now get started building out your app!