メニュー

Remix × Firebaseで始める生成AIアプリ開発

発売日: 2024/10/11 想定ページ数: 172ページ ISBN: 9784295603429 全文検索: 対応
★★★★★ ★★★★★ 0件
本書は、Firebaseアプリ開発における生成AI活用のノウハウのガイドブックです。持続可能なプロジェクト開発の流れを踏襲しつつ、新しい技術を積極的に採用し、実用的なサンプルアプリ開発を通じてFirebaseと生成AIへの入門を目指します。本書で開発するサンプルアプリは、複数の生成AIとWeb上でチャットできる生成AIチャットアプリです。実際に私が日々使用している自作の生成AIアプリを本書向けにサンプルアプリ化したものであり、本書を参考にすれば実用的な生成AIアプリが完成します。
本書で取り上げる生成AIは、GoogleのGemini ProとOpenAIのGPTですが、他の生成AI(例:AnthropicのClaude)との連携方法も基本的に同じです。また、LangChainを使用した生成AIとの連携も基本的な考え方は変わりません。これにより、本書を通じて皆さんが素晴らしい生成AIライフを送れるようサポートします。
サンプルアプリのフレームワークとしては、Firebase業界で注目されるRemix SPAモードを採用しています。開発を進める中で、FirebaseとRemix SPAモードの相性の良さを再確認しました。本書を通じて、その相性の良さを皆さんにも実感していただければと思います。また、今回のサンプルアプリではパッケージ管理ツールとしてpnpmを採用し、monorepo構成にしているので、これに興味がある方もぜひ本書をご覧ください。

【目次】
第1章 Firebaseプロジェクトを設定する
第2章 Remixアプリ(SPAモード)をFirebase Hostingにデプロイする
第3章 開発環境を整える
第4章 Cloud Functionsの開発環境を整える
第5章 ローカルパッケージを作成する
第6章 アプリにデフォルトレイアウトを適用する
第7章 認証機能をつける
第8章 Cloud Firestoreのデータ設計をする
第9章 UIを作成する
第10章 Gemini Proと連携する
第11章 UXを改善する
第12章 GPTと連携する
第13章 RAG
目次プレビュー
  • はじめに
  • 第1章 Firebaseプロジェクトを設定する
  • 第2章 Remixアプリ(SPAモード)をFirebase Hostingにデプロイする
  • サンプルコード
  • 1.1 Firebaseプロジェクトを作成する
  • 1.2 Webアプリを追加する
  • 1.3 Blazeプランにアップグレードする
  • 2.1 開発環境を準備する
  • 2.2 ワークスペースルートを作成する
  • 2.3 Firebaseを初期化する
  • 2.4 Remixアプリを作成する
  • 2.5 パッケージをインストールする
  • 2.6 開発環境のポート番号を変更する
  • 2.7 Firebase Hostingにデプロイする
  • 3.1 Node.jsのバージョンを固定する
  • 3.2 ESLintの設定を追加する
  • 3.3 Prettierを設定する
  • 3.4 Stylelintを設定する
  • 3.5 lint、formatコマンドを追加する
  • 3.6 デプロイする
  • 4.1 Cloud Functionsを有効化する
  • 4.2 Cloud Functionsを初期化する
  • 4.3 functionsをワークスペースに追加する
  • 4.4 Cloud Functionsのパッケージをインストールする
  • 4.5 TypeScriptの設定を更新する
  • 4.6 ESLintの設定を更新する
  • 4.7 Prettierを設定する
  • 4.8 lint、formatコマンドを追加する
  • 4.9 デプロイする
  • 5.1 ローカルパッケージのディレクトリーを作成する
  • 5.2 package.jsonを作成する
  • 5.3 TypeScriptを設定する
  • 5.4 ESLintとPrettierを設定する
  • 5.5 lint/formatコマンドを追加する
  • 5.6 VSCodeの設定を追加する
  • 5.7 ローカルパッケージをインストールする
  • 5.8 デプロイできるようにする
  • 6.1 UIライブラリー(Mantine)を設定する
  • 6.2 デフォルトレイアウトを作成する
  • 6.3 デプロイする
  • 7.1 Firebase Authenticationを有効化する
  • 7.2 Firebaseアプリを初期化する
  • 7.3 認証ページのレイアウトを追加する
  • 7.4 サインインページを作成する
  • 7.5 認証前はサインインページにリダイレクトするように
  • 7.6 サインインできるように
  • 7.7 サインアウトできるように
  • 7.8 デプロイする
  • 8.1 Cloud Firestoreを有効化する
  • 8.2 Cloud Firestoreを初期化する
  • 8.3 ReactFireのFirestoreProviderを設定する
  • 8.4 モデルの型を作成する
  • 8.5 セキュリティールールを設定する
  • 8.6 デプロイする
  • 9.1 メインコンテンツにチャット画面を作成する
  • 9.2 チャットメッセージのデザインを調整する
  • 9.3 データアクセス用のユーティリティ関数を作成する
  • 9.4 チャット画面でチャットデータを取得する
  • 9.5 チャットフォームでチャットデータを作成/更新する
  • 9.6 チャットメッセージ更新時に自動スクロールするように
  • 9.7 固定メニューにNew Chatボタンを追加する
  • 9.8 ナビメニューに過去のスレッド履歴を表示する
  • 9.9 デプロイする
  • 10.1 Vertex AI APIを有効化する
  • 10.2 Gemini Proと連携する関数を作成する
  • 10.3 Gemini Proとチャットできるようにする
  • 10.4 デプロイする
  • 10.5 参考
  • 11.1 Firestoreの更新頻度を減らす
  • 11.2 生成AIの回答中はローダを表示する
  • 11.3 メッセージ送信のショートカットを追加する
  • 11.4 スレッド履歴を無限スクロールにする
  • 11.5 スレッドを削除できるようにする
  • 11.6 デプロイする
  • 12.1 OpenAIのAPIキーをSecret Managerに登録する
  • 12.2 OpenAIのOrganizationIDを環境変数に設定する
  • 12.3 生成AIモデルにGPTを追加する
  • 12.4 OpenAIと連携する関数を作成する
  • 12.5 GPTとチャットできるようにする
  • 12.6 デプロイする
  • 13.1 Firebase Admin SDKをアップグレードする
  • 13.2 ベクトルデータモデルThreadVectorの型を作成する
  • 13.3 ThreadVectorモデルのユーティリティ関数を作成する
  • 13.4 ベクトルデータを更新するタスクキュー関数を作成する
  • 13.5 タスクキュー関数にキューイングする
  • 13.6 類似スレッドと指示を生成AIに伝える
  • 13.7 ベクトルデータを削除する
  • 13.8 ベクトル検索用のインデックスを作成する
  • 13.9 デプロイする
終わりに

まだレビューが投稿されていません