<html><body><h2 style="text-align:justify;">1. Introduction</h2>.NET MAUI stands for .NET Multi-platform App UI, which is a cross-platform framework for creating not only native mobile but also desktop apps with C# and XAML. This means that you can develop an application that can run on Android, iOS, macOS, and Windows from a single shared codebase..NET MAUI is open source with an MTI license and is the next generation of Xamarin.Forms. Its UI controls have been rebuilt to improve performance and extensibility. As a result, there are some similarities between .NET MAUI and Xamarin.Forms. The purpose of .NET MAUI is to enable you to implement as much of your app logic and UI layouts in a single codebase as possible..NET MAUI was released on May 23rd, 2022, and will follow the same monthly service schedule as the rest of .NET. It will retain the release schedule every 18 months that .NET developers have grown accustomed to.<h2 style="text-align:justify;">2. .NET MAUI Architecture</h2>From .Net 6, it has provided a series of platform-specific frameworks for creating apps: .NET for Android, for iOS, for MacOS and Windows UI (WinUI 3) libraries. These frameworks share the same .NET 6 Base Class Library (BCL). While BCL allows apps running on different platforms to share common business logic, the developer can define the user interface and models of how the elements of it communicate and interoperate. They can have separate UI for each platform separately, however, this approach requires you to develop and maintain a code base for each individual family of devices.The below diagram shows a high-level of the architecture of a .NET MAUI app:<img src="https://api.careers.saigontechnology.com/storage/ck-editor/image-rRE3uJikie3wsTghk4dKhWyZxAbloHhnw459qkqn.png">Figure 1. .NET MAUI architectureIn a .NET MAUI development, you write code that focuses on interacting with the .NET MAUI API (1). Then the framework directly consumes the native platform APIs (3). Moreover, the app code may directly interact with the platform APIS too, if needed. (2)Despite developing a .NET MAUI App that can be done on both PC and Mac, building apps for iOS and macOS still requires a MAC. Here is how a .NET MAUI app is compiled:<ul><li style="text-align:justify;">Android apps built using .NET MAUI compile from C# into an intermediate language (IL) which is then just-in-time (JIT) compiled to a native assembly when the app launches.</li><li style="text-align:justify;">iOS apps built are fully ahead-of-time (AOT) compiled from C# into native ARM assembly code.</li><li style="text-align:justify;">The app is built for macOS using Mac Catalyst, which brings your iOS built with UIKit to the desktop, and augments it with additional AppKit and platform APIs as required.</li><li style="text-align:justify;">Windows apps use the WinUI 3 library to create native apps that target the Windows desktop platform.</li></ul><h2 style="text-align:justify;">3. .NET MAUI Features</h2><h3 style="text-align:justify;">Modern development tools</h3>Create modern and innovative applications using the latest .Net 6 technology which is updated annually. The development environment supports both Mac and Windows. Another advantage is the large community of developers who are developing and contributing to .Net.<h3 style="text-align:justify;">UI controls for building application interface</h3>Maximize code reuse by not having to rebuild the entire UI for each platform you target. The framework will take care of this for you by applying XAML, built-in controls, and other advanced features. You can also customize controls yourself to be pixel-perfect and take advantage of the community by using third-party UI controls via the NuGet package manager.<h3 style="text-align:justify;">Cross-platform APIs for devices features</h3>You can use common shared APIs or take advantage of native performance by using specific APIs to control device sensors or unique features. For example, you can access MapKit, UIKit, SiriKit, etc., which are only available on iOS and macOS. Or you can use shared APIs across devices such as Battery, Email, Geolocation, Accelerometer…<h3 style="text-align:justify;">Single project</h3>Take advantage of shared resources such as images, fonts, platform-specific features, and business logic in a single codebase. Or you can guide how it compiles for the targeted platform easily.<h3 style="text-align:justify;">Full App Platform</h3>The framework provides Pages, Layouts, and Controls for building UI using C# and XAML. It also includes two-way binding, navigation, state management, animation, dependency service, platform API, theme, and more.<h3 style="text-align:justify;">Blazor hybrid and .NET MAUI</h3>We can combine both technologies to build not only web but also native applications. MAUI will use shared Blazor components or mix between them to build a complete application.<h2 style="text-align:justify;">4. XAML</h2><img src="https://api.careers.saigontechnology.com/storage/ck-editor/image-F5zXEvjeNuc38itSLuhfSU8eihLahKlHRcelGvoy.png">Figure 2. An example of a XAML file’s contentThe XAML stands for eXtensible App Markup Language. It is a declarative and very powerful language for not only defining the UI of the application but also handy for data binding and navigating the app. The XAML will come with a C# code behind the file, both defining the same partial class. We will look at this in the next section<h2 style="text-align:justify;">5. Helloworld Application</h2><h3 style="text-align:justify;">Development environment setup</h3>Prerequisites: <ul><li style="text-align:justify;">.Net 6 or greater</li><li style="text-align:justify;">.NET Multi-platform App UI development package (picture below)</li><li style="text-align:justify;">Visual Studio 2022 or newer</li><li style="text-align:justify;">Android SDK and Simulator(s)</li><li style="text-align:justify;">A Mac computer</li></ul><img src="https://api.careers.saigontechnology.com/storage/ck-editor/image-7cDbXl1iMhrNppZfqcQPAkSNsQeS4OkZz8jUchkL.png">Figure 3. Required .NET Multi-platform App UI Development<h3 style="text-align:justify;">Project structure</h3>Create new project<img src="https://api.careers.saigontechnology.com/storage/ck-editor/image-8NiJAcWgQeCNPo75szevIFezJ3RJ9BQCTBO8uxvl.png">Figure 4. Step 1 - Create new project<img src="https://api.careers.saigontechnology.com/storage/ck-editor/image-ozPMTy5xnbmGOs3HNfbXwI2994x2fD4kWbaRxfia.png">Figure 5. Step 2- filter the MAUI category and select .NET MAUI APP project<img src="https://api.careers.saigontechnology.com/storage/ck-editor/image-YAcB5IKglvwSa2Q4Z1CH3wup42qP9p9aIlSE2OIm.png">Figure 6. Step 3 - Choose your project’s name<img src="https://api.careers.saigontechnology.com/storage/ck-editor/image-dHDksQ2yBCoNyRQdqwkTxs0fzIR0eXxiByS4GHaE.png">Figure 7. Step 4 - Choose your .NET Framework (newest version)<h3 style="text-align:justify;">Structure</h3><img src="https://api.careers.saigontechnology.com/storage/ck-editor/image-WpQ1LsQnnzeWFErvHy2tbYzfTMGAcLdfyoMVsSAz.png">Figure 8. .NET MAUI project structure<ul><li style="text-align:justify;">Dependencies: Multi-targeted platform of the application such as Android, iOS, Windows or Mac</li><li style="text-align:justify;">App.xaml &amp; App.cs: defines application’s resources</li><li style="text-align:justify;">AppShell.xaml &amp; AppShell.cs: a new concept with .NET MAUI. Using to define Shell content. You can use this code behind the file to register routes, define the tabs or fly navigation and much more.</li><li style="text-align:justify;">MainPage.xaml &amp; MainPage.cs: The UI file, where you define how your UI looks like by stacking controls up together such as Button, Label, Input, and also the Event Handle for each control</li><li style="text-align:justify;">MauiProgram.cs: similar to Startup.cs where the application start and the developer can config application such as DI and other stuff </li></ul><h3 style="text-align:justify;">Debug</h3>You have a bunch of options to choose from to debug your application depending on what platform you targeted.iOS.NET MAUI team has worked very hard to bring convenience to your development experience. Despite you will need an Apple Developer Account to publish your application to the App Store. However, MAUI also allows you up to 3 ways to debug your applications as an iOS app.<ul><li style="text-align:justify;">You can debug your app on the iOS simulator directly on your Mac</li><li style="text-align:justify;">Or you can debug your application on the remote simulator by pairing remotely to your Mac from your window machine</li><li style="text-align:justify;">Or you can debug it on your real iPhone, however, you will also require an Apple Developer account to achieve this</li></ul>AndroidVisual Studio 2022 is one of the most powerful IDEs. You don’t need to take care of any Android requirements for you such as Android SDK or Android Simulators creation. You just need a simple click and it is ready to go.<img src="https://api.careers.saigontechnology.com/storage/ck-editor/image-jRXF8Z1HCFjHtge5KxMcqCndLG4WgrOwBvip1YnJ.png">Figure 9. Android device manager screen<img src="https://api.careers.saigontechnology.com/storage/ck-editor/image-KSBLrF5QSEWWo1ptCtcdTDFk3A9Fklhpot6FDzmY.png">Figure 10. Android device’s spec setup<h3 style="text-align:justify;">Window Application</h3>You need to enable your Developer mode on your Windows to be able to debug your application<img src="https://api.careers.saigontechnology.com/storage/ck-editor/image-86m3piOZB2RWCuD6jRP6aXvA7g1kD84H6ZowKPOV.png">Figure 11. Enable Developer Mode to be able to debug your application in Windows<h3 style="text-align:justify;">Features</h3>Hot reloadMAUI support not only the XAML hot reload but also the code behind logic when the file is saved. It means that you can see your change in seconds in your debugging devices without any install 3rd libraryLive previewVisual Studio offers the Live preview feature. This is really cool feature, in which you can see your controller attributes, and if you click on it, it will redirect you to the control in the XAML file, and you can now edit with ease<img src="https://api.careers.saigontechnology.com/storage/ck-editor/image-Vxty7bGC8eYJxFklsGtfXGyr0AVgWdpndvzvLYzm.png">Figure 12. Live preview features<img src="https://api.careers.saigontechnology.com/storage/ck-editor/image-yFkp3auCiSh62quvemWSpzHn3gEg1Xvg8n9hCRqR.png">Figure 13. Live preview inspect controls feature<h2 style="text-align:justify;">6. What’s next?</h2>This chapter gives an idea of what .NET MAUI is and a brief of what is behind the scene. Spend some time playing with it and we will go deeper into controls and UI stuff in the next chapter. See you soon.Source: <a href="https://saigontechnology.com/blog/say-hello-to-net-maui">https://saigontechnology.com/blog/say-hello-to-net-maui</a></body></html>

This series will introduce an overview of .NET MAUI and how you start to develop an application by using .NET MAUI. The first article will briefly cover what .NET MAUI is, how it behaves behind the scene, and some cool features of the framework.

&lt;html&gt;&lt;body&gt;&lt;h2 style=&quot;text-align:justify;&quot;&gt;1. Introduction&lt;/h2&gt;&lt;p style=&quot;text-align:justify;&quot;&gt;.NET MAUI stands for .NET Multi-platform App UI, which is a cross-platform framework for creating not only native mobile but also desktop apps with C# and XAML. This means that you can develop an application that can run on Android, iOS, macOS, and Windows from a single shared codebase.&lt;/p&gt;&lt;p style=&quot;text-align:justify;&quot;&gt;.NET MAUI is open source with an MTI license and is the next generation of Xamarin.Forms. Its UI controls have been rebuilt to improve performance and extensibility. As a result, there are some similarities between .NET MAUI and Xamarin.Forms. The purpose of .NET MAUI is to enable you to implement as much of your app logic and UI layouts in a single codebase as possible.&lt;/p&gt;&lt;p style=&quot;text-align:justify;&quot;&gt;.NET MAUI was released on May 23rd, 2022, and will follow the same monthly service schedule as the rest of .NET. It will retain the release schedule every 18 months that .NET developers have grown accustomed to.&lt;/p&gt;&lt;h2 style=&quot;text-align:justify;&quot;&gt;2. .NET MAUI Architecture&lt;/h2&gt;&lt;p style=&quot;text-align:justify;&quot;&gt;From .Net 6, it has provided a series of platform-specific frameworks for creating apps: .NET for Android, for iOS, for MacOS and Windows UI (WinUI 3) libraries. These frameworks share the same .NET 6 Base Class Library (BCL). While BCL allows apps running on different platforms to share common business logic, the developer can define the user interface and models of how the elements of it communicate and interoperate. They can have separate UI for each platform separately, however, this approach requires you to develop and maintain a code base for each individual family of devices.&lt;/p&gt;&lt;p style=&quot;text-align:justify;&quot;&gt;The below diagram shows a high-level of the architecture of a .NET MAUI app:&lt;/p&gt;&lt;p style=&quot;text-align:justify;&quot;&gt;&lt;img src=&quot;https://api.careers.saigontechnology.com/storage/ck-editor/image-rRE3uJikie3wsTghk4dKhWyZxAbloHhnw459qkqn.png&quot;&gt;&lt;/p&gt;&lt;p style=&quot;text-align:justify;&quot;&gt;&lt;i&gt;Figure 1. .NET MAUI architecture&lt;/i&gt;&lt;/p&gt;&lt;p style=&quot;text-align:justify;&quot;&gt;In a .NET MAUI development, you write code that focuses on interacting with the .NET MAUI API (1). Then the framework directly consumes the native platform APIs (3). Moreover, the app code may directly interact with the platform APIS too, if needed. (2)&lt;/p&gt;&lt;p style=&quot;text-align:justify;&quot;&gt;Despite developing a .NET MAUI App that can be done on both PC and Mac, building apps for iOS and macOS still requires a MAC. Here is how a .NET MAUI app is compiled:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align:justify;&quot;&gt;Android apps built using .NET MAUI compile from C# into an intermediate language (IL) which is then just-in-time (JIT) compiled to a native assembly when the app launches.&lt;/li&gt;&lt;li style=&quot;text-align:justify;&quot;&gt;iOS apps built are fully ahead-of-time (AOT) compiled from C# into native ARM assembly code.&lt;/li&gt;&lt;li style=&quot;text-align:justify;&quot;&gt;The app is built for macOS using&nbsp;&lt;strong&gt;Mac Catalyst&lt;/strong&gt;, which brings your iOS built with UIKit to the desktop, and augments it with additional AppKit and platform APIs as required.&lt;/li&gt;&lt;li style=&quot;text-align:justify;&quot;&gt;Windows apps use the WinUI 3 library to create native apps that target the Windows desktop platform.&lt;/li&gt;&lt;/ul&gt;&lt;h2 style=&quot;text-align:justify;&quot;&gt;3. .NET MAUI Features&lt;/h2&gt;&lt;h3 style=&quot;text-align:justify;&quot;&gt;Modern development tools&lt;/h3&gt;&lt;p style=&quot;text-align:justify;&quot;&gt;Create modern and innovative applications using the latest .Net 6 technology which is updated annually. The development environment supports both Mac and Windows. Another advantage is the large community of developers who are developing and contributing to .Net.&lt;/p&gt;&lt;h3 style=&quot;text-align:justify;&quot;&gt;UI controls for building application interface&lt;/h3&gt;&lt;p style=&quot;text-align:justify;&quot;&gt;Maximize code reuse by not having to rebuild the entire UI for each platform you target. The framework will take care of this for you by applying XAML, built-in controls, and other advanced features. You can also customize controls yourself to be pixel-perfect and take advantage of the community by using third-party UI controls via the NuGet package manager.&lt;/p&gt;&lt;h3 style=&quot;text-align:justify;&quot;&gt;Cross-platform APIs for devices features&lt;/h3&gt;&lt;p style=&quot;text-align:justify;&quot;&gt;You can use common shared APIs or take advantage of native performance by using specific APIs to control device sensors or unique features. For example, you can access MapKit, UIKit, SiriKit, etc., which are only available on iOS and macOS. Or you can use shared APIs across devices such as Battery, Email, Geolocation, Accelerometer&hellip;&lt;/p&gt;&lt;h3 style=&quot;text-align:justify;&quot;&gt;Single project&lt;/h3&gt;&lt;p style=&quot;text-align:justify;&quot;&gt;Take advantage of shared resources such as images, fonts, platform-specific features, and business logic in a single codebase. Or you can guide how it compiles for the targeted platform easily.&lt;/p&gt;&lt;h3 style=&quot;text-align:justify;&quot;&gt;Full App Platform&lt;/h3&gt;&lt;p style=&quot;text-align:justify;&quot;&gt;The framework provides Pages, Layouts, and Controls for building UI using C# and XAML. It also includes two-way binding, navigation, state management, animation, dependency service, platform API, theme, and more.&lt;/p&gt;&lt;h3 style=&quot;text-align:justify;&quot;&gt;Blazor hybrid and .NET MAUI&lt;/h3&gt;&lt;p style=&quot;text-align:justify;&quot;&gt;We can combine both technologies to build not only web but also native applications. MAUI will use shared Blazor components or mix between them to build a complete application.&lt;/p&gt;&lt;h2 style=&quot;text-align:justify;&quot;&gt;4. XAML&lt;/h2&gt;&lt;p style=&quot;text-align:justify;&quot;&gt;&lt;img src=&quot;https://api.careers.saigontechnology.com/storage/ck-editor/image-F5zXEvjeNuc38itSLuhfSU8eihLahKlHRcelGvoy.png&quot;&gt;&lt;/p&gt;&lt;p style=&quot;text-align:justify;&quot;&gt;&lt;i&gt;Figure 2. An example of a XAML file&rsquo;s content&lt;/i&gt;&lt;/p&gt;&lt;p style=&quot;text-align:justify;&quot;&gt;The XAML stands for eXtensible App Markup Language. It is a declarative and very powerful language for not only defining the UI of the application but also handy for data binding and navigating the app. The XAML will come with a C# code behind the file, both defining the same partial class. We will look at this in the next section&lt;/p&gt;&lt;h2 style=&quot;text-align:justify;&quot;&gt;5. Helloworld Application&lt;/h2&gt;&lt;h3 style=&quot;text-align:justify;&quot;&gt;Development environment setup&lt;/h3&gt;&lt;p style=&quot;text-align:justify;&quot;&gt;Prerequisites:&nbsp;&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align:justify;&quot;&gt;.Net 6 or greater&lt;/li&gt;&lt;li style=&quot;text-align:justify;&quot;&gt;.NET Multi-platform App UI development package (picture below)&lt;/li&gt;&lt;li style=&quot;text-align:justify;&quot;&gt;Visual Studio 2022 or newer&lt;/li&gt;&lt;li style=&quot;text-align:justify;&quot;&gt;Android SDK and Simulator(s)&lt;/li&gt;&lt;li style=&quot;text-align:justify;&quot;&gt;A Mac computer&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align:justify;&quot;&gt;&lt;img src=&quot;https://api.careers.saigontechnology.com/storage/ck-editor/image-7cDbXl1iMhrNppZfqcQPAkSNsQeS4OkZz8jUchkL.png&quot;&gt;&lt;/p&gt;&lt;p style=&quot;text-align:justify;&quot;&gt;&lt;i&gt;Figure 3. Required .NET Multi-platform App UI Development&lt;/i&gt;&lt;/p&gt;&lt;h3 style=&quot;text-align:justify;&quot;&gt;Project structure&lt;/h3&gt;&lt;p style=&quot;text-align:justify;&quot;&gt;Create new project&lt;/p&gt;&lt;p style=&quot;text-align:justify;&quot;&gt;&lt;img src=&quot;https://api.careers.saigontechnology.com/storage/ck-editor/image-8NiJAcWgQeCNPo75szevIFezJ3RJ9BQCTBO8uxvl.png&quot;&gt;&lt;/p&gt;&lt;p style=&quot;text-align:justify;&quot;&gt;&lt;i&gt;Figure 4. Step 1 - Create new project&lt;/i&gt;&lt;/p&gt;&lt;p style=&quot;text-align:justify;&quot;&gt;&lt;img src=&quot;https://api.careers.saigontechnology.com/storage/ck-editor/image-ozPMTy5xnbmGOs3HNfbXwI2994x2fD4kWbaRxfia.png&quot;&gt;&lt;/p&gt;&lt;p style=&quot;text-align:justify;&quot;&gt;&lt;i&gt;Figure 5. Step 2- filter the MAUI category and select .NET MAUI APP project&lt;/i&gt;&lt;/p&gt;&lt;p style=&quot;text-align:justify;&quot;&gt;&lt;img src=&quot;https://api.careers.saigontechnology.com/storage/ck-editor/image-YAcB5IKglvwSa2Q4Z1CH3wup42qP9p9aIlSE2OIm.png&quot;&gt;&lt;/p&gt;&lt;p style=&quot;text-align:justify;&quot;&gt;&lt;i&gt;Figure 6. Step 3 - Choose your project&rsquo;s name&lt;/i&gt;&lt;/p&gt;&lt;p style=&quot;text-align:justify;&quot;&gt;&lt;img src=&quot;https://api.careers.saigontechnology.com/storage/ck-editor/image-dHDksQ2yBCoNyRQdqwkTxs0fzIR0eXxiByS4GHaE.png&quot;&gt;&lt;/p&gt;&lt;p style=&quot;text-align:justify;&quot;&gt;&lt;i&gt;Figure 7. Step 4 - Choose your .NET Framework (newest version)&lt;/i&gt;&lt;/p&gt;&lt;h3 style=&quot;text-align:justify;&quot;&gt;Structure&lt;/h3&gt;&lt;p style=&quot;text-align:justify;&quot;&gt;&lt;img src=&quot;https://api.careers.saigontechnology.com/storage/ck-editor/image-WpQ1LsQnnzeWFErvHy2tbYzfTMGAcLdfyoMVsSAz.png&quot;&gt;&lt;/p&gt;&lt;p style=&quot;text-align:justify;&quot;&gt;&lt;i&gt;Figure 8. .NET MAUI project structure&lt;/i&gt;&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align:justify;&quot;&gt;&lt;strong&gt;Dependencies:&lt;/strong&gt; Multi-targeted platform of the application such as Android, iOS, Windows or Mac&lt;/li&gt;&lt;li style=&quot;text-align:justify;&quot;&gt;&lt;strong&gt;App.xaml &amp;amp; App.cs:&lt;/strong&gt; defines application&rsquo;s resources&lt;/li&gt;&lt;li style=&quot;text-align:justify;&quot;&gt;&lt;strong&gt;AppShell.xaml &amp;amp; AppShell.cs:&lt;/strong&gt; a new concept with .NET MAUI. Using to define Shell content. You can use this code behind the file to register routes, define the tabs or fly navigation and much more.&lt;/li&gt;&lt;li style=&quot;text-align:justify;&quot;&gt;&lt;strong&gt;MainPage.xaml &amp;amp; MainPage.cs:&lt;/strong&gt; The UI file, where you define how your UI looks like by stacking controls up together such as Button, Label, Input, and also the Event Handle for each control&lt;/li&gt;&lt;li style=&quot;text-align:justify;&quot;&gt;&lt;strong&gt;MauiProgram.cs:&lt;/strong&gt; similar to Startup.cs where the application start and the developer can config application such as DI and other stuff&nbsp;&lt;/li&gt;&lt;/ul&gt;&lt;h3 style=&quot;text-align:justify;&quot;&gt;Debug&lt;/h3&gt;&lt;p style=&quot;text-align:justify;&quot;&gt;You have a bunch of options to choose from to debug your application depending on what platform you targeted.&lt;/p&gt;&lt;p style=&quot;text-align:justify;&quot;&gt;iOS&lt;/p&gt;&lt;p style=&quot;text-align:justify;&quot;&gt;.NET MAUI team has worked very hard to bring convenience to your development experience. Despite you will need an Apple Developer Account to publish your application to the App Store. However, MAUI also allows you up to 3 ways to debug your applications as an iOS app.&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align:justify;&quot;&gt;You can debug your app on the iOS simulator directly on your Mac&lt;/li&gt;&lt;li style=&quot;text-align:justify;&quot;&gt;Or you can debug your application on the remote simulator by pairing remotely to your Mac from your window machine&lt;/li&gt;&lt;li style=&quot;text-align:justify;&quot;&gt;Or you can debug it on your real iPhone, however, you will also require an Apple Developer account to achieve this&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align:justify;&quot;&gt;Android&lt;/p&gt;&lt;p style=&quot;text-align:justify;&quot;&gt;Visual Studio 2022 is one of the most powerful IDEs. You don&rsquo;t need to take care of any Android requirements for you such as Android SDK or Android Simulators creation. You just need a simple click and it is ready to go.&lt;/p&gt;&lt;p style=&quot;text-align:justify;&quot;&gt;&lt;img src=&quot;https://api.careers.saigontechnology.com/storage/ck-editor/image-jRXF8Z1HCFjHtge5KxMcqCndLG4WgrOwBvip1YnJ.png&quot;&gt;&lt;/p&gt;&lt;p style=&quot;text-align:justify;&quot;&gt;&lt;i&gt;Figure 9. Android device manager screen&lt;/i&gt;&lt;/p&gt;&lt;p style=&quot;text-align:justify;&quot;&gt;&lt;img src=&quot;https://api.careers.saigontechnology.com/storage/ck-editor/image-KSBLrF5QSEWWo1ptCtcdTDFk3A9Fklhpot6FDzmY.png&quot;&gt;&lt;/p&gt;&lt;p style=&quot;text-align:justify;&quot;&gt;&lt;i&gt;Figure 10. Android device&rsquo;s spec setup&lt;/i&gt;&lt;/p&gt;&lt;h3 style=&quot;text-align:justify;&quot;&gt;Window Application&lt;/h3&gt;&lt;p style=&quot;text-align:justify;&quot;&gt;You need to enable your Developer mode on your Windows to be able to debug your application&lt;/p&gt;&lt;p style=&quot;text-align:justify;&quot;&gt;&lt;img src=&quot;https://api.careers.saigontechnology.com/storage/ck-editor/image-86m3piOZB2RWCuD6jRP6aXvA7g1kD84H6ZowKPOV.png&quot;&gt;&lt;/p&gt;&lt;p style=&quot;text-align:justify;&quot;&gt;&lt;i&gt;Figure 11. Enable Developer Mode to be able to debug your application in Windows&lt;/i&gt;&lt;/p&gt;&lt;h3 style=&quot;text-align:justify;&quot;&gt;Features&lt;/h3&gt;&lt;p style=&quot;text-align:justify;&quot;&gt;Hot reload&lt;/p&gt;&lt;p style=&quot;text-align:justify;&quot;&gt;MAUI support not only the XAML hot reload but also the code behind logic when the file is saved. It means that you can see your change in seconds in your debugging devices without any install 3rd library&lt;/p&gt;&lt;p style=&quot;text-align:justify;&quot;&gt;Live preview&lt;/p&gt;&lt;p style=&quot;text-align:justify;&quot;&gt;Visual Studio offers the Live preview feature. This is really cool feature, in which you can see your controller attributes, and if you click on it, it will redirect you to the control in the XAML file, and you can now edit with ease&lt;/p&gt;&lt;p style=&quot;text-align:justify;&quot;&gt;&lt;img src=&quot;https://api.careers.saigontechnology.com/storage/ck-editor/image-Vxty7bGC8eYJxFklsGtfXGyr0AVgWdpndvzvLYzm.png&quot;&gt;&lt;/p&gt;&lt;p style=&quot;text-align:justify;&quot;&gt;&lt;i&gt;Figure 12. Live preview features&lt;/i&gt;&lt;/p&gt;&lt;p style=&quot;text-align:justify;&quot;&gt;&lt;img src=&quot;https://api.careers.saigontechnology.com/storage/ck-editor/image-yFkp3auCiSh62quvemWSpzHn3gEg1Xvg8n9hCRqR.png&quot;&gt;&lt;/p&gt;&lt;p style=&quot;text-align:justify;&quot;&gt;&lt;i&gt;Figure 13. Live preview inspect controls feature&lt;/i&gt;&lt;/p&gt;&lt;h2 style=&quot;text-align:justify;&quot;&gt;6. What&rsquo;s next?&lt;/h2&gt;&lt;p style=&quot;text-align:justify;&quot;&gt;This chapter gives an idea of what .NET MAUI is and a brief of what is behind the scene. Spend some time playing with it and we will go deeper into controls and UI stuff in the next chapter. See you soon.&lt;/p&gt;&lt;p style=&quot;text-align:justify;&quot;&gt;Source: &lt;a href=&quot;https://saigontechnology.com/blog/say-hello-to-net-maui&quot;&gt;https://saigontechnology.com/blog/say-hello-to-net-maui&lt;/a&gt;&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;

Say Hello to .NET MAUI

.NET Multi-platform App UI

<html><body><h2>1. Introduction</h2><h3>What is Supabase</h3>Supabase is an open source founded in 2020 by Paul Copplestone and Jonathan Thornton. It provides developers with a set of tools to help them easily build web and mobile applications by handling common functionality like user management, data storage, and file hosting.Supabase manages all of the infrastructure and databases required so developers can focus on just building their applications. Some of the key features Supabase offers include user authentications, real-time synchronization, auto-generated APIs, dashboard and storage. Since it is open source, Supabase gives developers more transparency and control compared to other proprietary backend-as-a-service options. In just a couple years, Supabase has gained significant traction with developers who want a powerful but simplified way to create modern applications<h2>2. Features</h2><h3>Database</h3>Supabase database is built on top of PostgreSQL. It is an open source RDBMS which offers a reliable and scalable solution for various scenarios either small projects or enterprise applications. The database seamlessly integrates with Supabase’s authentication, storage and real-time services that will help developers to build a full-stack application more efficiently and quickly. Moreover, it provides powerful tools as web-bases like SQL editor, migrations, and APIs combine with built-in row-level security for data privacy and integrity without any extra configuration.<h3>Storage</h3>The Supabase storage service is built on Amazon S3, ensuring data redundancy, durability and automatic backups. The storage service offers a variety of authentication and authorization such as access control, row-level security policies, signed URLs for secure file access. It also supports real-time updates and notifications for file related events that will enhance the user experience.<h3>Authentication</h3>Supabase provides a comprehensive and flexible authentication system that will be tight with other services such as database or storage. It provides various authentication providers such as email/ password, 3rd parties providers (Google, Facebook…) and custom providers.The authentication allows easy association of user data with database records by implementing access control or row-level authentication. It offers built-in support for user management, password reset flows and email verification. Multi-factor is also provided by Supabase which is very flexible for developers to control their application access control flows.<h3>Realtime</h3>With PostgreSQL’s replication and streaming capabilities, real-time service immediately propagates database changes to connected clients for up-to-date data. It supports real-time subscriptions, allowing developers to define specific data for clients to subscribe to and receive automatic updates.<h3>Functions</h3>Developers can write Edge functions by Javascript or Typescript to manipulate content ( image optimization, compression, server-side rendering), caching strategies, security layers and many more use-cases. They offer user-friendly tooling for management, dashboard for monitoring, version control and much more.<h2>3. Pros &amp; Cons</h2>Supabase, as an open-source platform for building modern applications, offers a range of benefits and advantages, but it also comes with some potential drawbacks and considerations. Here are some pros and cons of using Supabase:<h3>Pros</h3><ul><li>Open-Source: Supabase is an open-source stage, which suggests that engineers can get to and adjust the source code as per their necessities. This advances straightforwardness, customization, and community-driven improvement.</li><li>Coordinates Administrations: Supabase gives a suite of firmly coordinated administrations, counting a database, verification, capacity, and real-time highlights. This integration rearranges advancement and diminishes the requirement for overseeing different third-party administrators.</li><li>Versatility: Supabase is built on the beat of battle-tested advances like PostgreSQL and Amazon S3, which are known for their adaptability and execution. This guarantees that applications built on Supabase can handle expanding workloads and activity without compromising execution.</li><li>Ease of Utilize: Supabase offers a user-friendly interface and tooling, making it simpler for designers to oversee and convey their applications, databases, and administrations.</li><li>Community Bolster: As an open-source extension, Supabase benefits from a dynamic and developing community of engineers who contribute to its advancement, give bolster, and share assets.</li></ul><h3>Cons</h3><ul><li>Seller Lock-in: Whereas Supabase is open-source, it depends intensely on exclusive administrations from Amazon Web Administrations (AWS), such as Amazon S3 and AWS Lambda. This could lead to potential merchant lock-in and expanded costs as the application scales.</li><li>Constrained Customization: In spite of being open-source, customizing and altering certain center components of Supabase may be challenging, particularly for less experienced engineers or those new with the fundamental advances.</li><li>Security Contemplations: As with any application that handles delicate information, engineers must be careful around executing legitimate security measures and taking after best hones when utilizing Supabase to guarantee information protection and security.</li><li>Learning Bend: Whereas Supabase points to simplify advancement, designers may still ought to familiarize themselves with the basic innovations and ideas, such as PostgreSQL, Amazon S3, and serverless capacities, which can have a learning bend</li><li>Dependency on Third-Party Services: Indeed in spite of the fact that Supabase gives a coordinated suite of administrations, it still depends on third-party administrators like AWS, which implies that any blackouts or issues with those administrations can possibly affect applications built on Supabase.</li></ul><h2>4. How to build an app with Supabase</h2><h3>Introduce what we are going to build</h3>Let's build a simple Todo app using React Native and Supabase! This will be a greatopportunity to learn how to integrate Supabase with a React Native application and leverage its various services, such as the database, authentication, and real-time features.Here's an overview of what we'll be doing:<ul><li>Set up the React Native project: We'll start by creating a new React Native project and installing the required dependencies, including the Supabase client library.</li><li>Configure Supabase: We'll set up a new Supabase project and configure our React Native app to connect to the Supabase services.</li><li>Implement authentication: We'll integrate Supabase's authentication service into our app, allowing users to sign up, log in, and log out.</li><li>Create the Todo list: We'll use Supabase's database to store and retrieve todo items for each authenticated user.</li><li>User interface: We'll build a simple user interface using React Native components to display the Todo list, add new items, and mark items as complete.</li><li>Throughout the process, we'll explore various Supabase features and learn how to integrate them seamlessly with our React Native application. By the end of this project, you'll have a solid understanding of how to build a full-stack application using React Native and Supabase.</li></ul>Are you ready to get started? Let's begin by setting up the React Native project!<h3>Init Expo project</h3>Step 1: Create your first Supabase account &amp; projectAfter login your Supabase account successfully, please head to <a href="https://supabase.com/dashboard/projects">https://supabase.com/dashboard/projects</a> for creating your first project<img class="image_resized" style="width:83.84%;" src="https://api.careers.saigontechnology.com/storage/ck-editor/unnamed%20(16)-sExyEjxRmZNVeY4eRmbODv5WFYNBjMj5us1h1omq.webp"> Step 2: Init you code base projectUnset        &gt; npx create-expo-app todo-techblog       &gt; cd todo-techblog       &gt; npx expo install @supabase/supabase-js @react-native-async-storage/async-storage react-native-url-polyfill react-native-elements rneui/themed rneui/baseStep 3: Create new src/utils/supabase.js file as image below and copy the codeJavascript       import 'react-native-url-polyfill/auto';       import AsyncStorage from '@react-native-async-storage/async-storage';       import { createClient } from '@supabase/supabase-js';        const supabaseUrl = YOUR_REACT_NATIVE_SUPABASE_URL;       const supabaseAnonKey = YOUR_REACT_NATIVE_SUPABASE_ANON_KEY;        export const supabase = createClient(supabaseUrl, supabaseAnonKey, {            auth: {                  storage: AsyncStorage,                  autoRefreshToken: true,                  persistSession: true,                  detectSessionInUrl: false,              },            });There are few information that you need to change to your own project details<ul><li>YOUR_REACT_NATIVE_SUPABASE_URL</li><li>YOUR_REACT_NATIVE_SUPABASE_ANON_KEY</li></ul>You can find these pieces of information in your project’s dashboard:<figure class="image image_resized" style="width:88.01%;"><img src="https://api.careers.saigontechnology.com/storage/ck-editor/unnamed%20(17)-bIPVThIRTemdz6RlhdyouLMtxf8cG3dBoC1VWD0b.webp"></figure><h3>Authentication</h3>Step 1: Setup your app’s authentication flow//App.jsimport 'react-native-url-polyfill/auto'import { useState, useEffect } from 'react'import { supabase } from './lib/supabase'import Auth from './components/Auth'import Account from './components/Account'import { View } from 'react-native'import { Session } from '@supabase/supabase-js' export default function App() {  const [session, setSession] = useState&lt;Session | null&gt;(null)   useEffect(() =&gt; {    supabase.auth.getSession().then(({ data: { session } }) =&gt; {      setSession(session)    })     supabase.auth.onAuthStateChange((_event, session) =&gt; {      setSession(session)    })  }, [])   return (    &lt;View&gt;      {session &amp;&amp; session.user ? &lt;Account key={session.user.id} session={session} /&gt; : &lt;Auth /&gt;}    &lt;/View&gt;  )}<h3>Create new table in Supabase</h3><figure class="image image_resized" style="width:86.93%;"><img src="https://api.careers.saigontechnology.com/storage/ck-editor/unnamed%20(18)-wxMFwFxWNqbhX9kr9A8XL6uK1wn5eSLjwy9UdKWG.webp"></figure><h3>C.R.U.D operations with Database</h3>Now we create a new src/page/TodoPage.js import React, { useEffect, useState } from 'react';import { View, Text, TextInput, FlatList, Sheet, TouchableOpacity } from 'react-native';import { supabase } from '../utils/supabase'import { CheckBox } from '@rneui/themed'; const TodoPage = () =&gt; {  const [todos, setTodos] = useState([]);  const [newTodo, setNewTodo] = useState('');   useEffect(() =&gt; {    fetchTodos();  }, []);   const fetchTodos = async () =&gt; {    await supabase      .from('todo')      .select('*')      .eq('user_id', (await supabase.auth.getSession()).data.session.user.id)      .then((response) =&gt; {        setTodos(response.data ?? []);      })      .order('is_compeleted', { ascending: false });  } //add a new todo to Supabase  const addTodo = async () =&gt; {    await supabase      .from('todo')      .insert([{        text: newTodo,        user_id: (await supabase.auth.getSession()).data.session.user.id,      }])      .then((response) =&gt; {        fetchTodos();      });     setNewTodo('');  } //delete a todo from Supabase  const removeTodo = async (id) =&gt; {    await supabase      .from('todo')      .delete()      .eq('id', id)      .eq('user_id', (await supabase.auth.getSession()).data.session.user.id)      .then((response) =&gt; {        fetchTodos();      });  } //complete a todo from Supabase  const completeTodo = async (id, checked) =&gt; {    await supabase      .from('todo')      .update([{        is_completed: !checked,      }])      .eq('id', id)      .eq('user_id', (await supabase.auth.getSession()).data.session.user.id)      .then((response) =&gt; {        fetchTodos();      });  }   return (    &lt;View ={s.container}&gt;      &lt;Text ={s.heading}&gt;Todo App&lt;/Text&gt;      &lt;View ={s.inputContainer}&gt;        &lt;TextInput          ={s.input}          placeholder="Enter a new todo"          value={newTodo}          onChangeText={(text) =&gt; setNewTodo(text)}        /&gt;        &lt;TouchableOpacity ={s.addButton} onPress={addTodo}&gt;          &lt;Text ={s.addButtonText}&gt;Add&lt;/Text&gt;        &lt;/TouchableOpacity&gt;      &lt;/View&gt;      &lt;FlatList        data={todos}        keyExtractor={(item) =&gt; item.id.toString()}        renderItem={({ item }) =&gt; (          &lt;View ={s.todoItem}&gt;            &lt;CheckBox              checked={item.is_completed}              onPress={() =&gt; completeTodo(item.id, item.is_completed)}            /&gt;            &lt;Text ={s.todoText}&gt;{item.text}&lt;/Text&gt;            &lt;TouchableOpacity onPress={() =&gt; removeTodo(item.id)}&gt;              &lt;Text ={s.deleteButton}&gt;Delete&lt;/Text&gt;            &lt;/TouchableOpacity&gt;          &lt;/View&gt;        )}      /&gt;    &lt;/View&gt;  );}; const s = Sheet.create({  container: {    marginTop: 40,    padding: 16,    backgroundColor: '#fff',  },  heading: {    fontSize: 24,    fontWeight: 'bold',    marginBottom: 16,  },  inputContainer: {    flexDirection: 'row',    alignItems: 'center',    marginBottom: 16,  },  input: {    flex: 1,    borderWidth: 1,    borderColor: '#ccc',    borderRadius: 4,    padding: 8,    marginRight: 8,  },  addButton: {    backgroundColor: '#007AFF',    paddingHorizontal: 16,    paddingVertical: 8,    borderRadius: 4,  },  addButtonText: {    color: '#fff',    fontWeight: 'bold',  },  todoItem: {    flexDirection: 'row',    alignItems: 'center',    marginBottom: 8,    padding: 8,    backgroundColor: '#f2f2f2',    borderRadius: 4,  },  todoText: {    flex: 1,  },  delete button: {    color: 'red',    fontWeight: 'bold',  },}); export default TodoPage;<h2>5. Conclusion</h2>Supabase is an open-source platform that provides a suite of backend tools and services for building modern applications. It aims to simplify and accelerate the development process by offering a tightly integrated set of features, including:<ul><li>Database: Supabase provides a robust database solution built on top of PostgreSQL, a popular and feature-rich open-source relational database management system (RDBMS).</li><li>Authentication: Supabase offers a comprehensive authentication system that supports various authentication providers, such as email/password, third-party providers (e.g., Google, GitHub), and custom providers. It seamlessly integrates with the database and row-level security policies.</li><li>Storage: Supabase provides a scalable and secure storage solution built on top of Amazon S3, allowing developers to manage file uploads, downloads, and access control with ease.</li><li>Real-time: Supabase includes a powerful real-time service that enables real-time data synchronization and updates between clients and the server, enabling responsive and engaging applications.</li><li>Edge Functions: Supabase offers serverless edge functions that run closer to the user, enabling faster response times and improved performance for web applications.</li><li>Integration: Supabase seamlessly integrates its various services, allowing developers to build full-stack applications with minimal setup and configuration.</li><li>Open-Source: Supabase is an open-source platform, promoting transparency, customization, and community-driven development.</li></ul><ol><li>References</li></ol><ul><li><a href="https://supabase.com/">https://supabase.com/</a></li><li><a href="https://docs.expo.dev/guides/using-supabase/">https://docs.expo.dev/guides/using-supabase/</a></li></ul><ol start="2"><li>Source code</li></ol><ul><li><a href="https://github.com/minhphansts/supabase-todo-app">https://github.com/minhphansts/supabase-todo-app</a></li></ul></body></html>

This article will help you understand what Supabase is and how you can achieve it to build your application more robustly and efficiently by exploring it and creating a Todo app.

Supabase: Build an ready to published TODO app in just 30 minutes

<html><body><h2>1. Introduction </h2>In this article, I will guide you on how to build a simple UI with MAUI, including transition and mapping data. We will make a TODO app, which needs authentication, and then the main application where you can create/ edit, or mark the Todo task.The below mockup image will give you some hints about how the UI will look like<img src="https://api.careers.saigontechnology.com/storage/ck-editor/CKEDITOR-2fmIh4j7HwIeglTJ5uZnttqzbjayDvLsx64LN7O8.png" alt="Figure 1. TODO app’s UI Mockup">Figure 1. TODO app’s UI Mockup<h2>2. Screens</h2><h3>Sign In</h3>In the first screen, we will use the VerticalStackLayout to stack components vertically from top to bottom. We will use 2 Entry controls for Email and Password, and 3 buttons for Sign In, Register and Forget password.The Application’s title and “Forget Password” buttons will stick to the top and bottom respectively. The rest of the UI will stay in the middle when the height is increasing or narrowing.Let’s create a new ContentPage and name it “SignIn” in the folder “Pages” as in the image shown below:<img src="https://api.careers.saigontechnology.com/storage/ck-editor/CKEDITOR-cvoGEu1LXiXwnKjx7VnZsSBtB33vwMXPn0ObrKuZ.png">Figure 2. Sign In page’s contentWe modify the AppShell.xaml a little to make the application start from the page we created recently:<img src="https://api.careers.saigontechnology.com/storage/ck-editor/CKEDITOR-GYSfKrn3UdiLTaFOs3EPsEPQ32eyARlEvSuHiN1r.png">Figure 3. AppShell’s contentTo achieve the requirements stated above. We need to use StackLayout and divide the UI into 3 sections separately: Top, Middle, and Bottom<img src="https://api.careers.saigontechnology.com/storage/ck-editor/CKEDITOR-EI3FOI65lJGa1WpbTpo94Y6OyejXKhURnhpt1tvW.png">Figure 4. Sign In page’s structureNow, we add the Label control to the TOP section<img src="https://api.careers.saigontechnology.com/storage/ck-editor/CKEDITOR-ui1Z8G8OsuvWfNAFd4jxAfh40X27tvh5zejuJBJ9.png">Figure 5. Sign In page’s top sectionFor Email and Password inputs, we use Entry control to draw it in UI. Entry has a property named IsPassword, if we set it to True, the UI will hide what the user typed in as usual.<img src="https://api.careers.saigontechnology.com/storage/ck-editor/CKEDITOR-NWyA0c5at5djLLqmvdlKDjKhqym6CNTAewFKpoUY.png">Figure 6. Entry code examplesFor buttons, we use Button controls to achieve the click event. The event will be explained more clearly later in this article<img src="https://api.careers.saigontechnology.com/storage/ck-editor/CKEDITOR-yiiVTjc76gPg5Uqrko0gEkTc69xlATcYHRFW0dye.png">Figure 7. Button code examplesThe final result will look like this::<img src="https://api.careers.saigontechnology.com/storage/ck-editor/CKEDITOR-ZrflQrTk3HxpNfpzXYtpPkBXQVBmgFw1n47zgLuC.png">Figure 8. The final result of Sign In page<img src="https://api.careers.saigontechnology.com/storage/ck-editor/CKEDITOR-vGdPD4wphh02tL7P6tD2XiFqHXjfRvXVVvEeWj19.png">Figure 9. The code behind it looks like thisLet's continue by adding some logic to the “Sign In” button. For example, we will display an alert if the user is not type in the Email or Password field; otherwise, we will navigate to the MainPage<img src="https://api.careers.saigontechnology.com/storage/ck-editor/CKEDITOR-3AqWjqFaAdOBS5Zb4ypvP0tqbu6sIhTTaFAS3GbU.png">Figure 10. The code to achieve the logic above<img src="https://api.careers.saigontechnology.com/storage/ck-editor/CKEDITOR-CFWbeS8BeHWspBAxSNsFNCmTE37wL0SZLOM0nQDH.png">Figure 11. The alert will pop up if Email or Password is empty<img src="https://api.careers.saigontechnology.com/storage/ck-editor/CKEDITOR-yix10WlplIlXYBd1hOGcnkJcLZ6so6SzbEk7AsLI.png">Figure 12. Otherwise, it will navigate to the MainPage<h3>Register &amp; Forget Password</h3>Let's try to create 2 other pages and name them Register and Forgot Password respectively. Play with it by adding more controls. This article will only use them for navigation purposes<img src="https://api.careers.saigontechnology.com/storage/ck-editor/CKEDITOR-WvPDKdMoiDF1WblYrcteS9eM3wyIYw071DftvNzB.png">Figure 13. The Register page<img src="https://api.careers.saigontechnology.com/storage/ck-editor/CKEDITOR-DG5DtkVlPo9hygDEWmGSDU4xy4TU9FGCBkm3C2IU.png">Figure 14. The Forgot Password page<h3>Main Page</h3>This is the main page of our application, where we will display the list of TODO. For demo purposes, we will add a button to simulate the add event to the list.This page utilizes the CollectionView to present a list of items. The appearance of each item is specified through the CollectionView.ItemTemplate. To enable scrolling in case the list is extensive, we enclose the entire content within a ScrollView.<img src="https://api.careers.saigontechnology.com/storage/ck-editor/CKEDITOR-ck1g9V875zPON288wsI9sXJt4rPXjA95eYHd0Uxy.png">Figure 15. The final code example of MainPageThe result:<img src="https://api.careers.saigontechnology.com/storage/ck-editor/CKEDITOR-IYzm4cKm6ykHbhQq8TtElfciyLyXeVgEYXb3sDTY.png">Figure 16. The final result of MainPage<h2>3. Navigation</h2>There are multiple ways to handle navigation in the MAUI app. For example: <ul><li>NavigationPage</li><li>Shell</li><li>TabbedPage</li><li>CarouselPage</li><li>Modal Navigation or URI-based navigation.   </li></ul>This article will show you how to use 3 common navigation<h3>NavigationPage: </h3>NavigationPage is a built-in navigation container that manages a stack of pages. You can push new pages onto the stack and pop them off to go back. It provides a navigation bar with a back button by default.<img src="https://api.careers.saigontechnology.com/storage/ck-editor/CKEDITOR-zmp4LRQtnyCJVRQFYrD0miKnSDQuWA1T11HdcHun.png">Figure 17. Example code of NavigationPage<img src="https://api.careers.saigontechnology.com/storage/ck-editor/CKEDITOR-EmhyLFNrd60j9NgUDlxImpW2von4NFMSxIbpIhAI.png">Figure 18. Example code of how to navigate to another page<h3>Shell</h3>Shell is a higher-level navigation container that offers a simplified and declarative way to define your application's navigation structure. It allows you to define routes, handle navigation events, and easily customize the appearance of your app's navigation.<img src="https://api.careers.saigontechnology.com/storage/ck-editor/CKEDITOR-LHQagj6HIujXCckDHL0EbNT9wBNypMic0QRfoQb0.png">Figure 19. Example code of AppShell<img src="https://api.careers.saigontechnology.com/storage/ck-editor/CKEDITOR-nltJvihyO98b8jY2FW0ffyDt0FLpyXQYE8bwysZn.png">Figure 20. Example code of how to register a route<img src="https://api.careers.saigontechnology.com/storage/ck-editor/CKEDITOR-UgApGTQKMm6VWUXDbwp61rDkfxuPJkQP7Audd45j.png">Figure 21. Example code of how to navigate to another page by using Shell<h3>URI-based navigation (Based on Shell)</h3>MAUI supports URI-based navigation, where you can define routes and navigate to specific pages by using a URI. This allows for deep linking and handling navigation based on incoming URLs.<img src="https://api.careers.saigontechnology.com/storage/ck-editor/CKEDITOR-UgQ895CZPxiqTXdiBJazlCjz9aeQePx0Rq4eWJUs.png">Figure 22. Example code of navigation with parameters<img src="https://api.careers.saigontechnology.com/storage/ck-editor/CKEDITOR-mSKDlBz24KBOSScjFCZKzDNy1MkGYi6NGhgFZ7u3.png">Figure 23. Example code of how to access parameters at the destination page<h2>4. Design Pattern - Model-View-ViewModel (MVVM)</h2>MVVM stands for Model-View-ViewModel and is a design pattern commonly used in application development, including in .NET MAUI apps. MVVM provides a structured approach to separating concerns and organizing code in a way that enhances maintainability and testability.In the context of a .NET MAUI app, the MVVM pattern typically involves the following components:Model: The Model represents the data and business logic of the application.<img src="https://api.careers.saigontechnology.com/storage/ck-editor/CKEDITOR-Lj3QaxZKpUM7rgDL6w3UlunXJD6ihOkOlD6YNunF.png">Figure 24. TodoItem model classView: It defined how the application is presented to the user by defining controls, layout, and others<img src="https://api.careers.saigontechnology.com/storage/ck-editor/CKEDITOR-1MI989KmkhlOrrL5rtWHoMVtpbxsU2SE0tZJXhnm.png">Figure 25. View example ViewModel: plays a key role between View and Model. To connect and handle business logic in UI reactions<img src="https://api.careers.saigontechnology.com/storage/ck-editor/CKEDITOR-CMX22B6gWiwnPDzV1cM819A17P7wHdvdL25eMbyj.png">Figure 26. ViewModel exampleIn a .NET MAUI app, you typically use data binding and commands to establish the communication between the View and the ViewModel. The data binding mechanism allows the View to automatically update when the ViewModel's properties change, and commands enable the View to trigger actions in the ViewModel.By adopting the MVVM pattern in a .NET MAUI app, you can achieve a clean separation of concerns, easier testing, and improved code maintainability.</body></html>

This article will help you learn how to create a UI with MAUI layouts and controls. It also gives some tips when developing applications with MAUI

Say Hello to .NET MAUI

Related articles

OTHER ARTICLES FROM HONG MINH PHAN