![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
#author("2021-06-25T02:52:30+00:00","","") #author("2021-06-25T03:24:07+00:00","","") [[第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/admin/register - トップ画面： 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管理/メンバー機能実装]]
