Weather app with Node webkit and Angularjs

Weather app with Node webkit and Angularjs

  • 2016-08-24
  • 2365

NW.js basically known as node webkit. Using this framework we can create desktop application using HTML, CSS & Javascript.
In this tutorial will create weather app to understand how node webkit works.
So, dividing this tutorial in to two part, in which part 1 explains how to install and setup of node webkit and another one is to creating angular weather app and integrate with node webkit.

What we are going to build?

enter image description here

We are going to make weather app. It will allow you to browse weather information based on location you enter in the search box. and it will display information like place name, Temperature, weather info (i.e: cloudy, rainy etc.) and GEO location co-ordination. This would be ideal for your next college mini project.

Prerequisites

For creating desktop app you need following things.

  • Computer running with either MAC, Windows or Linux.
  • Node.js (See Node.js installing instructions)

Installing Node.js

On Windows

You can download Nodejs from following website : https://nodejs.org/en/download/

On MAC & Linux

Installed node.js via tool called NVM (https://github.com/creationix/nvm). it allows you to different version of nodejs and it can be easily switchable.

Getting started

After intallating Nodejs process, we are going to install NW.js using npm node module. So type the following command in command prompt. If you are using windows then make sure you have to run command prompt as administrator access. This will install all required modules globally.

 npm install -g nw

Above command will install Node webkit. and -g flag install globally. After installing you can see following screen in command prompt.

enter image description here

Now, after installing node webkit, we will create one sample html page to understand how things works.

So first create folder name called desktopApp. in which we are going to create 2 files namely package.json & index.html.
package.json is the manifest that contains the configuration information about the app. As you can see below,

package.json

{
    "name": "desktopApp",
    "version": "1.0.0",
    "main": "index.html"
}

and another file is index.html which contains our app code as follows.

index.html

<html>
    <head>
        <title>Desktop App</title>
    </head>
    <body>
        <h1>Sample Desktop App</h1>
        <p>It's working !!!</p>
    </body>
</html>

Now after creating this two file will run our sample app.
So for launching our sample first open command prompt and go to location in to the folder which contains our index.html file. and type following command in command prompt,

 nw

You can see below app screen in your desktop,

enter image description here

Conclusion

Hope using this information you should get strong knowledge of NW.js about how to start with sample app.
In next tutorial will cover following things,

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

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.

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"
}

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.

DOWNLOAD

Suggest

Node.js Tutorial with Visual Studio Code over 4 Hours

Building a HTML5 Mobile App Using AngularJS

Node.js Tutorials: The Web Developer Bootcamp

Angular 2 and NodeJS - The Practical Guide to MEAN Stack 2.0

Complete Node JS Developer Course Building 5 Real World Apps