讓設計師不再 EMO 的 AMO 開發筆記 ── Day0

讓設計師不再 EMO 的 AMO 開發筆記 ── Day0

一名參與者走過 g0v Summit 2024 的主視覺牆

前言

近半年主要投入在 g0v Summit 2024 零時政府雙年會的籌備上,並在其中負責會場視覺及設計品的大部分設計。做設計本身是好玩的,令人煩躁的是做重複的設計,像是議程表這種設計調性統一,只有內容不一樣的東西,做起來就很讓人煩躁,除了要不斷複製貼上各種議程、講者的資料,一些細微的對齊也讓人想抓狂,更別提臨近印刷時,緊急要求抽換、增減內容的突發狀況……

「如果都有現成的表格資料,為什麼不能讓程式直接生成呢?」在某次陷在複製貼上的輪迴中時,腦中突然浮現這個想法。

都花錢花時間學程式了,就是要拿來做一些酷東東啊!在 5/5 年會結束後,開啟了這個小專案,AMO ── An Agenda Maker Based on Opass Schedule Format

20240520_理想的議程表設計流程.png

準備工作

既然要做,就要用最原始、最正確的資料當基礎,才能避免後續資料維護的困難。近些年,多數台灣的科技社群研討會,如 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 檔的步驟。

  1. GitHub - CCIP-App/schedule-json-generator clone 專案

  2. 複製一份 OPass session json template 試算表,修改內容為自己需要的樣子

  3. 記得開試算表的權限,後面會需要

    Opass session json template 分享視窗.png

  4. 複製 config-sample.js ,把檔名改成 config.js,接著把試算表的 key 填進去(key 就是在試算表網址列中被兩個「/」線包起來一長串很醜的東西)

    image.png

  5. 到 GCP 開一個 API 金鑰(建立憑證),複製 API Key 填回 config.js 中

    image 1.png

  6. 要記得開啟 GCP 中的 sheet api

    image 2.png

  7. 啟動專案 npm init

  8. 運行轉換器 node index.js

  9. 會在 console 中印出一大堆 array,看一下裡面的內容,是不是跟試算表裡的一樣

    image 3.png

  10. 如果要改成輸出成檔案,要把 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)
    })()
    
  11. 如此一來再次運行轉換器時,資料夾中就會多一個 schedule.json 的檔案了!是不是很有成就感呢!明天繼續加油!

    image 4.png

相關連結

CCIP-App/schedule-json-generator
rr37/AMO: An Agenda Maker Based on Opass Schedule Format