Hexabase TypeScript SDKを使ったデモ（ステータス変更アプリ）

[Hexabase（ヘキサベース）](https://www.hexabase.com/)は企業においても安心して利用できるBaaS（Backend as a Service）を提供しています。多くのBaaSがそうであるように、主にフロントエンド開発者に利用してもらいたいと考えています。そこで現在、TypeScript SDKの開発が進められています。

この記事ではv2系になって新しくなったHexabase TypeScript SDKのインストールと、データストア（クラウドデータベース）のステータス機能を紹介するデモアプリについて説明します。

## デモ

デモはこちらで公開しています。アイテムを作成し、そのアイテムのステータスを変更できるデモです。

![1689 stackblitz.com - 1024163443.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/5a6bda8f-0a66-3687-7475-cdcaf13ad810.jpeg)


[Hexabase Status Demo \- StackBlitz](https://stackblitz.com/edit/stackblitz-starters-duslfs?file=.env,pages%2Findex.tsx,package.json)

## インストール

インストールはnpmやyarnを使って行います。

```
# npmの場合
npm install @hexabase/hexabase-js

# yarnの場合
yarn add @hexabase/hexabase-js
```

## インポート

インポートすると、 `HexabaseClient` というオブジェクトが取得できます。

```jsx
import { HexabaseClient, Item } from "@hexabase/hexabase-js";
```

## 初期化

HexabaseClientを初期化します。

```tsx
// 本番閑居向け
const client = new HexabaseClient();

// 開発環境向け
const client = new HexabaseClient('dev');
```

なお、すでに認証済みだった場合は `setToken` メソッドを使ってトークンをセットすることもできます。今回はパブリックトークンを使っており、そのトークンを下記メソッドでセットしています。

```tsx
// 初期設定
const init = async () => {
	await client.setToken(process.env.NEXT_PUBLIC_TOKEN!);
	await client.setWorkspace(process.env.NEXT_PUBLIC_WORKSPACE_ID!);
	setLogin(true);
};
```

## ステータスの設計

Hexabaseでは、データベースのアイテムに対してステータスを設定できます。ステータスは管理画面で設計します。

![1686 app.hexabase.com - 1023140353.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/c57a8e0b-2e3c-b41f-7b73-83bed6668211.jpeg)


ステータスを準備したら、そのステータスを変更するためのアクションを設計します。

![1687_app_hexabase_com_-_1023140513.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/c7a9dad0-c883-6406-d48a-4151dd851ef8.jpeg)


今回の例で言うと、ステータスは以下のようにしか遷移しません。このステータスを遷移させるのがステータスアクションになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/c866bf52-ae6e-06da-c582-fa781c77c8ca.png)


ステータスアクションを実行することで、ステータスが別なものに変わります。

## アイテムを作成する

アイテムはデータストアの `item` メソッドで作成します。

```tsx
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` メソッドで、現在のステータスが文字列で取得できます。新規保存した直後であれば、デフォルトのステータスが返ってきます。

```tsx
item.status();
// -> first
```

## ステータスアクションの取得

あるステータスから別なステータスに変更できるアクション「ステータスアクション」を取得します。これは `statusActions` プロパティで取得できます。入っているのは `StatusAction` の配列です。

```tsx
<ul>
	{item.statusActions.map(sa => (
		<li key={sa.id} onClick={() => change(sa.name)}>
			{sa.name}
		</li>
	))}
</ul>
```

## ステータスの変更

ステータスを変更する際には、ステータスアクションのラベルやIDなどを指定します。実行すると、アイテムのステータスが更新され、 `statusActions` の内容も変わります。

```tsx
// ステータス変更時のアクション
const change = async (status: string) => {
	await item.execute(status);
	// 新しいステータスを設定
	setStatus(item.status());
};
```

ぜひ[デモで動作を確認](https://stackblitz.com/edit/stackblitz-starters-duslfs?file=.env,pages%2Findex.tsx,package.json)してください。

## まとめ

ステータスを使うことで、アイテムの状態管理を実現できます。ステータスを見れば、アイテムがどのような状態にあるのかがわかります。ステータスは直接変更できないので、間違った更新につながることはありません。

Hexabaseには他にもファイルストレージやスクリプトなどの機能があります。それらの機能も利用してください。

[Hexabase | 新規事業向け開発・競争領域でのDX実現をサポート](https://hexabase.com/)