Today we will build a Blazor Hybrid (based on .NET MAUI) application that will display a list of monkeys from around the world. We will start by building the business logic backend that pulls down json-encoded data from a RESTful endpoint. We will then leverage .NET MAUI APIs that can access your devices' location sensors, to find the closest monkey to us and also show the monkey on a map. We will also see how to display data in many different ways and then finally fully theme the application. The user-interface will be powered by Blazor.
Hey there! This workshop will be a hands on and a bring your own device workshop. You can develop on PC or Mac and all you will need to do is install Visual Studio or Visual Studio Code with the .NET MAUI workload and/or .NET MAUI extension. The workshop sample application is built on .NET 9, which means you will need at least version 17.12 of Visual Studio 2022 or newer. If you're using Visual Studio Code, or another code editor, make sure to have the latest .NET 9 SDK installed, also with the .NET MAUI workload.
Before starting the workshop, I recommend going through the quick 10 minute .NET MAUI Blazor Hybrid Tutorial that will guide you through installation and also ensuring everything is configured correct.
If you are new to mobile development, we recommend deploying to the platform that you're developing on. If you're on Windows, deploy to Windows first, for macOS deploy to your Mac. Otherwise a physical Android device is a great option and can be setup in just a few steps. If you don't have an Android device, don't worry as you can setup an Android emulator with hardware acceleration. If you don't have time to set this up ahead of time, don't worry as we are here to help during the workshop.
Beyond that you will be good to go for the workshop, have fun!
I have also put together an abstract of what you can expect for the day long workshop:
- Part 0 - Introduction to .NET MAUI Blazor Hybrid Session & Setup Help
- Part 1 - Displaying Data
- Part 2 - Add Monkey Dialog
- Part 3 - Navigation to Monkey Details Page
- Part 4 - Platform Features
- Part 5 - Theming the App
- Part 6 - Advanced Topics (Sharing State, Reusable Components)
To get started open the Part 1 - Displaying Data folder and open MonkeyFinderHybrid.sln. You can use this throughout the workshop. Each part has a README.md file with directions for that part. Also, each part has its own code inside of the folder, and each parts' starting point is where the previous part has left off. This should make it easy to still step into this workshop if you came in later, or you can look ahead in the next part to see the solution when you get stuck.
Gerald recorded a full 4-hour walkthrough end-to-end on his YouTube!
If you're looking to dive deeper into .NET MAUI as well, we have a very similar workshop for that as well.
In this workshop you will build the same app as in this one, the Monkey Finder app, but now using just .NET MAUI. By doing both workshops, you can really see the differences and similarities between the two approaches.
- .NET MAUI Blazor Hybrid
- .NET MAUI Blazor Hybrid Beginner Series
- .NET MAUI Website
- .NET MAUI on Microsoft Learn
- .NET MAUI Documentation
- .NET MAUI on GitHub
- .NET Beginner Series Videos
If you have any questions please reach out to us on X (previously Twitter): @SweekritiS, @jfversluis and/or @maddymontaquila.
Special shoutout to Jimmy Engström & James Montemagno for providing early feedback!