Build a Serverless App with Firebase Realtime Database in .NET MAUI

In this post, you’ll learn how to build a real-time & serverless application with Firebase and .NET MAUI.

Let’s get started.

Setup in Firebase console

Create a project in the Firebase Console.

Once you’re done creating a project, you’ll be redirected to the Project Overview page.

Navigate to the Realtime Database under the Build menu.

Click Create Database.

You’ll be prompted to select a location. You might want to choose the location where it is closest to the user. Read the firebase documentation for more information.

Click Next.

Security rules

This determines who has read and write access to your database. By default, your rules do not allow anyone access to your database.

For now, choose Start in test mode. It is good for getting started but allows anyone to read and overwrite your data. After testing, make sure to review the Understand Firebase Realtime Database Rules section.

Click Enable.

Now, you’ve just created your Realtime Database successfully.

The URL is depending on the location of the database and will be in one of the following forms:

DATABASE_NAME.firebaseio.com (for databases in us-central1)

DATABASE_NAME.REGION.firebasedatabase.app (for databases in all other locations)

Install NuGet package

Create a .NET MAUI project in Visual Studio and install the NuGet package FirebaseDatabase.net.

The FirebaseDatabase.net package in the NuGet Package Manager.

Saving Data

First, create your database object, something like:

public class TodoItem
{
    public string Title { get; set; }
}

Next, add an Entry field to your MainPage.xaml:

<Entry x:Name="TitleEntry" Placeholder="Something to do..." />

In your MainPage.xaml.cs, create an instance of FirebaseClient. Make sure to bring in Firebase.Database namespace.

FirebaseClient firebaseClient = new FirebaseClient("<URL>");

You can find your Realtime Database URL in the Realtime Database section of the Firebase console.

Next, modify the event handler OnCounterClicked:

private void OnCounterClicked(object sender, EventArgs e)
{
    firebaseClient.Child("Todo").PostAsync(new TodoItem
    {
        Title = TitleEntry.Text,
    });
}

Todo represents the name of the container where you save data. Since Firebase Realtime Database is a NoSQL database, data is stored as JSON objects. Read more about Firebase Database Structure.

PostAsync sends POST requests and pushes your TodoItem in your Firebase database. Every time you send request, it generates a unique key for each record.

Let’s try it out!

Run your app and go to the Realtime Database section in your Firebase Console. Put it side-by-side so you can observe it syncs real-time.

Here’s a quick video of how it looks like:

That’s how you save data in your Firebase database. Now, let’s move on to retrieving data.

Retrieving Data

In your MainPage.xaml.cs, add an ObservableCollection of TodoItem property:

public ObservableCollection<TodoItem> TodoItems { get; set; } = new ObservableCollection<TodoItem>();

In the constructor, make sure to set the BindingContext:

BindingContext = this;

Next, add the following to the constructor:

var collection = firebaseClient
    .Child("Todo")
    .AsObservable<TodoItem>()
    .Subscribe((item) =>
    {
        if (item.Object != null)
        {
            TodoItems.Add(item.Object);
        }
    });

This query not only retrieves data but also listens to the changes happening in your Firebase database via Subscribe, so it syncs up the data in real time across the users.

Go to your MainPage.xaml and add a CollectionView then bind the ItemSource to the TodoItems property:

Here’s a reference for how your app should look like:

Here’s how it looks like when running:

You can run 2 instances of your app side-by-side so you can see it syncs data between your devices in real-time. Here’s a quick demo:

Closing thoughts

The Firebase Realtime Database is a cloud-hosted database that lets you store and sync data between your users in real time. With the help of its mobile SDKs, you don’t have to manage things by yourself such as the need for servers, and self-maintained APIs and even if the device goes offline, it uses a local cache on the device to serve and store changes.

You can check out the source code example on my GitHub.

Cheers!