ニフクラ mobile backend(mBaaS)お役立ちブログ

スマホアプリ開発にニフクラ mobile backend(mBaaS)。アプリ開発に役立つ情報をおとどけ!

C# SDKを使ってXamarinによるTodoアプリを作る

f:id:mbaasdevrel:20210521164036p:plain

C# SDKはコミュニティSDKです。テクニカルサポート対象外なのでご注意ください。

C#で作られたSDKとしてはUnity向けのSDKがありますが、あれはUnityでしか動作しません。そこでXamarinやWindowsアプリ、macOSアプリなど幅広く動作することが期待できるC# SDKを開発しています。

今回はC# SDKを使って、XamarinのサンプルにあったTodoアプリのバックエンドを載せ替えてみました。

元のコードについて

元のコードはxamarin-forms-samples/Todo at main · xamarin/xamarin-forms-samplesにあります。C#とXamarin.Form、両方のコードが書かれていました。今回のサンプルはXamarin.Formだけに変更しています。

元々はデータをSQLite3に保存するようになっていますが、このデータベース部分をNCMBに置き換えています。データベースとビュー層の間にモデル層を挟むのは変わっていません。

初期化する

NuGetでNCMB SDKを登録したら、App.xaml.csで初期化します。

public App()
{
    InitializeComponent();
    // 追加
    new NCMB("YOUR_APPLICATION_KEY", "YOUR_CLIENT_KEY");

    MainPage = new NavigationPage(new TodoListPage())
    {
        BarTextColor = Color.White,
        BarBackgroundColor = (Color)App.Current.Resources["primaryGreen"]
    };
}

なおNCMBを扱うファイルではすべて using NCMBClient; を記述してください。

データを登録する

元々のコードでモデル層にTodoItemが定義されています。このモデルはプロパティでデータをゲット、セットできるようになっているので、そのまま利用します。NCMBObjectはGetメソッドを使うので、データバインディングが難しいためです。

そこで、TodoItemにNCMBObjectを返すメソッドを追加します。

public NCMBObject GetNCMBObject()
{
    var obj = new NCMBObject("TodoItem");
    obj
        .Set("name", Name)
        .Set("notes", Notes)
        .Set("done", Done);
    if (!(ObjectId is null))
    {
        obj.Set("objectId", ObjectId);
    }
    return obj;
}

後は保存時にこのメソッド経由でNCMBObjectを取得するように変更します。このメソッドはタスクの更新時にも呼ばれるので、これで作成と更新の両方が完了します。

async void OnSaveClicked(object sender, EventArgs e)
{
    var item = (TodoItem)BindingContext;
    var obj = item.GetNCMBObject();
    await obj.SaveAsync();
    await Navigation.PopAsync();
}

タスクの一覧を取得する

次にデータの表示についてです。一覧を取得する処理は TodoListPage.xaml.cs に記述します。ここで必要なのはItemsSourceにあった型に変換するところでしょう。

protected override async void OnAppearing()
{
    base.OnAppearing();
    // データ取得用のNCMBQueryを準備
    var query = new NCMBQuery("TodoItem");
    // データを100件取得する
    var todos = await query
        .Limit(100)
        .FetchAllAsync();
    // ItemsSourceに合った型に整える
    var ary = new List<TodoItem>();
    foreach (var todo in todos)
    {
        var item = new TodoItem();
        item.SetNCMBObject(todo);
        ary.Add(item);
    }
    listView.ItemsSource = ary;
    
}

SetNCMBObjectはTodoItemの中に定義しています。

public void SetNCMBObject(NCMBObject obj)
{
    ObjectId = obj.GetString("objectId");
    Name = obj.GetString("name");
    Notes = obj.GetString("notes");
    Done = obj.GetBoolean("done");
}

f:id:mbaasdevrel:20210521164132p:plain

タスクの削除

データを削除する際には、TodoItemからNCMBObjectに変換し、DeleteAsyncを実行します。

async void OnDeleteClicked(object sender, EventArgs e)
{
    var item = (TodoItem)BindingContext;
    var obj = item.GetNCMBObject();
    await obj.DeleteAsync();
    await Navigation.PopAsync();
}

まとめ

モデル層を介していることで、ほとんどNCMBを意識することなく載せ替えが可能になります。C# SDKはまだ機能が限定的ではありますが、データストアの利用については実装がほぼ完了しています。WindowsやmacOSアプリ開発でも利用できますので、ぜひご利用ください。

NCMBMania/Xamarin_Todo: Xamarinのサンプルアプリ(Todo)のバックエンドをNCMBにした版です

中津川 篤司

中津川 篤司

NCMBエヴァンジェリスト。プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。 2004年、まだ情報が少なかったオープンソースソフトの技術ブログ「MOONGIFT」を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶDXエージェンシー「DevRel」活動をスタート。