看完 Daniel Roth 的 Youtube 影片，我動手做了一遍，然後寫了一點筆記，也錄製了一個實作練習的影片。
前言
之所以想試一下 Blazor Hybrid app，是因為我有一些已經運行十年以上的 Windows 應用程式，其中有的是商業軟體，客戶也還在使用。如果未來有機會把這些 Windows 應用程式改寫成跨平台的版本，在手機上面也能跑的話，那真是挺酷的啊！
如果你也有興趣玩一下 Blazor Hybrid app，可以看 Daniel Roth 的影片：ASP.NET Community Standup - Let's build an app with .NET MAUI and Blazor。我也只是看完影片之後依樣畫葫蘆做了一遍，然後再做第二遍、第三遍，最後再把「還算順暢」的練習過程錄下來，剪輯成影片。
我的影片是用 Movavi 錄製和剪輯，由於對這套剪輯軟體還不那麼熟悉，以至於最終成品有一點殘影和卡頓的現象。此外，影片中沒有旁白講解，我是以加註圖文的方式來替影片加上重點解說。無論如何，如果你想看看，可以點以下連結：
👉 Youtube 影片：Hello, Blazor Hybrid with NET MAUI
有關 Movavi 螢幕錄製結果出現殘影與卡頓現象的問題和解決方法，我已經寫在另一篇筆記：從 Camtasia 換成 Movavi。
.NET 演進速度很快，當你看到我的影片時，說不定 MAUI 和 Blazor 又有了一些比較大的改變。文章的好處是可以隨意修改更新，所以我還是把一些筆記整理成文章，補影片的不足，且未來如果需要更新或補充也比較方便。
不過，這篇文章的實作步驟並沒有我的影片中示範的那樣複雜，二者主要差異是：影片中會示範如何讓 MAUI Blazor App 專案和 Blazor Server App 專案共用同一個 Razor Class Library 專案中的 UI 元件，這篇文章則是偏重於 Android 模擬器的相關事項。
閒話說得多了，進入正題吧。
Blazor Hybrid 簡介
Blazor Hybrid 技術的主要目的是結合 desktop app 和 web app 二者的優勢，例如將 desktop app 的其中一部份 UI 換成 Blazor（即 Web UI）。如此一來，UI 設計有了更大的彈性，同時又能存取裝置的原生功能與資源。
- 不涉及 WebAssembly 或 server endpoint。
- 不涉及 browser sandbox，也就是說，Blazor Hybrid app 並不是執行於瀏覽器中。
- Blazor Hybrid 可搭配三種口味的 UI 框架：MAUI、WPF、Windows Forms。Blazor 對這三種框架都有提供 BlazorWebView 控制項來呈現 Razor 元件。換言之，即使是老舊的 Windows Forms 應用程式，也能藉由 Blazor Hybrid 技術來添加新的 Web UI。
練習
- Windows 11 22H2
- Visual Studio 2022 Preview (Version 17.3.0 Preview 2.0)
- .NET SDK 6.0.400-preview.22301.10
- .NET SDK 7.0.100-preview.5.22307.18
執行於 Windows 平台
執行於 Android 模擬器
Android 模擬器相關設定
Android 模擬器的加速器
下列虛擬化技術可用於加速 Android Emulator：
- Microsoft 的 Hyper-V 與 Windows Hypervisor 平台 (WHPX)。
Hyper-V 是Windows虛擬化功能，可讓您在實體主機電腦上執行虛擬化的電腦系統。- Intel Hardware Accelerated Execution Manager (HAXM)。
HAXM 是執行 Intel CPU 之電腦的虛擬化引擎。若要在 Windows 中擁有最佳體驗，建議您使用 WHPX 來加速 Android 模擬器。 如果您的電腦上沒有 WHPX，則可以使用 HAXM。 如果符合下列準則，Android Emulator 會自動使用硬體加速：
- 您的開發電腦有提供並已啟用硬體加速。
- 模擬器正在執行為 x86 型虛擬裝置建立的系統映像。
其中提到，「若要在 Windows 中擁有最佳體驗，建議您使用 WHPX 來加速 Android 模擬器。」
Android 模擬器疑難雜症
練習過程中，我在 Android 模擬器的部分碰到了一些奇怪的問題。有時候，Android 模擬器的畫面全黑，不知道發生什麼事，只是反覆關閉模擬裝置再重新啟動，問題便消失了。
還有一個詭異的狀況：在 Visual Studio 中以 Android 模擬器來執行 MAUI app 時，會卡在部署程序，就像是進入無窮迴圈那樣。起初，我以為只是多等一會兒，也許三、五分鐘後，總會跑完，結果喝完一杯咖啡再回來看，依然還在跑：
微軟網站上面有一份文件：Android Emulator 疑難排解，裡面列出了十幾種狀況和排除方法，但似乎沒有一個跟我碰到的情況符合。
最終我是這樣解決的：從 Visual Studio 選單點選 Tools > Android > Android Device Manager，在此裝置管理員視窗中把目前唯一使用的裝置（Pixel 5 - API 31）刪除，然後重新建立一個相同的裝置。
重新建立 Android 裝置後，MAUI App 專案便又可以順利部署執行於 Android 模擬器了。
感想
做完這些練習，勉強算是稍微體驗了「寫一次，執行於各平台」的好處，只是我沒有蘋果手機和平板，目前也沒有強烈動機去測試 iOS 平台。
接下來，可以試著動手修改一些程式碼，讓它更接近實務上開發的專案：加入一個 Razor Component Library 專案來撰寫共用的程式碼和 UI 元件，並且在其他應用程式專案中使用那些共用元件，就像本文開頭提及的影片當中所示範的那樣。
沒有留言: