Hexabase Dart/Flutter SDKを使ったサンプルアプリの紹介（タスク管理）

[Hexabase（ヘキサベース）](https://www.hexabase.com/)は企業向けのBaaS（Backend as a Service）を提供しています。認証やデータストア、ファイルストレージ、リアルタイム通知などの機能があり、企業向けのシステム開発に必要な機能をまるっと提供しています。

APIはREST APIとGraphQLを提供しています。そのAPIをラップしたSDKも開発を進めています。SDKは現在、TypeScriptとDart向けに開発しています。Dart向けのSDKは、もちろんFlutterでも利用できます。

この記事ではFlutter SDKを使って作成したサンプルアプリ、タスク管理アプリを紹介します。

## デモとコード

デモとコードは[Zapp!](https://zapp.run/edit/flutter-z4606ru4706?entry=lib%2Fmain.dart&file=lib%2Fmain.dart)にて確認できます。デモデータなので自由に変更してもらって大丈夫です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/8910a4e7-1599-91dd-602a-a95bd2facdf5.png)


## パッケージとソースコード

パッケージはpub.devで公開しています。

[hexabase | Flutter Package](https://pub.dev/packages/hexabase)

ソースコードはGitHubにて公開しています。ライセンスはMIT Licenseです。

[hexabase/hexabase-dart: Hexabase SDK for Dart & Flutter](https://github.com/hexabase/hexabase-dart)

## インストール

インストールは `dart pub get` で行えます。

```
dart pub get hexabase
```

## インポート

SDKをインポートします。

```dart
import 'package:hexabase/hexabase.dart';
```

## 初期化

まずインスタンスを作成します。

```dart
var client = Hexabase();
```

別なファイルで再度インポートした場合には、以下でインスタンスを取得してください。

```dart
var client = Hexabase.instance;
```

## タスク管理でHexabaseを利用している部分について

タスク管理は大きく分けて、Hexabaseで以下の機能を使っています。

- 認証
- データの新規作成・編集
- データの検索

### 認証

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/0e53e728-8bac-7a3b-bf3d-aa4e5b4f112b.png)


Hexabaseを利用する際にはユーザー認証が必要です。今回はあらかじめデモアカウント情報を入れてありますが、以下のコードで認証できます。

```dart
void _checkLogin() async {
	final client = Hexabase.instance;
	final bol = await client.isLogin();
	setState(() {
		isLogin = bol;
	});
}
```

### データの新規作成・編集

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/d337341c-aa39-939d-0ba6-b70793a7ec4e.png)


今回はデータ作成画面と編集画面は共通です。タスクのタイトル、詳細、日付は入力された時点でデータストアのデータに反映しています。

例えば以下のようにタスク名をテキストフィールドに表示しています。 `getAsString` ではデータストアにあるデータを文字列型で取得します。万一フィールドがない、またはNullだった場合に備えて defaultValue でデフォルト値を指定できます。

新しい入力値は `set` メソッドで適用できます。

```dart
TextFormField(
	decoration: const InputDecoration(hintText: "Task name"),
	initialValue: widget.item.getAsString('name', defaultValue: ""),
	onChanged: (String value) {
		widget.item.set('name', value);
	},
),
```

#### ステータスの更新

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/3bf9c704-05b4-6f52-ae6a-1b2f2c36b0e2.png)


Hexabaseの特徴として、データのステータス管理が挙げられます。今回で言えば、以下のステータスを用意しています。

- 登録済み（デフォルト）
- 作業中
- 完了

このステータスは以下のように遷移するようにしています。

```plantuml
@startuml
start
repeat :登録済み;
backward :差し戻し;
repeat while (作業中) is (戻し) not (終わり)
:完了;
stop
@enduml
```

各データストアのデータごとに、実行できるアクションは決まっています。それを取得する際には `getDetail` でアイテムの詳細情報を取得し、 `actions` で利用できるアクション一覧を取得します。

```dart
// タップした際には編集画面に遷移する
await item.getDetail();

// ステータス変更アクションを取得
final actions = widget.item.actions();

// リスト表示
Expanded(
	child: ListView.builder(
			itemCount: actions.length,
			itemBuilder: (context, index) {
				final action = actions[index];
				return ListTile(
						onTap: () {
							widget.item.action(action.id!);
							_save();
						},
						title: TextButton(
								onPressed: () {
									widget.item.action(action.id!);
									_save();
								},
								child: Text(action.nameLabel!)));
			}),
)
```

ステータス変更する際には `item.action(action.id!)` で実行します。ステータス変更アクションのラベル（差し戻す、など）は管理画面で設定でき、 `action.nameLabel` で取得できます。

#### データの保存

データの新規保存、更新はどちらも `save` メソッドになります。

```dart
await widget.item.save();
```

### データの検索

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/bc753f82-5037-909f-f1f0-c0a6dafd9955.png)


データの取得は `items` メソッドを使います。今回は検索条件を設けていませんが、幾つかの検索条件（オペランド）を用意しています。詳しくは[Hexabase Flutter SDKの使い方（データストアの検索） - Qiita](https://qiita.com/goofmint/items/3b37f6a244179e27e45f)をご覧ください。

```dart
_datastore = client.project(id: projectId).datastore(id: datastoreId);
// データの取得
final items = await _datastore!.items();
```

## まとめ

執筆時点（2022年10月）でのHexabase Dart/Flutter SDKでは認証とデータストアのCRUD操作に対応しています。

Hexabaseでは他にもリアルタイム通信やファイルストアなど多くの機能があります。ぜひそうした機能を使って、あなたのアプリケーション開発を高速に行ってください。

[株式会社 Hexabaseー法人向けクラウドシステム『Hexabase』ー](https://www.hexabase.com/)