Blazor在IoT领域的前端实践 @.NET开发者日

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，欢迎联系我们