Create your first desktop application with HTML, JS and Node-WebKit
Nowadays, with the help of JavaScript and HTML, almost everything can be done. And thanks to Node-WebKit (recently renamed NW.js), you can even make desktop applications that look like native and have access to all parts of the OS. Today we will show how to create a simple desktop application using Node-WebKit, using jQuery and several modules for Node.js.
Node-WebKit is a combination of Node.js and the integrated WebKit browser. JavaScript code is executed in a special environment, from which there is access to both the standard browser API, and Node.js.
For development, you need to download the node-webkit executable file and invoke it from the command line. Later everything will be packaged together into one program that will be launched by the user.
Download files suitable for your system and unpack them to a suitable place. You need to run them like this:
')
A new node-webkit window will open, in which many debug messages will be displayed.
We have prepared for you a test application for an example. It downloads the latest articles from Tutorialzine and makes a merry-go-round with jQuery Flipster.
directory structure
The archive contains the above files. They look like a static site, but they won’t work in the browser when you run index.html - they need Node.js modules. To run, use the command
She will launch our excellent application.
Everything starts with the package.json file, which node-webkit searches for when it starts. It describes what needs to be loaded and gives different settings for the window.
The window property describes the need to open a window of 800 x 500 pixels and hide the toolbar in it. This will load the file from the main property. We have it
And finally, our javascript file. This is where the fun is.
In a browser, you cannot access information on another domain through jQuery. But node-webkit removes these limitations.
There is also a jQuery and jQuery-flipster plugin. And that's it!
Of course, for the convenience of the user, you need to pack all of this into a separate program that can be launched with a simple double click.
Manually this is quite a chore to do , especially if you want to prepare an application for different platforms. But there are automatic libraries for this.
There is also a minus - the executable files turn out to be very large (it happens that 40-50 MB), since both the webkit browser and the node.js browser and your code are shoved into them. Perhaps to create simple small desktop applications is not ideal.
Node-webkit is a powerful feature that opens up new opportunities for web developers. With it, you can create helper applications for your web services and make desktop clients that have full access to the user's computer. Read more about node-webkit in their wiki .
Node-WebKit is a combination of Node.js and the integrated WebKit browser. JavaScript code is executed in a special environment, from which there is access to both the standard browser API, and Node.js.
Install Node-WebKit
For development, you need to download the node-webkit executable file and invoke it from the command line. Later everything will be packaged together into one program that will be launched by the user.
Download files suitable for your system and unpack them to a suitable place. You need to run them like this:
')
# linux/osx /path/to/node-webkit/nw /your/project/folder # windows C:\path\to\node-webkit\nw.exe C:\your\project\folder # ( ) A new node-webkit window will open, in which many debug messages will be displayed.
First application
We have prepared for you a test application for an example. It downloads the latest articles from Tutorialzine and makes a merry-go-round with jQuery Flipster.
directory structure
The archive contains the above files. They look like a static site, but they won’t work in the browser when you run index.html - they need Node.js modules. To run, use the command
/path/to/node-webkit/nw . She will launch our excellent application.
How is it done
Everything starts with the package.json file, which node-webkit searches for when it starts. It describes what needs to be loaded and gives different settings for the window.
package.json
{ "name": "nw-app", "version": "1.0.0", "description": "", "main": "index.html", "scripts": { "test": "echo \": \" && exit 1" }, "author": "", "window": { "toolbar": false, "width": 800, "height": 500 }, "license": "ISC", "dependencies": { "pretty-bytes": "^1.0.2" } } The window property describes the need to open a window of 800 x 500 pixels and hide the toolbar in it. This will load the file from the main property. We have it
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Tutorialzine Node-Webkit Experiment</title> <link rel="stylesheet" href="./css/jquery.flipster.min.css"> <link rel="stylesheet" href="./css/styles.css"> </head> <body> <div class="flipster"> <ul> <!-- Tutorialzine's latest articles will show here --> </ul> </div> <p class="stats"></p> <script src="./js/jquery.min.js"></script> <script src="./js/jquery.flipster.min.js"></script> <script src="./js/script.js"></script> </body> </html> And finally, our javascript file. This is where the fun is.
// jQuery Node.js? ! $(function(){ // , os var os = require('os'); var prettyBytes = require('pretty-bytes'); $('.stats').append('Number of cpu cores: <span>' + os.cpus().length + '</span>'); $('.stats').append('Free memory: <span>' + prettyBytes(os.freemem())+ '</span>'); // Node webkit UI. var gui = require('nw.gui'); // Tutorialzine var ul = $('.flipster ul'); // , // ajax- . $.get('http://feeds.feedburner.com/Tutorialzine', function(response){ var rss = $(response); // RSS rss.find('item').each(function(){ var item = $(this); var content = item.find('encoded').html().split('</a></div>')[0]+'</a></div>'; var urlRegex = /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/g; // var imageSource = content.match(urlRegex)[1]; // li var li = $('<li><img /><a target="_blank"></a></li>'); li.find('a') .attr('href', item.find('link').text()) .text(item.find("title").text()); li.find('img').attr('src', imageSource); li.appendTo(ul); }); // flipster $('.flipster').flipster({ style: 'carousel' }); // . // , . $('.flipster').on('click', 'a', function (e) { e.preventDefault(); // URL gui.Shell.openExternal(e.target.href); }); }); }); In a browser, you cannot access information on another domain through jQuery. But node-webkit removes these limitations.
Used modules:
- Shell - the node webkit module for working with the desktop
- OS is a module embedded in Node.js. Able to return the amount of free system memory
- Pretty Bytes - converts bytes into human-readable lines 1337 → 1.34 kB.
There is also a jQuery and jQuery-flipster plugin. And that's it!
We pack and distribute
Of course, for the convenience of the user, you need to pack all of this into a separate program that can be launched with a simple double click.
Manually this is quite a chore to do , especially if you want to prepare an application for different platforms. But there are automatic libraries for this.
There is also a minus - the executable files turn out to be very large (it happens that 40-50 MB), since both the webkit browser and the node.js browser and your code are shoved into them. Perhaps to create simple small desktop applications is not ideal.
Conclusion
Node-webkit is a powerful feature that opens up new opportunities for web developers. With it, you can create helper applications for your web services and make desktop clients that have full access to the user's computer. Read more about node-webkit in their wiki .
Source: https://habr.com/ru/post/251723/
All Articles