前言
近半年主要投入在 g0v Summit 2024 零時政府雙年會的籌備上,並在其中負責會場視覺及設計品的大部分設計。做設計本身是好玩的,令人煩躁的是做重複的設計,像是議程表這種設計調性統一,只有內容不一樣的東西,做起來就很讓人煩躁,除了要不斷複製貼上各種議程、講者的資料,一些細微的對齊也讓人想抓狂,更別提臨近印刷時,緊急要求抽換、增減內容的突發狀況……
「如果都有現成的表格資料,為什麼不能讓程式直接生成呢?」在某次陷在複製貼上的輪迴中時,腦中突然浮現這個想法。
都花錢花時間學程式了,就是要拿來做一些酷東東啊!在 5/5 年會結束後,開啟了這個小專案,AMO ── An Agenda Maker Based on Opass Schedule Format
準備工作
既然要做,就要用最原始、最正確的資料當基礎,才能避免後續資料維護的困難。近些年,多數台灣的科技社群研討會,如 HITCON、SITCON、COSCUP、g0v Summit 等等都是使用 Opass 系統,這個開源系統整合了許多辦研討會需要的重要功能,像是報到、大地遊戲、議程表等等,本次要利用的就是其中能將 Google Spreadsheet 轉成 schedule json 的小專案( CCIP-App/schedule-json-generator ),這個 json 檔主要是要餵給網頁、Opass App,讓各平台有一致的資料參考,而我也希望能透過此一 json 檔,快速產生所需的設計資源,目標是讓設計師能快速取得有正確資料的 svg 檔,在做完議程表的底圖的設計後,直接放上去即可,就算要更新議程的資訊,也僅需更新該 svg 檔,不需多次的複製貼上,如此不僅能減少設計師勞力的消耗,也能大幅減少資訊錯誤、多次檢查的機率。
開工 ── 製作 schedule.json
作為一個穩定的小專案,schedule-json-generator 上次更新已是兩年前,隨著 Google 的一些(不人性)更新,有些做法已經上不同,感謝社群夥伴 yellowsoar 大力協助,讓我少走很多彎路,這邊直接附上產生 json 檔的步驟。
-
到 GitHub - CCIP-App/schedule-json-generator clone 專案
-
複製一份 OPass session json template 試算表,修改內容為自己需要的樣子
-
記得開試算表的權限,後面會需要
-
複製
config-sample.js
,把檔名改成config.js
,接著把試算表的 key 填進去(key 就是在試算表網址列中被兩個「/」線包起來一長串很醜的東西) -
到 GCP 開一個 API 金鑰(建立憑證),複製 API Key 填回 config.js 中
-
要記得開啟 GCP 中的 sheet api
-
啟動專案
npm init
-
運行轉換器
node index.js
-
會在 console 中印出一大堆 array,看一下裡面的內容,是不是跟試算表裡的一樣
-
如果要改成輸出成檔案,要把 index.js 改成下面這樣,
const generateSchedule = require('./generateSchedule') const fs = require('fs') const config = require('./config') ;(async () => { let res = await generateSchedule(config) // 檔案名稱和路徑 const fileName = 'schedule.json' // 將資料寫入檔案 fs.writeFile(fileName, res, (err) => { if (err) { console.error('無法寫入檔案:', err) return } console.log('資料已成功寫入到檔案中。') }) console.log(res) })()
-
如此一來再次運行轉換器時,資料夾中就會多一個
schedule.json
的檔案了!是不是很有成就感呢!明天繼續加油!
相關連結
CCIP-App/schedule-json-generator
rr37/AMO: An Agenda Maker Based on Opass Schedule Format