Weather app with Node webkit and AngularJS : part 2

In this tutorial will create weather app that shows information like place name, Temprature, weather info (i.e: cloudy, rainy etc.) and GEO location co-ordination.

In the previous tutorial, we covered

• Prerequisites
• Computer setup (like installing NodeJS)
• Getting Started
• Created sample app

in this tutorial will covered following things,

• Create weather app using Angularjs and integrate with NW.js
• Packing application into a native application. so that can run on diffrent OS, like MAC, Windows & Linux.

DOWNLOAD

Create weather app

For creating weather app we have used third party apis which gets us all the information about weather. for more details you can visit (http://openweathermap.org/api).
So start with folder structure for our app. please see below,


app
app.js
css
fonts
lib
templates
index.html
package.json
Weather_Icon.png


So let’s start with index.html,













{{item.name}}, {{item.sys.country}}

{{item.main.temp}}°С

{{item.weather[0].main}}, {{item.weather[0].description}}
Geo coords [ {{item.coord.lon}}, {{item.coord.lat}} ]







In index file we have added all required libraries which is angularJs, Bootstrap etc. and using AngularJS we have handled response data from weather api.
And here is app.js file which contains calling api and binding with UI.


var app = angular.module('weatherApp', ['angular-loading-bar']);

app.controller('weatherControl', function($http,$scope){
$scope.items = {};
$scope.assetName = '';
$scope.totalCount = 0;
$scope.searchWeather = function(){
var searchTerm = $scope.assetName;
$http.get('http://api.openweathermap.org/data/2.5/find?q='+searchTerm+'&type=like&sort=population&cnt=30&units=metric&APPID=73136fa514890c15bc4534e7b8a1c0c4').success(function(data){
$scope.items = data.list;
$scope.totalCount = data.count;
});
};
});


So in above code, you can see api calling function which get appropriate data based on search term which you enter in input field.
Api which we have used as below,

http://api.openweathermap.org/data/2.5/find?q=SearchtermText&type=like&sort=population&cnt=30&units=metric&APPID=73136fa514890c15bc4534e7b8a1c0c4

in api we need to pass our search term text in parameter ‘q‘ and sorting data based on population and it will return appropriate data based on that.

Using above code we have successfully created app using AngularJS and now will see in desktop app format. Now we need to create package.json which will hold the configuration about our desktop app. See below file,


{
"name": "myapp.weather",
"version": "0.0.1",
"description": "Weather app, that shows info about weather",
"main": "index.html",
"window": {
"toolbar": false,
"min_width": 800,
"min_height": 600,
"icon": "Weather_Icon.png"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "inaam",
"license": "MIT"
}


In above file we have added name, version and main field which is our main index file path.
and in windows contains hiding toolbar, height and width of desktop app & app icon etc.
For more configuration options you can see (https://github.com/nwjs/nw.js/wiki/manifest-format).

Packaging the app

For packaging the app for multiple operating system. We are going to use tool called nwbuilder. which can convert to desktop app for different OS systems.
let’s install nwbuilder by typing following command in command prompt.

npm install -g nw-builder

and this will install globally so that you can access it from anywhere.

Now we will run the tool to build app. Navigate to the parent directory that contains the weatherApp folder and type following command,

nwbuild -p win32,win64,osx32,osx64,linux32,linux64 weatherApp

Using above command we can create standalone app for different os ( i.e: MAC, Windows & Linux ) for 32 and 64 bit compatible versions.
You can see build folder, in which you can find app folder that contains all different versions of app.

Note : While packaging app if you will get any error like file missing or any other errors. download nw.js from it’s official website (http://nwjs.io) and place whole folder to its particular location which you can see the path in error. or else there is another way you can try this ( https://github.com/nwjs/nw.js/wiki/How-to-package-and-distribute-your-apps ) documents for packaging app.

Conclusion

The important things is we have learn from this tutorial is that we can easily create desktop app using knowledge of HTML, CSS & Javascript.