2022年7月23日 星期六

Vulcan Lee 在 .NET / C# 開發環境下提供的教育訓練教學課程

Vulcan Lee 在 .NET / C# 開發環境下提供的教育訓練教學課程

從 2012 年開始進行 .NET / C# 教育訓練課程之後,對於許多開發出來的課程,並不是隨便敷衍的設計出來,這其中我會不斷地針對已經開發出來的課程來進行修正、改版、追加內容,因此,相關的課程是不斷的在變化與強化的。

要完成這樣的一系列課程是一種自我挑戰,讓自己可以看得更高、看得更遠、讓抄襲者永遠無法模仿,因為,這些課程加入了許多巧思與技能在裡面,內行看門道、外行看熱鬧。

我所設計的教學課程,為了要能夠讓入門者、想要精通者都可以喜歡我設計的課程,將會把課程應該具有的特色,所提供的內容將會涵蓋到更多的層面、更多範例碼、更多觀念介紹、更多的動畫來理解艱澀技術應用、更多挑戰應用、更多的日常遇到問題與解決方法、更完整的開發設計指引。

因此,很期望到時候能夠與大家一起來進行這個課程的交流與互動,也希望大家可以從這些課程學到更多知識與經驗,應用在日常開發專案上。

若對於這些課程有興趣,或者想要企業內訊者,可以在此留言,或者到 Xamarin Blazor 實驗室 粉絲團來私訊給我

初探 .NET 平行程式設計 (非同步程式設計系列 之 1 / 6)

這年頭手機都多核心了我們寫的程式還跑在單核上嗎?

一台電腦8核16緒但我們的程式就是跑不快?

平行程式設計是近年來一個很務實的議題,之前 SkillTree 有開過較進階的「勇闖非同步程式設計」,收到許多開發人員的好評但有開發人員反應希望能夠開設更初階一點的入門主題,於是本活動來了!這是專門為了「沒實際摸過平行運算、非同步的開發人員」所設計的,讓你短時間掌握平行程式設計基本概念與觀念。

課程大綱

  • 使用同步程式設計來解決問題
  • 了解同步程式設計的瓶頸與使用非同步程式設計要解決的問題
  • 為什麼要有平行程式設計與微軟提出的解決方案
  • 將待解決問題採用平行、並行非同步程式設計 - 使用 執行緒 與 執行緒集區
  • 了解平行與並行計算的不同
  • 介紹什麼是非同步程式設計
  • 使用 TPL Task Parallel Library 工作平行類別庫 來解決問題
  • 使用 Timer,Background,委派來進行非同步程式設計
  • 使用資料平行處理程式設計來解決問題
  • 使用 PLINQ 來解決問題

等級

入門

需求

  • 具備 C# 程式語言開發經驗
  • 具有 委派 Delegate 的知識與使用技術

想要參加

此課程為 Skill Tree 專屬課程,想要參加者,請隨時注意 Skill Tree 的最新公告

參考網址 : https://skilltree.my/Events/2022/1/9/Parallel-programming-in-dotnet-for-beginners-Batch-2

由 Parallel.For 來看多執行緒程式設計 (非同步程式設計系列 之 2 / 6)

在多執行緒程式設計領域中,有 TPL , ThreadPool , Parallel.For , PLINQ 等等技術,其目的在降低使用複雜度,提供高階程式設計模型,開發者可以很容易地使用這些功能。但坊間流竄許多種各式各樣的奇技淫巧,有些是聽從前輩的建議,有些是自身特定情境中的經驗,這些招式與看法不能說錯,但總是片片斷斷無法有系統的理解背後的原理與限制,所以 SkillTree 舉辦了本活動針對 Parallel.For 做深入的探討,藉由因循漸進的案例讓您充分了解這技術的奧妙。

本課程是平行程式設計的初階,不是程式學習的初階,您必須具備 C# 開發經驗、了解泛型與委派的使用方式,並且具備基本電腦架構運作知識。

本課程的緣由來自臉書討論版上的一連長串討論內容,有興趣的人可以查看 討論串列 螢幕截圖,若你對於這片串列上所提出的問題,或者有人提出的解答,存在著疑問或者更多的問題,那麼,你一定要來報名參加這個課程,因為,你所有的問題都可以從這個課程中獲得解答。

課程大綱

  • Paraller.For 效能驗證
  • Paraller.For 與 Thread 兩者的差異與極限
  • Paraller.For 與 Task(TPL) 相互的優缺點評比
  • Task 實踐與原理探討

等級

入門

需求

  • 具備 C# 程式語言開發經驗
  • 具有 委派 Delegate 的知識與使用技術

想要參加

此課程為 Skill Tree 專屬課程,想要參加者,請隨時注意 Skill Tree 的最新公告

參考網址 : https://skilltree.my/Events/2022/1/16/NET-CSharp-Parallel-Programming-Batch-2

精準解析 .NET Thread 執行緒 (非同步程式設計系列 之 3 / 6)

在 .NET 要建立一個執行緒,將需要指定一個委派方法,而一個執行緒 Thread 代表一個正在同步執行程式碼,若想要同時執行多個委派方法,則需要建立多個執行緒,而一台電腦能夠同時處理執行緒的數量,將會取決於這台電腦上的 CPU 的能力。

身為一個 .NET / C# 程式設計師,想要提升自我能力,使其可以進行平行程式設計技能,就需要具備多執行緒開發技術。透過多執行緒設計出來的程式碼,將可以同時執行多個程式碼,並會有助於整體應用程式的執行效能提升,充分發揮這台電腦 CPU 的執行效能。

然而,如何進行多執行緒的程式設計,將會需要學習 .NET 中的 Thread 物件的使用與操作,當完成此課程之後,你將會具有多執行緒程式設計的能力,並且了解到多執行緒程式設計上會遇到的問題與瓶頸。

課程大綱

  • 執行緒    Thread - 基本認識
  • 產生     Creation
  • 啟動     Start
  • 傳入參數   Parameter
  • 結束     Wait / Join
  • 傳回值    Return Value
  • 優先權    Priority
  • 前景與背景  Foreground / Background
  • 取消     Cancellation
  • 異常與除錯  Exception

等級

中階

需求

  • 具備 C# 程式語言開發經驗
  • 具有 委派 Delegate 的知識與使用技術
  • 了解 平行、並行、同步、非同步等知識

想要參加

此課程為 Skill Tree 專屬課程,想要參加者,請隨時注意 Skill Tree 的最新公告

參考網址 : https://skilltree.my/Events/2022/7/17/analyzing-dot-net-thread

精準解析 .NET Task 工作 (非同步程式設計系列 之 4 / 6)

以往想要進行平行或非同步程式設計(平行計算是一種非同步計算,前者屬於透過 CPU 來做到同時執行的需求,後者大多表示要進行 I/O 或者網路呼叫的時候,所要進行的處理作業),往往需要透過多執行緒來完成,可是要能夠充分駕馭執行緒來完成上述設計需求,對於絕大多數的程式設計師而言,將不是一件簡單的工作;有鑑於此,微軟在 .NET Framework 4.0 之後,推出了 工作平行類別庫 Task Parallel Library (TPL),而在 .NET BCL 中的許多 API,也都改寫成為使用了 TAP 以工作為基礎的非同步模式 Task-based Asynchronous Pattern 的 API,取代以往 APM 與 EAP 的程式設計做法;這樣的改變將會讓 C# 程式設計師可以享受到許多 TPL 類別庫所帶來好處。

使用 TPL 中來執行的工作 Task 物件,通常是從執行緒集區上取得執行緒來以非同步方式進行執行,透過將複雜的執行緒操作封裝到工作物件內,讓程式設計師可以更加輕鬆與容易地來進平行與非同步的需求設計。

當完成此活動之後,你將會具備使用 Task 物件來進行非同步程式設計能力,讓設計出來的應用程式專案不在執行時候發生卡卡現象,充分享受到非同步程式設計所帶來的好處,當然,對於日後要精通 C# 5.0 所提供的 async 與 await 技術,將是不可或缺與必備的知識。

課程大綱

  • 什麼是「工作」(Task)
  • Thread 與 Task 的異同說明
  • Task 的使用情境
    • 產生
    • 啟動或傳入參數
    • 等候結束或傳回值
    • 繼續
    • 狀態
    • 取消
    • 進度
    • 異常與除錯

等級

中階

需求

  • 具備 C# 程式語言開發經驗
  • 具有 委派 Delegate 的知識與使用技術
  • 了解 平行、並行、同步、非同步等知識

想要參加

此課程為 Skill Tree 專屬課程,想要參加者,請隨時注意 Skill Tree 的最新公告

參考網址 : https://skilltree.my/Events/2022/7/10/analyzing-dot-net-task

精通與使用 async 與 await (非同步程式設計系列 之 5 / 6)

在以往想要在 .NET / C# 下進行非同步程式設計的時候,可以套用不同設計模式來做到,這包括了 : Asynchronous Programming Model (APM) / Event-based Asynchronous Pattern (EAP) / Task-based Asynchronous Pattern (TAP);然而這些設計模式還是存有潛在許多問題無法解決,使用起來總是卡卡不順。

當 .NET Framework 4.5 與 C# 5.0 推出之後,對於 .NET 開發者而言,日後面對於非同步程式設計需求變得更加簡單雨容易,而且也方便除錯與開發,這些神奇的事情將會來自於可以透過 async 關鍵字將同步方法轉換為非同步方法,如此,在此非同步方法內便允許使用 await 關鍵字。 一旦使用 await 關鍵字要進行非同步作業呼叫的時候,將不會造成當前執行緒被封鎖直到非同步作業結束,而是立即歸還當前執行緒,這樣的設計方式大幅提升整體系統的運作效能與 UI 流暢回應能力。

在本課程中,將會介紹使用 async 修飾符和 await 關鍵字,如何在 C# 中進行非同步程式設計的作法。 這個課程將會提供相關 async await 的相關知識與觀念,透過不同範例程式碼來理解使用與應用技巧,透過動畫來理解艱澀難懂的技術與知識應用、學會更多日常遇到問題與解決方法、與完整的開發設計指引與口訣。

課程大綱

  • 初次探索 async await 運作方式
  • 編譯器對 async 做了哪些事情
  • 了解非同步工作、方法差異
  • async await 的開發指引與設計口訣
  • 洞悉與活用 async await
  • 更多 await 的相關問題

等級

高階

需求

不建議對於 .NET C# 非同步程式設計沒有經驗人參加此課程

  • 具備 C# 程式語言開發經驗
  • 具有 委派 Delegate 的知識與使用技術
  • 了解 平行、並行、同步、非同步等知識
  • 具有 Thread 執行緒類別使用與程式設計經驗
  • 具有使用 TPL Task 工作類別的使用與程式設計經驗

想要參加

此課程為 Skill Tree 專屬課程,想要參加者,請隨時注意 Skill Tree 的最新公告

正在開發中

Blazor 全端開發,新手村一日脫逃術

在 Visual Studio 2022 正式版即將推出的時候你有沒有發現 Blazor 經常出現在文件內?Blazor 是微軟全新的全端解決方案,它可以讓 C# 開發者只需要會 C# 就可以達到非常棒的網頁開發能力,它與 Web forms, Silverlight的理念類似,讓開發人員只需要會 C# 就可以完成 Web APP,現在競爭激烈,如何讓開發的經驗可以共通 Blazor 就是一個絕佳的選擇,畢竟僅需要會 .NET / C# 就可以開發 Web App 是件相當誘人因素,尤其讓許多桌面應用程式的開發者頭痛的 JavaScript 在這樣的開發方式下,就變成不是必須的考量了。

不相信 Blazor 的能力,或擔心使用 Blazor 造成技術門檻過高?我們準備了一個講者的真實經驗,你會發現使用 Blazor 是可以降低技術門檻的,也讓團隊補人變的更容易

對於身為 .NET C# 開發者而言,想要成為一個全端網站工程師,將不再是夢想,因為透過 Blazor 框架,不需要會 JavaScript ,便可以輕鬆、容易、快速地完成網站專案開發;Blazor 相較於其他前端網頁開發技術,其學習曲線不會十分陡峭,對於 .NET C# 不太有經驗的人,也是可以輕鬆上手的,現在就讓 SkillTree 一起帶你逃離新手村!

課程大綱

  • 網站開發基本知識回顧
  • 了解網頁之 HTML & CSS 轉譯過程、介紹三種網頁開發架構的比較與分析
  • Blazor 雙開發框架解析
  • Blazor Server
    • 運作原理
    • 專案結構
  • Blazor WebAssembly
    • 運作原理
    • 專案結構
    • 如何挑選 Blazor 架構來進行開發
  • Blazor 預設範本專案解析
    • Counter 元件
    • FetchData 元件
    • Razor 語法
    • Dependency Injection 觀念與用法
  • Blazor 新手必學實戰技能
    • 第一個 Blazor
    • C# 程式碼設計方法
    • 單向資料綁定與重新轉譯
    • 互動與事件設計
    • 元件生命週期事件
    • 元件參數傳遞與回應事件
    • C#/JavaScript 互相呼叫
    • 表單欄位輸入與驗證檢查
    • 頁面間的的導航切換'

等級

入門

需求

  • 具備 C# 程式語言開發經驗
  • 具有 委派 Delegate 與 事件 Event 的知識與使用技術
  • 使用過 LINQ, 非同步開發方式
  • 孰悉 HTML, CSS 語言用法
  • 原則上不需要了解與使用到 JavaScript

想要參加

此課程為 Skill Tree 專屬課程,想要參加者,請隨時注意 Skill Tree 的最新公告

參考網址 : https://skilltree.my/Events/2021/12/11/Blazor-for-Beginners










2022年7月22日 星期五

MAUI : 如何建置和執行 .NET MAUI Blazor 應用程式教學

如何建置和執行 .NET MAUI Blazor 應用程式教學

在上一篇文章中 第一次體驗與建立 毛伊 MAUI 應用程式 並與 Xamarin.Forms 進行比較教學 ,說明到如何建立一個 MAUI 專案,可以建立出跨平台的 App,而這個應用程式,可以在這些平台上順利地執行,而且僅需要設計一套 UI 與 C# 商業邏輯程式碼,可謂非常的方便與好用,對於 UI 的設計部分,則是採用了 XAML 這個標記宣告語言來設計。

在這篇文章中,將會建立一個 MAUI 專案,該專案採用的 Blazor 方式來開發出一個跨平台執行的應用程式,當然,商業邏輯部分一定是使用 C# 程式語言,而對於 UI 的部分,毫無意外的,將會採用 HTML / CSS 與 Razor 語法來進行設計。

建立 .NET MAUI Blazor 專案

  • 啟動 Visual Studio 2022
  • 看到 Visual Studio 2022 對話窗
  • 請點選右下方的 [建立新的專案] 表示透過程式碼 Scaffolding 選擇專案範本以開始使用
  • 當出現 [建立新專案] 對話窗
  • 在中間最上方有三個下拉選單控制項
  • 切換 [所有語言] 下拉選單控制項為 [C#]
  • 切換 [所有專案類型] 下拉選單控制項為 [MAUI]
  • 此時,在中間區域將會看到有三種專案範本可以選擇
  • 請點選中間那個 [.NET MAUI Blazor 應用程式] 此專案可用於建立適用於 iOS、Android、Mac Catalyst、Tizen 和使用 Blazor 的 WinUI 的 .NET MAUI 應用程式
  • 最後,點選右下方的 [下一步] 按鈕

  • 在 [設定新的專案] 對話窗出現後
  • 在 [專案名稱] 欄位內輸入 MyFirstMAUIBlazor
  • 點選右下方的 [下一步] 按鈕
  • 看到 [其他資訊] 對話窗,點選右下方的 [建立] 按鈕
  • 稍微等候 Visual Studio 建立這個專案
  • 底下是建立好的 MAUI 整體方案的結構

理解 MAUI Blazor 專案結構

從上方的方案總管視窗可以看到,這裡產生的專案結構與單純採用 XAML 方式開發的 MAUI 專案有著很大的不同,其中,對於有開發過 Blazor 專案的開發者而言,將會看到這裡有著許多 Blazor 專案才有的結構的檔案,例如 : _Imports.razor , wwwroot , Counter.razor , Index.razor 等等。

對於個別平台的程式進入點部分的檔案,與單純採用 XAML 建立的 Blazor 專案相同,所以,從這裡將會開始打開 [MauiProgram.cs] 這個檔案開始進行分析,底下是這個檔案的內容。

using Microsoft.AspNetCore.Components.WebView.Maui;
using MyFirstMAUIBlazor.Data;

namespace MyFirstMAUIBlazor;

public static class MauiProgram
{
	public static MauiApp CreateMauiApp()
	{
		var builder = MauiApp.CreateBuilder();
		builder
			.UseMauiApp<App>()
			.ConfigureFonts(fonts =>
			{
				fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
			});

		builder.Services.AddMauiBlazorWebView();
		#if DEBUG
		builder.Services.AddBlazorWebViewDeveloperTools();
#endif
		
		builder.Services.AddSingleton<WeatherForecastService>();

		return builder.Build();
	}
}

在 [CreateMauiApp] 這個靜態方法內,透過 [MauiApp.CreateBuilder()] 方法,取得了一個型別為 [MauiAppBuilder] 的 builder 物件,之後有呼叫 builder.Services.AddMauiBlazorWebView(); 方法,宣告相依性注入容器 DI / IoC Container 要註冊 Blazor 會用到的相關服務,之後也使用了 builder.Services.AddSingleton(); 這個敘述,註冊了這個 Blazor 頁面會用到的服務。

打開 [App.xaml.cs] 檔案,將會看到在建構式內,有 MainPage = new MainPage(); 這行敘述,這表示這個 MAUI Blazor 第一個要顯示的頁面將會是 [MainPage.xaml] 這個檔案,底下將會是這個檔案的內容

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MyFirstMAUIBlazor"
             x:Class="MyFirstMAUIBlazor.MainPage"
             BackgroundColor="{DynamicResource PageBackgroundColor}">

    <BlazorWebView HostPage="wwwroot/index.html">
        <BlazorWebView.RootComponents>
            <RootComponent Selector="#app" ComponentType="{x:Type local:Main}" />
        </BlazorWebView.RootComponents>
    </BlazorWebView>

</ContentPage>

在這個 [MainPage.xaml] 檔案中,將會看到 ContentPage 這個頁面內根項目為 BlazorWebView ,關於這個元件的介紹,可以參考 使用 BlazorWebView 在 .NET MAUI 應用程式中裝載 Blazor Web 應用程式 ,在這個元件內指定了要顯示的頁面為 [wwwroot/index.html] ,因此,底下將會是 wwwroot 資料夾內的 index.html 檔案內容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
	<title>MyFirstMAUIBlazor</title>
	<base href="/" />
	<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
	<link href="css/app.css" rel="stylesheet" />
	<link href="MyFirstMAUIBlazor.styles.css" rel="stylesheet" />
</head>

<body>

	<div class="status-bar-safe-area"></div>

	<div id="app">Loading...</div>

	<div id="blazor-error-ui">
		An unhandled error has occurred.
		<a href="" class="reload">Reload</a>
		<a class="dismiss">🗙</a>
	</div>

	<script src="_framework/blazor.webview.js" autostart="false"></script>

</body>

</html>

在這個 [index.html] 檔案內的標頭部分,僅宣告一些要參考用到的 CSS,這裡 <div id="app">Loading...</div> 將會是 Blazor 要顯示頁面的地方,而在最後面的 <script src="_framework/blazor.webview.js" autostart="false"></script> 敘述,則是引入一段 JavaScript ,用來做到 Blazor 頁面可以正常進行資料綁定與 Render 渲染的動作,實作出動態的 SPA 頁面效果。

在這個專案裡面,似乎沒有找到 [App.razor] 這個 Blazor 系統進入點的原件,而室友發現到一個 [Main.razor] 這個 Blazor 元件檔案,底下將會是這個檔案的內容

<Router AppAssembly="@typeof(Main).Assembly">
	<Found Context="routeData">
		<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
	</Found>
	<NotFound>
		<LayoutView Layout="@typeof(MainLayout)">
			<p role="alert">Sorry, there's nothing at this address.</p>
		</LayoutView>
	</NotFound>
</Router>

這個 Main.razor 檔案內容,與 Blazor 專案內的 App.razor 檔案十分相似,也是用於當 Blazor 頁面要進行導航的時候,會先到這裡來進行路由處理,若指定的路由路徑不存在,則會顯示 Sorry, there's nothing at this address. 這樣的文字,若指定的路由存在於系統內,將會導航並且顯示這個頁面內容到畫面上。

在 [Shared] 資料夾內,有看到 [MainLayout.razor] 與 [NaviMenu.razor] 這兩個元件,分別表示了這個 Blazor 頁面的版面配置設定與宣告,和導航面板的設計,底下將會是這兩個檔案的內容

[MainLayout.razor]

@inherits LayoutComponentBase

<div class="page">
	<div class="sidebar">
		<NavMenu />
	</div>

	<main>
		<div class="top-row px-4">
			<a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
		</div>

		<article class="content px-4">
			@Body
		</article>
	</main>
</div>

[NaviMenu.razor]

<div class="top-row ps-3 navbar navbar-dark">
	<div class="container-fluid">
		<a class="navbar-brand" href="">MyFirstMAUIBlazor</a>
		<button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
			<span class="navbar-toggler-icon"></span>
		</button>
	</div>
</div>

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
	<nav class="flex-column">
		<div class="nav-item px-3">
			<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
				<span class="oi oi-home" aria-hidden="true"></span> Home
			</NavLink>
		</div>
		<div class="nav-item px-3">
			<NavLink class="nav-link" href="counter">
				<span class="oi oi-plus" aria-hidden="true"></span> Counter
			</NavLink>
		</div>
		<div class="nav-item px-3">
			<NavLink class="nav-link" href="fetchdata">
				<span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
			</NavLink>
		</div>
	</nav>
</div>

@code {
	private bool collapseNavMenu = true;

	private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;

	private void ToggleNavMenu()
	{
		collapseNavMenu = !collapseNavMenu;
	}
}

現在可以開始執行這個專案,看看會顯示甚麼結果。

在最上方工具列中間區域,會看到一個綠色實體三角形,請下拉這個下拉選單控制項,從這裡個清單中,選擇 [Android Emulators] > [Pixel 5 - API 32 (Android 12.1 - API 32)] 這個選項

這裡將會是執行結果

此時,點選螢幕右上方的漢堡按鈕,將會彈出一個功能表內容,請點選 [+ Counter] 這個項目

現在,畫面如下,若點選畫面上的 [Click me] 按鈕,將會看到上方的文字會有所變化