# 線上申辦系統  --- ## Agenda - 網站需求 - 技術選擇 - 功能 - Demo --- ## 網站需求 - 多國語系 (中/英) - 無障礙 (AA) - 登入功能 (自然人憑證串接/主子帳號) - 依系統填寫表單、上傳檔案... - 暫存表單功能 --- ## 技術選擇 - 底層：[Nuxt3](https://nuxt.com/) - UI 套件：[primevue](https://primevue.org/) - css lib：[unocss](https://unocss.dev/) - 多國語：[i18n](https://v8.i18n.nuxtjs.org/) - 測試：[vitest](https://vitest.dev/) Note: - Nuxt3 - SSR (Server-Side Rendering) 伺服器端渲染 - 全端開發框架，可以用它同時進行伺服器端和前端的開發(基於 Vue 作為前端框架) - 有利於 SEO：首次進入網站，網頁就已經在伺服器端渲染生成完畢 - PrimeVue - 支援 Nuxt - 支援多國語系與無障礙 - 提供多種元件使用 - unocss - 原子CSS 概念的 css 元件 - CSS 的架構方式，傾向於小巧且用途單一的 class，並且會以視覺效果進行命名 - 以前 css：即使只使用一個樣式，但還是會打包其餘沒使用的 (消耗不必要的資源) - 原子CSS：會預先掃描原始碼，HMR (Hot Module Replacement, 熱更新) - vitest - 元件單元測試框架 - 可以塞假資料模擬元件呈現或是資料預期 --- ## 功能 --- ### 多國語系(i18n) ---- ### 畫面呈現  ---- ### API 呼叫  --- ### 無障礙網站(a11y) ---- ### NCC：三級別  - A：最低級別 - AA：已經可以讓大多數的使用者順利瀏覽 - AAA：是最高的級別 Note: 立法院決議要求各級政府機關與學校於建置之網站新設或改版時， 應依「無障礙網頁開發規範2.0版」檢測等級 AA 以上進行設計 — 國家傳播通訊委員會 (一般客戶都會要求起碼要有「AA等級」的標章) ---- ### 原則 - 可感知：訊息和使用者介面組件必須以「可感知」的方式呈現給使用者 - 可操作：是否能夠使用鍵盤全程瀏覽網站 - 可理解：讓使用者可以理解每個元素的目的 Note: - 替代文字：為文字以外的內容提供「相等意義的替代文字」 - 可以鍵盤操作：讓所有的功能都能透過鍵盤使用 - 可讀： 文字訊息需可讀並易理解 - 可預測： 網頁的呈現與操作需可預測 ---- ### 開發 1. 網站符合 HTML 規範 2. 都有語義化 3. 無障礙定位點（導盲磚 :::） 4. UI 畫面設計 5. 提供網站導覽頁 Note: 幫助使用者快速定位及搜尋，「跳過連結」與「快速鍵」 UI ：可讀性、顏色的無障礙、讓元件能輕易被點擊 ---- ### 測試 1. 瀏覽器原生支援 2. 瀏覽器套件 3. Freego ---- ### 關於標章申請  ``` 跟數發部申請 第一階段：就是掃描 Freego (數發部檢測必要條件) 第二階段：人工檢測 ``` --- ### 帳號功能 ---- ### 登入方式 - 憑證 - 實體卡自然人憑證 (工商/自然人/事務所) - 行動自然人憑證 (今年新上線) - 非憑證 - 統編、身分證、居留證 + 雙因子認證 ---- ### 實體卡自然人憑證(hicos)  ---- ### 實體卡自然人憑證(hicos) 流程 ``` [使用者] 安裝好 ChkSrv.exe & 有讀卡機裝置 [前端] 載入 ChtICToken.js [使用者] 插入卡片，輸入 pin 後 [前端] ChkSrv 會回傳 base64 到前端，前端再將資料一起傳到後端 [後端] 要如何處理與測試憑證(白卡) 可能要問窗口 (?) ``` ---- ### 行動自然人憑證  ---- ### 行動自然人憑證 介接方式 ``` 1. 透過網頁轉導模式進行認證/簽署 (a). 網頁轉導 QRCode 驗證模式 (b). 網頁轉導推播驗證模式 (c). 網頁轉導 APP 驗證模式 2. 透過 APP 掃描 QRCode 模式進行認證/簽署 3. 透過 APP 訊息推播模式進行認證/簽署 4. 透過 APP to APP 模式進行認證/簽署 (我們專案沒有) 5. 透過 Mobile Web to APP 模式進行認證/簽署 (我們專案情境不用考慮) ``` Note: 用哪一種主要是看介接機關，就是看系統的需求， 不是每個都要實作，實作需要的流程就好 電發用QRCode，比較常見的是(a)跟(b) 用推播涉及到非自己系統能控制的東西 若使用者裝置本身的問題造成推播異常會比較難控制 ---- ### 行動自然人憑證 流程 ``` [前端] 輸入身分證後，呼叫後端 [後端] 去串接 行動自然人憑證 API (看我們介接方式) [前端] 顯示相對應的介接畫面 ``` --- ### 網頁停留倒數計時登出前30秒自動儲存 ---- ### 情境  ---- ### 依照每一 Step ，當按下「下一步」去暫存 下次使用者登入系統後，要跳出提示將上次的資料帶入並導入該步驟畫面 ---- ### 申請畫面掛在頁面許久 系統要暫存 - 依照儲存位置 (save) - 需要其他裝置也可以用：存後端 - 只要當下裝置：存前端 - 觸發方式 (action) - 計時器 - 頁面動作觸發 ---- ### 議題 - 暫存資料何時要清除？ - 會不會有一位使用者多筆暫存申請單？ --- ## Demo