Zenn
Open5

晩ごはん提案アプリ作成ログ

React
Chakra UI
ChatGPT
suusuu

概要

食材を選択し、その食材を用いた料理を提案してくれるアプリ

アプリで解決したいこと

彼女「今日何食べたい？」
私「なんでもいい」
彼女「🤬」

を解決したい

使いたいフレームワーク

  • React
  • tailwindCSS
  • ChakraUI

使いたい技術

  • ChatGPT ← 料理の提案
  • Firebase ←AuthenticationとFireStoreを使いたい

選定理由

  • 要件的にデータベースを0から作る必要がなさそうなので、簡単に使えるFireStore（1 GiBまで無料）を選択
  • ChatGPTの呼び出し回数に制限があるため、FirebaseAuthenticationを使ってログインできるユーザーを限定したい

GitHubのリポジトリ
https://github.com/shuuuu10-01/chat-chef

suusuu

機能一覧

  • ログイン・ログイン状態を保持
  • 食材を選択できる
  • 選択した食材を使ってChatGPTに料理を聞く
  • 利用制限を超えないようにFireStoreでChatGPTの呼び出し回数を保持して制限をかける
  • ChatGPTの結果を表示

TODOと優先順位

  1. Reactプロジェクトを立てる 済
  2. ログイン画面の実装 済
  3. Firebaseとの連携
  4. 食材を選択画面実装
  5. ChatGPTとの連携
  6. ChatGPTの結果を表示

それぞれの段階でテストがかけるといいな思っていたりする。

suusuu

ログイン画面の実装完了

見た目はこんな感じ

suusuu

次は、Firebase Cloud Functionを使ってChatGPTを呼び出す

アプリとFirebase、ChatGPTの動作について

  1. アプリからCloud Functionへリクエストを投げる
  2. Cloud Functionはリクエストの内容に従い、ChatGPTへリクエストを投げる（認証情報も確認）<- ChatGPTの呼び出しに成功
  3. Cloud FunctionはChatGPTのレスポンスをFirestoreへ保存
  4. Cloud Functionはアプリへレスポンスを返却
  5. アプリはChatGPTの結果表示画面へ遷移する
  6. 遷移後、FirestoreからChatGPTの内容を受け取り描画