Abhishek M.SOct. 27, 2016
New way of writing native applications web technologies using HTML5, CSS and NW.JS. We can even create desktop applications that feel native, and have full access to every part of the operating system. By using node.js, css and html it is possible to create Cross platform desktop apps.
HTML 5
HTML 5 is a markup language used for structuring and presenting content on the World Wide Web. It is the fifth and current version of the HTML standard. HTML 5 is intended to subsume not only HTML 4, but also XHTML and DOM Level HTML.
Cascading Style Sheets (CSS)
CSS is a style sheet language used for describing the presentation of a document written in a markup language. Although most often used to set the visual style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any XML document, including plain XML, SVG and XUL, and is applicable to rendering in speech, or on other media.
NW.js
NW.js (previously known as node-webkit) lets you call all Node.js modules directly from DOM and enables a new way of writing applications with all Web technologies. It is an app run-time based on Chromium and node.js. You can write native apps in HTML and JavaScript with NW.js. It also lets you call Node.js modules directly from the DOM and enables a new way of writing native applications with all Web technologies.
Step 1: Installing Node-WebKit / NW.js
First you will need to download the node-webkit executable, and call it from your terminal when you want to run your code or download manually. For downloading "https://github.com/nwjs/nw.js". After your downloading extract the archive somewhere on your computer . Create below files and add into your file directory
Step 2: Add mandatory files
File directory structure:
* CSS
⇒ jquery.fipster.min.css
⇒ style.css
* index.html
* js
⇒ script.js
* node_modules
* package.json
index.html , package.json are mandatory files for developing a simple web desktop application.
package.json
{
"name": "My shop",
"version": "1.0.0",
"description": "",
"main": "index.html",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"window": {
"toolbar": false,
"width": 800,
"height": 500
},
"license": "Technaurues",
"dependencies": {
"pretty-bytes": "^1.0.2"
}
}
index.html
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body><script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
$scope.products = ["Milk", "Bread", "Cheese"];
$scope.addItem = function () {
$scope.errortext = "";
if (!$scope.addMe) {return;}
if ($scope.products.indexOf($scope.addMe) == -1) {
$scope.products.push($scope.addMe);
} else {
$scope.errortext = "The item is already in your shopping list.";
}
}
$scope.removeItem = function (x) {
$scope.errortext = "";
$scope.products.splice(x, 1);
}
});
</script><div ng-app="myShoppingList" ng-cloak ng-controller="myCtrl" class="w3-card-2 w3-margin" style="max-width:400px;">
<header class="w3-container w3-light-grey w3-padding-16">
<h3>My Shopping List</h3>
</header>
<ul class="w3-ul">
<li ng-repeat="x in products" class="w3-padding-16">{{x}}<span ng-click="removeItem($index)" style="cursor:pointer;" class="w3-right w3-margin-right">×</span></li>
</ul>
<div class="w3-container w3-light-grey w3-padding-16">
<div class="w3-row w3-margin-top">
<div class="w3-col s10">
<input placeholder="Add shopping items here" ng-model="addMe" class="w3-input w3-border w3-padding">
</div>
<div class="w3-col s2">
<button ng-click="addItem()" class="w3-btn w3-padding w3-green">Add</button>
</div>
</div>
<p class="w3-padding-left w3-text-red">{{errortext}}</p>
</div>
</div></body>
</html>
Step 3: Packaging and Distribution
We want to package it in a standalone program. Packaging node-webkit apps for multiple operating systems takes
open it by simply double clicking it "https://github.com/nwjs/nw.js/wiki/How-to-package-and-distribute-your-apps".
Node-webkit is a powerful tool that developing web desktop application for web developers. With it, you can easily create companion apps for your web services and build desktop clients which have full access to the user’s computer.
0
