Sunday, June 7, 2020

Weather App With Google Maps Demo Using Blazor Server, HttpClient and Radzen Components

My favorite teacher for C# on Youtube is Tim Corey, and his latest material concerns HttpClient, using a Weather Forecast Api.
See his material, and check the code provided, as this is a the beginning step towards our application. My application is live: https://httpclientwithmaps.azurewebsites.net
Final project is: https://github.com/zoltanhalasz/HttpClientWithMaps The way the final application works:
1. map is centered in Central Europe
2. click on the map- we will see the neighboring cities with available weather data
3. click on a red bullet - (marker) - the available weather forecast will be displayed in the table on the right.

Prerequisites:
1. Dotnet Blazor Server Side Basics - see my previous tutorial
2. Check Radzen Controls for Maps - check the source
https://blazor.radzen.com/googlemap
3. Check the Weather Api - it's the same source as mentioned by Tim
https://www.metaweather.com/api/
Steps to follow:
A. Take the sample application as starting point from Tim (it's a Blazor Server Application)
B. Add Blazor Radzen to the project, as presented below:
https://blazor.radzen.com/get-started
C. Add the following Changes, described below:

1. Add another class to Model folder to track the locations (which will be represented as red dots on the map)
    public class LocationModel
    {
        public int distance { get; set; }      
        public string title { get; set; }
        public string location_type { get; set; }
        public int woeid { get; set; }
        public string latt_long { get; set; }
        public double latt { get; set; }
        public double _long { get; set; }
    }

2. The code is commented, to understand the main functions, you can copy the WeatherData.razor page content into your project. This contains the functionality described in the beginning.

Please check the map functionality and weather api in the prerequisites to understand it.

3. The left menu is slightly simplified versus the Tim version, you can copy or leave it.

Enjoy! Let me know your comments.

Friday, May 1, 2020

Simple Todo App with Blazor Server and Material Blazor

In order to make my journey in C# more interesting, I insert small projects where I can learn new things. The new target is now Blazor Server, a very interesting Web Technology from Microsoft.

I am trying to find small things to learn and add them to a bigger project later this year, perhaps.
My main tutors on the net were Tim Corey, and maybe Nick Chapsas. You can search them on youtube, they have great content.

The new application I have created is a regular todo app which uses:
- blazor server
- material design https://www.matblazor.com/
- a simple list (no database)

Prerequisites:
- asp.net core 3.1 installed on your machine
- intermediate C# and html

Code is under:
https://github.com/zoltanhalasz/TodoList_BlazorServer.git

The application is live: https://todolist-blazorserver.zoltanhalasz.net/todos

You can add material design to a blazor server project:
1.Install-Package MatBlazor
2.Add @using MatBlazor in main _Imports.razor
3.add to _Host.cshtml (head section)
<script src="_content/MatBlazor/dist/matBlazor.js"></script>
<link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" />

The toaster is added to the todo page: see instructions at: https://www.matblazor.com/Toast

I will explain some of the code and application below.

A. The main model class for the todos:


public class TodoModel
{
public int Id { get; set; }

public string Todo { get; set; }

public DateTime Deadline { get; set; }

public bool IsCompleted { get; set; }

}

B. The layout:
Please read the below examples
https://www.matblazor.com/TextField
https://www.matblazor.com/Checkbox
https://www.matblazor.com/DatePicker
https://www.matblazor.com/Button
See list of icons available:
https://www.matblazor.com/Icon
Toast, see tutorial example:
https://www.matblazor.com/Toast

C. The code-behind:

D. Final result:



Thursday, April 30, 2020

My Journey with Blazor Server

In my study of C# alongside Javascript, and working on my projects (asp.net core and WPF), I came across this technology called Blazor.


This attempts to make C# valid across back-end and front-end, possibly avoiding the use of Javascript on the front-end. Blazor, as a part of Asp.Net Core 3.0 and 3.1, has two flavors, Blazor Webassembly and Blazor Server-Side.

My preoccupation is the latter, as it is production ready. The result is, some asp.net applications that are very fast and responsive, and there are lots of free and beautiful components that can add nice design to the web apps.



The tutorials I checked and can recommend, are the following:
Tim Corey's material about Blazor Server:
- introduction : https://youtu.be/8DNgdphLvag
- components: https://youtu.be/JE0tQ4tx0Nc
- free resources: https://youtu.be/i1Kric5tqYk
A tutorial series on youtube from Nick Chapsas:
Checking the free resources I want to highlight now two of them:
1. Material Design Components: https://www.matblazor.com/
My small sample app is here, live.

2. Radzen Blazor Components: https://blazor.radzen.com/
 My small sample app is here, live:  

And I found another beautiful tutorial, which I did not yet check in detail:

https://www.syncfusion.com/ebooks/blazor-succinctly

Overall, I find Blazor Server-Side a very interesting idea, worth exploring further.

Saturday, March 28, 2020

HighCharts with Angular - Part 2 - Stock Portfolio with Dashboard

In continuation of previous post, now I try to implement the final chapter of the book, https://www.apress.com/gp/book/9781484257432.

The app is live: https://stock-portfolio.zoltanhalasz.net/
Zip repo of client side:



The back-end, which uses an In-Memory database, and Asp.Net Core Web Api, is based on Chapter 7, will use a Yahoo Finance Wrapper, and provide data to the Angular app, as shown in the Web API controller (see book starting with, pages 259).

The Asp.Net Core back-end is live under:

https://stockapi.zoltanhalasz.net/api/getstock

Zip Repo of server side:

I changed the back-end and front-end a little bit, correcting Typos, Formatting (indentation) and changing a little bit the main Stock class of the project.







HighCharts with Angular - Part 1 - Introduction

To continue the idea from the previous posts, my goal is to gather a number of libraries that can make my business applications look more professional, adding new functionalities and features.


One of these libraries is HighCharts, that can be integrated easily into Asp.Net and Angular (and Javascript) projects.

I would add here this great book which started my interest and whose projects I looked at and tried to implement some of its content.


For any Angular project, we can add the HighChart libraries using the below npm commands:
1.
npm install highcharts –save
This command will add Highcharts dependencies into your project.

2.
npm install highcharts-angular –save
The Highcharts angular wrapper is open source. It provides vibrant
and dynamic feature visualization for Highcharts within an Angular
application.


The example attached will be an updated (corrected, as there are some typos and formatting issues in the book) version of the Chapter 5 example: Angular-Highcharts UI Application (page 125).
I added into my Angular App the following examples also: page 140 - 159: DrillDown Event, LegendItem Event, CheckBoxClick Event.

My application is online:
https://highcharts-angular1.zoltanhalasz.net/

Code can be downloaded :
(you have to add npm install after unzipping it)

The following routes are active:
A. adding a new student with marks:
https://highcharts-angular1.zoltanhalasz.net/addmarks
B. after adding them, their marks will be present under the main link
https://highcharts-angular1.zoltanhalasz.net/



C. events with checkbox
https://highcharts-angular1.zoltanhalasz.net/checkbox
D. events with legenditem click
https://highcharts-angular1.zoltanhalasz.net/legenditem
E. events with drilldown
https://highcharts-angular1.zoltanhalasz.net/drilldown



It also uses a back-end service live under the link: https://studentapi.zoltanhalasz.net/
this application also implements the .Net Wrapper of the Highchart, shown in example at the end of Chapter 5.

It is based on the book, starting with page 160, also adding an in-memory database to serve the data needed by the api controller. This will provide the back-end for the angular project above, and is called in the service typescript file of the angular project.

The code of the back-end is in this zip repo.