Weather app with Node webkit and Angularjs : part 1

December 1, 2015
by Inaam Hussain

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.

DOWNLOAD

What we are going to build?

weather app

weather app

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.

npm install node webkit

npm install node webkit

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,

sample desktop app

sample desktop app

Conclusion

This concludes part-1. 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.

 

Free PDF

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

Leave a Comment