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，歡迎聯繫我們