第2回/ToDo管理の編集

[[第2回]]

* ToDo管理アプリケーションを開発しよう [#m8d411a9]

- 目標： データベースを使用した簡単なWebアプリケーションを開発して，標準的なSpring Bootのレイヤード・アーキテクチャを理解する

** 目次 [#xe84d81f]
#contents

** 要件定義 [#xd1db241]

*** 開発の背景 [#c3578a4a]
- ある研究室では，毎週の全体ミーティングにおいて，メンバー各自が進捗報告を行っている
- 進捗報告では，メンバーがToDo (これからやること), Done (今週やったこと)を口頭で報告している
- しかしながら，下記の問題点が指摘されている
-- ToDo/Doneの管理方法がメンバー各自バラバラであり，きちんと記録されていない
-- 教員や先輩が，メンバー全員のToDoを俯瞰する方法がなく，適切なサポートができない
- これらの問題点を解決すべく，メンバーのToDo管理を支援するWebアプリケーションを開発する

*** ToDoアプリケーションの目的 [#uede6edb]
- 研究室の各メンバーが自分のToDoを登録・管理し，メンバー全員で共有できるようにすること

*** ToDoアプリケーションの概要 [#v12e40df]
- 管理者はメンバーの情報(メンバーIDと氏名)をシステムに登録し，メンバーにIDを伝える
-- 今回はパスワード等による認証は行わない．IDがパスワード代わりになる
- メンバーは自分のIDでシステムにログイン後，タイトルを入力してToDoを作成する
-- システムは，ToDoに一意な通し番号を割り当て，タイトル，作成者，済マーク, 作成日時，完了日時の情報を付けて記録する
- メンバーは各ToDoに付与された完了ボタンを押して，ToDoを完了する
-- システムは，ToDoに完了日時を記録し，済マークを付けて情報を更新する
- メンバーは組織全員のToDoをリストで一覧できる
-- ただし，他人のToDoを作成(C)したり完了(U)したりできない

** システムユースケース [#yed387cf]
*** ユースケース図 [#kb1aaadf]

&attachref(usecase.png);

*** 管理者ユースケース [#z0a82d3a]
- UC01: 管理者画面を見る
-- 管理者は，ブラウザから管理者画面のURLを開く
-- システムは，データベースから登録済みのメンバーのリストを取得する
-- システムは，新規メンバーの登録フォームと，登録済みユーザのリストを画面に表示する

- UC02: メンバーを登録する
-- 管理者は，管理者画面の登録フォームに，メンバーIDと氏名を入力する
-- システムは，フォームに入力された値で同録してよいか，確認画面を表示する
-- 管理者は，確認画面において，登録するを押下する
-- システムは，メンバーIDの重複がないかを検査し，重複がなければ[メンバーID,氏名]の組をメンバー情報としてデータベースに登録する．最後に，登録完了画面を表示する．
-- 管理者は，「続けて登録する」をクリックするとUC01の管理者画面に戻る．「初めに戻る」をクリックするとシステムのログイン画面に戻る

- UC03: メンバーを削除する
-- 管理者は，管理者画面の登録済みメンバーのリストから，削除したいメンバーの行を探し，その行にある削除ボタンを押す
-- システムは，指定されたメンバーのIDを調べ，存在する場合はデータベースから削除する．その後，UC01の管理者画面に戻る

*** メンバーユースケース [#nbac7247]
- UC11: ログインする
-- メンバーは，ブラウザからToDoアプリの画面のURLを開く
-- システムは，ログイン画面を表示する
-- メンバーは，管理者から払い出されたメンバーIDを入力し，ログインボタンを押す
-- システムは，メンバーIDが存在するかチェックし，存在すればそのメンバーのToDo画面へ遷移(リダイレクト)する

- UC12: 自分のToDoを見る
-- メンバーは，ブラウザから自分のToDo画面のURLを開く 
-- システムは，データベースから，そのメンバーのToDo（未完了ToDo）のリスト，および，Done（完了済みToDO）のリストを取得する
-- システムは，新規ToDoの登録フォームとToDoリスト，Doneリストを画面に表示する
-- メンバーは，画面を見て自分のToDo/Doneを確認する

- UC13: ToDoを登録する
-- メンバーは，自分のToDo画面のフォームから，新しいToDoのタイトルを入力し，登録ボタンを押す
-- システムは，ToDoに一意な番号を割り当て，タイトル，作成者，済マーク, 作成日時，完了日時の情報を付けてDBに追加する
-- システムは，再び自分のToDoの画面にリダイレクトする

- UC14: ToDoを完了する
-- メンバーは，自分のToDo画面のToDoリストの中から，完了した項目を探し，その行にある完了ボタンを押す
-- システムは，指定されたToDoの番号を調べ，存在する場合には，済マークを付け完了日時を記録して，DBを更新する
-- システムは，再び自分のToDoの画面にリダイレクトする

- UC15: みんなのToDoを見る
-- メンバーは自分のToDo画面から「みんなのToDo」をクリックする
-- システムは，データベースから，全員のToDoのリストとDoneのリストを取得する
-- システムは，全員のToDoリスト，Doneリストを画面に表示する
-- メンバーは，画面を見てみんなのToDo/Doneを確認する

** プロジェクトを準備しよう [#xe8c51e4]
+ GitHubで新しくリポジトリToDoAppを作成せよ
-- README付きで．チームのメンバーを招待すること
--- Settings => Manage access => invite a collaborator
--- 招待メールが届くので、accept(join?)する
+ ローカルのノートPCにcloneし，適当にブランチを作成し，checkoutせよ
+ Spring Initializr で新規プロジェクトを作成せよ
 Project: Gradle Project
 Language: Java
 Spring Boot: 2.5.1 (SNAPSHOTの書かれていない最新のやつ)
 Project Metadata:
   |--Group: jp.kobespiral.(自分の名前)
   |--Artifact: todo
   |--Name: todo
   |--Description: ToDoアプリケーション　－　Spring Boot アプリケーション．
   |--Package name: jp.kobespiral.hoge.todo (自動入力される)
   |--Packaging: war
   |--Java: 11 (※2021/06現在、VSCode上だと8,16は動かない！)
 
 Dependencies (Ctrlを押しながら操作すると複数同時に選べる) 
   |--Spring Boot DevTools (開発ツール)
   |--Lombok (コンストラクタやsetter/getterを自動生成してくれる神ライブラリ)
   |--Spring Web (Webアプリを作るときは必須)
   |--Thymeleaf (HTML テンプレートエンジン)
   |--MySQL Driver (MySQLデータベースコネクタ)
   |--Validation (バリデーション)
   |--Spring Data JPA (Javaデータ永続化API)
+ ひな形のZipを回答し，cloneしたフォルダに移動．VSCodeで開く
+ コマンドラインプロンプトから，mysqldを起動する
 > cd c:\TAMP\mysql-8.0.20\bin
 > mysqld
+ 別窓のコマンドラインプロンプトから，mysqlを起動．データベース(todoapp)，ユーザ(todouser)，パスワード(todotodo)を作成．権限を委譲する．
-- 慣れている人はphpmyadminからやってもOK、権限移譲をきちんとすること(だいたいのバグはここ)
 > cd c:\TAMP\mysql-8.0.20\bin
 > mysql -u root -p
 > Password: ******  (rootのパスワード)
  ...
 mysql> create database todoapp;
 mysql> create user todouser identified by 'todotodo';
 mysql> grant all on todoapp.* to todouser;
+ src/main/java/jp/kobespiral/hoge/todo に下記のフォルダを新規作成せよ
-- controller : コントローラクラスを入れる
-- dto  : フォーム，DTOを入れる
-- entity : エンティティクラスを入れる
-- exception : 例外クラスを入れる
-- repository : レポジトリクラスを入れる
-- service ：サービスクラスを入れる
+ src/main/resources/application.properties に以下の内容を記述せよ
 # サーバポート（テスト用）
 server.port = 18080
 
 # MySQLデータベース接続設定
 spring.datasource.url=jdbc:mysql://localhost:3306/todoapp
 spring.datasource.username=todouser
 spring.datasource.password=todotodo
 
 # Spring-JPA: DBのテーブルを自動作成してくれる機能
 # create: 新規作成， update: なければ新規作成， create-drop: 新規作成し終了時に削除
 spring.jpa.hibernate.ddl-auto=update

** 完成版イメージ [#i612880f]
- トップ画面： http://34.235.140.26:8080/ToDoV0/
-- テスト用ユーザ： test1  test2  test3
- 管理者画面： http://34.235.140.26:8080/ToDoV0/admin/register

** 管理者のユースケースを実装しよう [#o6fc95c8]

- [[第2回/ToDo管理/管理者機能実装]]

** メンバーのユースケースを実装しよう [#pe35ef18]

- [[第2回/ToDo管理/メンバー機能実装]]

タイムスタンプを変更しない