はじめに
【AIチャットアプリ開発】Next.js & Firebase & ChatGPT APIを使ったWebアプリ開発講座
で学習したのでアウトプットとし、学びたい方向けに紹介しておきます。
記事では、学んだ内容と苦労したこと、追加で２つほど簡単な機能をつけたので紹介します（全然大したことないやつです）
成果物
firebaseでデプロイした成果物です。
URL: https://chatapplication-with-cha-e3c90.web.app/
（openAIの料金上限つけてるので、上限分使うと使用できなくなりますので注意、、）
chat-GPTのクローンアプリで仕様は下記です。
- React-Hook-Form & firebase Authenticationを使ったログイン、新規登録
- 部屋を作ってチャットするとopenAI-APIにテキストが飛ぶ
- OpenAPIからレスポンスが返ってくる
- firestoreにテキストを保存
- firestoreからデータを取得し、画面にレンダリング
- firebase hostingで静的ファイルとしてデプロイ
ここまでが講座の内容で、
残り追加機能として、下記をやってみました。
- google認証を追加
- 送信ボタンを
Shift+Enterで送信できるように - レスポンシブ対応
- チャットを送った時に余計な機能を追加(ご自分で確かめてみてください)
google Authはいろんな方が記事にしており、その辺の記事と公式ドキュメントを参考にすればできるかと思います。
この講座で学べたこと
- firebaseの概要とどんなドキュメントを読めばわかるか理解できた
- NEXT.jsの基本がわかった （ページの作り方や静的ファイルへのbuild方法など）
- ReactのUseContextの使い方がわかった
- Open AI APIの使い方、送信方法がわかった(すこしお金がかかる最初デポジットとして＄５とられる)
全て基本レベルで困ったらどんなふうに調べればいいかわかったのが大きいかなと。
（どうしても最初の導入はどのドキュメントのどこを見ればいいかわからないのが多いので。）
苦労したこと
最後のデプロイがうまくできず、１〜2日かかりました。。。
対応内容は別記事にしてあります。
https://qiita.com/kiyomasa05/items/f8e968b95dfd7a7a13e1
あとJSとfirestore serverTimestampを使った日にちの計算ができるようになりたいです。(うまくできず機能落としてしまった)
こんな方におすすめ（おすすめの理由）
必要な前提 （前提はこれぐらいしか必要ないかと）
- Reactの知識はすこしある
useState,useEffectとかを知っていれば問題なさそうな気がします。
自分もなんだっけ？って再度調べながら学んだので、すぐにキャッチアップできると思います
こんなことが知りたい方向け
- NEXT.jsの概要を知っておきたい（あまり触ったことがない）
- firebase触ったことない、少し知っておきたい
- OpenAIのAPI触ってみたい
- 最近React触ってない、復習がてら何かアウトプットしたい
おわりに
エンジニアの記事がchromeからレコメンドで色々くるのですが、firebaseやOpenAI APIなどよくわからず、使ってみたいなと思っていたのでこの講座で学べてよかったです。すこしは記事の内容がわかるようになりそう。
参考