ハッカソンでAI×おすすめレシピ提案のアプリを開発した
はじめに
私は情報系学科に所属する大学生です。
今回は私が所属している、京大プログラミングサークル5スキップ のメンバー3名で(もう1名の先輩もメンターとしてサポートしてくださいました)2024年4月の技育ハッカソンに出場しました。
作ったアプリ
開発背景
私以外のメンバー2名が1人暮らしをしているという会話になり、2人が「毎日ごはんのレシピを決めるのに結構悩む」ということを言っていました。私は実家暮らしですが、たまに料理をしようと思い立つ時があります。ただ、パッと作りたいレシピが決まらずに結局作らずに終わってしまうことがよくあったので、2人の意見には共感ができました。
そこで、レシピをすぐに決められるようなアプリを開発しようということになりました。
アイデア
・簡単な質問を用意してそれに答えてもらい、結果からレシピを提案する => レシピの提案にAIによる推論を用いる
・レシピの取得にクックパッドを使用する予定だったがAPIが公開されていなかった => APIが公開されている楽天レシピを使用
・たくさんのレシピを提案するとアプリを作る意味がなく、1つのレシピのみを提案するとユーザーの自由度が下がってしまう => 質問の回答に合うレシピを上位3位まで表示するように設定
・料理中に材料や手順確認のためにスマートフォンを触る回数を少なくしたい
役割
私：バックエンド(サーバーサイド)、フロントエンドの一部
メンバー1名：フロントエンド、デザイン構想
もう1名：バックエンド(推論AI)、サーバーサイドとフロントエンドの開発サポート
開発期間
キックオフから発表日までの1週間
アプリの概要
想定した対象
・生活が忙しく、食べるものがいつも同じになってしまう社会人や学生
・作るレシピをなかなか選べない優柔不断な人
・普段は選ばないようなレシピに挑戦してみたい人
特徴
・提示された質問に回答するとAIによってレシピが3つ提案される
・質問の内容は時短orじっくり、気分がいいor落ち込んでいるor疲れている、次の日の予定の有無などバリエーションを豊かに
・3つのうちから好きなレシピを選択すると材料や作り方が表示されるため、すぐに料理作りに取り組める
・材料、手順の確認はそれぞれ1つのページ上だけで行うことができる
機能
ログイン機能
jwtトークンによる認証
質問回答機能
提示された質問にユーザーが答えていく
レシピの材料・手順表示機能
ユーザーが選択したレシピの材料や手順が表示される
材料->手順は1タップで移動可能
料理の写真登録機能
自分が作った料理の写真をアップロードでき、後から見返すことができる
調理履歴閲覧機能
過去に作成した料理のレシピや写真を確認できる
デザインアーキテクチャ
技術スタック・アーキテクチャ
フロントエンド(TypeScript+Next.js)
フロントエンドはNext.jsフレームワークとTailwindCSSを用いてスタイリングを行いました。
ログイン状態の管理にはJotaiライブラリを用いています。
サーバーサイドAPIとの通信にはaxiosを用いました。
サーバーサイド(Go+Docker)
バックエンドはGoとEchoフレームワークを用いて、ユーザーテーブルや料理テーブルのCRUD操作、非同期通信、APIエンドポイントなどの設定を構築しました。
DockerコンテナのデプロイはRenderで行いました。
サーバー用データベース(PostgreSQL)
データベースは、リレーショナルデータベースであるPostgreSQLを使用しました。ユーザーテーブル、料理テーブルの構造を下記に示します。
以下の推論AIについては私が触れていない部分のため内容は省略します。
推論AI(Python+FastAPI+GCP)
推論用データベース(Redis)
難しかったこと
性別や年代など誰に向けたアプリなのか、どのような課題があるか、どのようにして課題を解決するかなどをしっかりと固められていなかった
開発計画が甘く、フロントエンド開発に遅れが生じた際に少し開発効率が悪くなってしまった
終盤まではそれぞれ別の領域の開発を担当していたため、フロントエンドのサポートを行う際に、プログラムを理解するのに時間を要した
終わりに
ハッカソン期間内にフロントエンド画面をすべて完成させることはできませんでしたが、ある程度納得のいく作品を作ることができたと思います。
ソースコード
バックエンド： フロントエンド：
Discussion