こんにちは！
現在フロントエンドエンジニアを目指して勉強している者です。
ポートフォリオとして、Vet Clinic Assistant（動物病院向けAIアシスタントというWebアプリを開発しています。
今回は相談内容を保存し、一覧で確認できる機能を実装したので、その過程を簡単に紹介したいと思います。
開発環境
- Next.js 15 (App Router)
- React
- TypeScript
- Supabase
- Tailwind CSS
作りたかった機能
最初は画面だけ完成していて、「保存」ボタンを押しても何も起きませんでした。
そこで今回は、
- 相談内容を保存する
- 一覧画面で確認する
- 録音データを管理する
という機能を実装しました。
Supabaseを利用
録音データはSupabase Storageに保存し、相談内容はDatabaseに保存する構成にしました。
最初は録音ファイルだけ保存すればいいと思っていましたが、それだけでは一覧表示ができません。
そのため、Databaseには患者名や症状、録音ファイルの保存先(path)などを保存するようにしました。
Server Actionを使って保存
今回はNext.jsのServer Actionを使って保存処理を書きました。
API Routeを作る方法もありますが、Server Actionを使うことでコードをシンプルに書けると感じました。
フォームを送信すると、
- 録音ファイルをStorageへアップロード
- Databaseへ相談内容を保存
- 一覧画面を更新
という流れになります。
困ったこと
途中で環境変数が設定されていないため、
Missing required environment variable: SUPABASE_SECRET_KEY
というエラーが表示されました。
.env.localにSupabaseのキーを設定し、開発サーバーを再起動することで解決しました。
また、RLS（Row Level Security）についても勉強になりました。
ポリシーを設定していない状態ではデータの取得や保存ができないことを初めて知りました。
今後やりたいこと
このアプリには今後、
- Whisperを使った音声文字起こし
- OpenAIによるAI要約
- 患者ごとの診療履歴管理
などの機能も追加していく予定です。
まだ勉強中なので試行錯誤の毎日ですが、一つずつ機能を追加しながら開発を楽しんでいます。
最後まで読んでいただき、ありがとうございました！