『AIチャットアプリ開発』Next.jsとOpenAI APIで5つのAI機能を持ったChatGPTのようなアプリを作成
What you'll learn
- openAI APIの知識が身につく
- Nextjs, firebase, openAI API(chatGPT API)を使ってAI機能を持ったチャットアプリを作成
- たくさんのAI機能を持ったチャットアプリが作れます。
- 5つのAI機能『チャット機能』『画像生成機能』『テキストから音声性機能』『音声ファイルからテキスト生成機能』『画像解析機能』を実装
- NextjsのRouteHandlersでのopenAI APIの呼び出し方法
- tailwindcssでのスタイリング
- 人気の高いshadcn/uiを使ってデザインを作成
- データベース（firestore）を使って永続的にチャットを表示
- firebase javascript SDKとfirebase Admin SDKの利用
- firestoreのセキュリティルールの実装
- IDトークンを使ったサーバ側検証
- React Hook FormとZodを利用したフォーム管理
- TypeScriptを利用した型安全な開発
- 最新版のNextjsバージョン14を使った開発(app routerを使用)
Requirements
- Nextjs,Reactの基礎知識（関数コンポーネント、state、useEffectなどの理解）
- TypeScriptの基礎知識
- nodeJsがインストールされている事。本講座ではバージョン20.15.0を使用
Description
※openAI APIを利用するには最低5ドルをクレジットカードで支払う必要があります。
このコースではNext.js openAI API firebase を使って多機能なAIチャットアプリを0から開発します。
openAI APIとはchatGPTの開発元のopenAI社が提供するAPIで、これを使うことで
chatGPTのようなAI機能を持ったチャットアプリを作ることができます。
このコースを受講することで、OpenAI APIの基本的な使い方からアプリへの導入方法まで幅広く学ぶことができます。
■具体的には以下の機能を作ります。
☆AI機能
・チャット機能（テキストでAIとチャットをする機能）
・画像生成機能
・音声認識機能（音声ファイルからテキストを生成する機能）
・音声合成機能（テキストから音声を生成する機能）
・画像解析機能（画像とテキストでAIとチャットする機能）
ーーーーーーーーーーーーーーーーーーーーーーーー
☆その他
・ユーザー認証機能（google認証）
・チャット永続表示機能
・ファイルアップロード機能
・tailwind.cssとshadcn/uiによるデザインの作成方法
・firebaseサービスへのセキュリティールールの設定方法
・etc
ーーーーーーーーーーーーーーーーーーーーーーーー
■使用技術
・Next.js14/typescript（app router使用）
・node.js ( ver: 20.15.0 )
・npm ( 9.8.1 )
・firebase ( firestore, Cloud Storage, Authenticationを使用 ver: 10.10.0)
・openAI API
・shadcn/ui （デザイン作成に使用）
・ tailwindcss( デザイン作成に使用 ver: 3.3.0)
・React Hook Form ( フォーム管理に使用 ver: 7.51.2)
・Zod（フォームのバリデーションチェックに使用 ver: 3.22.4）
Who this course is for:
- Nextjsで多機能なAI機能を持ったチャットアプリを作りたい方
- 初めてopenAI APIを使ってAI機能を持ったチャットアプリを作る方
- openAI APIの知識をアプリを作って生かしたい方
Instructor
- 4.3 Instructor Rating
- 213 Reviews
- 2,744 Students
- 2 Courses
web開発を得意としております。フロントエンドとバックエンド両方の講義動画を出しますので、興味がある人は是非ご覧ください。youtubeやブログ、Twitterでもアプリ制作講座や割引クーポンについて発信しているので興味がある方は是非ご覧ください