[Flutter]Hono✖️Supabaseでアプリを作る- post -

HonoとSupabaseでアプリを作った話

触れる話
CRUD操作とFlutterの実装
触れない話
デプロイの仕方
Honoの基本

Honoの基本とGetについてはこちら
https://zenn.dev/tolto/articles/a1cb22bcdb5eac

データの追加(Post)

今回私はGet同様にSupabaseにデータを追加する専用の関数を作成して成功したかどうかをjson型で返すようにしました。
Honoではpost型はapp.postで実装します。非常にシンプルですね。
今回は名前を追加する関数を作成します。
今回はusersテーブルのusernameカラムに名前を追加します。
今回はgetとは違って関数の中でテーブルなどを指定して書いてますがget編同様に変数化しても同じことができると思います。

export async function addUser(
  SUPABASE_URL: string,
  SUPABASE_API_KEY: string,
  name: String
) {
  const supabase = createClient(SUPABASE_URL, SUPABASE_API_KEY);

  try {
    const { data, error } = await supabase
      .from('users')
      .insert({ username: name });

    if (error) {
      console.error('Supabase error:', error);
      throw error;
    }

    return '成功しました';
  } catch (error) {
    console.error('Error fetching user names:', error);
    return 'エラー';
  }
}

index.tsではapp.postでポスト型を指定し、db/addUserにFlutter側でアクセスします。
成功か失敗かをjsonでreturnしてスナックバーで表示します。

index.ts

app.post('/db/addUser', async (c) => {
  const SUPABASE_URL = (c.env as { SUPABASE_URL: string }).SUPABASE_URL;
  const SUPABASE_API_KEY = (c.env as { SUPABASE_API_KEY: string })
    .SUPABASE_API_KEY;
  const { name } = await c.req.json();
  const result = await addUser(SUPABASE_URL, SUPABASE_API_KEY, name);
  return c.json({ result: result });
});

ここまでできたらPost型は終了です。

Flutter

Flutterでは作成したAPIにアクセスしてデータを送信する実装を行います。
今回はテキストフィールドに入力した直を送信してusersに追加します。

注意：今回はStatefulWidgetではなくHooksで実装しています

post.dart

  final TextEditingController nameController = TextEditingController();
  final msg = useState('');
  final String api = dotenv.env['API_KEY']!;
    Future<void> addUser() async {
      final response = await http.post(
        Uri.parse("${api}db/addUser"),
        headers: {'Content-Type': 'application/json'},
        body: json.encode({'name': nameController.text}),
      );
      if (response.statusCode == 200) {
        msg.value = json.decode(utf8.decode(response.bodyBytes))['result'];
      } else {
        msg.value = 'Failed to load data';
      }
    }

UI側の実装例今回は名前を登録するだけなのでシンプルにテキスト入力と送信ボタンだけのUIにしましたが必要に合わせてふやすこともできると思います。
また以下のコードは遷移先のページを想定してます。

post.dart

return Scaffold(
      appBar: AppBar(title: const Text('追加')),
      body: Column(
        children: [
          TextField(
            controller: nameController,
            decoration: const InputDecoration(
              hintText: '名前',
              border: OutlineInputBorder(),
              filled: true,
              fillColor: Colors.white,
            ),
          ),
          ElevatedButton(
              onPressed: () async {
                await addUser();
                ScaffoldMessenger.of(context)
                    .showSnackBar(SnackBar(content: Text(msg.value)));
                Navigator.pop(context);
              },
              child: const Text('追加'))
        ],
      ),
    );

まとめ

Honoは意外と簡単に実装できることがわかったかと思います。Post型は以上です。
FluterというよりはSupabaseとHonoという実装の話をメインにしました。FlutterでのAPI実装については丁寧な記事が他の方が書かれていると思うのでそちらを参照してください（笑）。
これらを踏まえてFlutterの実装ではテスト実装を想定しています。本番環境ではriverpod等を使用することが多いと思いますのでそちらの実装に合わせてみると良いと思います。