こんにちは。今日は、FlutterFlow（フラッターフロー）を使って、ChatGPTのAPIを活用して、簡単な診断アプリを作成してみたいと思います。健康についてアドバイスをしてくれるアプリを作りたいと考えています。

ノーコードFlutterFlowでAI診断アプリを作ってみよう

例えば、毎日運動できていますか？また、毎日十分な睡眠時間を確保できていますか？お酒はどのくらい摂取していますか？など、簡単な質問に対して、ユーザーが選択肢からポチポチ選ぶだけで、AI（ChatGPT）が診断結果を提供してくれるようなアプリを作成したいと思います。

このようなアプリは、健康の診断に限らず、さまざまな業界で需要がありますよね。ただし、ゼロからアプリを開発しようとすると、かなりの時間と労力がかかってしまいます。その結果、大きな費用と時間を要することになります。しかし、FlutterFlow（フラッターフロー）を使用し、ノーコードアプローチを採用することで、コストを大幅に削減し、開発時間を短縮できると考えています。さらに、サービスの成功につながる可能性も高いです。

そこで今日は、簡単な作成方法を共有したいと思います。最後に、詳細な手順を説明する動画も用意しましたので、ぜひご覧いただきながらアプリを作成してみてください。

診断アプリの作成に興味がある方、ノーコードやFlutterFlowを使ってアプリを開発したい方には、今回の記事が参考になりましたら幸いです。ぜひ、楽しんで診断アプリの作成に取り組んでみてください。何か質問や疑問点があれば、お気軽にコメントしてください。

完成イメージ：AI診断アプリ

アプリの完成イメージはこんな感じです。
まずは以下のように質問が表示され、選択肢から選択していきます。

いくつかの質問に答えると、AI（ChatGPT）に問い合わせて、結果が以下のように表示されます。

とてもシンプルですが、十分な機能ですね！

データ周りの準備・設定

まずはデータ側からいきましょう。

今回はfirebaseと接続せず、アプリ内のAppStateにデータをもってやっていきたいと思います。

まずはDataTypesでQuestionという箱を用意します。質問を入れる枠ですね。質問の番号、質問文、選択肢（リスト）、最終問題フラグ（last_question）をもってみました。

次に、AppState側ですね。こちらにさっき作ったDataTypeを使ってquestionsというFieldを追加しました。

他に、ユーザーが選択したオプション（回答）を入れておく「answer」と、GPTの返却値を入れるresultを用意しました。

QuestionのDataTypeの中には質問やオプションのデータを登録しておきます。

UIの作成

ページは２ページだけ作ります。

一つは以下のように質問を表示するページです。PageViewを使って表示しています。

もう一つは以下のようなChatGPTのAPIから返却された診断結果を表示するページですね。

質問リストの取得、表示

PageViewの「Generating Children from Variable」のところから、さっき作ったApp Stateのquestionsを指定します。これでページビューがリスト化されますね。あとは質問Noや質問文をquestionから取得して表示しましょう。

そのPageViewの中にWrapを配置し、ボタンのリストとします。リストデータは、Wrapの「Generating Children from Variable」からquestion listのoptionを選びます。これでボタンから各オプションの名前をとることができますね。

ボタンのアクションでChatGPTへのプロンプトを保持

各質問ごとに、ユーザーの質問に対する回答を保持しておく必要があります。あとでプロンプトとしてChatGPTにまとめて送るためです。ですので、App Stateのanswerに以下のように保持させます。

PageViewで次の画面へ

次の質問へ移動するには、PageViewの「Control Page View」の「Next」でいけます。簡単ですね。

ChatGPTのAPIを実行

あとは、ChatGPTのAPIに「answer」をpromptとして渡してあげれば完成です。私の場合は、GPTからの取得結果をapp stateのresultに保持し、それを画面に表示させました。

ChatGPTとの接続部分は以下の記事もご覧ください。参考まで。

【FlutterFlow x ChatGPT】FlutterFlowでChatGPTのAPIに接続。

AI診断アプリのYoutube動画での解説はこちら

FlutterFlowでAI診断アプリの作り方はこちらのYoutube動画でも解説しています。動画ではフルバージョンで細かく1から解説していますので、興味のある方はこちらもどうぞ。

※ノーコードの開発事例については以下もご覧ください。
【ノーコード事例】アプリ開発の成功事例16選！ツールの選び方も説明！

アプリ・Webサービスの開発の無料相談はこちら

Adalo、bubble、FlutterFlow、STUDIOなどのノーコードツールを使うことで、リスクを抑えて低コストでスピーディにビジネスアイデアを形にすることができます。

この機会に、温めていたビジネスアイデアを今すぐ形にしてみませんか？

弊社はスタートアップ・新規事業向けにコストを抑えた最速のアプリ・Webサービスの開発、さらにはサービス立ち上げのコンサルティングから提案を行なっております。

また、法人向けにノーコードのスクール事業を通して内製化のサポートも行っています。

アプリ／Webサービスの開発、LPなどの構築に興味のある方は、こちらからご気軽にご相談ください。