顯示具有 Visual Studio 標籤的文章。 顯示所有文章
顯示具有 Visual Studio 標籤的文章。 顯示所有文章

2022年5月15日 星期日

Visual Studio 2022 安裝與設定 .NET 6 Blazor 開發環境教學 (2022年5月)

安裝與設定 .NET 6 Blazor 開發環境教學 (2022年5月)

對於尚未接觸過 Blazor 這個超級火紅與強大的 Web UI 開發工具,請按照這篇教學文章,進行安裝 Blazor 的開發環境。

這篇文章將會在 Windows 11 作業系統底下來進行操作,當然,也可以將 Visual Studio 2022 到 Windows 10 作業系統下。

下載 Visual Studio 2022

為了要能夠開發 Blazor 的Web應用程式,可以有多種方式來選擇,而在這裏將會使用比較簡單的做法,那就是安裝與使用 Visual Studio 2022 IDE 開發工具,做到可以開發出 Blazor 的 Web 應用程式專案。

更多關於 Visual Studio 2022 的資訊,可以參考 https://docs.microsoft.com/zh-tw/visualstudio/productinfo/vs-roadmap 這個連結內容。

首先,請使用瀏覽器打開這個網址 認識 Visual Studio 系列 ,找到如下圖的 [認識 Visual Studio 系列] 文字,在其文字下方的最左方將會看到 [Visual Studio] 工具圖示,請點選 [下載 Visual Studio] 這個按鈕,將會看到有三個選項,分別為 [Community 2022]、[Professional 2022]、[Enterprise 2022] 這三個選項。

認識 Visual Studio 系列

對於這三種 Visual Studio 2022 開發工具,[Community 2022] 版本是免費使用的,而對於 [Professional 2022]、[Enterprise 2022] 這兩個版本,則是需要付費購買,才能夠使用的。對於要開發 Blazor 專案,這三個類型的 Visual Studio 2022 都可以做到,因此,在這篇文章中,將會使用 Visual Studio 2022 Community 這個版本來做說明。

在點選 [下載 Visual Studio] 按鈕後所彈出的子視窗內,點選 [Community 2022] 這個選項。

稍待一段時間,當檔案 [VisualStudioSetup.exe] 下載完成之後,可以從瀏覽器上直接點選並且開啟這個檔案,底下螢幕截圖將會使用 Microsoft Edge 瀏覽器所出現的畫面內容。

開啟 VisualStudioSetup.exe

開始進行安裝 Visual Studio 2022

首先,將會看到 [使用者帳戶控制] 對話窗出現在螢幕上,這裡需要授權且允許這個 Visual Studio Installer 程式可以執行,因此,請點選 [是] 按鈕。

使用者帳戶控制 Visual Studio Installer

接著,將會看到如下面螢幕截圖的畫面,請在此對話窗內點選 [繼續] 按鈕,以便同意繼續進行安裝 Visual Studio 2022

Visual Studio Installer

在此之前,將會從網路取得要安裝 Visual Studio 2022 的最新資訊,一旦 [Visual Studio Installer] 安裝程式準備就緒,就會出現 [正在安裝 Visual Studio Community 2022 - 17.2.0] 對話窗。

請勾選 [工作負載] > [Web 與雲端] > [ASP.NET 與網頁程式開發] 這個工作負載選項

正在安裝 Visual Studio Community 2022 - 17.2.0

請點選 [個別元件] 標籤頁次,請勾選 [程式碼工具] > [Git for Windows] 這個選項

想要知道這次安裝過程會安裝那些工具到電腦上,可以查看該對話窗最右邊的 [安裝詳細資料] 區域,就會看到相關詳細資料。

Visual Studio 2022 安裝詳細資料

最後,點選右下方 [安裝] 按鈕,開始進行 Visual Studio 2022 應用程式

接下來會看到下面截圖畫面,將會一邊下載安裝程式,一邊進行安裝

Visual Studio 2022 安裝過程

啟動 Visual Studio 2022

一旦安裝完成之後,將會看到如下圖的 [登入 Visual Studio] 視窗出現,在這裡建議使用任何 Microsoft 帳號來登入 Visual Studio,以便可以享受到更多好處。

不過,在這裡,將會先不使用 微軟 帳號登入到 Visual Studio 內,因此,點選最下方的 [不是現在,以後再說] 這個文字連結。

Visual Studio 2022 第一次啟動

接下來要來設定 Visual Studio 的作業環境操作模式與主題布景

作者個人對於開發設定比較喜歡使用 [Visual C#] 操作模式,因此,請在 [開始設定] 這個文字右方的下拉選單,選擇 [Visual C#] 這個選項

另外對於主題布景部分,作者個人比較偏好 [淺色],因此,在 [選擇您的色彩佈景主題] 下方,選擇了 [淺色] 這個主題佈景,當然,可以依照個人喜好,選擇自己喜歡的主題佈景,而且日後也可以在 Visual Studio 開發工具內進行切換變更。

Visual Studio 2022 設定開始環境

現在,可以點選 [啟動 Visual Stuio] 按鈕,進行啟動作業

建立一個 Blazor Server 專案

當 Visual Studio 2022 啟動之後,便會看到下面的對話窗畫面。

現在要來確認安裝好的 Visual Studio 2022 開發工具,是否可以順利開發 Blazor 專案

Visual Studio 2022 啟動畫面

點選右下方的 [建立新的專案] 按鈕

現在將會看到 [建立新專案] 對話窗出現在螢幕上

從中間的清單中,將會看到 [Blazor Server 應用程式] 項目,請點選這個項目

接著,點選右下方的 [下一步] 按鈕

Visual Studio 2022 建立新專案 對話窗

此時會看到 [設定新的專案] 對話窗出現在螢幕上

在這裡僅是要做測試之用,因此,點選右下方的 [下一步] 按鈕

Visual Studio 2022 設定新的專案 對話窗

在這個 [其他資訊] 對話窗內,直接點選右下方的 [建立] 按鈕

Visual Studio 2022 其他資訊 對話窗

執行與測試 Blazor Server 專案

一旦 Visual Studio 成功建立 Blazor 專案,並且打開該專案,將會出現如下圖畫面

Visual Studio 2022 開啟 Blazor Server 專案

現在要來啟動這個 Blazor 專案,請在 Visual Studio 2022 最上方找到深綠色三角形,在該三角形右方有顯示 BlazorApp 文字,也就是上面螢幕截圖的紅色圓圈數字1所標示的地方。

點選這個按鈕,以便啟動這個 Blazor 專案,並且進入除錯模式

若這台電腦第一次安裝與使用 Visual Studio 來執行 Blazor 專案,或者SSL開發者使用憑證已經失效,將會看到底下畫面,請點選右下方的 [是] 按鈕,將這個 ASP.NET Core 需要用到的 SSL 自我簽署憑證安裝到這台電腦上。

信任 ASP.NET Core SSL 憑證

對於現在出現的 [安全性警告] 對話窗,請點選右下方的 [是] 按鈕,以便可以安裝此憑證。

安全性警告 對話窗

若沒有發生意外,將會看到瀏覽器自動開啟,顯示出如下圖畫面,這個瀏覽器顯示的內容將會是 Blazor 專案所設計的網頁內容

Blazor 專案成功執行與啟動



 

2021年4月14日 星期三

使用 Visual Studio 2019 進行遠端 Windows Forms 應用程式除錯

使用 Visual Studio 2019 進行遠端 Windows Forms 應用程式除錯

安裝 Visual Studio 2019 遠端工具

  • 請在遠端電腦上,通常是沒有安裝 Visual Studio 2019 開發工具的電腦

  • 打開網址 https://visualstudio.microsoft.com/zh-hant/downloads/

  • 在下方找到 [Visual Studio 2019 的工具] > [Visual Studio 2019 遠端工具]

    您可利用 Visual Studio 2019 遠端工具,在未安裝 Visual Studio 的電腦上進行應用程式部署、遠端偵錯、遠端測試、效能分析以及單元測試。

  • 下載並且安裝 Visual Studio 2019 遠端工具

  • 當出現 [Visual Studio 2019 遠端工具安裝程式] 視窗

  • 勾選 [我同意授權條款及條件]

  • 點選 [安裝] 按鈕

  • 一旦安裝完成後,點選 [關閉] 按鈕

設定遠端偵錯程式

  • 在遠端電腦上,從 [開始] 找到 [Remote Debugger]

  • 啟動執行這個城市

  • 當 [遠端偵測組態] 是窗出現之後,確認相關設定無誤

  • 點選 [設定遠端偵測] 按鈕

  • 此時將會出現 [Visual Studio 2019 遠端偵測工具視窗]

建立 Windows Forms 專案,並且開始進行遠端偵錯

  • 請在開發者電腦上開啟 Visual Studio 2019

  • 建立一個 Windows Forms 專案

  • 隨意加入一些程式碼,並且在任意程式碼上,加入中斷點

  • 打開該 Windows Forms 的專案屬性視窗 (可以使用滑鼠雙擊 Properties 節點)

  • 切換到 [偵錯] 標籤頁次

  • 找到 [使用遠端電腦] 欄位,輸入剛剛那台遠端電腦的 IP

  • 找到 [驗證模式] 欄位,選擇輸入 [Windows 驗證]

  • 建置這個專案,確定沒有錯誤產生

  • 在遠端電腦上建立資料夾,其路徑與 Visual Studio 電腦上的 Debug 資料夾相同,接著從 Visual Studio 電腦複製您剛才建置的可執行檔到遠端電腦上新建立的資料夾

  • 現在可以開始進行該專案的除錯

  • 此時會出現 [Windows 安全性] 視窗

  • 請在這裡輸入遠端電腦的認證之帳密

  • 現在可以在遠端電腦上看到這個 Windows Forms 程式跑起來了

  • 點選遠端電腦上 [Form1] 視窗內的 [button1] 按鈕

  • 若此時 Visual Studio 停在剛剛設定的中斷點上,那就表示這個遠端專案除錯正確無誤運作中

 










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,開啟剛剛建立的專案,啟動模擬器,重新再執行一次