【AIチャットアプリ開発】Next.js & Firebase & ChatGPT APIを使ったWebアプリ開発講座
話題のOpenAIのAPIを使ったAIチャットアプリケーションをNext.js13とFirebase最新バージョンを使って開発する講座です。ChatGPTクローンを構築する中でモダンな技術を実践的に網羅できるお得な講座となっています。
Created by Shin Code
What you'll learn
- ChatGPT APIを使ってチャットアプリケーション開発が学べる
- Nextjs13の最新バージョンでの開発ができる
- Firebase最新バージョン9.0以降でのJavascriptライブラリの利用法が学べる
- Firebase Cloud Firestoreでデータベースをリアルタイムで監視・取得ができる
- Firebase Authenticationを用いたメール・パスワードでユーザー管理ができる
- Firebase Hostingサービスを使ってNextjsで開発したサービスをデプロイできる
- tailwindCSSを使ってログイン・新規登録ページのUIが構築できる
- react-hook-formライブラリを使ってフォームのバリデーションチェックができる
- フォームで扱う変数の状態管理をuseFormのHooksを使って実装できる
- サイドバーとチャット欄のUIをTailwindCSSで実装できる
- react-iconsを使ってアイコンを追加できる
- onSnapshotを使ってリアルタイムでデータ呼び出しができる
- 複合クエリを利用する際に、Firebaseでindex登録ができる
- useContextを使ってユーザーとルーム情報をグローバルで管理できる
- Open AIのAPIを利用してGPT3.5でbotからのレスポンスを受け取れるようになる
- 新規登録・ログイン・ログアウトをFirebaseライブラリを使って実装できる
- useRefを使ってメッセージ追加時に自動スクロールが実装できる
- Nextjs13をビルドしてoutディレクトリに静的ファイルを出力できる
- firebase CLIを使ってHosting作業の手順を学べる
Requirements
- HTML/CSSの基礎知識(divタグやクラス名のつけ方や当て方)
- React/Nextjsの基礎知識(JSXやコンポーネント管理)
Description
本講座では、フルスタック技術を駆使して、Next.js 13、Firebase、TypeScript、Tailwind CSSを利用し、ChatGPTを組み込んだAIチャットアプリケーションの開発を通じて、現代のWebアプリケーション開発の技術を総合的に学びます。
■ 本コースの対象者
・Next.jsやReactの基礎を学び、更に実践的なスキルを身に付けたい方
・ChatGPTを利用して、AIを活用した対話型サービスを開発してみたい方
・FirebaseとTypeScriptを使用し、セキュアで効率的なバックエンドを構築したい方
・Tailwind CSSでレスポンシブかつ美しいUIをデザインしたい方
・最新のフルスタック技術を学び、モダンなアプリケーション開発の流れを掴みたい方
・Webアプリケーション開発に興味があり、現場で求められるスキルを習得したい方
■ 本コースを受講する際の注意点
・HTML/CSS/JavaScriptの基本知識や、ReactやNext.jsの基礎知識が必要です(コンポーネント、JSX記法等)
・JavaScriptにある程度慣れている方が、スムーズに学習できます。
・基本的なプログラミング知識がある方が望ましいです。
本コースを完了することで、受講者は現代のWebアプリケーション開発において求められる多くの技術と知識を身に着けることができ、実際の開発現場で即戦力として活躍できるスキルを獲得できます。
Who this course is for:
- ChatGPTのAPIを使ってチャットアプリケーションを作ってみたい方
- 自作アプリでOpenAIの技術を組み込んでみたい方
- Nextjsの最新バージョン(/appディレクトリ)で開発したい方
- Firebaseでコレクション/ドキュメントを理解したい方
- ポートフォリオを1つでも増やしておきたい方
Instructor
Webエンジニア
皆さんはじめまして。Shinと申します。
休みの日はプログラミングばかり触っているちょっと変わった人です。便利なアプリや好奇心をくすぐられるようなアプリを作るのが趣味です。
動画レクチャーは分かりやすいように作成するように心がけています。
どうぞよろしくお願いします。