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

第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="/users/{uid}">ユーザ情報を表示する（自分でuidいれてください）</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="/users" 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>ユーザ情報</title>
</head>

<body>
    <th:block th:object="${user}">
    <h1>ユーザ情報 (ID=[[*id]])</h1>
    <table>
        <tr>
            <td> [[*uid]] </td>
            <td> [[*name]] </td>
            <td> [[*createdAt]] </td>
        </tr>
    </table>
    </th:block>
</body>
</html>

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

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

<head>
    <meta charset="UTF-8">
    <title>uid検索結果</title>
</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>
</html>

↑

②レポジトリを作ろう†

UserRepository.java 【repository】

CRUDRepository

@Repository
public interface UserRepository extends CrudRepository<User, Long> {
    
    // 以下，カスタムクエリ
     /**
     * uidで検索
     * @param name 検索するuid・LIKEで検索 "%test%"
     * @return
     */
    public Iterable<User> findUserByUidLike(String uid);

}

↑

③サービスを作ろう†

UserService.java 【service】

getUserByuid(uid)
getAllUsers()

createUser(user)

package jp.kobespiral.todo.service;

import java.util.ArrayList;
import java.util.Date;
import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import jp.kobespiral.todo.dto.UserDto;
import jp.kobespiral.todo.entity.User;
import jp.kobespiral.todo.form.UserForm;
import jp.kobespiral.todo.repository.UserRepository;

@Service
public class UserService {
    @Autowired
    private UserRepository userRepository; // スレのレポジトリ


    public UserDto createUser(UserForm form) {
        // 作成日時
        Date now = new Date();
        // ユーザ作ってセーブ
        User user = userRepository.save(new User(null, form.getUid(), form.getName(), now));

        return UserDto.build(user);
    }

    public List<UserDto> getUserByuid(String uid) {
        ArrayList<UserDto> list = new ArrayList<UserDto>();

        for (User user : userRepository.findUserByUidLike( "%" + uid + "%")) {
            list.add(UserDto.build(user));
        }
        return list;
    }

    public List<UserDto> getAllUsers(){
        ArrayList<UserDto> list = new ArrayList<UserDto>();

        for (User user : userRepository.findAll()) {
            list.add(UserDto.build(user));
        }
        return list;
    }

}

↑

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

UserController.java 【controller】

ビューとロジックの橋渡し

/user POST: addUser(UserForm)
/user/uid GET: showUser(uid)

/user GET: showAllUser()

package jp.kobespiral.todo.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.GetMapping;

import jp.kobespiral.todo.dto.UserDto;
import jp.kobespiral.todo.form.UserForm;
import jp.kobespiral.todo.service.UserService;

@Controller
public class UserController {

    @Autowired
    private UserService us;

    @PostMapping("/users")
    public String addUser(@ModelAttribute("userForm") UserForm userform, Model model) {
        String name = userform.getName();

        String uid = userform.getUid();

        UserDto userdto = us.createUser(userform);
        model.addAttribute("uid", userdto.getUid());
        model.addAttribute("name", userdto.getName());
        model.addAttribute("createdAt", userdto.getCreatedAt());

        return "success";
    }

    
    @GetMapping("/users/{uid}")
    public String showUser(@PathVariable String uid, Model model){
        List<UserDto> userList = us.getUserByuid(uid);
        model.addAttribute("ulist", userList);
        return "ulist";
    }

    @GetMapping("/users")
    public String showAllUser(Model model){
        List<UserDto> userList = us.getAllUsers();
        model.addAttribute("allulist", userList);
        return "alluserlist";
    }


}

↑

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

↑

各種オブジェクト†

UserForm.java 【form】

uid, name

package jp.kobespiral.todo.form;

import lombok.Data;

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

}

User.java 【entity】

id, uid, name, createdAt

package jp.kobespiral.todo.entity;

import java.util.Date;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Temporal;
import javax.persistence.TemporalType;

import com.fasterxml.jackson.annotation.JsonIdentityInfo;
import com.fasterxml.jackson.annotation.ObjectIdGenerators;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
@Entity
@JsonIdentityInfo(generator = ObjectIdGenerators.IntSequenceGenerator.class)

public class User {

    @Id
    @GeneratedValue(strategy=GenerationType.IDENTITY)
    private Long id;

    private String uid;
    private String name;

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

UserDto.java 【dto】

id, uid, name, createdAt

package jp.kobespiral.todo.dto;

import java.util.Date;


import jp.kobespiral.todo.entity.User;
import lombok.Data;

@Data
public class UserDto {

    private Long id;   // 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.getId();
        dto.uid = user.getUid();
        dto.name = user.getName();
        dto.createdAt = user.getCreatedAt();
        return dto;
    }

}

↑