3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Hexabase Dart/Flutter SDKを使ったサンプルアプリの紹介(写真メモアプリ)

Posted at

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

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

この記事ではFlutter SDKを使って作成したサンプルアプリ、写真メモアプリを紹介します。

デモとコード

デモとコードはZapp!にて確認できます。デモデータなので自由に変更してもらって大丈夫です。

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

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

hexabase | Flutter Package

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

hexabase/hexabase-dart: Hexabase SDK for Dart & Flutter

インストール

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

dart pub get hexabase

インポート

SDKをインポートします。

import 'package:hexabase/hexabase.dart';

初期化

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

var client = Hexabase();

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

var client = Hexabase.instance;

写真メモアプリでHexabaseを利用している部分について

写真メモアプリは大きく分けて、Hexabaseで以下の機能を使っています。

  • 認証
  • データの新規作成
  • データの検索
  • データに紐付く写真のアップロード
  • データに紐付く写真のダウンロード

認証

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

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

データの新規作成・編集

今回はデータ作成で写真に関するメモ入力とファイルアップロードを行います。メモは入力された時点でデータストアのデータに反映しています。

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

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

TextFormField(
	initialValue: widget.item.getAsString('note', defaultValue: ""),
	decoration: const InputDecoration(hintText: "Note"),
	maxLines: 5,
	onChanged: (String value) {
		widget.item.set('note', value); // 入力値をデータストアにセット
	},
),

写真アップロード

Hexabaseではデータストアのデータに紐付ける形でファイルをアップロードできます。データはバイト配列(Unit8List)で指定します。

// 画像選択時の処理
Future<void> _pickImage() async {
	// 複数選択可能
	final images = await _picker.pickMultiImage();
	// リセット
	widget.item.set('photo', []);
	// 選択した画像数を反映
	setState(() {
		_count = images.length;
	});
	// 写真の選択していなければここで終わり
	if (images.isEmpty) return;
	for (var image in images) {
		// 画像データの読み込み
		final bytes = await image.readAsBytes();
		// HexabaseFileオブジェクトの作成
		final photo = HexabaseFile(
				name: image.name,
				contentType: image.mimeType ?? 'application/octet-stream');
		photo.data = bytes;
		// データストアにセット
		widget.item.add('photo', photo);
	}
}

写真をセットしたら、後は save メソッドにてメモ欄とともに保存されます。

// データストアへの保存・更新処理
Future<void> _save() async {
	widget.item.isNotifyToSender = true;
	// データストアに保存
	await widget.item.save();
	// 前の画面に戻る
	Navigator.of(context).pop(widget.item);
}

写真データのダウンロード

写真データをダウンロードする際には download メソッドを使います。返却値はバイト文字列(Unit8List)になります。

// 写真データ(1件)を取得
Future<void> _getImage() async {
	// 詳細データを取得
	await widget.item.getDetail();
	// 写真データを取得(Nullの可能性がある)
	final photos = await widget.item.get('photo');
	// 写真データがなければ終了
	if (photos == null || photos.isEmpty) return;
	if (photos.first == null) return;
	// 写真の実データを取得
	final image = await photos.first.download() as Uint8List?;
	setState(() {
		_count = photos.length; // 全写真の数
		_image = image; // 写真の実データ
	});
}

データの検索

データの取得は items メソッドを使います。今回は検索条件として、直近7日間のデータとしています。他にも検索条件を用意していますので、SDKドキュメントを参照してください。

// 登録されている写真メモを取得する
void _getMemos() async {
	final client = Hexabase.instance;
	// データストアの設定
	_datastore = client.project(id: projectId).datastore(id: datastoreId);
	// 7日前のデータまでに限定
	var date = DateTime.now().subtract(const Duration(days: 7));
	var query = _datastore!.query();
	query.greaterThanOrEqualTo('created_at', date);
	// データの取得
	final items = await _datastore!.items(query: query);
	// ステートを更新
	setState(() {
		_memos = items;
	});
}

まとめ

執筆時点(2022年11月)でのHexabase Dart/Flutter SDKでは、認証とデータストアのCRUD操作、そしてファイルアップロード/ダウンロードに対応しています。

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

株式会社 Hexabaseー法人向けクラウドシステム『Hexabase』ー

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?