こんにちは。今日はChatGPTとノーコードのFlutterFlowを使って、AIチャットボットから予約できる「AI予約アプリ」っぽいものを作ってみました。
結構すごいですよね！
「AI x ノーコード」の凄さが出ていますね。ノーコードでありながらカスタムファンクションでコードがかけるFlutterFlowの柔軟性と、ChatGPTのFunction Callingの可能性が感じられました。
ではまずどんなものを作ったのか、どのように作ったのか紹介していければと思います。
AIチャットbot予約アプリの完成イメージはこちら
ではFlutterFlowとChatGPTで作ったAIチャットbot予約アプリのイメージを紹介します。
上記のように「こんにちは」など予約と関係ない話をすると、普通にチャットで話しかけるとChatGPTらしくいい感じに返してくれます。
しかし、「予約したいです」など予約の話をすると予約するために必要な条件（日付、時間、コース）を聞いてくれます。
それにチャットで答えるとデータベースに予約情報を登録し、「予約が完了しました」のメッセージを表示します。
日付だけで時間を入力しなかったりコースを入力してない場合は、時間やコースについても聞いてくれます。
結構すごいですよね！？
ChatGPTとFlutterFlowの可能性を改めて感じました...！
FlutterFlow（フラッターフロー）とは？
FlutterFlow（フラッターフロー）とは、プログラミングなしでアプリを開発できるノーコードツールの一種です。スクラッチ開発（ゼロからプログラミングして開発）する場合と比較し、格段にスピーディに（FlutterFlow公式が言うには１０倍速）で開発が可能です。
また、他のノーコードと比較しかなり複雑な機能も実装でき、カスタムファンクション機能を利用することでノーコードでは難しいところは部分的にプログラミングして解決することもできる優れものです。
Webアプリもネイティブアプリ（iOSアプリ/Androidアプリ）も対応できる点も素晴らしいですね。
ネイティブアプリを10倍速で作れるノーコードツールFlutterFlowとは？
ChatGPTのFunction Callingとは？
Function Calling（ファンクション コーリング）とは、ChatGPTのFunction（関数）をCalling（呼び出し）できる仕組みです。
うまく説明できないのですが、これにより特定の話題で話しかけてる時にChatGPTから固定のフォーマットで返信してくれます。（ちょっと語弊のある説明かもしれないですが...）
以下でAIで料理レシピを提案してくれるアプリを作ってる解説をしてるのですが、それもChatGPTのFlunction Callingを利用してます。興味のある方はこちらもどうぞ。
FlutterFlow x ChatGPTでAI料理レシピ提案アプリを作ってみる（Function Callingを使ってみよう）
ChatGPTのチャットボットによるAI予約アプリの作り方
さて、それでは作り方を書いていきましょう。
細かいところはYoutube動画で解説するとして、ここではざっくり概要を書いていきたいと思います。
ChatGPT部分はマーケットプレイスからクローンを使おう。
まず、ChatGPTと普通にチャットする部分を作り込む必要があります。でも、チャットの仕組みもAPI連携もそこそこ手間ですよね。
そこでFlutterFlowのMarketPlaceを使ってみました。"chatgpt"で検索すると色々テンプレートが出てきます。僕はこちらをクローンして使いました。
無料でこのクオリティは非常に便利ですね...！
ChatGPTのAPIにFunction Callingを追加
テンプレートをクローンしてアプリを作ったら、次はGPTのAPI呼び出し部分のJSONをカスタマイズします。
上記の赤枠部分がFunction Callingの設定です。
functionsというのを追加し、関数名を"name": "get_booking"としています。
"properties": のところに、booking_date、course、timeslotという三つを定義しました。それぞれ予約日、コース、時間枠ですね。
enumも使えるようで、course（コース）は「"enum":["Aコース","Bコース","Cコース"] 」のように定義しています。
この辺を設定して、テスト実行してみましょう。
promptを設定し、そのプロンプトが予約と関係ない話であれば"content"の中に返却されます。
しかし、予約に関係のあるpromptを設定すると、function_callのargumentsのところに値が返ってきます。
"arguments": "{\n \"booking_date\": \"2022-12-30\",\n \"course\": \"Bコース\",\n \"timeslot\": \"10:00\"\n}"こんな感じですね。それぞれのbooking_date、course、timeslotなどの値が返ってきてるのがわかりますね！
バックスラッシュなども含まれてますが、これをcustom functionを使って加工してそれぞれの値を抽出し、それを元にデータベースに登録するなどして予約をします。
だいたいこんな感じの流れですね！
AIチャットボット予約アプリのYoutube動画での解説はこちら
この記事ではざっくりとした説明でしたが、以下動画ではFlutterFlowによるAIチャットボット予約アプリについて（およびFunction Callingについて）もう少し具体的に説明しています。興味のある方は以下動画もご覧ください。
アプリ・Webサービスの開発の無料相談はこちら
Adalo、bubble、FlutterFlow、STUDIOなどのノーコードツールを使うことで、リスクを抑えて低コストでスピーディにビジネスアイデアを形にすることができます。
この機会に、温めていたビジネスアイデアを今すぐ形にしてみませんか？
弊社はスタートアップ・新規事業向けにコストを抑えた最速のアプリ・Webサービスの開発、さらにはサービス立ち上げのコンサルティングから提案を行なっております。
また、法人向けにノーコードのスクール事業を通して内製化のサポートも行っています。
アプリ／Webサービスの開発、LPなどの構築に興味のある方は、こちらからご気軽にご相談ください。