In the world 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. In this tutorial, we will continue our journey of creating a weather desktop application using Node WebKit and AngularJS.
Building the Weather App
Our weather application will display information such as the place name, temperature, weather condition (e.g., cloudy, rainy, etc.), and geographical coordinates. We will use the OpenWeatherMap API to fetch this data. The API provides detailed weather data, and you can find more details here.
Here’s the directory structure for our application:
app
├── app.js
├── css
├── fonts
├── lib
├── templates
├── index.html
├── package.json
└── Weather_Icon.png
In the index.html file, we include all the necessary libraries such as AngularJS and Bootstrap. We then handle the response data from the weather API using AngularJS.
The app.js file contains the API call function that fetches the appropriate data based on the search term entered in the input field. We use the OpenWeatherMap API to fetch the weather data.
Packaging the App
After creating the app using AngularJS, we need to package it into a desktop application format. We create a package.json file that holds the configuration for our desktop application. This file includes the name, version, and main field, which is the path to our main index file. It also contains window configurations such as hiding the toolbar, setting the height and width of the desktop app, and setting the app icon.
To package the app for multiple operating systems, we use a tool called nw-builder. This tool can convert the app into a desktop application for different operating systems. We install nw-builder globally using npm, and then run the tool to build the app.
Conclusion
In this tutorial, we learned how to create a desktop application using our knowledge of HTML, CSS, and JavaScript. We built a weather application using AngularJS and Node WebKit, and packaged it into a desktop application using nw-builder. This process shows how web technologies can be used to create desktop applications, extending their capabilities beyond the browser.
In the next part of this series, we will dive deeper into the features of Node WebKit and explore more complex aspects of building desktop applications with web technologies. Stay tuned!
