Getting Started With Node WebKit Apps- Developing Desktop Native Apps ~ i-visionblog

HTML5 Becomes Day to day More Powerful since it supports many Developer Friendly API such as Audio,File,Geolocations and many too.Html5 was used to build Amazing websites,Phonegap Apps for Android,iOS,Windows and Bada OS too.Now it has been started to be used as Desktop Application with HTML5 API and Javascript API native Windows Tasks with the help of Node.js Modules.Having Experience on Node.js Previously I am Writing this Article - Read More about Node.js Basic Here.Even Intel Appframwork GUI based mobile application developing environment uses nodewebkit as a part!

Reference : Download Demo File

Installation :

Just visit the GitHub Project use their Download option and extract the file and keep it in directory where you frequently access.

Project structure :

|-www

| |_ index.html

|-node_modules [ if necessary ]

|-package.json

|-ico.png

package.json :

	{
	"name":"hello",
	"main":"www/index.html",
	"description": "demo app of node-webkit",
	"version": "0.1.0",
	"window": {
	"title": "Hello World",
	"icon": "link.png",
	"toolbar": false,
	"width": 800,
	"height": 500,
	"min_width": 400,
	"min_height": 200,
	"max_width": 800,
	"max_height": 600
	}
	}

view raw package.json hosted with ❤ by GitHub

index.html:

consider Demo file for working purpose.

	<!DOCTYPE html>
	<html>
	<head>
	<!-- Latest compiled and minified CSS -->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
	<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

	</head>
	<body>
	</div>
	</div>


	<div class="jumbotron" style="background:transparent;">
	<div class="row">
	<div class="container">
	<div class="col-md-6" style="padding:10px;">
	<ul id="myTab" class="nav nav-tabs" style="color:white;background-color:black">
	<li class="active">
	<a href="#home" data-toggle="tab">
	Status Update
	</a>
	</li>
	<li><a href="#link" data-toggle="tab">Link Share</a></li>
	<li class="dropdown">
	<a href="#" id="myTabDrop1" class="dropdown-toggle"
	data-toggle="dropdown">Others
	<b class="caret"></b>
	</a>
	<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
	<li><a href="#photo" tabindex="-1" data-toggle="tab">Photo</a></li>
	<li><a href="#media" tabindex="-1" data-toggle="tab">Media Updates</a></li>
	</ul>
	</li>
	</ul><div id="myTabContent" class="tab-content" style="opacity:1;">
	<div class="tab-pane fade in active" id="home">
	<!-- status update tab --><p><h3>Status Update : </h3></p>
	<form class="form-horizontal" role="form">
	<div class="form-group">
	<div class="col-sm-12">
	<textarea class="form-control" id="statusupdates"
	placeholder="Share plain text update..." rows="3"></textarea>
	</div>
	</div>
	<div class="form-group">
	<div class="col-sm-12">
	<button name="status" class="btn btn-sm btn-primary"><span class="glyphicon glyphicon-pencil"></span> Post Update</button>
	<button name="status" class="btn btn-sm btn-warning"><span class="glyphicon glyphicon-calendar"></span> Draft Update</button>
	<button name="status" class="btn btn-sm btn-danger"><span class="glyphicon glyphicon-remove-circle"></span> Cancel</button>
	</div>
	</div></form>
	</div>
	<div class="tab-pane fade" id="link">
	<p><h3>Share a link : </h3></p>
	<form class="form-horizontal" role="form">
	<div class="form-group">
	<div class="col-sm-12">
	<input type="text" class="form-control" id="linkurl"
	placeholder="Paste a url here..." />
	</div>
	</div>
	<div class="form-group">
	<div class="col-sm-12">
	<input type="text" class="form-control" id="imgurl"
	placeholder="Paste a image url here.." />
	</div>
	</div>
	<div class="form-group">
	<div class="col-sm-12">
	<textarea class="form-control" id="desc"
	placeholder="Paste Your Title Here..." rows="3" ></textarea>
	</div>
	</div>

	<div class="form-group">
	<div class="col-sm-12">
	<textarea class="form-control" id="desc"
	placeholder="Paste Your message Here..." rows="2" ></textarea>
	</div>
	</div>
	<div class="form-group">
	<div class="col-sm-12">
	<textarea class="form-control" id="desc"
	placeholder="Paste a description here..." rows="3" ></textarea>
	</div>
	</div>
	<div class="form-group">
	<div class="col-sm-12">
	<button name="status" class="btn btn-sm btn-primary"><span class="glyphicon glyphicon-pencil"></span> Post Update</button>
	<button name="status" class="btn btn-sm btn-warning"><span class="glyphicon glyphicon-calendar"></span> Draft Update</button>
	<button name="status" class="btn btn-sm btn-danger"><span class="glyphicon glyphicon-remove-circle"></span> Cancel</button>
	</div>
	</div></form>
	</div>
	<div class="tab-pane fade" id="photo">
	<!-- status photo tab -->
	</div>
	<div class="tab-pane fade" id="media">
	<!-- media update tab -->
	</div>
	</div>

	<div> facebook \| Linkedin \| twitter </div>
	</div>
	</div>
	</div>

	</div>


	<footer style="">
	<div class="container" style="margin:0px;padding:0px;width:100%;color:white;">
	<hr>
	<p>© s.shivasurya \| i-visionblog.com - 2014 - Home - Privacy Policy - Terms and Conditions - Cookies</p></div>
	</footer>


	</body>
	</html>

view raw index.html hosted with ❤ by GitHub

Creating Zip File :

1) Create New-> Zip File
2) Add all www,package.json and ico.png file to Zip files and rename name.nw.zip
3) go to nodewebkit folder where you have extracted and copy this Zip file .
4) open in command prompt[terminal].
5)move to extracted Folder which you have Downloaded and execute the command.

C:\node > nw nameofapp.nw.zip

This opens the nodewebkit app index.html with your specified app details using package.json file such as toolbars,height,width and etc.

Create executable binary for Distribution:

under same directory run the command in the command prompt

copy /b nw.exe+appname.nw.zip application.exe

Note:
For More Desktop API window environment Visit official Github Repo Wiki to learn more.Consider npm repository searches for creating node_modules under nodewebkit app for node.js support.

If any error/bug in the Demo/Article Just Mail me s.shivasurya@gmail.com or comment below here.or connect wit me via Facebook/Twitter for interactions.Share is care.

i-visionblog

Personal Tech Blog by Shivasurya

Sample Text

Unordered List

Saturday, 26 July 2014