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

3 thoughts on “Tutorial 4: Sencha Weather App – OpenWeatherMap Api + Model + Store”

  1. I know you write this post since 2013. I’d like to ask you somethings….
    When I get Json response from openWeather API, It’s exactly the same with you.
    I store it into MongoDB and I retrieve back these data. But nothing comes out except id.
    😥 I don’t know why.

    Model.find({}, function(error, data){
    console.log(data[“_id”]); //result out
    console.log(data[“coor”]); // Udefined
    }
    FYI, I also studying MongoDB for Node.js Developers Course like you.
    But not finish yet. I test this program by using node.js + Mongodb.

    1. Hi there,

      hmmm probably best to check that the weather data is in your mongodb collection correctly first?
      For example: on the mongo command line do a find for the data to ensure it’s actually there.

      Otherwise if you use mongoose you could check that the mongoose model has those extra fields defined.

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: