Hexabase JavaScript SDKで日報アプリを作る（その1：画面の紹介と仕様） #TypeScript

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

今回はこのJavaScript SDKを使って、日報アプリを作成する方法を紹介します。この記事では、画面の紹介と仕様について解説します。

コード

コードはhexabase/sample-nextjs-dailyreportにて公開しています。ライセンスはMIT Licenseです。

Hexabase JavaScript SDKとは

Hexabase JavaScript SDKは、HexabaseのAPIをJavaScriptから利用するためのライブラリです。HexabaseのAPIはRESTful APIおよびGraphQLで提供されており、JavaScript SDKはこのAPIを利用するためのラッパーとなります。

Hexabaseでは、この他にもFlutter SDKを提供しています。

日報アプリのアーキテクチャ

日報アプリはNext.jsを利用しています。また、画面のほとんどをv0 by Vercelによって生成しています。

日報アプリの画面

日報アプリの画面は、以下の4画面から構成されています。

ログインページ

最初に表示される画面です。ユーザー名とパスワードを入力してログインします。

日報一覧画面

ログイン後に表示される画面です。日報の一覧が表示されます。画面上部にプラスアイコンがあり、クリックすると日報の新規作成画面に遷移します。

また、日報のタイトルをクリックすると日報の詳細画面に遷移します。

日報新規作成画面

日報の新規作成画面です。日報のタイトルと内容、日付を入力して保存します。保存成功すると、日報一覧画面に遷移します。

日報詳細画面

日報の詳細画面です。日報のタイトルと内容、日付が表示されます。上部のBackリンクをクリックすると、日報一覧画面に遷移します。

Hexabase SDKの初期化

今回はContextを使って、アプリ全体でHexabase SDKを利用できるようにします。まず src/contexts/hexabase.ts を作成します。

初期化時には、基本的に引数不要です。引数を使うのは、ステージング環境のようにAPIエンドポイントが異なる場合になります。

"use client";
import { createContext } from 'react'
import { HexabaseClient } from '@hexabase/hexabase-js';

export type HexabaseInfo = {
  client: HexabaseClient
}

export const HexabaseContext = createContext<HexabaseInfo>(
	{
		client: new HexabaseClient() // 初期化
	}
);

続いて、 src/contexts/hexabase-provider.tsx を作成します。

"use client";
import { HexabaseContext, HexabaseInfo } from './hexabase';

type Props = {
  hexabaseInfo: HexabaseInfo
  children: React.ReactNode
}

const HexabaseProvider = ({ hexabaseInfo, children }: Props) => {
  return <HexabaseContext.Provider value={hexabaseInfo}>{children}</HexabaseContext.Provider>;
}

export default HexabaseProvider

最後に、 src/pages/_app.tsx でこのContextを利用します。

import type { AppProps } from 'next/app'
import HexabaseProvider from '@/contexts/hexabase-provider';
import { HexabaseClient, Project } from '@hexabase/hexabase-js';

const App = ({ Component, pageProps }: AppProps) => {
	return (
			<HexabaseProvider hexabaseInfo={{
				client: new HexabaseClient(),
			}}>
				<Component {...pageProps} />
			</HexabaseProvider>
	)
}
export default App

後は任意の画面で、以下のようにしてHexabase SDKを利用できます。

const { client } = useContext(HexabaseContext);

まとめ

今回は、Hexabase JavaScript SDKの初期化方法と日報アプリ全体の紹介をしました。次回は実際にHexabase SDKを使って、日報アプリを作成する方法を解説します。