.NET MAUI: Firebase Realtime DatabaseでサーバレスAndroidアプリ開発

.NET MAUIでAndroidアプリを開発します。
データの保存先として、「Firebase Realtime Database」を利用します。サーバレスなFirebaseを使うことで、データベースサーバの構築や管理が不要になります。

Firebaseコンソールでの作業
1. Firebaseプロジェクトの作成
2. Realtime Databaseの作成
Visual Studioでの作業
1. .NET MAUIプロジェクトの作成
  1. FirebaseDatabase.netのインストール
  2. コーディング
動作確認: データ保存
まとめ

Firebaseコンソールでの作業

Firebaseコンソールで、プロジェクトを作成し、Realtime Databaseを使えるようにします。
Firebaseは、Googleのアカウントでログインしていれば、すぐに使用開始できます。
以下、ログイン済みであることを前提にして、手順を説明します。

Firebaseプロジェクトの作成

Firebase | Google’s Mobile and Web App Development Platform

Firebase は、デベロッパーがユーザーに人気のアプリやゲームを開発できるよう支援する Google のモバイルおよびウェブアプリ開発プラットフォームです。

Firebaseコンソールで、Firebaseプロジェクトを作成します。
まず、FirebaseのTopページ、右上にある「コンソールへ移動」リンクをクリックします。

次に、「プロジェクトを追加」ボタンをクリックします。

作成画面が表示されるので、必要な情報を入力します。

プロジェクト名	任意の名前を入力してください。
このプロジェクトで Google アナリティクスを有効にする	OFF

最後に、「プロジェクトを作成」ボタンをクリックします。
以上で、プロジェクトの作成は完了しました。

Realtime Databaseの作成

左側のリストから「構築 > Realtime Database」をクリックします。

「データベースを作成」ボタンをクリックします。

設定画面が表示されるので、必要な情報を入力します。

Realtime Databaseのロケーション	米国（us-central1）
セキュリティルール	テストモードで開始 ※30 日間、データベース参照を所有しているユーザーなら誰でもデータベースのすべてのデータの表示、編集、削除を行うことができます。

以上で、データベースの作成は完了しました。
作成されたURLは、アプリのコーディングの際に必要になります。

以上で、Firebaseの準備は完了です。

Visual Studioでの作業

Visual Studioで、.NET MAUIを使って、Androidアプリを作ります。

.NET MAUIプロジェクトの作成

.NET MAUIアプリのプロジェクト（.NET 8.0を使用）を作成します。

FirebaseDatabase.netのインストール

NuGetパッケージマネージャーで、「FirebaseDatabase.net」をインストールします。

GitHub - step-up-labs/firebase-database-dotnet: C# library for Firebase Realtime Database.

C# library for Firebase Realtime Database. Contribute to step-up-labs/firebase-database-dotnet development by creating an account on GitHub.

コーディング

TodoItemの取得、追加のコードを実装します。

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

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiApp1.MainPage">

    <VerticalStackLayout>
        <Entry x:Name="TitleEntry"
               Placeholder="Input title ..."/>
        
        <Button x:Name="SaveButton"
                Text="Save"
                Clicked="SaveButton_Clicked"/>

        <CollectionView x:Name="TodoCollectionView"
                        ItemsSource="{Binding TodoItems}"
                        SelectionMode="Single">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Label Text="{Binding Title}"/>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </VerticalStackLayout>

</ContentPage>

using Firebase.Database;
using Firebase.Database.Query;
using System.Collections.ObjectModel;

namespace MauiApp1
{
    public partial class MainPage : ContentPage
    {
        // ★URLを各自変更すること
        FirebaseClient _firebaseClient = new FirebaseClient("https://test-xxxxx-default-rtdb.firebaseio.com/");

        public MainPage()
        {
            InitializeComponent();

            BindingContext = this;

            // CollectionViewの更新
            _firebaseClient.Child("todo").AsObservable<TodoItem>().Subscribe((item) =>
            {
                if (item.Object != null)
                {
                    TodoItems.Add(item.Object);
                }
            });
        }

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

        private void SaveButton_Clicked(object sender, EventArgs e)
        {
            // Firebase Realtime Databaseに追加
            _firebaseClient.Child("todo").PostAsync(new TodoItem{ Title = TitleEntry.Text });
        }
    }
}