DotNetCore

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.





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.

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.

Can’t wait to see it in action ?

Check out the code on GitHub

Code on GitHub

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.

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

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

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

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

References





 

Gary Woodfine

Freelance Full Stack Developer at threenine.co.uk
Helps businesses by improving their technical proficiencies and eliminating waste from the software development pipelines.

A unique background as business owner, marketing, software development and business development ensures that he can offer the optimum business consultancy services across a wide spectrum of business challenges.

Latest posts by Gary Woodfine (see all)

π