Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
『AIチャットアプリ開発』Next.jsとOpenAI APIで5つのAI機能を持ったChatGPTのようなアプリを作成
Rating: 4.6 out of 5(26 ratings)
467 students

『AIチャットアプリ開発』Next.jsとOpenAI APIで5つのAI機能を持ったChatGPTのようなアプリを作成

DALL·E画像生成、Whisper音声認識、TTS音声合成、vision画像解析などを組み込んだAIアプリ開発法を徹底解説「Next.js openAI API Firebaseを駆使した多機能AIチャットアプリ開発へのマスターガイド。」
Created byポテ ナス
Last updated 8/2024
Japanese

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を使用)

Course content

13 sections144 lectures14h 45m total length
  • 完成品のデモ7:51
  • 本講座の対象者1:23
  • 本講座のソースコード0:04

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の知識をアプリを作って生かしたい方