3. チュートリアル1 : TODOアプリの実装¶

ここではチュートリアル1の実装について解説します。

3.1. NEC BaaS .NET SDK ライブラリ¶

NEC BaaS .NET SDK を利用するためには、アプリケーションに SDK のライブラリファイル群を追加する必要があります (チュートリアルではすでにセットアップ済みです)

手順については、「NEC BaaS .NET SDK ガイド」の SDKセットアップ手順をご参照ください。

3.2. MainWindow クラス¶

3.2.1. 初期化¶

MainWindow クラスの中で SDK の初期化処理を行います。

public MainWindow()
{
    InitializeComponent();

    //Initialize Nebula
    var service = NbService.GetInstance();
    service.TenantId = "...";
    service.AppId = "...";
    service.AppKey = "...";
    service.EndpointUrl = "https://api.example.com/api";

    //以下省略
}

SDK を初期化するには、NbService クラスのインスタンスを取得し、以下のプロパティを設定します。

テナントID
アプリケーションID
アプリケーションキー
エンドポイントURL

エンドポイントURLは、お使いのサーバによって異なりますので、管理者に問い合わせてください。

また、サーバにアクセスするクラスである TodoViewModel クラス(後述)を生成します。

TodoViewModel _viewModel = new TodoViewModel();
DataContext = _viewModel

// 初期表示
_viewModel.Reload();

3.2.2. イベント処理¶

チュートリアル1では、Todo 追加・削除するためのイベント処理を定義しています。画面上の Add ボタンが押された際に TodoViewModel クラス(後述)の Todo 追加処理を呼び出します。

private void AddButton_Click(object sender, RoutedEventArgs e)
{
    // Todo の追加
    _viewModel.Add(TodoTextBox.Text);
    TodoTextBox.Clear();
}

また、Todo が選択された状態でキーボード上の Delete キーが押された際には TodoViewModel クラス(後述)の Todo 削除処理を呼び出します。

private async void TodoListBox_keyDown(object sender, KeyEventArgs e)
{
    if (e.Key != Key.Delete)
    {
        // Delete キー以外は何もしない
        return;
    }

    var idx = TodoListBox.SelectedIndex;
    if (idx < 0) return; // not selected

    // 選択されている Todo を削除
    _viewModel.RemoveAt(idx);
}

3.3. TodoViewModel クラス¶

TodoViewModel クラスは、サーバにアクセスし、取得したデータ( Todo )を View に提供するクラスです。

3.3.1. バケットの取得¶

コンストラクタでバケットを取得します。ここでは、"TodoTutorial1" という名前のバケットのインスタンスを生成しています。

NbObjectBucket<NbObject> _bucket = new NbObjectBucket<NbObject>("TodoTutorial1");

生成したインスタンスは、今後の処理で利用します。

3.3.2. Todo の取得¶

バケットに格納されている Todo を取得し、View に表示します。

public async void Reload()
{
    // Todo をすべて取得し updatedAt でソート
    var todos = await _bucket.QueryAsync(new NbQuery().OrderBy("updatedAt"));
    IList<NbObject> _todos = todos.ToList();
    // View に反映
    OnPropertyChanged("TodoTexts");
}

Todo データは、NbObjectBucket.QueryAsync() を使用して取得できます。クエリ(取得条件)は NbQuery クラスのインスタンスとして作成します。クエリでは、検索するオブジェクトの絞込み、ソート条件の指定、スキップ件数・件数上限の指定などが可能です。ここでは更新日時(updatedAt)フィールド昇順で、全件取得するというクエリを作成しています。

取得した Todo データは、NbObject のリストとして保存します。

3.3.3. Todo の追加¶

Add ボタン押下により、Todo を追加します。

public async void Add(string text)
{
    // NbObject 作成
    var obj = _bucket.NewObject();
    // アクセス制限無し
    obj.Acl = NbAcl.CreateAclForAnonymous();
    // description に Todo 文字列を設定
    obj["description"] = text;

    // Todo 保存
    var result = await obj.SaveAsync();
    // Todo 表示
    Reload();
}

まず、NbObjectBucket.NewObject() を使用して NbObject を作成し、Todo 文字列を設定します。

Todo の保存は、SaveAsync() を使用します。これによりサーバにデータが保存されます。

3.3.4. Todo の削除¶

Todo を選択した状態で Delete ボタン押下により、Todo を削除します。

public async void RemoveAt(int index)
{
    // 選択している Todo (NbObject)を削除する
    await _todos[index].DeleteAsync();

    // 配列からも削除
    _todos.RemoveAt(index);
    // View に反映
    OnPropertyChanged("TodoTexts");
}

削除は、DeleteAsync() を使用します。これによりサーバからデータが削除されます。