2023年3月11號，MASA技術團隊參加了“.NET開發者日”，IoT專案經理郭浩在活動中做“Blazor 在 IoT 領域的前端實踐”的主題分享

郭浩

數閃科技 IoT 專案經理

從事 .NET 開發10餘年，目前在數閃科技擔任 IoT 專案經理，有大量 IoT 產品的開發經驗，在 Android 和 iOS 的 Blazor MAUI 開發上有大量實踐經驗。

 

本次分享主要分為兩個部分

第一部分

我們為什麼要在IoT專案中使用Blazor技術，Blazor給IoT帶來了什麼?

第二部分

以一個IoT專案舉例，使用Blazor 和MAUI技術的落地具體內容，最後還有我們在開發和除錯過程中的經驗分享。

為什麼採用Blazor技術

Blazor的優勢

Web應用程式已經發展了大約30年，在此期間，硬體和軟體技術都發生了巨大的變化。然而，Web應用程式和網站的性質基本上沒有變化：我們有一個面向使用者的前端，以及一個包含內部資料和邏輯的後端。

這意味著構建這樣的應用程式至少需要（前端+後端）兩個技術層。現在，由於Web應用程式的內部複雜性使許多開發人員只能專注於特定層。前後端分離仍然是市面上主要的開發模式。

微軟的早期架構中，也是更傾向於介面和邏輯都是同一個人完成，比如MVC和Webform技術。後期由於網路頻寬的提升，對使用者介面的要求越來越高，就出現了前後端分離的開發模式。但前後端的分離也導致了溝通成本的增加，尤其對於新手的開發，前後端互相不瞭解對方的技術，配合的時候就會產生很多問題。這時又催生出全棧工程師這個職位。很多大公司要想趕在對手之前搶先佔領市場，就需要一個效率極高的開發團隊，提高團隊效率一個很有效的方法就是減少溝通成本，那麼顯而易見全棧工程師是最適合的。

其實，獨立技術在前後端都得到了非常大的發展，Javascript和Java就是一個典型的例子，他們之間已經毫無關係，唯一的共同點就只有類C語法。後來，框架出現在市面上，但它們主要為其他技術的提供容器。第一個實際改進來自Node.js，它允許在前端和後端開發以及儲存使用單一語言。

Blazor也取得了類似的突破，Blazor允許C#程式設計師使用單一語言進行後端和前端開發，並充分利用 .NET庫和 .NET基礎環境來生成客戶端應用程式。此外，由於它可以與Javascript相互操作，如果需要，Blazor可以與現有的前端庫整合，通過C#呼叫它們。

Blazor 允許在服務端編寫應用程式來生成 UI 元件，並通過 SignalR 實時互動。

 

受歡迎的Blazor應當具有哪些特點？

• 需要全棧開發

• 具有來自服務端的高頻更新的應用程式。

• 需要通知的應用。

• 需要儀表板和監控的應用程式

• 實時協作應用。

IoT就是典型的符合前四項特點的應用，這些特點使 Blazor成為適合為IoT的解決方案提供支援

Blazor Hybrid優勢

在Blazor Hybrid應用中，Razor元件在裝置上本機執行。元件通過本地互操作通道呈現到嵌入式 Web View 控制元件。元件不在瀏覽器中執行，並且不涉及 WebAssembly。Razor 元件可快速載入和執行程式碼，元件可通過 .NET 平臺完全訪問裝置的本機功能

Blazor Hybrid 支援內置於MAUI框架中。MAUI 包含 BlazorWebView 控制元件，該控制元件執行將 Razor 元件呈現到嵌入式 Web View 中。通過結合使用 MAUI 和 Blazor，可以跨移動裝置、桌面裝置和 Web 重複使用一組 Web UI 元件。

此體系結構的主要結論是，使用 Blazor Hybrid 生成的應用程式是本機應用，使用它們程式設計意味著可通過 .NET API層完全訪問所有裝置功能。

Blazor對IoT的支援

在IoT開發中Blazor可以做到什麼？

總結一下，Blazor對於.NET開發者有以上4點的優勢：Blazor減少開發者的負擔，使開發者專注於後端邏輯根據裝置和需求，可以通過多種方式在IoT基礎結構中使用以Blazor技術為主的Web應用程式，比如開發IoT的管理後臺，大屏看板，產線監控，裝置檢測，產線PDA等移動裝置端的相關功能

標準Web框架僅考慮使用者與遠端應用程式和資料庫之間的通訊，但越來越迫切需要一種新的Web框架，該框架可以將使用者與其客戶端裝置以及為了實現業務目的所需的物聯網基礎設施連線起來

正如我們所看到的，Blazor當然可以滿足這些需求，並且可以為構建連線IoT的Web應用程式提供基礎。

MAUI Blazor

這是一個MAUI+Blazor開發的app通過MQTT控制樹莓派的例子，裝置讀取距離感測器的資料通過MQTT上報，App實時獲取並顯示感測器資料。然後通過MQTT向裝置傳送控制指令，這裡是控制一個led燈

可以通過Blazor與通用 I/O（GPIO）和相容控制器整合。可以通過 Blazor應用進行互動，因為它們通常能夠使用外圍裝置中的功能，例如中斷、訊號等。驅動程式的NET類可用於實現物聯網應用程式，例如GpioController。

通常，.NET IoT庫提供了通過C#訪問和使用常見 IoT 板（如Raspberry Pi)的裝置的方法。

System.Device.Gpio 包不僅支援 GPIO，還支援串列埠和其他具有低階硬體引腳的互動協議。

Iot.Device.Bindings 包提供與物聯網中常用的幾種裝置的裝置繫結，例如顯示器、GPIO 擴充套件器、各種感測器、LED 驅動器、USB、加速度計等。如果你的感測器沒有現成可用的包，那麼通過廠家的c#或者python例項也是很容易遷移到.NET平臺的，大部分都是一些高低電平的操作。

這是一個 Blazor實時顯示傾斜感測器資料的示例

在IoT裝置的生產流程中，我們可以使用Blazor技術快速開發出裝置工裝註冊程式、生產流水線的管理和監控程式，我們還可以通過Blazor快速開發針對感測器、功能模組、整機的檢測系統。

這樣就可以在裝置出現故障時快速的檢測出有問題的感測器或者功能模組。

MASA Blazor

 

在講具體的實踐之前，介紹一些我們專案實踐中第一個重要的元件，也就是MASA Blazor元件

MASA Blazor是一個多端元件庫，基於Material Design設計包含Vuetify 1:1還原的基礎元件，由全職開源團隊長期支援和維護。

可以結合echarts可以顯示高頻更新的圖表資料，實現對裝置狀態的實時觀測

 

 

 

第二個重要的技術就是MAUI技術了，MAUI的出現，大幅度的降低了.NET開發者開發移動端的門檻。之前雖然有Xamarin技術，但是Xamarin沒有做到統一，MAUI專案是具有多個輸出的單個專案，而不是針對每個平臺的多個專案。

我們還實現了很多平臺相關的功能 MASA Blazor有一個 MAUI Plugin的分支

IoT專案中Blazor的落地實踐

 

這裡舉例的是一個商用系列飲水機的專案，有PC端的管理平臺，除了傳統的IoT功能之外，還有比較複雜的銷售和租賃業務。有面向代理商和技工的App和麵向終端使用者的微信小程式。

App Store稽核是我們最耗時的工作之一因為我們對App開發和App Store稽核策略不瞭解，所以為了滿足稽核標準，我們花費了很多時間來修改我們的業務。

但是從技術方案上看，使用MASA Blazor MAUI開發iOS專案，在開發、編譯除錯、打包以及AppStore稽核流程上是沒有障礙的。

APP介面

這些是我們App的介面，我們的App使用MASA Blazor實現了UI設計的100%還原，沒有出現因為Blazor不相容等問題而出現不能還原的情況。

同時我們使用了很多平臺相關的功能，例如一鍵本機登入，藍芽低功耗通訊，掃碼拍照，相簿選取，Android的自動更新，暗色主題切換，以及訊息推送等等。

 

這些是我們使用MASA Blazor 開發的工業PDA的程式

第一張圖是藍芽OTA的程式，這種功能單一的程式，只要和嵌入式對接好協議，一個人一天就可以完成開發和測試工作

第二張圖是注塑機臺的狀態管理

第三章是是一個工單登入的業務，其實是切換工單，一個工單就對應有物料，物料又和模具型號繫結，模具最終在關聯到機臺上，是一個生產的環節

第四章是一個列印週轉筐標籤一個功能

Web頁面除錯

我們的MAUI專案，可以使用Web Server的方式進行頁面除錯（Web Server和MAUI專案共同引用頁面專案）可以解決95%的頁面效果問題。

針對不同平臺可以採取依賴注入的方式，在Web Server 和MAUI專案中分別注入不同的實現。這樣也可以方便我們在Web端除錯的時候跳過某些裝置相關的流程，比如下一個步驟必須掃描獲取結果之後才能進行，我們可以通過Mock介面的方式在Web Server專案中讓注入的方法返回特定值即可。

我們也可以通過部分類或者條件編譯的方式編寫針對多端的實現程式碼。

 

這裡是沒有覆蓋到的那5%，對於與平臺功能相關的頁面，例如藍芽，掃碼、開啟相簿之類的除錯，或者是頁面相容性的除錯，比如頁面錯誤只存在與特定的手機，也可以使用谷歌的真機除錯功能進行debug。而且有熱過載的支援。

有的時候真機除錯可能發現不了USB裝置，可以將手機端的App完全解除安裝

iOS也支援真機除錯，只要有開發者賬號和iphone裝置，但是打包需要有mac電腦支援。

我們會遇到各種平臺相關的問題導致應用白屏或者閃退，這時我們可以通過ErrorBoundary元件在引發未處理的異常時呈現錯誤UI

在MauiProgram中通過FirstChanceException異常通知事件，來獲取裝置異常資訊，將異常列印到vs的輸出終端，比如不同Android版本針對於藍芽的許可權是不一樣的，我們可以用這種方式發現問題。

MASA Blazor Android 踩坑

第二點和使用的第三方元件相關，對於一些繫結庫的類，比如Android繫結庫，vs有的時候是沒有智慧提示的，有的時候還會直接飄紅，但是不影響編譯打包

MASA Blazor iOS踩坑

在iOS裡打包長度很關鍵，目前看如果某個檔案打包路徑超過255，就會報檔案找不到的IO錯誤，我們一致以為是某些元件不支援，前後調查了很久。

對於iOS的繫結庫，目前只能在Mac 中的vs for mac中進行，無論是引用動態連結庫還是打包成nuget的方式雖然可以在windows編譯通過，但是執行和除錯的時候就會報錯。圖中是報錯沒有實現介面，但是其實經過檢查已經實現了，在vs for mac中可以完美執行。

MASA Blazor

這裡是MASA Stack對IoT的支撐場景

IoT 後臺Blazor許可權控制也非常簡單，在Auth配置好許可權後，只需要用特定標籤包裹住需要許可權控制的內容即可

 

對Blazor的未來，MASA有以下的展望

1、MASA Blazor會針對於低配置的裝置開發極速版，在保證執行流暢的前提下提供良好UI互動

2、而且會針對於移動端做更多的適配，開發更多的移動端元件，也會提供移動端的模板，提供常見的佈局模式，比如：列表、標籤、網格、滿屏切換、卡片、瀑布等常見的，這樣開發者就算沒有移動端App的開發經驗，也可以通過配置快速搭建符合業務場景的佈局，開發人員只需要關注具體的業務即可

3、會發布一系列的使用MASA Blazor 和Stack從0搭建IoT平臺的技術文章，也會不斷的更新MAUI相關技術內容

最後我們已經通過使用MASA Stack為底座前端採用MASA Blazor全場景使用.NET技術完成了IoT平臺對數字化營銷和智慧製造的整個業務閉環。

如果您的企業是傳統制造型企業那麼可以參考我們的整套MASA Blazor+MASA Stack的解決方案，快速實現企業的數字化轉型。

如果您是開發人員，並且現在也有類似的業務需求，那麼藉助於MASA Blazor+MASA Stack的能力，可以快速的搭建一套IoT平臺。

最後如果您是一位想上手App開發的愛好者或者從業人員，並且掌握一些.NET技術。

那麼與市面上其他的眼花繚亂混合開發技術相比，MASA Blazor + MAUI的方案技術門檻是最低，也最容易實現。而且 身後還有MASA技術團隊的全力支援！

 

掃碼觀看直播回放

 

---

如果你對我們的開源專案感興趣，無論是程式碼貢獻、使用、提 Issue，歡迎聯絡我們