ノーコードツールとしてのChatGPT3.5　～spring bootで簡単なアプリを作ってもらった～


2023/11～12の作業メモ

# ChatGPTで簡単なクイズアプリを作ってみた。

## 動作イメージ
![20231210_quizapp_tst_01.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3562068/8c9cedb4-9d53-43b5-f707-be376ace48a0.gif)

## フロー

```mermaid
graph TD;
    subgraph 開発環境
        A[開発者]
        B[GitHubリポジトリ]
    end
    subgraph デプロイ環境
        C[Render<br>（Docker上でSpring Bootアプリをホスティング）]
        D[Supabase<br>（PostgreSQLデータベース）]
    end
    subgraph ユーザー環境
        E[エンドユーザー<br>（ブラウザ経由でアプリにアクセス）]
    end

    A -->|ソースコードのプッシュ| B
    B -->|リポジトリの更新を検知し<br>自動デプロイ| C
    C -->|アプリケーションから<br>データベース接続| D
    E -->|ブラウザを通じて<br>アプリケーションにアクセス| C


```

## 目的
- 自習用にクイズアプリを作りたい。
- ChatGPT3.5を活用して何か動くものを作りたい。
- 最近Java、springを使う必要が出ているため、慣れておきたい。

## 状況
- Javaやspring bootでのアプリ作成経験なし。
- ChatGPTは最近利用し始めたばかり。

## 制約
- コードは自分では書かない。提案されたものでDB含めて構築していく。
- 仕様は会話ログ参照。

## 1カ月での状況
- 会話ログ
  - アプリ本体
https://chat.openai.com/share/efc1fa49-e163-4f08-a131-e11fbffcd094
420往復中。

  - クイズ内容
https://chat.openai.com/share/dec0c9ea-814d-4336-82ff-58e704f569fe

- ソース
後でGitHubに上げます。renderなどで公開もしたい。
↓
https://github.com/kubo-4ka/quizapp/tree/master


---
20241119追記　機能追加してみた。

https://qiita.com/kubo4ka/items/769923b14023df18489f

---

20231218追記

https://quizapp-xzmf.onrender.com

## デモを追加
 - 要件を伝えてデプロイ先や手順を提案してもらう。
 - supabaseに登録、マニュアル見ながらDB設定。マスタデータ登録。
   - 手元の端末からpsql接続で接続確認可能。
 - application.propertiesの修正。DB_URL、DB_USERNAME、DB_PASSWORDを環境変数から取得するように変更。
 - render用のdockerfileを追加。
 - githubに登録、マニュアル見ながらリポジトリ作成、eclipseからプッシュ。
 - renderに登録、マニュアル見ながらリポジトリ同期。
 - renderに環境変数を設定。
   - eclipseに環境変数を設定して動作確認も可能。

## 既知の問題
 - renderはアクセス初回時にアプリ起動で数分応答ない。
 - renderの無料プランは。しばらく利用がないとアプリが停止する。
```
Free instance types will spin down with inactivity. Upgrade to a paid instance type to prevent this behavior. Learn more.
```
 - renderに「Server unhealthy」が表示される事がある。調査未済。再デプロイで対処。
 - supabaseのコネクションを使い切る事がある。調査未済。再デプロイで対処。
```
FATAL: remaining connection slots are reserved for non-replication superuser connections
```

---
- 実装済機能
  - クイズタイトル→問題数選択→質問回答解説→採点するか確認→採点結果、という画面構成。
  - 共通のヘッダとフッタ設定。
  - ハンバーガーメニューを取り敢えずで導入。テーマ変更を取り敢えずで導入。
  - 問題数選択の上限はDB上の質問レコードから取得。
  - 「次へ進む」「前に戻る」で回答内容をセッションに保存。
  - クイズアプリとしての最低限の採点機能。

- 既知の問題。今後の改善予定
  - 選択肢の順番が固定。
  - 「首都クイズ」「歴史クイズ」「NWクイズ」など、クイズの選択機能追加したい。
  - 全体的に見栄えが適当。
  - スマホでの見栄えが悪い。
  - ハンバーガーメニューからのテーマ変更がタイトル以外動作しない。
  - ハンバーガーメニューからのテーマ変更が画面遷移で引き継がれない。
  - クイズデータの作成依頼が難しい。要検討。
  - URLに?が付く。
  - 採点結果画面で、これまでの質問と回答の一覧を表示したい。
  - テストを実装していない。


## これまでのまとめ
- 基本動作は「要件提示」→「コード作成依頼」→「エラー修正依頼」or「動作改善依頼」or「要件追加依頼」。その他、eclipseの使い方、ソースファイルの配置場所と言った開発お作法の質問、知らない用語の質問や一般的に取られるアプローチの確認も行ってきた。
- エラー解消方法も教えてもらった。eclipseのエラーメッセージ確認、eclipseのデバッグ確認、ブラウザの開発者ツール確認。
- 一度に提案してもらえるコードに限界ありそうなので、小分けに提案を依頼してきた。
- 「//要件に合わせて実装」など、コード例が省略された場合も、この部分を提案してください、と段階分けてコードがもらえるまで依頼を続ける。
- 途中から文脈の忘却発生。大量のエラーログを連携した辺りで発生した気がするので、用途ごとに会話を別にして、「メインのコード提案依頼」「エラー解消依頼」「クイズデータ作成依頼」と言った感じで管理した方が良いかも知れない。自分としても振り返りやすい。
- 画面が動くようになってからは修正ロジックの提案や、誘導も行ってきた。
- エラーメッセージを連携した場合の解説は迅速で役立った。
- 初歩的な質問も、人間なら普通怒るような仕様変更も、文句なく対応してくれる。
- 仕様変更後は混乱からか矛盾や、修正しました、と言って前と同じコードが提案されることもあった。
- 提案されたコードと現状のコードとの比較は手作業で手間。
- 会話が長くなったからか、パソコンのブラウザで質問すると、応答が時間かかるか画面更新が必要になってきた。iPhoneのアプリでは特に問題はない。
- 無駄なコード、良くないコードなどはあると思うが未検証。


## ノーコードか？
ノーコードではないと思う。

確かに、動いているアプリについて、1行も自分で書いたコードはないが、
エラー解消に向けてコードを読んでロジックの提案も行っている。

ノーコードツールというと、
コーディングというレイヤーの隠蔽がメインに感じている。
よって、コードの提供依頼という進め方なので、
世間一般の求めるノーコードツールではない。

未知の言語、不慣れなFW等に挑む際の、
優秀な、従順なアシスタントという感じだと思う。

言語の細かい仕様や、どう書けば動くかを知らない状況で、
要件を伝え、コードやお作法を提案してもらい、
部品を組み立てるのは自分が行い、
上手く組めないとか、思った動きと違うということがあれば、また部品を作り直してもらい、
最終的に思う通りのアプリにできる、とは思った。

対応する過程で自分の理解も深まるので、
この手法でアプリを何個か作成することで、
大枠は提案してもらって、
細かい修正は自分でも可能、となれそうに思えた。


以上