Tutorial 4: Sencha Weather App – OpenWeatherMap Api + Model + Store

Register on OpenWeatherMap

OpenWeatherMap provides a handy api for guess what? That’s right weather reports. Follow the steps to register and get a URL endpoint.

1. Register at: http://openweathermap.org/API
2. Click Free API
3. Click ‘more’ under ‘Get Current Weather Data’

This is the default example:

api.openweathermap.org/data/2.5/weather?q=London,uk

We have some options to format the data coming back:

api.openweathermap.org/data/2.5/weather?units=metric&q=Dublin, IE

See the JSON response with Dublin related weather reports. This will do for the moment.

Next add the weather API to our Sencha app.

In keeping with best practice we will add this configuration to the app.js in our app root. Seems like a good place of it.

In time I will want to make the location configurable so I’ve broken into two variables. Plus a variable for the location of the images the openweathermap kindly provide.

 /* configuration openweathermap API */
    weatherAPI: 'http://api.openweathermap.org/data/2.5/weather?units=metric&q=',
    defaultCountry: 'Dublin,ie',
    openweatherimages: 'http://openweathermap.org/img/w/',

Model

The model will describe the shape of the data. We’ll shape the data we get back from the above URL.

1) Create the model file app/model/Weather.js
The names on the field array are taken form the JSON response.

Ext.define('WeatherApp.model.Weather', {
    extend: 'Ext.data.Model',
    config: {
        fields: ['name', 'main', 'country', 'sys', 'weather']
    }
});

API JSON response:

{"coord":{"lon":-6.26719,"lat":53.34399},"sys":{"country":"IE","sunrise":1372132698,"sunset":1372193845},"weather":[{"id":803,"main":"Clouds","description":"broken clouds","icon":"04d"}],"base":"global stations","main":{"temp":18.4,"humidity":58,"pressure":1028,"temp_min":18,"temp_max":18.89},"wind":{"speed":4.63,"gust":4.63,"deg":247},"clouds":{"all":80},"dt":1372179878,"id":2964574,"name":"Dublin","cod":200}

Our model object will have attributes name, main, country, sys, weather. We can pull the data from the object via these attributes.

But we need to get the data in to the model in the first place. Enter stores.

Oh yes, we’ll need to add our model to our app.js, as we previously did with views.

A store for Weather

In the previous tutorial we hooked up a view to the Weather store.  But we didn’t create the store. We’ll do that now:

app/store/Weather.js

Ext.define('WeatherApp.store.Weather', {
    extend: 'Ext.data.Store',

    config: {
        model: 'WeatherApp.model.Weather',
        //autoLoad: true,
        proxy: {
            type: 'jsonp',
            url : WeatherApp.app.weatherAPI + WeatherApp.app.defaultCountry,
            reader: {
                type: 'json'
            }
        }
    }
});

THE NEXT STEPs FOR US:

• A new tab panel for location
• An input field to allow the user to enter a location.
• Model and store to save the location to local storage.
• A controller to manage the interactions between the view and the store.

CODE HERE:

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