On March 11, 2023, the MASA technical team participated in the ".NET Developer Day". IoT project manager Guo Hao shared the theme of " Blazor's front-end practice in the IoT field " at the event
Guo Hao
Data Flash Technology IoT Project Manager
Engaged in .NET development for more than 10 years, currently working as an IoT project manager at Shushan Technology, has a lot of experience in developing IoT products, and has a lot of practical experience in the development of Blazor MAUI for Android and iOS.
This sharing is mainly divided into two parts
first part
Why should we use Blazor technology in IoT projects, and what does Blazor bring to IoT?
the second part
Taking an IoT project as an example, we will use Blazor and MAUI technology to implement specific content, and finally share our experience in the development and debugging process.
Why adopt Blazor technology
Advantages of Blazor
Web applications have been around for about 30 years, during which time both hardware and software technologies have changed dramatically. However, the nature of web applications and websites remains largely unchanged: we have a user-facing front end, and a back end that contains internal data and logic.
This means that building such an application requires at least two technology layers (front-end + back-end). Today, many developers can only focus on specific layers due to the internal complexity of web applications. The separation of front and back ends is still the main development model on the market.
In Microsoft's early architecture, it was also more inclined that the interface and logic were completed by the same person, such as MVC and Webform technology. In the later period, due to the improvement of network bandwidth, the requirements for user interface became higher and higher, and the development mode of front-end and back-end separation appeared. However, the separation of front-end and back-end has also led to an increase in communication costs, especially for novice development, the front-end and back-end do not understand each other's technology, and many problems will arise when they cooperate. At this time, the position of full-stack engineer was born. If many large companies want to seize the market before their opponents, they need a highly efficient development team. An effective way to improve team efficiency is to reduce communication costs, so it is obvious that full-stack engineers are the most suitable.
In fact, independent technologies have been greatly developed in the front and back ends. Javascript and Java are a typical example. They have nothing to do with each other. The only thing in common is the C-like syntax. Later, frameworks appeared on the market, but they mainly provided containers for other technologies. The first real improvement came from Node.js, which allowed a single language for front-end and back-end development as well as storage.
Blazor has also made a similar breakthrough. Blazor allows C# programmers to use a single language for back-end and front-end development, and make full use of the .NET library and the .NET infrastructure to generate client applications. Also, since it interoperates with Javascript, Blazor can integrate with existing front-end libraries, calling them through C#, if desired.
Blazor allows writing applications on the server side to generate UI components and interact with them in real time through SignalR.
What characteristics should a popular Blazor have?
-
Full stack development required
-
Applications with frequent updates from the server.
-
Apps that require notifications.
-
Applications that require dashboards and monitoring
-
Real-time collaborative application.
IoT is a typical application that meets the first four characteristics, and these characteristics make Blazor a suitable solution for IoT
Advantages of Blazor Hybrid
In Blazor Hybrid apps, Razor components run natively on the device. Components are rendered to embedded Web View controls through the native interop channel. Components don't run in the browser and don't involve WebAssembly. Razor components load and execute code quickly, and components have full access to the device's native functionality through the .NET platform
Blazor Hybrid support is built into the MAUI framework. MAUI includes the BlazorWebView control, which allows Razor components to be rendered into an embedded Web View. By using MAUI and Blazor together, you can reuse a set of web UI components across mobile, desktop, and the web.
The main takeaway from this architecture is that apps generated using Blazor Hybrid are native apps, and programming with them means full access to all device functionality through the .NET API layer.
Blazor support for IoT
What can Blazor do in IoT development?
To sum up, Blazor has the above four advantages for .NET developers: Blazor reduces the burden on developers and enables developers to focus on back-end logic Depending on the device and needs, Blazor technology can be used in IoT infrastructure in a variety of ways Mainly web applications, such as the development of IoT management background, large-screen Kanban, production line monitoring, equipment detection, production line PDA and other related functions on the mobile device side
Standard web frameworks only consider communication between users and remote applications and databases, but there is an increasing need for a new web framework that can connect users with their client devices and the IoT infrastructure required for business purposes facilities connected
As we've seen, Blazor certainly fulfills these needs and can provide the foundation for building IoT-connected web applications.
MAUI Blazor
This is an example of an app developed by MAUI+Blazor controlling the Raspberry Pi through MQTT. The device reads the distance sensor data and reports it through MQTT, and the App acquires and displays the sensor data in real time. Then send control commands to the device through MQTT, here is to control a led light
Can be integrated with general purpose I/O (GPIO) and compatible controllers through Blazor. It is possible to interact through Blazor apps because they are usually able to use functionality in peripherals such as interrupts, signals, etc. The driver's NET classes can be used to implement IoT applications such as GpioController.
Typically, .NET IoT libraries provide methods to access and use devices on common IoT boards such as Raspberry Pi via C#.
The System.Device.Gpio package supports not only GPIO, but also serial ports and other interactive protocols with low-level hardware pins.
The Iot.Device.Bindings package provides device bindings to several devices commonly used in IoT, such as displays, GPIO expanders, various sensors, LED drivers, USB, accelerometers, etc. If your sensor does not have a ready-made package, it is easy to migrate to the .NET platform through the manufacturer's c# or python instance, most of which are some high-level and low-level operations.
Here's a Blazor example showing tilt sensor data in real time
In the production process of IoT devices, we can use Blazor technology to quickly develop equipment tooling registration programs, production line management and monitoring programs, and we can also quickly develop detection systems for sensors, functional modules, and complete machines through Blazor.
In this way, the sensor or functional module in question can be quickly detected when the device fails.
BLAZOR TIME
Before talking about specific practices, let’s introduce some of the first important components in our project practice, namely MASA Blazor components
MASA Blazor is a multi-terminal component library, designed based on Material Design, including the basic components of Vuetify 1:1 restoration, supported and maintained by a full-time open source team for a long time.
It can be combined with echarts to display high-frequency updated chart data to realize real-time observation of equipment status
The second important technology is MAUI technology. The emergence of MAUI has greatly lowered the threshold for .NET developers to develop mobile terminals. Although there was Xamarin technology before, Xamarin did not achieve unity. The MAUI project is a single project with multiple outputs, rather than multiple projects for each platform.
We also implemented many platform-related functions. MASA Blazor has a branch of MAUI Plugin
Implementation of Blazor in IoT projects
Here is an example of a commercial water dispenser project, which has a PC-side management platform. In addition to traditional IoT functions, it also has more complicated sales and leasing business. There are apps for agents and technicians and WeChat mini-programs for end users.
App Store review is one of the most time-consuming jobs for us, because we don't know much about App development and App Store review strategy, so we spend a lot of time modifying our business in order to meet the review standards.
But from the perspective of technical solutions, using MASA Blazor MAUI to develop iOS projects has no obstacles in the process of development, compilation and debugging, packaging and AppStore review.
APP interface
These are the interfaces of our App. Our App uses MASA Blazor to achieve 100% restoration of the UI design, and there is no situation where it cannot be restored due to Blazor incompatibility and other issues.
At the same time, we used many platform-related functions, such as one-click local login, Bluetooth low-power communication, scanning code to take pictures, album selection, Android automatic update, dark theme switching, and message push, etc.
These are the programs for our industrial PDA developed using MASA Blazor
The first picture is the Bluetooth OTA program. This kind of single-function program can complete the development and testing work in one day as long as it is connected with the embedded protocol.
The second picture is the status management of the injection molding machine
The third chapter is a work order registration business, which is actually switching work orders. A work order corresponds to materials, and materials are bound to mold models. The molds are finally linked to the machine, which is a production link.
The fourth chapter is a function of printing turnover basket labels
Web page debugging
Our MAUI project can use Web Server to debug pages (the Web Server and MAUI project jointly refer to the page project), which can solve 95% of the page effect problems.
Dependency injection can be adopted for different platforms, and different implementations are injected into the Web Server and MAUI projects respectively. This can also make it easier for us to skip some device-related processes when debugging on the Web side. For example, the next step must be scanned to obtain the results before proceeding. We can use the Mock interface to make the injected method return a specific value.
We can also write multi-terminal implementation code through partial classes or conditional compilation.
Here is the 5% that is not covered. For pages related to platform functions, such as Bluetooth, code scanning, and photo album debugging, or page compatibility debugging, such as page errors that only exist with specific mobile phones, it is also You can use Google's real device debugging function for debugging. And there is support for hot reloading.
Sometimes the real machine debugging may not find the USB device, you can completely uninstall the App on the mobile phone
iOS also supports real-device debugging, as long as there is a developer account and an iphone device, but packaging requires mac computer support.
We will encounter various platform-related problems that cause the application to white screen or flash back. At this time, we can use the ErrorBoundary component to present an error UI when an unhandled exception is thrown.
In MauiProgram, use the FirstChanceException exception notification event to obtain device exception information, and print the exception to the output terminal of vs. For example, different Android versions have different permissions for Bluetooth. We can use this method to find problems.
MASA Blazor Android stepping pit
The second point is related to the third-party components used. For some binding library classes, such as the Android binding library, VS sometimes has no intelligent prompts, and sometimes it will directly become popular, but it does not affect compilation and packaging.
MASA Blazor iOS steps on the pit
The packaging length is very important in iOS. At present, if the packaging path of a certain file exceeds 255, it will report an IO error that the file cannot be found. We all think that some components do not support it, and we have investigated it for a long time.
For the iOS binding library, it can only be done in the vs for mac in the Mac at present. Although the way of referencing the dynamic link library or packaging it into nuget can be compiled in windows, an error will be reported when running and debugging. In the picture, the error is reported and the interface is not implemented, but in fact it has been implemented after inspection, and it can run perfectly in vs for mac.
BLAZOR TIME
Here is the scene of MASA Stack supporting IoT
IoT background Blazor permission control is also very simple. After Auth configures permissions, you only need to wrap the content that needs permission control with a specific tag.
For the future of Blazor, MASA has the following prospects
1. MASA Blazor will develop an extremely fast version for devices with low configuration, and provide good UI interaction on the premise of ensuring smooth operation
2. We will do more adaptations for the mobile terminal, develop more mobile terminal components, and provide mobile terminal templates and common layout modes, such as: list, label, grid, full screen switching, card , waterfall and other common ones, so that even if developers do not have mobile app development experience, they can quickly build layouts that meet business scenarios through configuration. Developers only need to focus on specific businesses.
3. A series of technical articles on building an IoT platform from 0 using MASA Blazor and Stack will be released, and MAUI related technical content will also be continuously updated
Finally, we have completed the entire business closed loop of the IoT platform for digital marketing and intelligent manufacturing by using MASA Stack as the front end of the base, using MASA Blazor in all scenarios and using .NET technology.
If your enterprise is a traditional manufacturing enterprise, you can refer to our complete set of MASA Blazor+MASA Stack solutions to quickly realize the digital transformation of the enterprise.
If you are a developer and have similar business needs now, you can quickly build an IoT platform with the help of the capabilities of MASA Blazor+MASA Stack.
Finally, if you are an enthusiast or practitioner who wants to get started with App development, and master some .NET technologies.
Compared with other dazzling hybrid development technologies on the market, the technical threshold of MASA Blazor + MAUI is the lowest and the easiest to implement. And there is the full support of the MASA technical team behind us!
Scan the QR code to watch the live playback
If you are interested in our open source projects, whether it is code contribution, use, or issue, please contact us
