Hexabase（ヘキサベース）は企業においても安心して利用できるBaaS（Backend as a Service）を提供しています。多くのBaaSがそうであるように、主にフロントエンド開発者に利用してもらいたいと考えています。そこで現在、TypeScript SDKの開発が進められています。
この記事ではv2系になって新しくなったHexabase TypeScript SDKのインストールと、データストア（クラウドデータベース）のステータス機能を紹介するデモアプリについて説明します。
デモ
デモはこちらで公開しています。アイテムを作成し、そのアイテムのステータスを変更できるデモです。
Hexabase Status Demo - StackBlitz
インストール
インストールはnpmやyarnを使って行います。
# npmの場合
npm install @hexabase/hexabase-js
# yarnの場合
yarn add @hexabase/hexabase-js
インポート
インポートすると、 HexabaseClient というオブジェクトが取得できます。
import { HexabaseClient, Item } from "@hexabase/hexabase-js";
初期化
HexabaseClientを初期化します。
// 本番閑居向け
const client = new HexabaseClient();
// 開発環境向け
const client = new HexabaseClient('dev');
なお、すでに認証済みだった場合は setToken メソッドを使ってトークンをセットすることもできます。今回はパブリックトークンを使っており、そのトークンを下記メソッドでセットしています。
// 初期設定
const init = async () => {
await client.setToken(process.env.NEXT_PUBLIC_TOKEN!);
await client.setWorkspace(process.env.NEXT_PUBLIC_WORKSPACE_ID!);
setLogin(true);
};
ステータスの設計
Hexabaseでは、データベースのアイテムに対してステータスを設定できます。ステータスは管理画面で設計します。
ステータスを準備したら、そのステータスを変更するためのアクションを設計します。
今回の例で言うと、ステータスは以下のようにしか遷移しません。このステータスを遷移させるのがステータスアクションになります。
ステータスアクションを実行することで、ステータスが別なものに変わります。
アイテムを作成する
アイテムはデータストアの item メソッドで作成します。
const create = async () => {
// プロジェクトの取得
const project = await client.currentWorkspace.project(
process.env.NEXT_PUBLIC_PROJECT_ID!
);
// データストアの取得
const datastore = await project.datastore(
process.env.NEXT_PUBLIC_DATASTORE_ID!
);
// アイテムの作成
const item = await datastore.item();
await item.set('Title', 'new Item').save();
// アイテム・ステータスのセット
setItem(item);
setStatus(item.status());
};
上記コードの最後で実行している status メソッドで、現在のステータスが文字列で取得できます。新規保存した直後であれば、デフォルトのステータスが返ってきます。
item.status();
// -> first
ステータスアクションの取得
あるステータスから別なステータスに変更できるアクション「ステータスアクション」を取得します。これは statusActions プロパティで取得できます。入っているのは StatusAction の配列です。
<ul>
{item.statusActions.map(sa => (
<li key={sa.id} onClick={() => change(sa.name)}>
{sa.name}
</li>
))}
</ul>
ステータスの変更
ステータスを変更する際には、ステータスアクションのラベルやIDなどを指定します。実行すると、アイテムのステータスが更新され、 statusActions の内容も変わります。
// ステータス変更時のアクション
const change = async (status: string) => {
await item.execute(status);
// 新しいステータスを設定
setStatus(item.status());
};
ぜひデモで動作を確認してください。
まとめ
ステータスを使うことで、アイテムの状態管理を実現できます。ステータスを見れば、アイテムがどのような状態にあるのかがわかります。ステータスは直接変更できないので、間違った更新につながることはありません。
Hexabaseには他にもファイルストレージやスクリプトなどの機能があります。それらの機能も利用してください。