以科技提升社會參與：如何低成本打造千萬瀏覽量的選舉專頁 - 占錦煬

從這開始

• 以科技提升社會參與：如何低成本打造千萬瀏覽量的選舉專頁 - 占錦煬
  • Speaker | 占錦煬 Jim
  • 前言
  • 設計原案和最後的產品
    • 網站的架構：
  • conclusion

Speaker | 占錦煬 Jim

• PM x 前端工程師 x UI
  jim@oursky.com

前言

PM的作用

• 為用戶設想，為自己的工作負責
• 如何考量到用戶的需求與限制，才算是個成功的產品？
• 擋掉一些不必要的需求，保護工程師避免浪費開發時間
• 在過濾需求時保護客戶資料隱私

立場新聞 2019香港區議會選舉
因為反送中的關係，這次的選舉受到前所未有的關注
2015年前很多地方是沒有選舉的(因為自動當選)
反送中之前，大多數的香港人是不關心選舉的，過往政黨推派的人選都能自動當選
反送中之後，許多藝人及政治素人也開始投入選舉(?)

反送中:理大圍城

當時只有三週可以開發與設計(且必須在投票前一週發佈網站)，也沒有太多預算，而且市場也有人相關的產品了
當時面臨的考驗是：預算沒有很多、時間沒有很多，而且市場還有競爭對手

設計原案和最後的產品

• 三階段(!?)：選舉前、投票、驗票結果
• 簡化
• 簡化
• 還是簡化

最後就是決定聚焦在最核心的功能上
本來要用精緻的香港地圖，但之後採用簡化分佈圖（但很早就拿掉）
（原因在於席次與選區面積無關，而是與選區選民數有關）
最後放棄對映到真實的地理位置上，只把顏色相同的放一起（易於閱讀）
要畫出每個選區的邊界實在是花太多時間

Ｑ：為何產品最後能夠受到歡迎
Ａ：

• 最後關注的不是候選人的政見，而是哪一邊會贏
• 抽離原本精緻的地圖後，乾淨的圖表可以短時間一眼就看出勢力分佈圖
• 我們做了什麼？–dce2019.thestandnews.com

網站的架構：

• 最便宜的雲端主機

• 最高同時在線人數50萬人，單日瀏覽量一千多萬，來自兩百多萬個用戶

  • 給客戶的是靜態網站（跳過請求數據等運算速度）
  • 動態更新的靜態網站怎麼做出來的？

• 動態更新的靜態網站

• google 試算表 > Google Scripts > Google sheets API

  • 利用文件追縱的功能

• GCP 雲端主機 worker > 上傳JSON 到 Google Cloud Storage bucket
  如何省預算：在 GCP 上開最便宜的伺服器，上面運行一個 worker，每分鐘會去讀 script 的 API，內容有更動後產生JSON file再上傳到google storage
  這裡是關鍵

• React.js 前端下載 GCS 上的 JSON 後產生頁面
  數字持續更新，除了整理出一開始頁面外，也會在每分鐘讀取有沒有更新的檔案。
  預先讓用戶下載好事先做好的靜態網站，再接著透過定時產生的數據來產生網站，而不是讓網站直接去讀 Google sheets

其他兩家公司流量太多沒辦法loading，因此用戶會跑到其他頁面去搜取資訊

conclusion

在這個案子學到最重要的是：即使我是技術的開發人員，也能夠參與到社會事件，只是在工作時，多關心一下，就有機會貢獻社會。
技術人員可能不是社會事件發生時，首先會想到要依賴的人，但在這個資訊化的社會裡，技術人員也有能力參與其中。
對用戶、會使用到產品的人多一點努力

業配
https://jobs.oursky.com/tw
https://mystand.thestandnews.com/

tags: MOPCON 2020