Tutorial 1: Developing Weather Mobile Web App with Sencha Touch

Introduction:

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

• https://github.com/jamiegood/WeatherApp

Prerequisites:

• You have a webserver installed locally
• Sencha CMD 3.1.1 installed
• Sencha Touch 2.2.0 downloaded

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:

https://github.com/jamiegood/WeatherApp/tree/GettingStartedApp