Why I Built an Open Source Weather Data Widget

We already know this,

Climate change is around the corner!

I’ve been developing apps for about 5 years and never did I get a chance to work on something related to climate and weather predictions until this month. I was assigned to this new project to build an app that uses climatic data for generating a handful of insights for a lot of business use cases. (Unfortunately, I am not allowed to talk anymore in detail about the app or its idea. All hail NDA!)

Besides forecasts, weather data find itself useful in many applications – From usual weather prediction applications to large projects where weather analysis is just one component of a larger objective. However, accurate and reliable weather data is essential for developing various weather-related applications. Having access to accurate weather data is a different story altogether. Let me tell you why!

While working on this project for a high-profile multinational company, I was required to display weather information in mobile and web interfaces. However, when I started working on it, I realized an interesting challenge. Despite the fact that a ‘climate change’ is a trending topic, there isn’t a single customizable opensource widget available anywhere. Why hasn’t anyone built it before?

Obviously, there is a demand or will be a high demand in the near future.

To meet the need, I had to build a widget from scratch. Building this widget was a bit difficult for me, and I assume it would be the same and unnecessary time waste for anyone who’d want to build it in the future. Be it small businesses, entrepreneurs, individual developers, and students. So I’m open-sourcing it for anyone who may need to use it in their application, be it web or mobile app.

I’ve incorporated as many customization options in the widgets as possible. With Angular JS as the chosen platform, I created a Weather Widget that can display weather information of any location. It provides weather data to the developers to build web services and web applications that require weather information. I used APIUX weather API to fetch weather details. The widget can display weather details such as temperature, wind speed and the forecast of any given region.

Getting Started: Installation

The Weather Widget package is published in the npm Registry.

Install the package:

npm install angular2-weather-widget --save

Once installed import AngularWeatherWidgetModule from the installed package into your module as follows:

Usage

Import  AngularWeatherWidgetModule  into  NgModule  in  app.module.ts. Angular’s  HttpClientModule  and  CommonModule   is also required.

import { AngularWeatherWidgetModule } from 'angular2-weather-widget';
import { HttpClientModule } from '@angular/common/http';
import { CommonModule } from '@angular/common';
 
@NgModule({
  // ...
  imports: [
    AngularWeatherWidgetModule,
    HttpClientModule,
    CommonModule
  ]
  // ...
})

Add the following component tag in your template (no properties)

<angular-weather-widget
  [APIKEY]="'APIKEY'">
</angular-weather-widget>

The advantage of this weather widget is that it can be easily embedded in any website or web application. The widget “at-a-glance” shows the relevant weather data that is accessible right from the user’s screen. It eliminates the need to build a weather data platform from scratch. It is designed to work flawlessly and has no high server-side requirements. The users can customize nearly everything such as the colors of every element, the size of the widget, font, size, etc.