0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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!にて確認できます。デモデータなので自由に変更してもらって大丈夫です。

image.png

なお、データはJavaScript版のデモと共通なので、 こちらのデモとチャットできます

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

パッケージは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を利用する際にはユーザー認証が必要です。今回はあらかじめデモアカウント情報を入れてありますが、以下のコードで認証できます。

final client = Hexabase.instance;
await client.isLogin(YOUR_EMAIL, YOUR_PASSWORD);
setState(() {
	user = client.currentUser;
});

ワークスペース・プロジェクト・データストア・アイテムの取得

Hexabaseではルートオブジェクトとしてワークスペースがあります。1つのワークスペースには複数のプロジェクトがあり、プロジェクトには複数のデータストアがあります。データストアはテーブルのようなもので、1行あたりのデータがアイテムです。

await client.setWorkspace(dotenv.get('WORKSPACE_ID'));
var project = await client.currentWorkspace.project(id: dotenv.get('PROJECT_ID'));
var datastore = await project.datastore(id: dotenv.get('DATASTORE_ID'));
var item = await datastore.item(id: dotenv.get('ITEM_ID'));

コメントの取得

コメントはアイテムの履歴として取得できます。

List<HexabaseHistory> comments = await item.histories();

コメント追加の購読

新しいコメントが追加されると、リアルタイム通知が行われます。これを購読するのが以下のコードです。

item.subscribe('update', _receive);

void _receive(HexabaseHistory history) {
	setState(() {
		comments.add(history);
	});
}

コメントの作成

新しいコメントは、 item.history() で作成します。 set で値(コメント本文)を設定し、 save で保存します。この操作で、該当アイテムを購読しているユーザーに対して通知が行われます。

var history = await item.history();
history.set('comment', comment);
await history.save();

この通知は自分自身に対しても行われるので、 historycomments に追加するような操作は不要です。

まとめ

Hexabaseでは他にもファイルアップロードやFaaS(Function as a Service)など多くの機能があります。ぜひそうした機能を使って、あなたのアプリケーション開発を高速に行ってください。

法人向けクラウドシステム『Hexabase』

0
0
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
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?