NCMBでは公式SDKとしてSwift/Objective-C/Kotlin/Java/Unity/JavaScript SDKを用意しています。また、それ以外にもコミュニティSDKとして、非公式ながらFlutter/React Native/Google Apps Script/C#/Ruby/Python/PHPなど幅広い言語向けにSDKが開発されています。
今回はコミュニティSDKの一つ、Flutter/Dart SDKを使ってChatGPTを用いたチャットアプリを作ってみます。まず画面の仕様とSDKの初期化について解説します。
コード
今回のコードは NCMBMania/flutter-gpt-chat にアップロードしてあります。実装時の参考にしてください。
利用技術について
今回は次のような組み合わせになっています。
- Flutter
- NCMB
- OpenAI API
仕様について
今回のアプリは以下のような機能があります。
- チャット画面
- メッセージをNCMBに保存
- OpenAI APIを使って返答を取得
- 返答をNCMBに保存
ChatGPTでは過去のメッセージもAPIで送信することで、以前の内容を踏まえた回答をしてくれます。過去のメッセージをNCMBに保存しているので、復元が容易です。
利用する機能について
このチャットアプリで利用しているNCMBの機能は以下の通りです。
- データストア
- データ登録
- データ検索
- スクリプト
- OpenAI APIの実行
画面について
現時点で、画面は以下の1つのみです。
チャット画面
チャット画面はflutter_chat_ui | Flutter Packageを使っています。
SDKのインストール
flutter_chat_uiとNCMBのSDKをflutterコマンドでインストールします。
flutter pub add flutter_chat_ui
flutter pub add ncmb
NCMBのAPIキーを取得
mBaaSでサーバー開発不要！ | ニフクラ mobile backendにてアプリを作成し、アプリケーションキーとクライアントキーを作成します。
初期化
初期化は lib/main.dart にて行います。
import 'package:ncmb/ncmb.dart';
void main() {
// NCMBの初期化
NCMB('YOUR_APPLICATION_KEY',
'YOUR_CLIENT_KEY');
runApp(const MyApp());
}
これでNCMBの初期化が完了します。
画面の読み込み
チャット画面をChatPageとして、MyAppのbuildで読み込みます（チャット画面は次回作ります）。
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'ChatGPT App',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const ChatPage(),
debugShowCheckedModeBanner: false,
);
}
}
まとめ
今回はチャットアプリの仕様と画面、NCMBの初期化までを解説しました。次回はOpenAI APIの呼び出し（スクリプト）について解説します。