---
# System prepended metadata

title: 時間記帳本(Time ledger)
tags: [project, time management]

---

# 時間記帳本(Time ledger)
###### tags: `time management` `project`

## Overview: 5W1H 規劃
### What (做什麼)
時間記帳本是一個紀錄時間的應用
可以幫助使用者：
- 方便的紀錄時間
	- 客製化細部項目
	- 快速紀錄時間以及當下狀態
- 資料分析
	- 讓時間使用情況以及當下狀態圖表化可視化 
	- 讓使用者可以自由的下載以及管理自己的時間紀錄


### Why (為什麼要做)
時間管理和精力管理是生命中最重要的事
但是目前沒有相關的應用在幫人們優化個人級別的時間管理
所以我們想做一個能夠讓人很方便紀錄時間的工具,讓人快速紀錄當下時間和狀態,並且可視化資料
讓使用者可以更輕鬆的管理自己的時間和精力
### Where (在哪裡做)
團隊：線上為主
如果未來做得好,可以申請計畫或投比賽
### When (做這件事的時間)
慢慢做
### Who (做這件事的人)
-
### How (如何做)
協作程式碼庫：Github
共筆平台：-
	

## About
### 功能
- auth
	- 註冊
	- 登入
	- 登出
- tag
	- tag CRUD
	- add to favorite
- category
	- category CRUD
	- add to favorite
- field
	- field CRUD
	- add to favorite
- record
	- record CRUD

### 資料庫設計
https://dbdiagram.io/d/60ddab06dd6a5971482828d7
![](https://i.imgur.com/8N9Q6tF.png)

資料庫可能還要再討論
我自己是想要做有彈性和可擴展的模型

想法:
用 template 表去裝所有的紀錄格式
每個時間紀錄都必須連接到一個 template
使用者可直接使用團隊建立的 template 或是自己新建
也可以拿團隊的 template 去小修改就使用
template 包含以下
```table Template{
  id uuid [pk]
  title varchar
  description text
  creator uuid
  tag [uuid]
  category uuid
  sub_templates [Template]
  meta json
}
```
其中 sub_templates 是 template 包含的其他 template (功能是繼承,可以繼承上一個 template 所有格式)
meta 是 template 自己的格式
頁面必須按照 template 渲染出不同的 form
另外 meta 也可以描述格子中其他的資訊
例如：
- 類型
	- choice
	    - options: ["A","B","C"]
	    - form
	        - drop_down
	        - choice
	- text
	    - input_box
	- int
	    - input_box
	- number
	    - input_box
	- float
	    - input_box 
- form 類型
	- 選單類型
		- 下拉式(drop_down)
		- 選擇式(choice)
		- 輸入框(input_box)
	- 預設值

範例：
```
"field_name":{
    "type":"text",
    "form":"input_box",
    "default":""

}
```

Record 創建的時候,需要的 args 
- creatorId
- templateId
之後修改時後端會解析template並生成對應的 form,再用 form submit 的資料來寫入 record 的 meta
### 頁面設計
#### 紀錄
- auth
    - login
    - sign up
    - forget password
    - reset password
- template
    - template list
        - query
            - my template
            - famous template
    - template detail
    - template create
- record
    - my record list (only see user's record) -> in want other's to see can use share record(visibility)
        - query
            - tag
            - time period
    - record detail
    - other's record
- personal info
    - detail
        - content
            - FullName
            - Username
            - Avatar
            - link to my template
            - link to my records
            - favorite templates
            - favorite tags
            - favorite catgories
    - edit

#### 分析

- time distrbution(圓餅圖)
- 折線圖
    - 根據使用者設計的量表來做劃分
        - ex:
            - 生產力
            - 心情
            - 疲勞程度

### 版本計畫
第一測試版:
- 紀錄時間功能
	- 紀錄基本項目
	- 新增個人客製化紀錄項目
	- 客製化紀錄面板
		- 客製化會出現的項目

第二測試版：
- 資料可視化功能
	- 生成圖表
		- 時間分佈圓餅圖
		- 一日專注力圖表
- 匯出紀錄功能
	- 圖表
	- 資料
		- csv
		- xlsx
### 預計使用技術
- redwood.js -> full stack framework for startup
    - programming language
        - Typescript
    - frontend
        - frontend framework 
            - React.js
        - css framework
            - tailwindcss
        - UI library
            - MUI:https://mui.com/
            - vechai-ui
            - react-bootstrap
    - api (backend)
        - ORM
            - prisma
    - api fromat
        - graphQL
    - test
        - jest

### 開發行程
先用 figma 做出模擬 app 的程式

### 社群導向計畫
- 社群分享紀錄模板功能
- 使用他人模板功能
- 社群分享分析模板(分析特定的紀錄模板)
    - 圖像
    - AI
    - 
- 使用他人分析模板

## 項目定位
專為時間管理設計的 google 表單 + 自定義工具(預設值) + 社交工具(引用,使用,建構在他人模板上)
假設用 google 表單來做,就等於每個模板使用一個 google 表單

## 可參考的範例和套件
### React Google Forms Hooks：https://www.npmjs.com/package/react-google-forms-hooks
example: https://codesandbox.io/examples/package/react-google-forms-hooks

## 其他
資料視覺化：streamlit