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