Weather app with Node webkit and AngularJS : part 2

December 1, 2015
by Inaam Hussain

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,

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

So let’s start with index.html,

index.html
<!doctype html>
<html lang="en" ng-app="weatherApp">
  <head>
    <meta charset="utf-8">
    <title>Weather App</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/styles.css">
    <link rel="stylesheet" type="text/css" href="css/loading-bar.css">
        <script src="lib/angular/angular.js"></script>
    <script src="lib/angular/angular-animate.js"></script>
    <script src="lib/loading-bar/loading-bar.js"></script>
        <script src="app/app.js"></script>
  </head>
  <body ng-controller="weatherControl">
        <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button aria-controls="navbar" aria-expanded="false" data-target="#navbar" data-toggle="collapse" class="navbar-toggle collapsed" type="button">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand">Weather App</a>
        </div>
        <div class="navbar-collapse collapse" id="navbar">
          <ul class="nav navbar-nav">
          </ul>
        </div>
      </div>
    </nav>
        <div role="main" class="container theme-showcase">
      <div class="" style="margin-top:90px;">
        <nav class="navbar navbar-default">
                    <div class="container-fluid">
                        <div class="navbar-header">
                            <a class="navbar-brand">Search weather</a>
                        </div>
                        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                            <form class="navbar-form navbar-left" role="search">
                                <div class="form-group">
                                    <input type="text" class="form-control" ng-model="assetName" ng-change="searchWeather()" placeholder="Enter city name..">
                                </div>
                                <button type="submit" class="btn btn-info" ng-click="searchWeather()">Submit</button>
                            </form>
                            <ul class="nav navbar-nav navbar-right">
                                <li><a>{{totalCount}} Results Found</a></li>
                            </ul>
                        </div>
                    </div>
                </nav>
                <div class="row">
                    <div class="col-sm-6 col-md-4" ng-repeat="item in items" ng-cloak>
                        <div class="thumbnail">
                            <div class="media">
                                <div class="media-left">
                                    <a href="#">
                                        <img class="media-object" src="http://openweathermap.org/img/w/{{item.weather[0].icon}}.png" alt="" style="max-width: 50px;">
                                    </a>
                                </div>
                                <div class="media-body">
                                    <h4 class="media-heading">{{item.name}}, {{item.sys.country}}</h4>
                                    <h4><span class="label label-primary">{{item.main.temp}}°С</span></h4>
                                    <span>{{item.weather[0].main}}, {{item.weather[0].description}}</span><br>
                                    <span>Geo coords [ {{item.coord.lon}}, {{item.coord.lat}} ]</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
      </div>
    </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="lib/bootstrap/bootstrap.min.js"></script>
  </body>
</html>

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.

app/app.js
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,

package.json
{
  "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.

 

Free PDF

Subscribe and get AngularJS Tips PDF. We never spam!
First Name:
Email:

Leave a Comment