2021年3月24日 星期三

平行處理、多執行緒、非同步設計等相關課程之 Visual Studio 2019 安裝說明

平行處理、多執行緒、非同步設計等相關課程之 Visual Studio 2019 安裝說明

在這篇文章中,將會說明對於要參加 .NET Go 教育訓練課程的時候,Visual Studio 2019 這個軟體的安裝步驟與內容

  • 打開 Visual Studio 2019 下載 網頁

    Visual Studio 2019 下載

  • 原則上,可以下載 [社群] 這個免費的版本,若你本身擁有 Visual Studio 其他付費版本的使用授權,可以依照你購買的使用者授權,下載 [Professional] 或者 [Enterprise] 版本

  • 點選你選擇的 Visual Studio 2019 版本的 [免費下載] 或者 [免費試用] 按鈕

  • 當安裝檔案下載完成之後,開啟下載的安裝檔案

  • 當 Visual Studio Installer 視窗出現之後,點選該視窗右下方的 [繼續] 按鈕

    Visual Studio Installer

  • 現在將會看到 Visual Studio 2019 安裝程式的工作負載頁次畫面

    Visual Studio 2019 安裝程式的工作負載頁次

  • 請勾選 [.NET 桌面開發] 之 工作負載 選項

    .NET 桌面開發

  • 請勾選 [.NET Core 跨平台開發] 之 工作負載 選項

    .NET Core 跨平台開發

  • 請勾選 [ASP.NET 與網頁程式開發] 之 工作負載 選項

    ASP.NET 與網頁程式開發

  • 在 Visual Studio 2019 安裝程式畫面右下方,點選 [安裝] 按鈕

  • Visual Studio 安裝程式對話窗將會顯示正在進行安裝軟體的進度

    Visual Studio 安裝程式對話窗

  • Visual Studio 安裝完成後,會顯示下圖,若此時你不想登入,可以點選 [不是現在,以後再說],若想要登入,你需要擁有 Micosoft 帳號 (例如 @Hotmail.com 或者 @outlook.com 帳號)

    登入 Visual Studio

  • 接下來需要設定你喜歡的色彩佈景主題,在這裡,可以選擇預設值,接著按下 [啟動 Visual Studio] 按鈕

    Visual Studio 色彩佈景主題

  • 現在若看到下面的畫面,則表示你的 Visual Studio 安裝完成了

    Visual Studio 2019 開始

 



Xamarin.Forms 之 Visual Studio 2019 完整安裝攻略說明

Xamarin.Forms 之 Visual Studio 2019 完整安裝攻略說明

在這篇文章中,將會說明對於要參加 .NET Go 教育訓練課程,且要學習 Xamarin.Forms 工具使用的課程,你的 Visual Studio 2019 這個軟體與電腦的需要按照底下安裝步驟與說明內容進行設定

確認與啟用虛擬化技術

  • 首先,若你的電腦安裝的不是 Windows 10 Professional 以上的版本,請重新安裝一台至少為 Windows 10 Profession 版本的作業系統

    若你的電腦為 家用版 Home Edition,請不要嘗試去做升級為 Professional 版本的工作,你需要重新安裝一台至少為 Windows 10 Profession 版本的作業系統,否則,請不要繼續底下的相關安裝設定工作

  • 請確認你的電腦 BIOS 或者 UEFI 有啟用虛擬化技術,這部分可以參考 Step-By-Step: Enabling Hyper-V for use on Windows 10 文章

  • 現在,可以繼續來進行底下的其他安裝與設定工作

啟動 Hyper-V

  • 一旦完成上面提到 [確認與啟用虛擬化技術] 檢查與設定工作,請進行開機

  • 作業系統開機完成後,打開 [工作管理員] > [效能] 標籤頁次

  • 從右下方將會看到 [模擬] 欄位將會顯示 [已啟用],表示這台電腦具備可以使用虛擬化的技術

  • 請先點選左下方的 [視窗] 圖示,接著點選 [齒輪] 圖示的設定選項,便會看到下圖畫面

    Windows 10 系統設定

  • 點選 [應用程式] 的圖示,緊接著會看到底下的 [應用程式與功能] 這個視窗

  • 請點選這個 [應用程式與功能] 內的 [程式和功能] 選項

  • 當 [程式和功能] 視窗出現之後,點選左邊的 [開啟或關閉 Windows 功能] 選項

  • 在 [Windows 功能] 視窗出現之後,勾選 [Hyper-V] 這個選項

  • 接著 勾選 [Windows Hypervisor 平台] 這個選項

  • 最後點選右下方的 [確定] 按鈕

  • 接著,你需要重新開機

安裝 Visual Studio 2019

  • 打開 Visual Studio 2019 下載 網頁

    Visual Studio 2019 下載

  • 原則上,可以下載 [社群] 這個免費的版本,若你本身擁有 Visual Studio 其他付費版本的使用授權,可以依照你購買的使用者授權,下載 [Professional] 或者 [Enterprise] 版本

  • 點選你選擇的 Visual Studio 2019 版本的 [免費下載] 或者 [免費試用] 按鈕

  • 當安裝檔案下載完成之後,開啟下載的安裝檔案

  • 當 Visual Studio Installer 視窗出現之後,點選該視窗右下方的 [繼續] 按鈕

    Visual Studio Installer

  • 現在將會看到 Visual Studio 2019 安裝程式的工作負載頁次畫面

     Visual Studio 2019 安裝程式的工作負載頁次

  • 請勾選 [使用 .NET 進行行動開發] 之 工作負載 選項

    使用 .NET 進行行動開發

  • 請勾選 [.NET Core 跨平台開發] 之 工作負載 選項

    .NET Core 跨平台開發

    選擇這個是某些課程將會帶領大家進行透過 Xamarin.Forms 應用程式,可以存取後端 Web API 教學與練習

  • 在 Visual Studio 2019 安裝程式畫面右下方,點選 [安裝] 按鈕

  • Visual Studio 安裝程式對話窗將會顯示正在進行安裝軟體的進度

    Visual Studio 安裝程式對話窗

  • Visual Studio 安裝完成後,會顯示下圖,若此時你不想登入,可以點選 [不是現在,以後再說],若想要登入,你需要擁有 Micosoft 帳號 (例如 @Hotmail.com 或者 @outlook.com 帳號)

    登入 Visual Studio

  • 接下來需要設定你喜歡的色彩佈景主題,在這裡,可以選擇預設值,接著按下 [啟動 Visual Studio] 按鈕

    Visual Studio 色彩佈景主題

  • 現在若看到下面的畫面,則表示你的 Visual Studio 安裝完成了

    Visual Studio 2019 開始

進行 Android 開發環境的設定

  • 在 Visual Studio 2019 對話窗的右下方,點選 [建立新的專案] 按鈕

  • 現在會看到 [建立新專案] 對話窗

  • 在上方文字搜尋盒內輸入 Xamarin 文字,將會看到所有與 Xamarin 有關的專案範本都會顯示出來

  • 請選擇 [行動應用程式 (Xamarin.Forms)] 選項

  • 點選 [下一步] 按鈕

    Visual Studio 2019 建立新專案

  • 在 [設定新的專案] 對話窗內

    • 於 [專案名稱] 欄位內,輸入要建立的專案名稱
    • 這裡輸入 MyFirstForms (當然,你可以輸入任何的專案名稱)

    請注意,檔案名稱、路徑位置名稱,不要有中文字或者特殊符號文字

    路徑位置請不要設定到你的桌面上

    建議在你電腦的根目錄下,建立一個練習用的目錄,將這裡的路徑位置指向剛剛建立的目錄

    Visual Studio 2019 設定新的專案

  • 若有看到 [Windows 安全性警訊] 視窗出現,請點選 [允許存取] 按鈕

    Windows 安全性警訊

  • 此時將會看到 [新增行動應用程式] 對話窗出現

  • 請選擇 [空白] 這個選項

  • 點選右下方的 [建立] 按鈕

    Visual Studio 2019 新增行動應用程式

  • 稍待一段時間,這個 Xamarin.Forms 專案將會建立完成

    Visual Studio 2019 Xamarin.Forms 專案將會建立完成

  • 原則上,對於第一次安裝好且第一次建立完成 Xamarin.Forms 的專案,應該會看到底下的 [Android SDK - 接受授權] 這個對話窗

  • 請點選右下方的 [接受] 按鈕

    Visual Studio 2019 Android SDK - 接受授權

    Visual Studio 2019 Android SDK - 接受授權

  • 若沒有看到上面的視窗,但是卻在 [錯誤清單] 視窗內看到底下的錯誤訊息,請使用滑鼠雙擊這個訊息,就會看到上述的視窗。

    Visual Studio 2019 錯誤清單 缺少 Android SDK

  • 當 Android SDK 安裝與更新完成後

  • 點選 Visual Studio 2019 功能表 [工具] > [Android] > [Android SDK 管理員]

    Visual Studio 2019 功能表 工具 Android

  • 此時,將會看到 Android SDK 及工具 視窗出現

  • 在這裡將會看到這台電腦所設定的 Android SDK 有哪些版本與安裝了那些工具;若有尚未更新到最新版本的訊息出現,可以在這裡進行更新操作

    • 點選 [平台] 標籤頁次,查看有安裝那些 Android SDK 版本
    • 點選 [工具] 標籤頁次,查看有安裝那些 工具

    Visual Studio 2019 Android SDK 及工具 平台

    Visual Studio 2019 Android SDK 及工具 工具

  • 點選 Visual Studio 2019 功能表 [工具] > [Android] > [Android 裝置管理員]

  • 現在將會出現 Android 開發時候可以使用的模擬器

    Visual Studio 2019 Android 裝置管理員

  • 請點選右上方的 [新增] 按鈕,便可以看到底下的畫面

  • 在這個 [新增裝置] 對話窗內,可以設定這個模擬器相關特性

  • 在這裡將會先使用預設值,請點選右下方的 [建立] 按鈕

    Visual Studio 2019 Android 新增裝置 模擬器

  • 由於是第一次使用,所以將會顯示 [接受授權] 對話窗,請點選右下方的 [接受] 按鈕

    Visual Studio 2019 Android 新增裝置 接受授權

  • 等候一些時間,將會線上下載模擬器,並且進行設定,一旦完成後,就會看到底下畫面

  • 請點選 [啟動] 按鈕,啟動這個模擬器

    Visual Studio 2019 Android 模擬器 啟動

  • 也是因為第一次啟動,需要花費比較多的時間,然後就會看到如下圖畫面,Android 模擬器已經成功啟動了。

    Visual Studio 2019 Android 模擬器已經成功啟動了

  • 最後,要來實際在 Android 環境中,執行一個 Xamarin.Forms 專案程式

  • 請在功能表的下方,使用下拉選單 UI 來切換預設專案為 [MyFirstForms.Android]

  • 緊接著在剛剛下拉選單按鈕旁,會看到一個綠色三角形的按鈕,其顯示要在哪個 Android 裝置下來進行執行與除錯

  • 請點選這個綠色三角形按鈕,以便開始進行建置、除錯這個 Android 專案

    開始進行建置、除錯這個 Android 專案

  • 正常情況,將會看到這個 Xamarin.Forms 範例專案成功的在剛剛建立的模擬器上啟動與執行起來

  • 到了這個步驟,你可以確定這件事情,你的電腦已經具備可以開發 Xamarin.Forms 跨平台專案的能力

    剛剛建立的模擬器上啟動與執行 Xamarin.Forms 範例專案 起來

    若在最後的步驟遇到問題,可以關閉模擬器,關閉 Visual Studio ,接著,再重新打開 Visual Studio,開啟剛剛建立的專案,啟動模擬器,重新再執行一次

 








2021年3月19日 星期五

使用 Blazor 專案在 JavaScript 內呼叫 C# 執行個體方法

使用 Blazor 專案在 JavaScript 內呼叫 C# 執行個體方法

當在進行 Blazor 專案程式設計的時候,原則上許多的功能是不需要自行設計相關 JavaScript 程式碼來進行呼叫,因為 Blazor 開發框架中已經具備了許多機制,例如 資料綁定路由 等相關機制,輕鬆地就能做到原先要使用 JavaScript 程式語言能夠做到的事情。

不過,Blazor 存在的目的,並不是要完全取代掉不去使用 JavaScript 程式語言功能,有些時候,需要能夠執行某一 JavaScript 程式碼之後,緊接著要能夠在 JavaScript 內來呼叫 .NET C# 的程式碼,這樣的需求在 Blazor 可以完成的實現出來,而在這裡將會有兩種情境可以使用: 靜態 .NET 方法呼叫 與 實例方法呼叫

在這篇文章中,將會設計一個按鈕,該按鈕點選下去之後,將會執行所綁定 JavaScript,這部分的功能將會是最基本的 HTML 網頁設計功能,而在這個按鈕所綁定的 JavaScript 方法內 (這裡將會呼叫 showPrompt 方法),該 JavaScript 方法將會呼叫 prompt 函式,讓使用者輸入自己的姓名文字,接著將會透過在 .NET C# 所產生的 DotNetObjectReference 物件,在 JavaScript 使用這樣的敘述 DotNetObject.invokeMethodAsync('SayHello', result); 執行該物件所擁有的 SayHello 方法,當然,該方法是使用 C# 所設計的,並且會在 .NET 環境下執行。

透過這樣的機制,便可以將 JavaScript 所取得的字串,傳遞到 .NET C# 變數內,接著透過 Blazor 所提供的資料綁定機制,將這段字串顯示在網頁上。

不過,在這裡首先需要建立起 DotNetObjectReference 物件,在這裡需要指定所用到的執行個體型別,也就是 BindDotNetInstance ,接下來使用 objRef = DotNetObjectReference.Create(helloHelper); 敘述來建立起 DotNetObjectReference物件。

不過,要把這個 objRef 物件傳遞到 JavaScript 函式內,將這個物件設定為 JavaScript 的全域變數,這裡又有兩種方式選擇,可以使用一個按鈕或者使用 Blazor 生命週期的事件 ComponentBase.OnAfterRenderAsync來做到,此時要呼叫 await jsRuntime.InvokeVoidAsync("SetDotNetObjectJS", objRef); 即可。

另外,為了要讓這個 Blazor 元件取得傳遞於 JavaScript 環境中的字串,需要綁定一個委派方法到 helloHelper.HelloHandler 內。

現在來看看如何做出這樣的範例成程式碼。

這篇文章的原始碼位於 bzCallCsharpInstanceMethodFromJavaScript

建立測試用主控台應用程式專案

  • 開啟 Visual Studio 2019
  • 選擇右下方的 [建立新的專案] 按鈕
  • 在 [建立新專案] 對話窗中
  • 從右上方的專案類型下拉按鈕中,找到並選擇 [Web]
  • 從可用專案範本清單內,找到並選擇 [Blazor Server 應用程式]
  • 點選左下方 [下一步] 按鈕
  • 在 [設定新的專案] 對話窗中
  • 在 [專案名稱] 欄位中輸入 bzCallCsharpInstanceMethodFromJavaScript
  • 點選左下方 [下一步] 按鈕
  • 在 [其他資訊] 對話窗中
  • 在 [目標 Framework] 下拉選單中,選擇 [.NET 5.0 (目前)]
  • 點選左下方 [建立] 按鈕

加入客製化 JavaScript

  • 滑鼠右擊 [bzCallCsharpInstanceMethodFromJavaScript] 專案下的 [wwwroot] 節點
  • 從彈出功能表選擇 [加入] > [新增資料夾]
  • 在新增的資料夾,設定該資料夾名稱為 js
  • 接著,滑鼠右擊 [js] 資料夾節點
  • 從彈出功能表選擇 [加入] > [新增項目]
  • 當出現 [新增項目 - bzCallCsharpInstanceMethodFromJavaScript] 對話窗
  • 在右方選擇 [已安裝] > [Visual C#] > [ASP.NET Core] > [Web] > [指令碼]
  • 在中間部份選擇 [JavaScript 檔] 這個項目
  • 在下方名稱欄位內輸入 [JavaScript.js]
  • 最後點選右下方的 [新增] 按鈕

請將底下的 JavaScript 程式碼輸入到這個檔案內

var DotNetObject = {}
function showPrompt(text) {
    var result = prompt(text, 'Type your name here');
    //呼叫該 .NET 執行個體(由類別 BindDotNetInstance 所產生)的 SayHello 方法
    DotNetObject.invokeMethodAsync('SayHello', result);
}
function SetDotNetObjectJS(dotnetHelper) {
    //將該 .NET 執行個體設定成為 JavaScript 的全域變數
    DotNetObject = dotnetHelper;
}

修正 _Host.cshtml 檔案

  • 請在 [Pages] 資料夾內找到並且打開 [_Host.cshtml] 檔案
  • 請找到 <script src="_framework/blazor.server.js"></script> 敘述
  • 在其上方加入這個敘述 <script src="/js/JavaScript.js"></script>

修正 index.razor

  • 請在 [Pages] 資料夾內找到並且打開 [index.razor] 檔案
  • 把底下的程式碼替換掉原先的程式碼
@page "/"
@inject IJSRuntime jsRuntime
@implements IDisposable

<h1>Hello, Blazor 專案在 JavaScript 內呼叫 C# 執行個體方法!</h1>

<div>
    <button class="btn btn-primary" @onclick="SetDotNetObject">設定物件</button>
</div>
<div>
    <button type="button" class="btn btn-primary" onclick="showPrompt('請輸入你的名字')">
        綁定按鈕事件到 JavaScript 上
    </button>
</div>
<div>
    <div class="text-success">@Name</div>
</div>

@code {
    BindDotNetInstance helloHelper = new BindDotNetInstance();
    DotNetObjectReference<BindDotNetInstance> objRef;
    public string Name = "";
    async Task SetDotNetObject()
    {
        // 進行綁定該執行個體的委派方法,以便進行 callback 呼叫
        helloHelper.HelloHandler = x =>
        {
        //將 JavaScript 程式碼取得的文字內容,設定到該 Blazor 元件內的 C# 變數中
        Name = x;
        //通知 Blazor 重新產生最新狀態的 Render Tree
        StateHasChanged();
        };
        objRef = DotNetObjectReference.Create(helloHelper);
        await jsRuntime.InvokeAsync<string>(
            "SetDotNetObjectJS", objRef);
    }
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender == true)
        {
            helloHelper.HelloHandler = x =>
            {
                Name = x;
                StateHasChanged();
            };
            objRef = DotNetObjectReference.Create(helloHelper);
            await jsRuntime.InvokeVoidAsync(
                "SetDotNetObjectJS", objRef);
        }
    }
    public void Dispose()
    {
        objRef?.Dispose();
    }
    class BindDotNetInstance
    {
        public Action<string> HelloHandler;
        [JSInvokable]
        public void SayHello(string message)
        {
            var result = $"你好, {message}!";
            HelloHandler?.Invoke(result);
        }
    }
}

執行並且測試

按下 F5 開始執行這個專案

現在將會看到底下的畫面

請點選 [綁定按鈕事件到 JavaScript 上] 按鈕

最後點選確定按鈕,就會看到底下執行結果