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，欢送分割咱们