第2回/ToDo管理の履歴(No.6)

第2回

ToDo管理Webアプリケーション†

↑

要件定義†

ある組織では，週例ミーティングで各自が１週間の活動についてToDo/Doneに基づく進捗報告を行っている．

しかしながら，現状では自然言語で記述されており，管理が人それぞれバラバラであるため全体の見渡しも悪い．

この現状を，Webアプリケーションを用いたシステム化で改善したい．

要求
- 各自が自分のToDoを登録・管理．メンバーで共有できるようにする
- 管理者はメンバー（id，名前）をシステムに登録する
- 各ユーザは自分のToDoを新規登録，更新，完了(done)する
  - ユーザは他人のToDoを閲覧(R)できるが，作成(C)・更新(U)・完了(D or U?)できるのは，そのユーザのみ
- システムは個人，あるいは全ユーザについて，ToDoと直近1週間のDoneを一覧する
  - フィルタ：自分だけ，全員
  - ソート：更新日時，ユーザ名
基本機能
- ユーザのCRUD　
- ToDoのCRUD　
- ユーザ管理画面（管理者用）
- ToDo一覧・管理画面（ユーザごと．UIDをURLのパスパラメータで渡して生成）
エンティティ
- ユーザ： UID, 名前
- ToDo: TID, title, description, createdAt, updatedAt, doneAt，UID

発展機能
- ログイン
- 締め切り管理・アラート
- レポート・各種メトリクスの計算
  - 平均ToDo処理時間，週当たりのToDo個数，．．．
- モチベーション維持の仕組み（いいね！など）

↑

【実装・第1弾】名前を登録するアプリを作ってみよう†

↑

準備†

spring initializrで下記4つをDependenciesで選択．Artifactはtodo
- Spring Boot DevTools
- Lombok
- Thymleaf
- Spring Data JPA

build.gradleへの追加
- implementation 'org.springframework.boot:spring-boot-starter-validation'
- runtimeOnly 'mysql:mysql-connector-java'
- war （前回参照）

DBの準備
- データベース作成
  - 名前：todo
  - 照合：utf8_general_ci
  - ユーザ/パスワードの作成: todo/todo+
- コマンドラインからやるやり方
```
CREATE DATABASE wordpress DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci;
CREATE USER todo IDENTIFIED BY 'todo+'
GRANT ALL ON todo.* to todo
```

application.properties　への記載

# MySQLデータベース接続設定
spring.datasource.url=jdbc:mysql://localhost:3306/todo?serverTimezone=JST
spring.datasource.username=todo
spring.datasource.password=todo+

# Spring-JPA: DBのテーブルを自動作成してくれる機能
# create: 新規作成， update: なければ新規作成， create-drop: 新規作成し終了時に削除
spring.jpa.hibernate.ddl-auto=update

↑

GitHubにPUSHしよう†

githubにリポジトリを作成
- とりあえずToDoプロジェクトを丸ごと
- ssachio（佐伯のアカウント）, muretti0114 (中村)をCollaborator追加しておいて下さい→提出等の確認に使う
- mysqlのパスワードで怒られるかもしれない

↑

⓪データモデリングをしよう†

扱うデータの属性を決める
- UID: [A-z0-9_-]+ かぶらないこと
- Name: 任意の文字列

↑

①ビューを作ろう†

index.html 【resources\static】

<!DOCTYPE html>
<html lang="ja" xmlns:th="http://www.w3.org/1999/xhtml">
    <head>
        <title>ToDoアプリ　ユーザ管理</title>
        <meta charset="utf-8"/>
    </head>
    <body>
        <a href="inputform.html">ユーザを追加する</a><br>
        <a href="diplayuser.html">ユーザ情報を表示する</a><br>
        <a href="/users">ユーザ一覧を表示する</a>
    </body>
</html>

inputform.html 【resources\static】

入力フォーム：ユーザID, 名前

<!DOCTYPE html>
<html lang="ja" xmlns:th="http://www.w3.org/1999/xhtml">
    <head>
        <title>Input Form</title>
    </head>
    <body>
        <form action="/user" method="post">
            <input type="text" name="uid">
            <input type="text" name="name">
            <input type=submit value="submit" name=submit>
        </form>
    </body>
</html>

success.html 【resources\templates】

成功ページ（登録したユーザ情報を表示）

<!DOCTYPE html>
<html lang="ja" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>User</title>
</head>
<body>
  <p th:text="'ID: ' + ${uid} + '  Name: ' + ${name} + ' Created at: ' + ${createdAt}"></p>
</body>
</html>

userinfo.html 【resources\templates】

指定したuidの情報を表示

<!DOCTYPE html>
<html lang="ja" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>uid検索結果</title>
    <link rel="stylesheet" type="text/css" th:href="@{/style.css}">
</head>

<body>
    <h1>uid検索結果</h1>
    <table>
        <tr th:each="p: ${ulist}">
            <td> [[${p.uid}]] </td>
            <td> [[${p.name}]] </td>
            <td> [[${p.createdAt}]] </td>
        </tr>
    </table>
</body>

alluserlist.html 【resources\templates】
- 存在する全てのユーザを表示
- userinfo.htmlとほぼ一緒

↑

②レポジトリを作ろう†

UserRepository.java 【repository】
- CRUDRepository

↑

③サービスを作ろう†

UserService.java 【service】
- getUserByuid(uid)
- getAllUsers()
- createUser(user)

↑

④コントローラを作ろう†

UserController.java 【controller】
- ビューとロジックの橋渡し
  - /user POST: addUser(UserForm)
  - /user/uid GET: showUser(uid)
  - /user GET: showAllUser()

↑

⑤登録したユーザをリストしてみよう（thymeleaf）†

↑

各種オブジェクト†

UserForm.java 【form】

uid, name

@Data
public class UserForm {
    private String uid;
    private String name;

}

User.java 【entity】

id, uid, name, createdAt

public class User {

    @Id
    @GeneratedValue(strategy=GenerationType.IDENTITY)
    private Long number;   // key

    private String uid;  //uid
    private String name; //name

    @Temporal(TemporalType.TIMESTAMP)
    private Date createdAt; //作成日時
}

UserDto.java 【dto】
- id, uid, name, createdAt

↑

動作テスト†

http://localhost:8080/ （メニュー一覧）

ユーザ追加・表示・一覧表示の確認

@Data
public class UserDto {

    private Long number;   // key
    private String uid;  //uid
    private String name; //name
    private Date createdAt; //作成日時

    public static UserDto build(User user) {
        UserDto dto = new UserDto();
        dto.number = user.getNumber();
        dto.uid = user.getUid();
        dto.name = user.getName();
        dto.createdAt = user.getCreatedAt();
        return dto;
    }

}

↑