Custom Weather application using .net core and angular 2

I thought I'd have a little fun today and create a custom weather page - I'm British we're obsessed with the weather!

I thought what I'd do is just use the angular 2 SPA template and just integrate with OpenWeather.org API's to get the weather reports for towns within my local vicinity. For extra fun I'd thought I'd make use of .net core and develop and deploy solely making use of Ubuntu 16.04

In order to make use of OpenWeather.org you will need to register for an account and get your API key. It's free so go ahead!

I generated the application stub dotnet new angular, which generates a basic dotnet core angular 2 SPA app.

I went ahead and deleted the counter component and removed it from the navigation menu and it's reference in the App Module

I also went ahead and renamed the fetch-data component to be weather . I also renamed the SampleDataController to be WeatherController

I am developing this on my ubuntu laptop, so I also have to ensure webpack is installed and all the dependencies are available.

npm install -g webpack 
npm install

There also seems to be an issue on Linux based SPA template environments that if you have made any changes to the project structure or added addtional code. You need to run webpack to ensure the changes take effect.

webpack --config webpack.config.vendor.js
webpack --config webpack.config.js

I quickly test that the application still works and my changes have taken effect.

We're now ready to start integrating the OpenWeather.org API's. The code within in this sample is deliberately contrived in order to illustrate points.

Add Controller Method

We'll initially just add a simple method to the WeatherController to make use of the OpenWeather API to get forecast by City.

[HttpGet("[action]/{city}")]
 
        public async Task WeatherForecast(string city)
        {
            using (var client = new HttpClient())
 
            {
                try
 
                {
 
                    client.BaseAddress = new Uri("http://api.openweathermap.org");
                    var response = await client.GetAsync($"/data/2.5/weather?q={city}&appid=[Insert API Key Here ]&units=metric");
                    response.EnsureSuccessStatusCode();
                    var result = await response.Content.ReadAsStringAsync();
                    var openWeather = JsonConvert.DeserializeObject(result);
 
                    var forecast = new
                    {
                        Temp = openWeather.Main.Temp,
                        Summary = string.Join(",", openWeather.Weather.Select(x => x.Main)),
                        City = openWeather.Name
                    };
 
                    return Ok(forecast);
                }
 
                catch (HttpRequestException httpRequestException)
                {
                    return BadRequest($"Error getting weather from OpenWeather: {httpRequestException.Message}");
                }
            }

I created some Custom Classes to be used to capture the results.

public class Description
    {
        public string Main { get; set; }
        public string Condition { get; set; }
    }
	
    public class Main
    {
        public string Temp { get; set; }
    }
 
public class WeatherResponse
    {
        public string Name { get; set; }
        public IEnumerable Weather { get; set; }
        public Main Main { get; set; }
    }

Angular 2 Components

We'll create a sime very simple Angular 2 Components in order to illustrate how they will all work together to retrieve data, and how they can be further developed to provide more abstraction.

We'll create a Angular Service to interact with out .net API

// Interface Declaration
import { Observable } from 'rxjs/Observable';
import { Response } from '@angular/http';
 
export interface IWeatherService {
 
    getWeatherReport(city : string): Observable;
}
 
///////////////////////////////////////////////////////////
 
 
// Class Declaration
import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import {Observable } from 'rxjs/Observable';
import {IWeatherService } from './weatherservice.interface';
 
 
@Injectable()
export class WeatherService implements IWeatherService{
 
    constructor(public http : Http){
 
    }
 
    getWeatherReport(city : string): Observable{
         
         var url :string = '/api/Weather/WeatherForecast/' + city;
 
        return this.http.get(url);
    }
 
}

We'll create a very simple class that will interact with the service to get the desired forecast and make it available to the UI to present

import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/toPromise';
import { WeatherService } from '../../../services/weather.service';
import { Forecast } from '../../models/forecast.model';
 
@Component({
    selector: 'weather',
    templateUrl: './weather.component.html'
})
 
export class WeatherComponent implements OnInit {
 
    public forecasts: Forecast;
 
     constructor(private service : WeatherService) {
 
    }
 
    ngOnInit(): void{
 
        // In future we will add a method here to determine users default city
        // for now we will just set it to hometown
        this.getWeatherReport('Swindon');
    }
 
    getWeatherReport(city : string){
 
       this.service.getWeatherReport(city).subscribe(result => {
            this.forecasts = result.json() as Forecast;
        });
    }
}

We'll create a very simple UI presentation class to present the data.

<h1>Weather forecast</h1>
 
 
 
<p>This component demonstrates fetching data from the server.</p>
 
 
 
<p *ngIf="!forecasts"><em>Loading...</em></p>
 
 
 
<table class='table' *ngIf="forecasts">
 
    <thead>
 
        <tr>
 
            <th>City</th>
 
            <th>Temp. (C)</th>
 
            <th>Summary</th>
 
        </tr>
 
    </thead>
 
    <tbody>
 
      <tr>
 
            <td>{{ forecasts.city }}</td>
 
            <td>{{ forecasts.temp }}</td>
 
            <td>{{ forecasts.summary }}</td>
 
        </tr>
 
    </tbody>
 
</table>

References

Jon Hilton - Fetch the current weather using ASP.NET Core Web API and OpenWeather

About
Latest Posts

Gary Woodfine

Technical Director at threenine.co.uk

Gary is Technical Director at threenine.co.uk, an independent software vendor specialising in IoT, Field Service and associated managed services,enabling customers to be efficient, productive, secure and scale-able.