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
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.
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.
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!