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

{%hackmd rG6pzIawQKe5cHU4rycgYg %}

> 從這開始

[TOC]

:::info
* [議程簡報連結](https://docs.google.com/presentation/d/1QWNw5Og6KVByIP8ZaM4YrCrk10dhy5Ve-TNED-QNyT0/edit?usp=sharing)
* [2018年香港區議會選舉專頁](https://dce2019.thestandnews.com/)
* [資訊連結--反送中:理大圍城](https://pastebin.com/Ze3bKKJ3)
* 沒有要講很技術細節，主要講功能性考量跟架構
:::

## Speaker | 占錦煬 Jim
* PM x 前端工程師 x UI
[e-mail]

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

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

[反送中:理大圍城](https://pastebin.com/Ze3bKKJ3)

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

## 設計原案和最後的產品
- 三階段(!?)：選舉前、投票、驗票結果
- 簡化
- 簡化
- 還是簡化

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

Ｑ：為何產品最後能夠受到歡迎
Ａ：
- 最後關注的不是候選人的政見，而是哪一邊會贏
- 抽離原本精緻的地圖後，乾淨的圖表可以短時間一眼就看出勢力分佈圖
- 我們做了什麼？--dce2019.thestandnews.com

### 網站的架構：
- 最便宜的雲端主機
- 最高同時在線人數50萬人，單日瀏覽量一千多萬，來自兩百多萬個用戶
- 給客戶的是靜態網站（跳過請求數據等運算速度）
- 動態更新的靜態網站怎麼做出來的？

- 動態更新的靜態網站
- google 試算表 > Google Scripts > [Google sheets API](https://developers.google.com/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`