🐥
Nuxt.jsでWebアプリケーション開発メモ16
概要
アプリに機能を実装していく。
悩んだ末、トレーニング管理機能を作ることにした。
以下のqiitaの記事を参考に、プロンプトを書いてみた。
プロンプト16
# アプリケーション機能の追加
ここまで開発したものをベースにアプリケーションに機能を追加していきたいと思います。
追加する機能はトレーニング管理機能とします。
トレーニングとは、身体を動かすトレーニングを指します。
主に有酸素運動と筋力トレーニングの２つがメインの想定です。
# 目的
アプリケーションのユーザーが、自分のトレーニング内容を記録する機能と、記録した内容を把握できるようなダッシュボード機能の要件と基本設計書を作ること。
# 命令16
上記の機能と目的を満たすための要件を以下の観点から考えてください。
## トレーニング内容記録
- 日ごとにトレーニング内容を記録できる。
- 記録したトレーニング過去分も含めて編集、削除ができる。
- 記録するトレーニングは項目を複数記録できる。
- 例えば、「腕立て 10回」とか「ウォーキング 10km」など
- トレーニング項目は一定数システム側で用意し、その中から選択できるし、ユーザーが任意の項目を追加することもできる。
- トレーニング項目には予め消費カロリーが設定してあり、トレーニング実施によって何カロリー消費したかがわかる。
- トレーニング目的を「増量」、「減量」の２つから選べる。
- トレーニング記録にはその日の体重、体脂肪率を手動で記録できる。
- トレーニング記録には自分の写真をアップできる。
- 自分の写真をアップするとその写真から体脂肪率を自動で判定することができる。
## ダッシュボード
- カレンダーから過去のトレーニングを参照できる。
- 日ごと、週ごと、月ごと、年ごと、過去すべてごとで、各種サマリーが見れる。
- 何キロカロリー消費したかがわかる。
- トレーニング項目ごとの総数、消費カロリーがわかる。
- 体重、体脂肪の推移がわかる。
追加命令1
- 要件定義書と基本設計書をプロンプトの応答にずらずら表示してきたので、ドキュメントに落とし込むよう命令。
まずは、ドキュメントに落とし込んでください。ルートフォルダ直下に`document`フォルダをつくり、要件定義書と設計書をそれぞれマークダウンで記録してください。
- 作成されたドキュメント
https://github.com/tkure/prototype-document/commit/4b215d8b41c4b3bedf146dd4296653537b092c33
追加命令2
- 画面イメージが欲しかったので、各画面のイメージについて聞いたところテキストベースでアスキーアートっぽく画面イメージを書いてきた。
- 基本設計書に`ページ構成・ルーティング`を書いてもらったけど、それぞれどのような画面か説明してください。
- 画面の説明とともに、設計書をどんどん更新し始めた。ダッシュボードから徐々に作っていくつもりだったが、全機能をいっぱい詰め込もうとしているのとダッシュボードのイメージが想定と違ったので、ダッシュボード画面の仕様を固めるようにした。
- ちょっと展開がはやい。
まずダッシュボードの画面設計から。
ダッシュボードにはガジェットをいくつか配置したい。
画面を２列で分割するイメージで、左上から
- `直近のトレーニング記録`ガジェット\
- `カレンダー`ガジェット
- カレンダーの各日付には実施状況のマークを表示。
- 日付をダブルクリックすると、ポップアップでその日のトレーニング記録画面を表示したい。
- 記録済みの日付なら編集画面をポップアップ表示。
- 記録されていない日付なら新規追加画面をポップアップ表示。
画面右上から
- 以下のグラフとサマリーのの期間指定
- 体重と体脂肪率の推移グラフ
- 消費カロリー棒グラフ
- トレーニングサマリー
のようにしたい。
画面イメージ書ける？
- テキストベースで画面を書いてきたので、画面内容を固めるためまずはモックを作るよう指示。
手始めにダッシュボードのモック作成を指示。
top.vueを修正してモック画面作れる？
- モックがいったん出来上がったが、色々不備があったので都度指示を出して改善。
- 最終的にモックは
pages/mock/dashboard.vueに移動、top.vueはもとに戻した。
モック画面
ソース差分
Discussion