In the realm of web development, the ability to create desktop applications using web technologies is a game-changer. Node WebKit, now known as NW.js, is a runtime that allows developers to build desktop applications with HTML, CSS, and JavaScript. This tutorial will guide you through the process of creating a weather desktop application using Node WebKit and AngularJS.
What We Are Going to Build
We aim to create a weather application that allows users to browse weather information based on the location they enter in the search box. The app will display information such as the place name, temperature, weather conditions (e.g., cloudy, rainy, etc.), and geographical coordinates. This project could be an ideal mini project for your next college assignment.
Prerequisites
Before we start, ensure you have the following:
- A computer running either MAC, Windows, or Linux.
- Node.js installed (See Node.js installing instructions below)
Installing Node.js
On Windows
You can download Node.js from the official website: https://nodejs.org/en/download/
On MAC & Linux
You can install Node.js via a tool called NVM (https://github.com/creationix/nvm). It allows you to install different versions of Node.js, which can be easily switchable.
Getting Started
After installing Node.js, we will install NW.js using npm, the Node.js package manager. Run the following command in your terminal:
npm install -g nw
The -g flag installs Node WebKit globally. After installing, you should see a successful installation message in your terminal.
Creating a Sample Desktop App
After installing Node WebKit, we will create a sample HTML page to understand how things work. Create a folder named desktopApp, in which we will create two files: package.json and index.html.
The package.json file is the manifest that contains the configuration information about the app. Here’s an example:
{
"name": "desktopApp",
"version": "1.0.0",
"main": "index.html"
}
The index.html file contains our app code. Here’s a simple example:
<!DOCTYPE html>
<html>
<head>
<title>Desktop App</title>
</head>
<body>
<h1>Sample Desktop App</h1>
<p>It's working !!!</p>
</body>
</html>
To launch our sample app, open your terminal, navigate to the folder containing our index.html file, and type the following command:
nw
You should now see the sample desktop app on your screen.
Conclusion
This concludes part 1 of our tutorial. We have successfully set up Node.js, installed NW.js, and created a simple desktop application. In the next part of this tutorial series, we will dive into creating a weather app using AngularJS and integrating it with NW.js. We will also cover how to package the application into a native application that can run on different operating systems like MAC, Windows, and Linux. Stay tuned!
