---
tags: GCAA, 透明足跡, ESG
---
# 軟體系統文件

本文以 CC-BY-4.0 授權釋出

## 設計方向、脈絡、情境、資訊架構

- 使用者故事請見[UX 文件](https://g0v.hackmd.io/B7kymGGsSjSwaEprvcwFhg?view#%E4%BD%BF%E7%94%A8%E8%80%85%E6%95%85%E4%BA%8B)
- 資訊架構一樣請見[UX 文件](https://g0v.hackmd.io/B7kymGGsSjSwaEprvcwFhg?view#%E8%B3%87%E8%A8%8A%E6%9E%B6%E6%A7%8B)

## 開發規劃、複雜度評估

### 專業志工版

**1. 使用者故事 1 - 找到要判讀的報告書**

:::info
粗姑複雜度： ⭐⭐⭐
:::

1. `0. 登入頁` - 使用 google 登入
2. `1. 首頁 + 任務說明` - 簡單說明，列出年份選單
3. `2. 產業列表 + 年度選擇` + `3. 個別產業報告書列表`
1. 依產業分類 - accordion
- 標題顯示產業名稱、公司數，長條圖[未開始-進行中-已判讀-已驗證]
- 內容為各報告書公司名稱、長條圖[未開始-進行中-已判讀-已驗證]
3. `4. 個別報告書資訊`
1. 顯示報告書名稱、產業、年度、長條圖
2. CTA1 - 跳到[第一個空白欄位]
4. 列出所有欄位、判讀數值、頁數、補充說明
- 按鈕，可跳到該欄位判讀頁
4. `5. 報告書欄位判讀`
1. 既有報告書判讀頁
5. 匯入 2021 報告書

**2. 使用者故事 2 - 常見的 PDF 瀏覽器功能**

:::info
粗姑複雜度： ⭐⭐⭐⭐⭐
:::

1. `5. 報告書欄位判讀`
1. 可輸入頁次，直接跳頁
2. 顯示當前頁次
3. 允許熱鍵縮放
5. （加分）可點選頁面超連結，直接跳轉
6. UI 參見 ([Figma - 1.01](https://www.figma.com/file/hjoPFNjKp7GUDh6CRHfDr7/ESG-UI-wireframe?type=design&node-id=0%3A1&mode=design&t=mnPKojHEghQLI6dD-1))
> 

**3. 使用者故事 3 + 4 - 判讀欄位 API 串接**

:::info
粗姑複雜度： ⭐⭐
:::

1. `5. 報告書欄位判讀`
1. 更新[欄位說明](https://docs.google.com/spreadsheets/d/1Ypq8uVsJoU4RhB4shdCrygKmk6Hm_OcqNR5QbBb5bSQ/edit?usp=drive_link)
2. 根據[新版 UI](https://www.figma.com/file/hjoPFNjKp7GUDh6CRHfDr7/ESG-UI-wireframe?type=design&node-id=0%3A1&mode=design&t=mnPKojHEghQLI6dD-1) ，調整版位
3. 判讀數值填寫
1. 根據不同欄位類型，提供不同輸入形式
4. 根據不同欄位單位，提供單位下拉選單
5. 要求填寫答案頁次，並列出最後瀏覽的兩頁，提供選擇
6. 可填寫純文字的答案補充解釋
7. 填答 blur 後自動存檔
4. 顯示歷史數值

**4. 使用者故事 5 - 回報與 QA**

:::info
粗姑複雜度： ⭐⭐
:::

1. `6. 疑問回報`
1. 製作 Airtable base + form
1. 欄位：問題描述（必填）、截圖、報告書年份、統編、欄位、回答
1. 回答欄位，不用出現在 form 中
2. 另外加上分類多選欄位，讓專業工人、資料總管編寫回答時，也能設定分類
3. 在 `5. 報告書欄位判讀` ，新增「我想問問題」按鈕，預填相關欄位
2. 在 `5. 報告書欄位判讀` 中，顯示同欄位的相關問答
3. 在 `4. 個別報告書資訊` ，顯示同公司的相關問答
6. 在 `7. 常見問題` ，依照疑問提交時間，列出所有問題 & 分類

**5. 使用者故事 6 - 產業資料驗證與匯出**

:::info
粗姑複雜度： ⭐⭐
:::

1. `3. 個別產業報告書列表`
1. 新增按鈕，以表格顯示該產業所有報告書的所有資料
1. toggle ，是否僅顯示已判讀完成的報告書
2. 點選報告書，進入 `4. 個別報告書資訊`
3. 點選欄位，進入 `5. 報告書欄位判讀`
4. 可將指定報告書，標為 `驗證完成`
2. 允許匯出（或是複製貼上）這個產業的已驗證完成的資料
2. `4. 個別報告書資訊`
1. 可將這本報告書，標為 `驗證完成`

## 系統架構

1. API hosting
- Feathers.js / Node / [Render](https://render.com/)
3. UI hosting
- Nuxt 3 / Vue 3 / Github page: https://gcaa-org-tw.github.io/company-report-toolkit/

---

### g0v 八月大松 - 路過鄉民可用

**1. `8` 堪用閱讀器**

1. `done` `2` 雜項 - 上傳 20 本報告書
1. `done` `2` 堪用閱讀器 - 縮放、fit page
- 使用者故事 1.1
1. `3` 堪用閱讀器 - zoom & pan to current match + next & prev match
- 使用者故事 1.1
1. `done` `1` 堪用閱讀器 - 依序排序搜尋結果、處理超出最大頁數的搜尋頁次
- 使用者故事 1.1

**2. `8` 專業工人填答資料、建資料、程式錯誤修正**

1. `done` `3` 完整旅程 - 鄉民填答數值
- 使用者故事 1.1, 1.2
- 包含 airtable 串接設定
1. `done` `3` 完整旅程 - 鄉民填寫補充資料
- 使用者故事 1.1
1. `2` 堪用閱讀器 - 顯示過往數值
- 使用者故事 2.1

**3. `8` 鄉民填答、驗證資料**

1. `done` `5` 完整旅程 - 分配鄉民待填答、驗證項目
- 使用者故事 4.4
- 包含自架唯讀 API ，避開 airtable rate limit
1. `done` `3` 完整旅程 - 鄉民驗證
- 使用者故事 2.1

**4. `2` 使用者行為追蹤資料試用**

1. `2` 追蹤 - 填寫時： 公司, 年度, 欄位, 關鍵字, 是否自訂, 點選頁次（依序紀錄）, 瀏覽過的頁次, 答案頁次, 是否為驗證時

**5. `5` 新手引導**

1. `2` 完整旅程 - 新手引導、ID 輸入
- 使用者故事 4.1, 4.2, 4.3
1. `3` 完整旅程 - 顯示報告書填答狀況
- 使用者故事 5.1, 5.2

**6. `7` 資料彙整、匯出（大松前應該做不到 XD）**

1. `2` 後台 - 允許登入
1. `1` 後台 - 列表頁
1. `2` 後台 - 公司頁、確認資訊
1. `2` 後台 - 匯出資料

## 0826 大松回饋整理

1. 功能許願
1. 想要直接跳到指定頁次 ⭐
3. 想要按頁面上的頁次超連結 ⭐⭐⭐
4. 根據欄位類型，改變填答的 UI ，像是是、否，以及決定要不要顯示單位欄 ⭐
5. 更醒目的年份標示，因為通常一份報告書，會包含很多年資料 ⭐
6. 更多預設答案：查無資料、不確定 ⭐
7. 要求標注答案頁次 ⭐
3. 待修問題
1. 檔案命名，要寫「資料的年份」，而非「出版的年份」，減少溝通誤會 ⭐
2. 有時候報告書 loading 不出來（需要再測試） ⭐
3. 放大、縮小、滿頁寬有時候會壞掉 ⭐⭐

{%hackmd tKv-yMkzT666mWqARQizEA %}