【chatGPT】chatGPT × FlutterFlowで爆速アプリ開発 ※文字化け解決


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

## 成果物
最終的には以下のようなものになります！
![ezgif.com-video-to-gif (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1935269/43528424-27c7-6b30-5af0-280dafd288d7.gif)

## 作成方法
<font color="Red">※FlutterflowとChatGPTの詳細説明は割愛させていただきます。</font>
### 1 ChatGPTのAPI設定
OpenAI API ページ：https://platform.openai.com/account/api-keys

赤枠の**View API keys**をクリックしてください。
API　keysページが開き、**Create new secret key**をクリックすれば、新しいシークレットキーをcreateできます。
![スクリーンショット 2023-04-09 14.12.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1935269/aaef3ef6-fbe3-7271-86a6-355e751babed.png)

### 2 FlutterflowのAPI設定
##### １、flutterflowのページを開き、プロジェクト作成後、左サイドメニューの下から５番目に**API Calls**というメニューがあるのでクリックしてください。そうすると以下の**Define API Call**の画面が表示されます。
![スクリーンショット 2023-04-09 14.56.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1935269/44178e33-61ae-65b2-693e-ddb65c9c7aa8.png)

##### ２、左上にある[＋Add]ボタンを押し、Create API Callを押すと画面が切り替わります。
![スクリーンショット 2023-04-09 14.59.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1935269/9140e3e7-6624-ed5e-3c9f-c25817d16269.png)

以下の情報を設定します。
```chat
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
```

API情報はこちらのURLにあります。
https://platform.openai.com/docs/api-reference/making-requests
![スクリーンショット 2023-04-09 15.00.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1935269/39eeb50e-1a9f-c2f1-9f3d-6f80f7ca3d7d.png)


全て入力が完了したら、Saveボタンを押しましょう！
##### 3,赤枠のVariablesを押してください。
![スクリーンショット 2023-04-09 15.03.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1935269/c8b117e9-b51a-8d0d-330c-2c771b053469.png)
以下の情報を入力してください。
```
Name : content
Type : String
Is List : False
```
全て入力できたらSaveボタンを押してください。

##### 4,赤枠のBodyを押してください。

![スクリーンショット 2023-04-09 14.45.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1935269/c00b3208-5170-1d31-9350-f546dc2882f9.png)

以下の情報を入力してください。
<font color="Red">※contentの箇所は先ほどVariablesで設定したcontentが青色の円形となっているので、ドラック&ドロップで配置してください！（めっちゃ便利。。。）<font>
```:Variables
{
  "model": "gpt-3.5-turbo",
  "messages": [
    {
      "role": "user",
      "content": "<content>"
    }
  ]
}
```
右上にFormatボタンがあるのでJson形式でFormat形成してくれます。（めっちゃ便利・・・）
全て完了したらSaveしてください。

##### 5, 赤枠のAdvanced Settingsを押してください
![スクリーンショット 2023-04-09 15.17.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1935269/f90020df-1530-af32-024f-934425b411c3.png)
Decode Respose as UTF-8を**オン**にしてください。
これだけでUTF-8でレスポンスされるため、文字化けを回避できます。

##### 6,上部にある**Response & Test**をクリックしてください。
![スクリーンショット 2023-04-09 15.31.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1935269/805dcbfa-8043-2bea-47bf-4ae44ab1f89c.png)
以下の情報を入力してください。
```:Variables
Name: content
Value: あなたの名前は？
Include: チェック
```
```:JSON Paths
JSON Path: $.choices[:].message.content
Name: gptContent
Response Preview: "ここにテストしたレスポンス内容が表示されます"
```
右上の**Test API Call**ボタンを押すと以下のような情報が返ってきます。
![スクリーンショット 2023-04-09 15.38.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1935269/75ca8b0e-5457-4319-416d-0d2b7d74f09b.png)


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

![スクリーンショット 2023-04-09 15.26.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1935269/5955b540-648a-19c8-e42d-9ce820f92369.png)

**Button**には以下のように設定してください。設定内容は先ほど設定したAPIを設置しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1935269/e448428c-7d42-fead-ef53-c222dd5eb687.png)

**Text**には以下のような設定をお願い致します。
![スクリーンショット 2023-04-09 15.29.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1935269/464d7455-2df8-260b-f3ed-50c52b67a089.png)

以上で終了になります！

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