概要

こんにちは！今日は【ChatGPT × FlutterFlowで爆速アプリ開発 ※文字化け解決】をやります！
全くコードを使わないので、めちゃめちゃ簡単でした！ノーコードとAIさえあればコーディング作業不要だと感じました😅（日々学習はしていきます）

成果物

最終的には以下のようなものになります！

※FlutterflowとChatGPTの詳細説明は割愛させていただきます。

赤枠のView API keysをクリックしてください。
API　keysページが開き、Create new secret keyをクリックすれば、新しいシークレットキーをcreateできます。

以下の情報を設定します。

API Call Name : chatgptapi
Method Type : POST
API URL : https://api.openai.com/v1/chat/completions

Headers

Authorization: Bearer $OPENAI_API_KEY <-- ここに先ほどOpenAIで生成したAPIを入力
Content-Type: application/json

全て入力が完了したら、Saveボタンを押しましょう！

Name : content
Type : String
Is List : False

全て入力できたらSaveボタンを押してください。

以下の情報を入力してください。
※contentの箇所は先ほどVariablesで設定したcontentが青色の円形となっているので、ドラック&ドロップで配置してください！（めっちゃ便利。。。）

Variables

{
  "model": "gpt-3.5-turbo",
  "messages": [
    {
      "role": "user",
      "content": "<content>"
    }
  ]
}

右上にFormatボタンがあるのでJson形式でFormat形成してくれます。（めっちゃ便利・・・）
全て完了したらSaveしてください。

Variables

Name: content
Value: あなたの名前は？
Include: チェック

JSON Paths

JSON Path: $.choices[:].message.content
Name: gptContent
Response Preview: "ここにテストしたレスポンス内容が表示されます"

右上のTest API Callボタンを押すと以下のような情報が返ってきます。

あとはUIの構築だけです！
使用するウィジェットはTextField,Button,Textだけです！

Buttonには以下のように設定してください。設定内容は先ほど設定したAPIを設置しています。

Textには以下のような設定をお願い致します。

以上で終了になります！

今回実装してみて、Flutterflowの便利さの発見やAPI Callの扱い方を学習することができました！もし同じように学習している人がいたらぜひ一緒に頑張りましょう！