AIと生きる~Cursorでアプリ開発 #3~

「やってもうた！」

昨日、ページ表示までできるようになったと書きましたが、その後、コードを修正したところ、表示エラーとなったため、色々いじりすぎて、どこを追加で修正したかわからなくなっていたので表示できるところまでコードを戻そうと思ったんです…
そう、ここでようやく気づきました。
コードのバックアップを取っていなかったんです。
タイトル通り「やってもうた！」です。
昨日は、過集中でやりすぎていたので、「ほどほどにしとけよ」と言われた気がして、作業を中断しました。

前回までの記事は下記です。#1に「CursorにOpenAIのAPIを設定する」を追加しています。

最初からやり直し

気を取り直して、本日の作業開始。
昨日プロジェクトを立ち上げたときに、少し物足りなさを感じつつも、従量課金がもったいなくて、ちょこちょこと修正する選択をしたんですが、今日はプロンプトを見直して、思い切って最初からやり直すことにしました。
昨日の時点で、従量課金が$3に達していましたが、ここはためらっている場合ではないと、プロンプトを修正して、新たにAIにプロジェクトを作成してもらいました。

新たな試み

プロンプトエンジニアリングの動画や、サイトを見ていると、

• 日本語よりもトークン数を節約できる

• 英語でモデル学習されているので、日本語より精度が高い

と、説明がされていました。
そこで、今回は作成したプロンプトを、「DeepL」で英訳してプロジェクトを立ち上げました。
昨日の日本語で入力と比較して、

• 反応動作が速い

• 完了までの時間も速い

• プロンプトを細かくして追加したのに、$0.5しか課金されなかった

日本語への変換が必要になるので、修正の手間が増えるとしても、英訳して送信することのメリットの方が上回ります（手間と言っても、DeepLを使うだけなので）。
従量課金の感覚が、料金表を見ていてもつかめなかったので、当初は不安でした。
失敗もありましたが、今後の運用にとっては、かなりの収穫でした。
修正前のプロジェクトもしっかりとコミットしてプッシュしておきました。

今回のプロンプト

## **プロジェクト概要** 

### **目標と要件:** 
開発するアプリは、ファンヒーターのメンテナンス管理ツールで、「お客様から依頼受け、一定期間ファンヒータを預かり、有償もしくは、無償でメンテナンスをして、返却する」という一連の流れを管理するものです。

主な機能には、
1. **顧客管理：**

- 管理項目：お客様氏名・住所・電話番号・ご使用番号

2. **メンテナンス管理：**

- 管理項目：顧客管理項目（顧客管理とリレーション）・受付日・受付者・型番・メンテナンス担当者・有償/無償の区分・預り日数・返却予定日・返却（処理）日・返却済/未返却の区分

- 「新規登録」ボタンを配置し、ボタンの説明文として、「お客様情報、メンテナンス管理情報の両方を新規登録する場合はこちら」と表示する
	- ボタンがクリックされたら、顧客情報入力フォームとメンテナンス管理入力フォームを表示する
	- 顧客情報入力フォームの入力情報は顧客管理テーブルに追加する
	- メンテナンス管理入力フォームの入力情報は顧客ID に紐づけてメンテナンス管理情報テーブルに追加する

- 「追加登録」ボタンを配置し、ボタンの説明文として、「既存のお客様情報に新たにメンテナンス管理情報を追加登録する場合はこちら」と表示する
	- ボタンがクリックされたら、お客様氏名による検索機能を有する入力ボックスと検索ボタンを表示する
		- 検索ボタンがクリックされたら、入力情報を取得し、データベース（顧客管理テーブル）を検索して、適切なレコードが存在するか確認します。
		- 顧客情報がある場合
			- お客様氏名検索結果を一覧表示し、各レコードにナビゲーションボタン（ラベル名は選択）を配置し、顧客情報を取得する機能を連動させます。
			- 取得した顧客I情報を顧客情報入力フォームに表示し、新規入力用のメンテナンス管理入力フォームを表示する
			- フォームの下部に「登録」ボタンを配置し、クリックされたら、表示されている顧客の顧客IDに紐づけてメンテナンス管理情報をメンテナンス管理テーブルに追加する
		- 顧客情報が無い場合：
			- 「該当するお客様が登録されていません。」とメッセージを表示し、メンテナンス管理ページへのナビゲーションボタンを配置する
			- ナビゲーションボタンがクリックされたら、メンテナンス管理の最初のページを表示する

- 「既存メンテナンス情報の更新」ボタンを配置し、ボタンの説明文として、「登録されているメンテナンス情報を更新する場合はこちら」と表示する
	- ボタンがクリックされたら、お客様氏名による検索機能を有する入力ボックスと検索ボタンを表示する
		- 検索ボタンがクリックされたら、入力情報を取得し、データベース（顧客管理テーブル）を検索して、適切なレコードが存在するか確認します。
		- 顧客情報がある場合：
			- お客様氏名検索結果を一覧表示し、各レコードにナビゲーションボタン（ラベル名は選択）を配置し、顧客情報を取得する機能を連動させます。
				- 選択ボタンがクリックされたら、該当レコードの顧客IDを取得し、顧客ID に紐づくメンテナンス情報がメンテナンス管理テーブルにあるか検索します。
					- メンテナンス管理情報がある場合：
						- 該当レコードを一覧表示（表示項目は管理項目）し、「メンテナンス情報の更新」ナビゲーションボタンと個別詳細表示（顧客入力フォームとメンテナンス管理入力フォームに表示する）を連動させます。
							- 個別詳細表示された情報はユーザーが自由に編集でき、更新ボタンをクリックすることで、該当レコードを更新します
				- メンテナンス管理情報がない場合：
					- 「該当するメンテナンス情報が登録されていません。追加登録してください」
		- 顧客情報が無い場合：
			- 「該当するお客様が登録されていません。」とメッセージを表示し、メンテナンス管理ページへのナビゲーションボタンを配置する
			- ナビゲーションボタンがクリックされたら、メンテナンス管理の最初のページを表示する

- メンテナンス管理入力フォームの受付日、返却（処理）日はユーザーがカレンダーから選択する
- メンテナンス管理入力フォームの受付者、メンテナンス担当者は、データベース（社員管理テーブル）に登録されているレコードをドロップダウンリストから選択する
- 返却予定日は、受付日と預り日数から自動計算し表示する
- 有償/無償、返却済/未返却はラジオボタンで選択する

3. **社員管理：**

- 管理項目：社員氏名
- メンテナンス管理で受付者とメンテナンス管理者を選択するために管理する
- 社員管理ページが表示されるたびに、社員管理テーブルに登録されているレコードを一覧表示する。
- 一覧表示した各レコードに編集のためのナビゲーションボタンと連動させます。
- 新規登録、編集、削除

4. **管理漏れの無いようTOPページで注意喚起：**

- アプリケーション起動時のTOPページで、返却予定日によりメンテナンス管理情報を一覧表示する
	- 返却予定日が明日、明後日のメンテナンス情報一覧
	- 返却予定日が前日以前で、未返却のメンテナンス情報一覧

- 表示項目：顧客管理項目とメンテナンス管理項目

### **ユーザーエクスペリエンス:** 

- ユーザビリティが重視され、直感的な操作が可能であり、利用しやすいUIが求められます。
- ユーザーPCのローカル環境で実行する

### **技術要件:**

- フロントエンド: `HTML`,`Bootstrap`,`JavaScript`
- バックエンド: `Flask`(`Python`)
- データベース: `SQLite`
- フロントエンドとバックエンドは`jQuery`,`Ajax`で連携する

### **セキュリティー：**

1. SQLインジェクション、XSS対策としてORM（Flask-SQLAlchemy）を使用
2. Flask-WTFを使用したCSRF対策を施す

### **デザイン要件:**

複雑なデータを分かりやすく表示するデータビジュアライゼーションが必要です。

今日の体調

この数日に比べると、少しましです。
倦怠感は常にあるので、今日の倦怠感はいつも通りといったところ。
頭痛、ふらつきもなく、関節痛も軽度で、頓服は服用せずに済んでいます。