All great things are preceded by change. We are witnessing changes and innovations at a pace which finds no equal in any preceding era. These innovations are bound to leave an indelible mark on the growth of sectors including insurance. It goes without saying that internet and information technology-based interventions can help in insurance operations, distribution, and claims. In vogue phenomenon like IoT, real time satellite imaging, drones and the inevitable AI will become increasingly inseparable part of the insurance value chain.

.NET MAUI (Multi-platform App UI) is a new framework from Microsoft for building native applications for multiple platforms, including Windows, macOS, iOS, and Android, using a single codebase. It is the next version of the Xamarin.Forms framework and is designed to be a modern and flexible architecture for building cross-platform apps.

.NET MAUI is built on top of .NET 7, which is the latest version of Microsoft’s .NET platform, and it provides a set of UI controls and layouts that are optimized for each platform. The framework also includes a set of APIs that allow developers to access native features on each platform, such as camera, geolocation, and more.

.NET MAUI with Blazor solves several problems for developers building cross-platform applications:

1. Code duplication: With .NET MAUI, developers can use a single codebase for multiple platforms, reducing the amount of code duplication and making it easier to maintain a consistent user experience across platforms.
2. Complexity of cross-platform development: Cross-platform development can be complex, requiring developers to learn multiple programming languages and frameworks. With .NET MAUI and Blazor, developers can use their existing .NET and C# skills to build native apps for multiple platforms.
3. Fragmentation of the development ecosystem: Building native apps for multiple platforms often requires working with different development tools and environments, making it difficult to share code and collaborate. With .NET MAUI, developers can use a single project and development environment to target multiple platforms.
4. Performance: Building cross-platform apps can often result in poor performance, due to the use of interpreted languages or the need to run a virtual machine. With .NET MAUI and Blazor, developers can build high-performance native apps that run directly on the device hardware.

Create a .NET MAUI Blazor App

• Select .NET MAUI Blazor App template in visual studio.

• You can create a project using .NET 7.
• After creating the project, you can see the below folder structure.

• Platform folder contains different platforms, to run this single application in different platforms.
• The Solution contains MAUIProgram.cs class which is the entry point for an application. It enables apps to be initialized from a single location. Here we configure the AddMauiBlazorWebview service as shown in below image.

• When Visual Studio builds the project, a new C# source generates, that contains the definition of the InitializeComponent method. This method is called from the MainPage.xaml class constructor and this initializes all the objects declared in XAML files.
• The App.xaml instantiates the MainPage, which is the first page of your application.
• The Resource folder contains resources like images, fonts, applcon etc.
• The page folder contains razor pages. Where we can write design html and code together. Or we can create separate razor.cs file. If we create a separate file, we must add ‘Base’ as suffix to that classname. And we need to inherit that file in razor page.

• Platform folder contains different manifest.xml files to maintain each platform.
• The wwwroot folder contains CSS and Layout. You can add the CSS files that you require.

Let’s create a new login page.

• For the login page, first we will add new CSS for login page layout in wwwroot -> CSS folder. Here we can create a new stylesheet.css file for style and layout of our razor view page.

• Then the parameters required for login page are – Username and Password, we need to create model for these params. We will create Models folder and add a new .cs file named LoginModel. Define the login properties in this model file. Likewise, if we need a user registration page or any other page, we first need to add a new model named RegistrationModel and we can add required properties.

• Now Create/Add login.razor page for UI and login.razor.cs for code part. After creating login page, we must add ‘Base’ as suffix to class name of .cs file. So, the class name will be LoginBase. Create an object of AppService to call web API. Create an object of LoginModel and NavigationManager for navigate to dashboard. Create Submit () method for authentication of username and password. This method will call webAPI through AppService object and return the response to validate here.

• We will bind properties of Login Model- to login.razor page. We will add login button of submit type. On submit button’s onclick event, we call Submit method to verify user.

• After that we need to verify the user credentials with actual data, for that we are integrating web API in this project. Created another project for an authentication API to integrate with the database. Then in our project we will create a service folder to connect with API and add AppService.cs class to configure the service API in our project.

• To pass userId and password to API we will create AuthenticateUser method. This will pass the login details and it will call the required API for authentication. The API will send the response and we will send this response to the login page.

• Now it’s time to call this AuthenticateUser method from Submit() action of Login.razor.cs page. So that we can pass UserId and password to the API. On the response of API, we can either show message of invalid user or redirect to home page with valid user.
• There is a different platform to run MAUI project.
• Let’s first run this project on Android – Open Android Device Manager from Tools-> Android -> Android Device Manager. We will add a new android device for this project. Click on New, will get the following screen to add new emulator-

• We will add default given Pixel 5 – API 33. Click on the create button to download and install Pixel 5 android device. Once downloading and installation is done, there will be one Start button to start the emulator so that we can use this newly added emulator to run our project.

• We can see our login screen on added emulator as show below.

• Other way is windows machine, which is by default selected. To run on windows, first need to enable developers Mode on your machine.
• Open Developer Settings and enable Developer Mode.

• Then we can run the project on the Windows machine platform. You can see in below image.

Conclusion:

Overall, .NET MAUI is a powerful and flexible framework for building native applications for multiple platforms, which allows developers to use their existing .NET skills and tools to build high-quality apps.

Ashwini Patil

Associate Technical Lead