Tutorial 1: Developing Weather Mobile Web App with Sencha Touch


The world needs yet another weather app. So let’s build it.

We’ll will use the Sencha Touch JavaScript framework to create the mobile web app. Over the course of several bite sized tutorials we will add need features and explore the framework.

  • Tabbed views
  • Weather information for the current date for a selected location
  • An about page
  • Possibly a weather map if we make it that far 🙂

For this tutorial we will re-create the simple getting started app.

And go from there.

Git repo


Getting Started App

We will use Sencha CMD tool to create the basic Getting Started App.

In your terminal go to the directory where you  previously downloaded Sencha CMD

$ cd /Downloads/sencha-touch-2.2.0-commercial/touch-2.2.0/
$ sencha generate app WeatherApp /www/WeatherApp

where WeatherApp is a name to give your application and /www/WeatherApp is location where the Getting Started app will be placed.

Ok right now if you browse to your app location: along the lines of http://localhost/weatherap.

Hopefully if all went well then you’ll see the helpful Getting Started App.

Look over the generated app. It’s small but gives an overview of MVC with sencha touch.

And we’ll leave it there for the first tutorial.

In the next tutorial we’ll edit the getting started app and create the tab panels for the interface of our Weather App.

Code here:


2 thoughts on “Tutorial 1: Developing Weather Mobile Web App with Sencha Touch”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: