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?
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.
For creating desktop app you need following things.
- Computer running with either MAC, Windows or Linux.
- Node.js (See Node.js installing instructions)
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.
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.
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,
and another file is index.html which contains our app code as follows.
Sample Desktop App
It's working !!!
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,
You can see below app screen in your desktop,
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.
Weather app (Node webkit) Series
I do SEO