Forem: Zoltan Halasz

Checkpoint on My Journey

Zoltan Halasz — Sat, 28 Oct 2023 09:01:06 +0000

Here it is, it's been two and a half years since working full time as a developer, at a local IT subcontractor company (qubiz.com)

It is a terrific journey, because I learned a lot and also accomplished many things! Just a snapshot of my current role from my last 12 months: we are upgrading an old AngularJS frontend with the latest Angular (at the moment 16.2). I had the opportunity, during the past year, to research a lot of interesting stuff, implement some proof of concept functionality, together with setup for unit testing and component architecture.

I feel that the environment is providing some great incentives to fuel my passion and perform at my best. These motivational factors are:

great mentor who really focuses on the essentials, and without micromanaging, guides my activities
some really hard working and smart work colleagues, who are easy to work with
a great customer, who is willing to explain and open to communication.

My intrinsic motivators that are driving my development journey:

curiosity, and inner drive to discover new things;
willing to try out different approaches, risking also to fail (trial and error);
asking questions, from colleagues and mentor, articles, Stack overflow and even Chat GPT

The process is not easy. There are lots of walls to break and hills to climb, with frustrations on the way. But, from now and then, there is a new discovered feature and issue solved. My way to conquer this summit is a step by step approach, that implied the following activities:

researching new things and technology
building something starting from a simple structure to a more complex solution
improving gradually on the existing complexity, including new services, unit tests, features, and best practices
fixing bugs on the way, and learning the lessons
documenting everything, via a Wiki page, to record all the best practices and saving the main examples that can also be used by other developers.
onboarding junior colleagues to start with the frontend migration, which in itself is a great lesson for me, teaches me lots of stuff about development.

A couple of years ago, I was much more attracted to the backend type of development, but it became clear that a great challenge on the frontend, could be an excellent professional target. I feel that it was worth it, even if momentarily I am not developing for the backend. I think I found a sweet-spot, by luck, by chance or by a coincidence of events. I am happy to see that I can help others and I can contribute to the growth of the project.

Print PDF and Export Excel from RDLC in Asp.Net Core

Zoltan Halasz — Thu, 03 Dec 2020 11:54:51 +0000

This blog post is providing some more insight and the source code to a youtube tutorial, that I consider being worthwile looking at more closely.

Original Youtube video that inspired me:

Github code repo: https://github.com/zoltanhalasz/CoreRDLCReport.git
Live sample application: https://rdlc-aspnetcore.zoltanhalasz.net/

Prerequisites:

Asp.Net Core MVC basics
Basic RDLC knowledge

Steps To follow:

Create an Asp.Net Core 3.1 MVC project
Add following Nuget Packages: "AspNetCore.Reporting", "System.CodeDom", "System.Data.SqlClient"
Modify the Program.cs Class, by making sure it has the below function as: ```csharp

public static IHostBuilder CreateHostBuilder(string[] args) =>
Host.CreateDefaultBuilder(args)
.ConfigureWebHostDefaults(webBuilder =>
{
webBuilder.UseContentRoot(Directory.GetCurrentDirectory());
webBuilder.UseWebRoot("wwwroot");
webBuilder.UseStartup();
});

* Add a new project to the existing solution, a WinForm application. Create an empty RDLC report there, and also a DataSet for the report.

If your Visual Studio does not include the extension for RDLC reports, please take a look 



* Move the empty report to your MVC project, into wwwroot/Reports folder, and the dataset to a ReportDataset folder in the MVC project.

* Configure the dataset and then the RDLC report:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wlacl24gtks4zrarkdtu.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qox30no755ykq7a81bvw.png)

The above report will have a string (text parameter) "prm" in it.

* Create the HomeController in the following way:
```csharp


public class HomeController : Controller
    {
        private readonly ILogger<HomeController> _logger;

        private readonly IWebHostEnvironment _webHostEnvironment;

        public HomeController(ILogger<HomeController> logger, IWebHostEnvironment webHostEnvironment)
        {
            _logger = logger;
            _webHostEnvironment = webHostEnvironment;
            System.Text.Encoding.RegisterProvider(System.Text.CodePagesEncodingProvider.Instance);
        }

        public IActionResult Index()
        {
            return View();
        }

        public IActionResult Print()
        {
            var dt = new DataTable();
            dt = GetEmployeeList();
            string mimetype = "";
            int extension = 1;
            var path = $"{this._webHostEnvironment.WebRootPath}\\Reports\\Employees.rdlc";
            Dictionary<string, string> parameters = new Dictionary<string, string>();
            parameters.Add("prm", "RDLC report (Set as parameter)");
            LocalReport lr = new LocalReport(path);
            lr.AddDataSource("dsEmployee", dt);
            var result = lr.Execute(RenderType.Pdf, extension, parameters, mimetype);
            return File(result.MainStream,"application/pdf");
        }

        public IActionResult Export()
        {
            var dt = new DataTable();
            dt = GetEmployeeList();
            string mimetype = "";
            int extension = 1;
            var path = $"{this._webHostEnvironment.WebRootPath}\\Reports\\Employees.rdlc";
            Dictionary<string, string> parameters = new Dictionary<string, string>();
            parameters.Add("prm", "RDLC report (Set as parameter)");
            LocalReport lr = new LocalReport(path);
            lr.AddDataSource("dsEmployee", dt);
            var result = lr.Execute(RenderType.Excel, extension, parameters, mimetype);
            return File(result.MainStream, "application/msexcel", "Export.xls");
        }
        private DataTable GetEmployeeList()
        {
            var dt = new DataTable();
            dt.Columns.Add("EmpId");
            dt.Columns.Add("EmpName");
            dt.Columns.Add("Department");
            dt.Columns.Add("BirthDate");
            DataRow row;

            for (int i = 1; i< 100; i++)
            {
                row = dt.NewRow();
                row["EmpId"] = i;
                row["EmpName"] = i.ToString() + " Empl";
                row["Department"] = "XXYY";
                row["BirthDate"] = DateTime.Now.AddDays(-10000);
                dt.Rows.Add(row);
            }
            return dt;
        }

    }

Then, add the view for the Home controller (Index.cshtml) ```html

<h1>RDLC Print</h1>

    <a href="../home/print">Print PDF</a>
    <a href="../home/export">Export Excel</a>

This will generate PDF and export excel, based on the dummy data we populated the report.
* The result will be:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1ol7qdhl85u0g8vc2au7.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3e1g5fxduw5pbaw8b9ks.png)

Showing Wildfires on Google Maps with Blazor Server

Zoltan Halasz — Sun, 29 Nov 2020 13:00:48 +0000

One of my favorite web programming YT channels presented this idea during the past weeks. Traversy Media's tutorial was about showing Wildfires using React and Google Maps.

Please, have a look on his approach:
https://youtu.be/ontX4zfVqK8

As I am checking out Blazor Server, I decided to give it a try, to reproduce something similar, using C# and Blazor Server.

The aim of this app is just to show the wildfires of the world, on a map centered on California, using the above mentioned technlogies.

Prerequisites:

basics of Blazor server
intermediate C#
using free component for maps from Radzen Blazor
using Nasa Web Api

The application is live: Link

Github Repo with code: https://github.com/zoltanhalasz/WildFiresBlazor

Steps for the application:

Create a Blazor Server App with Asp.Net Core 3.1
Install Blazor Radzen for Server: https://blazor.radzen.com/get-started
See the tutorial for the Httpclient in Blazor from Tim Corey: https://www.youtube.com/watch?v=cwgck1k0YKU&feature=emb_err_woyt
Our Api will be inserted in appsettings.json

  "NasaAPI": "https://eonet.sci.gsfc.nasa.gov/api/v2.1/categories/8"

Please visit the link to examine the structure of json data, that will be deserialized.

Create folder Data in the project and insert class named Event.cs Have a look on my approach, how to deserialize the json string coming from Nasa, by preparing the corresponding structure of classes.
The page with the wildfires, will be using Google Maps Component, please study that also on Radzen Blazor https://blazor.radzen.com/googlemap
The main logic of the display is presented in the Index.razor component. I will not reproduce it here, since would be just a copy paste from my repo.

I hope this was useful and somebody learnt a bit of Blazor from this.

Simple Cryptocurrency App With Blazor Server Including Excel Export

Zoltan Halasz — Tue, 06 Oct 2020 11:13:22 +0000

For some reason, I started to like developing with Blazor Server, mainly because the rapidity and simplicity of development. I tend to use some free component libraries to speed up development. I still want to mention that all my experience with Blazor Server is only on tutorial/experimental level.

This is just an application to learn Blazor Server, and familiarize with Cryptocurrencies, it has no other purpose.

Prerequisites for this app:

basic Blazor Server (See my previous tutorials)
install Radzen Components in your app see https://blazor.radzen.com/get-started
using the C# wrapper for CoinPaprika Api (to get cryptocurrency info) https://github.com/MSiccDev/CoinpaprikaAPI

Code repository: https://github.com/zoltanhalasz/BlazorCoins

Application is live under: https://blazorcoins.zoltanhalasz.net/

The app works the following way:

the route /cointable will show the top 100 crypto currencies, using the API
clicking the detail per each currency, the route /coinhistory will show a chart and historical data for selected currency
the route /coingrid will show exactly the same info as 1) only in a Radzen Grid

Bonus:

The app has export excel capabilities, which can be achieved doing the following:

create wwwroot/js/DownloadExcel.js

function saveAsExcel(fileName, byteContent) {
    var link = document.createElement('a');
    link.download = fileName;
    console.log(fileName);
    link.href = 'data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,' + byteContent;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

include the file reference at the bottom of _Host.cshtml, just below the other scripts

    <script src="/js/DownloadExcel.js"></script>

install EPPlus, latest, via Nuget Packages

in page /cointable (or where you need to export from excel), insert the markup for a button

 <button class="btn btn-primary" @onclick="GenerateExcel">Download</button>

include the following in the top of the page you want to use Excel Export:

@inject IJSRuntime iJSRuntime;

Write the handlers for GenerateExcel, in the code section of the page where you have the list that you need to export in Excel

private async Task DownloadExcel(IJSRuntime myJSRuntime)
{
        byte[] file;
        if (coinList == null) return;
        ExcelPackage.LicenseContext = LicenseContext.NonCommercial;
        using (var package = new ExcelPackage())
        {
            var worksheet = package.Workbook.Worksheets.Add("Sheet1");
            worksheet.Cells.LoadFromCollection(coinList, true);
            package.Save();
            file = package.GetAsByteArray();
        }

        await myJSRuntime.InvokeAsync<List<CoinInfo>>("saveAsExcel", "CoinList.xlsx", Convert.ToBase64String(file));
    }

    private async Task GenerateExcel()
    {
        await DownloadExcel(iJSRuntime);
    }

Upload and Download Pdf files to/from MS SQL Database using Razor Pages

Zoltan Halasz — Mon, 05 Oct 2020 17:01:50 +0000

As most of my project applications are business related, and I still plan to create such applications, thought about the idea to store attached pdf invoices in a database.

Below is a simple sample application, using Asp.Net Core 3.1 and Razor Pages, for an invoice management system with pdf file upload/download.

The Github repo for the application is here. https://github.com/zoltanhalasz/UploadFile

The application is also online, can be tested out: https://uploadfile.zoltanhalasz.net/

Prerequisites:

beginner/intermediate Razor Pages for Asp.Net Core, see study material here https://mydev-journey.blogspot.com/2019/11/razor-pages-not-for-shaving.html
intermediate C# and SQL
some basic Entity Framework Core.

My sources for learning were:

an MVC version for the upload: https://tutexchange.com/how-to-upload-files-and-save-in-database-in-asp-net-core-mvc/
the download, was discovered using various C# resources. Firstly, we create the database named UploadFile and then a table:

CREATE TABLE [dbo].[Invoices](
    [Id] [int] IDENTITY(1,1) NOT NULL,
    [Number] [int] NOT NULL,
    [Date] [datetime] NOT NULL,
    [Value] [decimal](18, 2) NOT NULL,
    [Attachment] [varbinary](max) NULL,
 CONSTRAINT [PK_Invoices] PRIMARY KEY CLUSTERED ([Id] ASC) WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]
GO

Steps for creating the application:
Create an Asp.Net Razor Pages project
.Net Core version 3.1

Scaffold the database into the models using
https://marketplace.visualstudio.com/items?itemName=ErikEJ.EFCorePowerTools or simply copy my Data folder that is adding the necessary data structures
Alternatively, you can use the more traditional caffolding method: https://www.entityframeworktutorial.net/efcore/create-model-for-existing-database-in-ef-core.aspx

Make sure that the model and dbContext (called UploadFileContext) will be stored in Data folder.

Add to Startup.cs, ConfigureServices method:

 services.AddDbContext<UploadfileContext>(options =>
                  options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection"),           
                    sqlServerOptions => sqlServerOptions.CommandTimeout(100))
                    );

Create Index page, that will show the list of invoices

the page cshtml file will contain the listing of the invoices, together with the download, upload, and delete functionalities

https://github.com/zoltanhalasz/UploadFile/blob/master/UploadFile/Pages/Index.cshtml

the PageModel class will contain the methods to deal with:

a. download the pdf file from the database:

public async Task<IActionResult> OnPostDownloadAsync(int? id)
{
            var myInv = await _context.Invoices.FirstOrDefaultAsync(m => m.Id == id);
            if (myInv == null)
            {
                return NotFound();
            }

            if (myInv.Attachment== null)
            {
                return Page();
            }
            else
            {
                byte[] byteArr = myInv.Attachment;
                string mimeType = "application/pdf";
                return new FileContentResult(byteArr, mimeType)
                {
                    FileDownloadName = $"Invoice {myInv.Number}.pdf"
                };
            }
}

b. delete attached file from database:

public async Task<IActionResult> OnPostDeleteAsync(int? id)
{
            var myInv = await _context.Invoices.FirstOrDefaultAsync(m => m.Id == id);
            if (myInv == null)
            {
                return NotFound();
            }

            if (myInv.Attachment == null)
            {
                return Page();
            }
            else
            {
                myInv.Attachment = null;
                _context.Update(myInv);
                await _context.SaveChangesAsync();
            }

            Invoices = await _context.Invoices.ToListAsync();
            return Page();
}

Add a page to create Invoice Data (this can be done via Razor Pages scaffolding)

see https://github.com/zoltanhalasz/UploadFile/blob/master/UploadFile/Pages/Create.cshtml
and
https://github.com/zoltanhalasz/UploadFile/blob/master/UploadFile/Pages/Create.cshtml.cs

Create an Upload Page that will help with pdf file upload

This will have the file with markup, cshtml, containing the html tags for the form:

page
@model UploadFile.Pages.UploadModel
@{
}

<h1>Upload Invoice</h1>


<hr />
<div class="row">
    <div class="col-md-4">
        <form method="post" enctype="multipart/form-data">
            <div class="form-group">
                <div class="col-md-10">
                    <p>Upload file</p>
                    <input type="hidden" asp-for="@Model.ID" value="@Model.myID" />
                    <input asp-for="file" class="form-control" accept=".pdf" type="file" />
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-10">
                    <input class="btn btn-success" type="submit" value="Upload" />
                </div>
            </div>
        </form>
    </div>
</div>

<div>
    <a asp-page="Index">Back to List</a>
</div>

And for the PageModel class, we will have the handler to deal with the file uploaded:

public class UploadModel : PageModel
{                  

        private readonly UploadfileContext _context;

        public UploadModel(UploadfileContext context)
        {

            _context = context;
        }
        public int ? myID { get; set; }

        [BindProperty]
        public IFormFile file { get; set; }

        [BindProperty]
        public int ? ID { get; set; }
        public void OnGet(int? id)
        {
            myID = id;
        }

        public async Task<IActionResult> OnPostAsync()
        {
            if (file != null)
            {
                if (file.Length > 0 && file.Length < 300000)
                {
                    var myInv = _context.Invoices.FirstOrDefault(x => x.Id == ID);

                    using (var target = new MemoryStream())
                    {
                        file.CopyTo(target);
                        myInv.Attachment = target.ToArray();
                    }

                    _context.Invoices.Update(myInv);
                    await _context.SaveChangesAsync();
                }

            }

            return RedirectToPage("./Index");
        }

}

The end result will be like this:

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

Zoltan Halasz — Sun, 07 Jun 2020 09:19:07 +0000

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. https://youtu.be/cwgck1k0YKU
My application is live: https://httpclientwithmaps.azurewebsites.net
Final project is: https://github.com/zoltanhalasz/HttpClientWithMaps

The way the final application works:

map is centered in Central Europe
click on the map- we will see the neighboring cities with available weather data
click on a red bullet - (marker) - the available weather forecast will be displayed in the table on the right.

Prerequisites:

Dotnet Blazor Server Side Basics - see my previous tutorial
Check Radzen Controls for Maps - check the source https://blazor.radzen.com/googlemap
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) - see repo in his description https://leadmagnets.app/?Resource=HttpClient
B. Add Blazor Radzen to the project, as presented below:
https://blazor.radzen.com/get-started
C. Add the following Changes, described below:

I. 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; }
    }

II. The code from my repo is commented, in order 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.

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

Final result:

Enjoy! Let me know your comments.

Simple Todo App with Blazor Server and Material Blazor

Zoltan Halasz — Fri, 01 May 2020 10:19:14 +0000

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 cool new 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 for this topic. 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:

Install-Package MatBlazor
Add @using MatBlazor in main _Imports.razor
add to _Host.cshtml (head section)

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

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:

@page "/todos"
@inject IMatToaster Toaster
@using TodoList_BlazorServer.Data


<h1>Todo Manager App</h1>

<div class="row">
    <div class="col-md-4">
        <MatTextField @bind-Value="@myTodoText" Label="Add todo task here"></MatTextField>
    </div>
    <div class="col-md-4">
        <MatDatePicker @bind-Value="@myDeadline"></MatDatePicker>
    </div>
    <div class="col-md-4">
        <MatButton Raised="true" Icon="playlist_add" OnClick="@Click">Add Todo</MatButton>
    </div>
</div>

@if (TodoList != null && TodoList.Count>0)
{
    <table class="table">
        <thead>
            <tr>
                <th>Ready?</th>
                <th>Description</th>
                <th>Deadline</th>
                <th>Complete</th>
                <th>Delete</th>
                <th>Edit</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var td in TodoList)
            {
            <tr>
                <td>
                    <MatCheckbox @bind-Value="@td.IsCompleted" Disabled="true"></MatCheckbox>
                </td>
                <td>@td.Todo</td>
                <td>@td.Deadline.ToShortDateString()</td>
                <td><MatButton Icon="done" Outlined="true" @onclick="@(e=> completeItem(td.Id))">Complete</MatButton></td>
                <td><MatButton Icon="delete" Outlined="true" @onclick="@(e=> deleteItem(td.Id))">Delete</MatButton></td>
                <td><MatButton Icon="edit" Outlined="true" @onclick="@(e=> editItem(td.Id))">Edit</MatButton></td>
            </tr>
            }
        </tbody>
    </table>
}

@code {
    private List<TodoModel> TodoList = new List<TodoModel>();
    string myTodoText = null;
    DateTime? myDeadline;
    int editedID = 0;


    private void Click(MouseEventArgs e)
    {
        if (myTodoText == null)
        {
            Toaster.Add("Cannot add empty values", MatToastType.Warning, "Todo List", null);
            return;
        }

        if (editedID == 0)
        {              
            var myTodoItem = new TodoModel()
            {
                Id = TodoList.Count() + 1,
                Deadline = myDeadline == null ? DateTime.Now.AddDays(1) : ((DateTime)myDeadline),
                Todo = myTodoText,
                IsCompleted = false
            };
            TodoList.Add(myTodoItem);
            myTodoText = null;
            myDeadline = null;
            Toaster.Add("New todo added.", MatToastType.Info, "Todo List", null);
        }
        else
        {
            var myTodo = TodoList.FirstOrDefault(x => x.Id == editedID);
            myTodo.Todo = myTodoText;
            myTodo.Deadline = myDeadline == null ? DateTime.Now.AddDays(1) : ((DateTime)myDeadline);

            myTodoText = null;
            myDeadline = null;
            Toaster.Add("Todo edit finished.", MatToastType.Info, "Todo List", null);
            editedID = 0;
        }

    }

    void deleteItem(int id)
    {
        var myTodo = TodoList.FirstOrDefault(x => x.Id == id);
        TodoList.Remove(myTodo);
        Toaster.Add("Todo removed.", MatToastType.Info, "Todo List", null);
    }

    void completeItem(int id)
    {
        var myTodo = TodoList.FirstOrDefault(x => x.Id == id);
        myTodo.IsCompleted = !myTodo.IsCompleted;
        Toaster.Add("Todo status changed.", MatToastType.Info, "Todo List", null);
    }

    void editItem(int id)
    {
        var myTodo = TodoList.FirstOrDefault(x => x.Id == id);
        myTodoText = myTodo.Todo;
        myDeadline = myTodo.Deadline;
        editedID = id;
    }
}

D. Final result:

My Journey with Blazor Server

Zoltan Halasz — Thu, 30 Apr 2020 09:41:54 +0000

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
tutorial series on youtube from Nick Chapsas: https://www.youtube.com/watch?v=HFvPKmS2gig&list=PLUOequmGnXxPrY79JGnF72e1Pba8z93zo

Checking the free resources I want to highlight now two of them:

Material Design Components: https://www.matblazor.com/
My small sample app is here, live: https://mat-blazor1.zoltanhalasz.net/
Radzen Blazor Components: https://blazor.radzen.com/
My small sample app is here, live: https://radzen-components-server1.zoltanhalasz.net/menu

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.

HighCharts with Angular - Part 2 - Stock Portfolio with Dashboard

Zoltan Halasz — Mon, 06 Apr 2020 18:58:29 +0000

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: (requires Angular 9 on your machine. Download it, unzip and run npm install in the folder).

https://drive.google.com/file/d/1WHkIrjKyc55lFqbeVGzkwBS18H5VUXNw/view

The back-end, which uses an In-Memory database, and Asp.Net Core Web Api, is based on Chapter 7 of the book mentioned in the previous post, 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:
https://drive.google.com/file/d/1BRYFhhzVcxIS4KXb31VwnJSFossXjgbO/view
I changed the back-end and front-end a little bit, correcting Typos, Formatting (indentation) and slightly, the main Stock class of the project was changed also.

The result will be shown in the browser:

HighCharts with Angular - Part 1 - Introduction

Zoltan Halasz — Mon, 06 Apr 2020 18:51:04 +0000

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 above mentioned book) version of the Chapter 5 example: Angular-Highcharts UI Application (page 125). There is also a form which collects the data (marks by students) that will be used for display in the chart. 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. It requires Angular 9.)
https://drive.google.com/file/d/1ZWuQ64ffE-gLUtKf-NLfGU_hJ8hO1ILD/view

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.
https://drive.google.com/file/d/1EUJxRAV5RDGdvnFoT5VWY0ZLOZdM6dY-/view

Front-End Challenge from Colt Steele: Stepper Form

Zoltan Halasz — Tue, 10 Mar 2020 10:33:53 +0000

In the past weeks I reviewed a bit my front-end (html-css-javascript) lessons, and also found an interesting challenge lately. It is a vanilla js challenge by Colt Steele, published on Youtube: https://youtu.be/qGwR_DSSnuQ

My solution to it:
https://github.com/zoltanhalasz/StepperForm

Working link(live project):
https://codepen.io/zoltanhalasz/project/editor/ApPwKj

Explanation:

I am using a structure with div's with classes and id's that can be targeted by Javascript DOM manipulation.
the script uses lots of functions, and the getElementById used to target the classes/ids
use hide/show for the stepper form via Javascript (manipulating DOM styles)

Recommended reading:

Javascript DOM: https://www.w3schools.com/js/js_htmldom.asp
CSS/Html: https://www.w3schools.com/html/default.asp

From Angular to Ionic - Todo App - Tutorial

Zoltan Halasz — Mon, 09 Mar 2020 11:04:14 +0000

This is the Ionic 5 version of the Todo app presented in previous posts, without applying the formatting and Web Api. My goal was to practice my Angular lessons from last year, and do this with the trendy Ionic framework.

Prerequisites:
a.) javascript/angular intermediate knowledge
b.)check the following Ionic documentation https://ionicframework.com/docs/components/
Especially: button, input, card, alert.
c.) And also please check the steps for creation of simple apps in Ionic:
https://ionicframework.com/getting-started/
d.) code is commented for a better understanding. It's the angular/typescript component file that contains the whole logic, described in the comments, see repo.

Web version is live under the link:
https://ionic5-todo.zoltanhalasz.net/

Repository - zipped.
https://drive.google.com/file/d/14v_qlDgXFgpbiolKVBz-DbWQSJP2ruKU/view