第2回/ToDo管理
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
]
開始行:
[[第2回]]
* ToDo管理アプリケーションを開発しよう [#m8d411a9]
- 目標： データベースを使用した簡単なWebアプリケーション...
** 目次 [#xe84d81f]
#contents
** 要件定義 [#xd1db241]
*** 開発の背景 [#c3578a4a]
- ある研究室では，毎週の全体ミーティングにおいて，メンバ...
- 進捗報告では，メンバーがToDo (これからやること), Done (...
- しかしながら，下記の問題点が指摘されている
-- ToDo/Doneの管理方法がメンバー各自バラバラであり，きち...
-- 教員や先輩が，メンバー全員のToDoを俯瞰する方法がなく，...
- これらの問題点を解決すべく，メンバーのToDo管理を支援す...
*** ToDoアプリケーションの目的 [#uede6edb]
- 研究室の各メンバーが自分のToDoを登録・管理し，メンバー...
*** ToDoアプリケーションの概要 [#v12e40df]
- 管理者はメンバーの情報(メンバーIDと氏名)をシステムに登...
-- 今回はパスワード等による認証は行わない．IDがパスワード...
- メンバーは自分のIDでシステムにログイン後，タイトルを入...
-- システムは，ToDoに一意な通し番号を割り当て，タイトル，...
- メンバーは各ToDoに付与された完了ボタンを押して，ToDoを...
-- システムは，ToDoに完了日時を記録し，済マークを付けて情...
- メンバーは組織全員のToDoをリストで一覧できる
-- ただし，他人のToDoを作成(C)したり完了(U)したりできない
** システムユースケース [#yed387cf]
*** ユースケース図 [#kb1aaadf]
&attachref(usecase.png);
*** 管理者ユースケース [#z0a82d3a]
- UC01: 管理者画面を見る
-- 管理者は，ブラウザから管理者画面のURLを開く
-- システムは，データベースから登録済みのメンバーのリスト...
-- システムは，新規メンバーの登録フォームと，登録済みユー...
- UC02: メンバーを登録する
-- 管理者は，管理者画面の登録フォームに，メンバーIDと氏名...
-- システムは，フォームに入力された値で同録してよいか，確...
-- 管理者は，確認画面において，登録するを押下する
-- システムは，メンバーIDの重複がないかを検査し，重複がな...
-- 管理者は，「続けて登録する」をクリックするとUC01の管理...
- UC03: メンバーを削除する
-- 管理者は，管理者画面の登録済みメンバーのリストから，削...
-- システムは，指定されたメンバーのIDを調べ，存在する場合...
*** メンバーユースケース [#nbac7247]
- UC11: ログインする
-- メンバーは，ブラウザからToDoアプリの画面のURLを開く
-- システムは，ログイン画面を表示する
-- メンバーは，管理者から払い出されたメンバーIDを入力し，...
-- システムは，メンバーIDが存在するかチェックし，存在すれ...
- UC12: 自分のToDoを見る
-- メンバーは，ブラウザから自分のToDo画面のURLを開く
-- システムは，データベースから，そのメンバーのToDo（未完...
-- システムは，新規ToDoの登録フォームとToDoリスト，Doneリ...
-- メンバーは，画面を見て自分のToDo/Doneを確認する
- UC13: ToDoを登録する
-- メンバーは，自分のToDo画面のフォームから，新しいToDoの...
-- システムは，ToDoに一意な番号を割り当て，タイトル，作成...
-- システムは，再び自分のToDoの画面にリダイレクトする
- UC14: ToDoを完了する
-- メンバーは，自分のToDo画面のToDoリストの中から，完了し...
-- システムは，指定されたToDoの番号を調べ，存在する場合に...
-- システムは，再び自分の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し，適当にブランチを作成し，ch...
+ 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を起動．データ...
-- 慣れている人は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-d...
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/reg...
** 管理者のユースケースを実装しよう [#o6fc95c8]
- [[第2回/ToDo管理/管理者機能実装]]
** メンバーのユースケースを実装しよう [#pe35ef18]
- [[第2回/ToDo管理/メンバー機能実装]]
終了行:
[[第2回]]
* ToDo管理アプリケーションを開発しよう [#m8d411a9]
- 目標： データベースを使用した簡単なWebアプリケーション...
** 目次 [#xe84d81f]
#contents
** 要件定義 [#xd1db241]
*** 開発の背景 [#c3578a4a]
- ある研究室では，毎週の全体ミーティングにおいて，メンバ...
- 進捗報告では，メンバーがToDo (これからやること), Done (...
- しかしながら，下記の問題点が指摘されている
-- ToDo/Doneの管理方法がメンバー各自バラバラであり，きち...
-- 教員や先輩が，メンバー全員のToDoを俯瞰する方法がなく，...
- これらの問題点を解決すべく，メンバーのToDo管理を支援す...
*** ToDoアプリケーションの目的 [#uede6edb]
- 研究室の各メンバーが自分のToDoを登録・管理し，メンバー...
*** ToDoアプリケーションの概要 [#v12e40df]
- 管理者はメンバーの情報(メンバーIDと氏名)をシステムに登...
-- 今回はパスワード等による認証は行わない．IDがパスワード...
- メンバーは自分のIDでシステムにログイン後，タイトルを入...
-- システムは，ToDoに一意な通し番号を割り当て，タイトル，...
- メンバーは各ToDoに付与された完了ボタンを押して，ToDoを...
-- システムは，ToDoに完了日時を記録し，済マークを付けて情...
- メンバーは組織全員のToDoをリストで一覧できる
-- ただし，他人のToDoを作成(C)したり完了(U)したりできない
** システムユースケース [#yed387cf]
*** ユースケース図 [#kb1aaadf]
&attachref(usecase.png);
*** 管理者ユースケース [#z0a82d3a]
- UC01: 管理者画面を見る
-- 管理者は，ブラウザから管理者画面のURLを開く
-- システムは，データベースから登録済みのメンバーのリスト...
-- システムは，新規メンバーの登録フォームと，登録済みユー...
- UC02: メンバーを登録する
-- 管理者は，管理者画面の登録フォームに，メンバーIDと氏名...
-- システムは，フォームに入力された値で同録してよいか，確...
-- 管理者は，確認画面において，登録するを押下する
-- システムは，メンバーIDの重複がないかを検査し，重複がな...
-- 管理者は，「続けて登録する」をクリックするとUC01の管理...
- UC03: メンバーを削除する
-- 管理者は，管理者画面の登録済みメンバーのリストから，削...
-- システムは，指定されたメンバーのIDを調べ，存在する場合...
*** メンバーユースケース [#nbac7247]
- UC11: ログインする
-- メンバーは，ブラウザからToDoアプリの画面のURLを開く
-- システムは，ログイン画面を表示する
-- メンバーは，管理者から払い出されたメンバーIDを入力し，...
-- システムは，メンバーIDが存在するかチェックし，存在すれ...
- UC12: 自分のToDoを見る
-- メンバーは，ブラウザから自分のToDo画面のURLを開く
-- システムは，データベースから，そのメンバーのToDo（未完...
-- システムは，新規ToDoの登録フォームとToDoリスト，Doneリ...
-- メンバーは，画面を見て自分のToDo/Doneを確認する
- UC13: ToDoを登録する
-- メンバーは，自分のToDo画面のフォームから，新しいToDoの...
-- システムは，ToDoに一意な番号を割り当て，タイトル，作成...
-- システムは，再び自分のToDoの画面にリダイレクトする
- UC14: ToDoを完了する
-- メンバーは，自分のToDo画面のToDoリストの中から，完了し...
-- システムは，指定されたToDoの番号を調べ，存在する場合に...
-- システムは，再び自分の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し，適当にブランチを作成し，ch...
+ 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を起動．データ...
-- 慣れている人は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-d...
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/reg...
** 管理者のユースケースを実装しよう [#o6fc95c8]
- [[第2回/ToDo管理/管理者機能実装]]
** メンバーのユースケースを実装しよう [#pe35ef18]
- [[第2回/ToDo管理/メンバー機能実装]]
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
