概要
こんにちは！今日は【ChatGPT × FlutterFlowで爆速アプリ開発 ※文字化け解決】をやります！
全くコードを使わないので、めちゃめちゃ簡単でした！ノーコードとAIさえあればコーディング作業不要だと感じました😅（日々学習はしていきます）
成果物
最終的には以下のようなものになります！
作成方法
※FlutterflowとChatGPTの詳細説明は割愛させていただきます。
1 ChatGPTのAPI設定
OpenAI API ページ：https://platform.openai.com/account/api-keys
赤枠のView API keysをクリックしてください。
API keysページが開き、Create new secret keyをクリックすれば、新しいシークレットキーをcreateできます。
2 FlutterflowのAPI設定
１、flutterflowのページを開き、プロジェクト作成後、左サイドメニューの下から５番目にAPI Callsというメニューがあるのでクリックしてください。そうすると以下のDefine API Callの画面が表示されます。
２、左上にある[＋Add]ボタンを押し、Create API Callを押すと画面が切り替わります。
以下の情報を設定します。
API Call Name : chatgptapi
Method Type : POST
API URL : https://api.openai.com/v1/chat/completions
Authorization: Bearer $OPENAI_API_KEY <-- ここに先ほどOpenAIで生成したAPIを入力
Content-Type: application/json
API情報はこちらのURLにあります。
https://platform.openai.com/docs/api-reference/making-requests
全て入力が完了したら、Saveボタンを押しましょう！
3,赤枠のVariablesを押してください。
以下の情報を入力してください。
Name : content
Type : String
Is List : False
全て入力できたらSaveボタンを押してください。
4,赤枠のBodyを押してください。
以下の情報を入力してください。
※contentの箇所は先ほどVariablesで設定したcontentが青色の円形となっているので、ドラック&ドロップで配置してください！（めっちゃ便利。。。）
{
"model": "gpt-3.5-turbo",
"messages": [
{
"role": "user",
"content": "<content>"
}
]
}
右上にFormatボタンがあるのでJson形式でFormat形成してくれます。（めっちゃ便利・・・）
全て完了したらSaveしてください。
5, 赤枠のAdvanced Settingsを押してください
Decode Respose as UTF-8をオンにしてください。
これだけでUTF-8でレスポンスされるため、文字化けを回避できます。
6,上部にあるResponse & Testをクリックしてください。
以下の情報を入力してください。
Name: content
Value: あなたの名前は？
Include: チェック
JSON Path: $.choices[:].message.content
Name: gptContent
Response Preview: "ここにテストしたレスポンス内容が表示されます"
右上のTest API Callボタンを押すと以下のような情報が返ってきます。
3 UIの構築
あとはUIの構築だけです！
使用するウィジェットはTextField,Button,Textだけです！
Buttonには以下のように設定してください。設定内容は先ほど設定したAPIを設置しています。
Textには以下のような設定をお願い致します。
以上で終了になります！
まとめ
今回実装してみて、Flutterflowの便利さの発見やAPI Callの扱い方を学習することができました！もし同じように学習している人がいたらぜひ一緒に頑張りましょう！