前端工具選擇 ── 好，React！
git commit：build: add react app
在上篇我們拿到 schedule.json 資料後，接著就是要讓這些資料能顯示在前端了，然而，要如何操作呢？是用 bootstrap 還是從 0 手刻呢？之前沒有碰過前端框架的我馬上陷入了麻煩。
原本已經著手開發 express 的後端邏輯，但想想這個專案應該不需要弄到那麼複雜。猶豫了一下下，還是選擇使用 React 從頭開發，一來是趁這個專案玩玩看 React，二來社群裡懂 React 的工程師還不少，遇到問題應該也比較容易求救。
好了，接下來就是跟 GPT 許願，想不到 React 開啟一個專案竟然這麼容易：
npx create-react-app amo-app
cd amo-app
指令輸入後，各種套件就在終端機開始下載、安裝，接著輸入 npm start，並在瀏覽器搜尋 http://localhost:3000，一個 React 前端網頁就跑起來了！
是魔法！這一定是魔法！ — Dong, 2024
恰巧碰上 chatGPT-4o 發表，趕緊試用一下，先截了張議程表的圖，問它要如何在 React 中完成，它說要先建立資料、創立 React 組件、再用 CSS 增加樣式，然後……初版的議程表就出來了！
SVG ── 連接程式碼與設計軟體的人類瑰寶
git commit：feat: Add functionality to display agenda and download it as SVG
既然是要交給設計軟體使用的，那一定要找個設計軟體可以開啟、編輯的檔案格式，再加上我喜歡縮放都不失真的向量檔案，SVG 變成了這次實作的首選。
SVG 全名為可縮放向量圖形（Scalable Vector Graphics），從名字可以很清楚的知道，這種檔案格式就算縮放也不會失真，相比於放大就會看到鋸齒狀的像素檔，在顯示簡單圖片時，可以用更小的檔案大小，獲得一樣甚至更好的顯示效果。
這邊一樣勞煩 GPT 老師，提供了一段生成 SVG 的程式碼，與下載 SVG 的按鈕，再稍作修正後，一個能顯示議程表及下載議程表 svg 的網頁雛形就有了！
顯示和下載，我全都要 SVG
git commit：feat: show agenda svg on front page
興致沖沖地把下載好的 svg 丟到設計軟體後，很開心的測試各個元件是否都能編輯，然後才發現「ㄟˊ，怎麼下載跟顯示的長不一樣呢？」
回去看了程式碼才發現，在網頁上顯示的部分是用 div + CSS 渲染出來的，而下載的是另外產生的 SVG 檔。再深入研究後，發現原來 css 格式無法直接轉換給 svg 使用，如果要讓使用者可以下載 SVG ，目前有想到兩種解決方式：
-
一開始渲染的就是 svg，下載的也是 svg → 最單純，但可能僅適合簡單的設計
-
透過其他套件把 dom tree 轉換成 svg，但下載後的 svg 很醜（層級太多），不太好在設計軟體編輯的感覺（還沒詳細研究）
相關套件：dom-to-svg - npm、SVG Screenshot
考量到目前議程表的設計算單純，後來選擇了前者的解決辦法，也就是讓顯示和輸出的議程表都是 SVG 檔，又花了億點點 debug 後，專案又再向前推了一步。
是時候展現真正的資料了！
git commit：feat: render data from real schedule.json file and delete former test data
前面渲染的議程表，都是用一開始 GPT 生給我的假資料跟假資料結構做的，目的只是為了要測試這整個流程（資料 → svg → 設計軟體）是可運作的。在確定可行性後，接著就把真正 schedule.json 的資料抓進來，經過函式的轉譯，變成 SVG 可以吃的格式，於是乎，終於成功用原本的格式，渲染出顯示和下載的 SVG 了！明天繼續加油！
相關連結
CCIP-App/schedule-json-generator
rr37/AMO: An Agenda Maker Based on Opass Schedule Format
