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