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.
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!