間が空きました
part2-4まですっとばしてます。まとめられてません。
でも続きを書きます。書かないと覚えないので。
やるしかねえ
デザイナーからエンジニアにジョブチェンジというかアビリティが加わるみたいな話が具体性を帯びてきた。
というわけでやっていきます
今日やること
- 画面設計
- class設計
- DB設計
目標：6/20までに本稿の自動販売機のgithubリポジトリを作ること
なのでペースアップしていかないと間に合わねえぞ！頑張れ俺！
手順1 画面設計、シロ！
- 画面の種類
- 画面の名前
- 画面の機能 を洗い出して設計を書いていきましょう
画面の種類
- topページ (index)
- 所持金設定
- 所持金確認画面
- 料金投入
- 商品選択
- 商品排出
- お金返却
以上7ページを設計する。
画面設計で決めることは
- 画面の名前=ページのURL
- 画面の機能(WFほどではないが、項目とボタン、フォームなど、ページに置くべき機能を並べる
- 画面のリンク(遷移先)(矢印で遷移を示す)(瞬足)(コーナーで差をつけろ)
今回はcacooを使用した。(cacoo、リアルタイムで他の人と画面共有できるの楽しい)
できた画面はこちら
画面ができたら、それを元にMySQL workbenchでDB設計する。
(30分で支度しな！！と言われたが時間ぶっちぎりオーバー。一時間くらいかかった。)
まずぶつかった壁
MySQLの使い方覚えられてない…
いろいろ使い方引っ張り出しながら設計した
画面設計とDB設計は違う！
私は画面で出した項目=DBの項目、と勘違いしてしまい、DB設計を2周するハメになった。
ので、一旦、必要そうな項目を各ページからリストアップしてみた。
所持金設定
- 所持金
- 足す金額
- 投入ボタン
所持料金確認画面
- 所持金を〇〇に設定します(テキスト表示)
- 〇〇(金額足した後の所持金。結果)
- 確認ボタン
料金投入ページ
- 所持金
- 投入する金額
- 投入ボタン
商品選択ページ
- 投入額
- 所持金
- 商品(複数)
- 商品名
- 価格
- 温度種別
- 包装種別
- 在庫有りなし表示
- 商品選択ボタン
- お金返却ボタン
(商品自体をページの機能からテーブル分けると楽になるのでは、
と、この辺からテーブル設計の概念が修正でき始めた気がする)
商品排出ページ
- 購入した商品名
- 商品名
- 価格
- 包装種別
- 温度種別
- 個数
- トップに戻るボタン
お金返却ページ
- 返却金額
- 所持金
- トップに戻るボタン
トップページ
- 購入開始ボタン
- 購入済み商品一覧(複数) - 所持商品名 - 飲むボタン/飲んだ表示
できあがりがこちら!
スクリーンショット 2019-06-04 8.40.14.png
なにもかも合ってない！！！
時間切れで1:1とか1:nとかリレーションさせるところまで到達できなかったです
しかもめちゃくちゃな配置。
- 画面設計を先にやって、その画面設計と同じ配置でつくってしまった。
- URL=DB名ではないということを知った。
一旦ここまで！
次回は答え合わせと、ER図の修正をやってみたいと思います。