James's Tech & Life Blog

使用 .NET MAUI 開發 Windows 應用不是什麼難事：

看看如何透過 Visual Studio 的安裝來設定相關的開發環境囉~~

這不是一個什麼 .NET 的新特點了…只是一個犯蠢的紀錄。

只是近期常常發生這種犯蠢的事情，所以來我獨自筆記一下。

上篇提到：

想必各位應該知道要做啥了~~~

此為最終結果：

文長，慎入…

承前篇 簡單易用的統計圖表 UI 控制元件 - LiveCharts2 ，使用了 Avalonia UI 作為展示，

不用用 .NET MAUI 展示一下跨平台的支援度就可惜了~~~

如果需要在 UI 上需要呈現統計圖表的話，LiveCharts2 是一套很不錯的統計圖表的套件，除了完全 OpenSource 外也如官網所提到的，對於 .NET 相關跨平台 UI Framework 都有支援。

https://livecharts.dev/#frameworks

如果考慮 UI 呈現的感覺與效果，個人覺得 LiveCharts2 實在稱的上是 .NET 跨平台開發者在統計圖表上的不二選擇！

在前一篇 "Avalonia.MAUI Hybrid 之使用 .NET MAUI Essentials 實作篇 - I" 所完成的基礎下，在此篇就能繼續加入相關的 .NET MAUI Essentials 的使用。

不過，還是要提醒一下，如果未完成 Visual Studio 所提供的 .NET MAUI 開發，並完成 Android 、 iOS 環境所需的建置。

那將無法完成本篇所講的部分測試結果。

Avalonia.MAUI Hybrid 之使用 .NET MAUI Essentials 介紹篇 提到的相關部分，如果是沒有接觸過 Avalonia UI 跟 .NET MAUI 一段時間的話，感覺要實際使用會有點難。

雖然 Avalonia.MAUI Hybrid 的 Repo: Avalonia.MAUI Hybrid 中有提供 Sample Code，但不知道為啥直接要使用時搞了一陣子都沒辦法成功。

最後只好自己實際來操作一次，透過 Avalonia UI 所提供的 Visual Studio 2022 所建立的專案範本開始建立起。

看看怎一步一步的完成囉~~~

在跨平台開發技術上若單就 UI 層面的跨平台的話，在 .NET 技術上有三套廣為人知的使用 .NET MAUI、Avalonia UI、Uno Platform。其各有千秋，在此就不多談相關比較(若有興趣可參考文後所推薦閱讀連結)。

近期則有比較特別的部分是 Avalonia UI 官方的 GitHub 推出了一個 Repo: Avalonia.MAUI Hybrid

雖然支援有其作業系統上的限制性(目前只支援 iOS、Android 兩套手機作業系統)，但仍對 Avalonia UI 來說是一件相當有吸引力的事。

在 .NET MAUI 的專案當中若使用 Onion.Maui.GoogleMaps 這個 Nuget 套件(前身為 Xamarin.Forms.GoogleMaps) 後，在 iOS 平台上就能順利呈現 Google Maps 的效果：

接下來就看看如何在專案中開始使用此 "Onion.Maui.GoogleMaps" 套件囉~~~

而若要讓 App 在 iOS 上一樣能使用 Google Maps 的話，那就跟 Android 使用 Google Maps 一樣，需在 Google Map Platform 申請 Google Maps SDK for iOS 的金鑰。

本篇就來談談如何在 Google Maps Platform 上申請相關金鑰。

若在 .NET MAUI 的應用程式中，使用 "Microsoft.Maui.Controls.Maps" 的 Maps 控制項，在 Android/iOS 上呈現起來大致如下：

要使用 .NET MAUI 官方的 Maps 元件的話，需要額外在 .NET MAUI 專案中安裝 Nuget 套件: "Microsoft.Maui.Controls.Maps"。

而誠如上一篇所說，由於在 Android 平台當中 "Microsoft.Maui.Controls.Maps" 會直接使用 Android 預設的地圖服務平台 Google Maps。所以，要開始使用 .NET MAUI 的官方 Maps 元件並執行在 Android 平台之前，請先前往 Google Maps Platform 進行申請。

Google 統一了雲端服務的申請操作，接著就自然而然地會被導向 Google Cloud Console 當中進行：

現今只要 App 當中有一點點扯上地理位置有關的事物，那大概必然要有 Maps 這服務的使用。

而現今在臺灣會用到幾家商用 Maps 服務的科技大廠，大概就是 Google Maps、Apple Maps、Bing Maps、AMap (高德)、Baidu (百度)…等，而其中 Google Maps 又深受台灣用戶的喜愛與支持，並且更是 Android 預設的內建地圖服務。而要不是 Apple Maps 是 iOS 本身的內建地圖服務，不然應該會跟 Bing Maps 的狀況差不多…(逃

那個 AMap (高德)、Baidu (百度) 的 Maps 服務雖然不是台灣用戶的主流，但這兩家的地圖確實有把 "臺灣" 的道路狀況都納入自家的 Maps 服務當中，以示…(就請看倌自行接龍🤫

而 .NET MAUI 預設的 Maps 套件，在 Android 就會使用 Google Maps；iOS/macOS 就會使用 Apple Maps；Windows 就使用 Bing Maps…這也就沒有太多懸念了😜

使用其 Data Binding (資料繫結)時至少要掌握的三個關鍵處理：

1. 其 Data Context 的屬性掌握。
2. UI Element 的屬性所繫結到的 Data 兩者之間的 Notification 設計。
3. 所繫結到的 Data  若是集合體，請把該集合體的型別設計為 ObservableCollection<T> 。

.NET 6 去年 11/8 正式發佈至今已經屆滿半年，而在今年的 Build 大會上也正式發佈 .NET MAUI (a.k.a. 下一代的 Xamarin.Forms，原 Xamarin.Forms 會持續維持在 5.x.x)。

而正常來說 GA 後的技術都會加到 Visual Studio 的 "Release Channel" 當中，但稍微弔詭的地方是 .NET MAUI 仍是被放在 "Preview Channel" 的 Visual Studio 當中。

發文的今天，微軟也正好發布 Visual Studio 2022 v17.3 的正式版🙈。

所以…

要使用 .NET MAUI 的話，必須安裝 Visual Studio 2022 Preview 的版本來使用。

為了配合整體教育訓練的課程規劃，雖說 Web API 不是自己最專業領域，但仍是需帶點撰寫 Web API 的教學，才能讓學員們對 App 如何去介接後端資料有所了解，因此就開啟了一段 ASP.NET Core 6.0 的 Minimal Web API 教學。

畢竟 ASP.NET Core 6.0 的 Minimal Web API 使用了極簡的 Code，很適合給初心者在認識之初，不用了解太多特殊的設定就能快速上手，打造出一套含有 CRUD 功能的 Web API。

但若要完整透徹的了解 ASP.NET Core 6.0+ 所設計的 Minimal Web API 的整體概念(可參考文末的參考文件)，仍是需要花上很多心力去摸索其基礎觀念與設計的，請務必釐清。 

在教學時也希望能夠帶給初心者的學員有正確開發觀念，所以過程中除了撰寫 Web API 外，也同時讓學員去撰寫 Integration Test 來測試自己產出的 Web API，在這邊則是選擇使用了 xUnit 來做為 Web API 的 Integration Test 所使用的 Framework。