莫拉克颱風災情支援網 - 救災網站背後技術與技巧 (3)

Published on:

有鄉民說想看當年八八風災的技術筆記,特此撈出來回憶。這是我 2009 所作,當年 25歲。

=====

有效防止來亂的

不過雖然前面強調了一堆,系統沒必要就不需要自己寫。我在後期還是花時間寫了一堆 CODE。

圖片 12

做什麼呢?除了改善後台介面讓志工能容易整理版面資訊外,防止來亂和詐騙的

沒錯,國難當頭,還是有一堆人趁機上機來洗版(宣揚反山達基,瘋狂的一直洗),把支援資訊整理的志工搞得人仰馬翻。還有私人貼徵募資訊,實際上卻是以 comment 自導自演疑似要來詐財的。

所以這個系統,明明是救災專用的,卻很奇怪的有強悍的...

  1. IP 黑名單過濾
  2. 關鍵字黑名單過濾
  3. Captcha
  4. 不當留言自動下架功能...

我的想法是這樣的:為什麼會開發後台,主要是因為這是一個內容系統。我的強項是網站開發,但做了網站開發,空閒時間就所剩無幾了。內容過濾一定要請志工幫忙,而志工也是很忙的,加上一個人的熱情有限。我能做的幫忙也只有改善後台以及開發自動機制,降低他們的工作負擔,不讓他們的熱情因為對抗瘋子和騙子而迅速燒乾。

至於瘋子和騙子怎麼處理呢?嗯,我們直接送交 PTT 鄉民,不自己經手...( you know what I mean ..:p)

====
以上。

也許,有朋友認為,這是我個人熟悉 RoR 才能這樣玩出這些東西。那如果不是學 RoR ( 只會寫 php / python / perl ...etc.),甚至是不熟網頁語言開發要怎麼學我一樣這樣搞呢?Well,我認為其實這世界上有相當多資源,只要你熟悉 mashup,一樣也可以得到相同的效果。

在這裡也想提出重要的一點:「自己搞一套系統」,接下來面得的問題,就是要承擔 Scaling 的工作。Scaling 本身就是一門技術學問,一般人不一定有能力,或者在這個時間有精力去 handle。現成的 BSP 平台,往往被視為是缺乏彈性的而被棄用。但大家卻忽略了,他們通常是經得起突發流量考驗的。況且 BSP 平台並非每個都是缺乏彈性的,諸如 Wordpress.comBlogger.comPIXNET,其實都是有辦法利用 CSS / JavaScript / 第三方Widget / Google Service 做 customize,而達到相同效果的。

這也是一個可以思考和利用的方向。

在最後,我再重新整理複述我認為救災支援網站需要注意的五個重點。

1. 儘快上線,功能其次 2. 高流量承載與調校 (被打掛 = 無用) 3. 廣為人知 4. 有效利用第三方外掛與資源 5. 有效防止來亂的

希望這篇文章能在以後(不過我很認真的希望,以後拜託不要再發生這麼大的災難了)幫到大家。

====
最後我要感謝這些單位/朋友的幫助:

  1. PIXNET ( CDN 贊助 )
  2. Handlino ( Registrano 系統,rails opensource plugin ) , ihower
  3. PTT 鄉民管版志工:willyt / tjackalym / hrs113355 / meow0318 / Bluesdan / albb0920
  4. EvenWu ( CSS design support 、三顆 Heroku dyno )、underfire ( CSS debug)
  5. 現在還在各地救災的熱血鄉民

====
如果對文章內提到的技術有興趣,你可以 Google 一下以下關鍵字找到解答:

  1. Ruby on Rails / Heroku
  2. Git
  3. CDN
  4. High Performance Web Sites
  5. jQuery + RJS
  6. SEO
  7. Google Doc , Google Sites, Google Friend Connect , Google Analytics , Google Maps

莫拉克颱風災情支援網 - 救災網站背後技術與技巧 (2)

Published on:

有鄉民說想看當年八八風災的技術筆記,特此撈出來回憶。這是我 2009 所作,當年 25歲。

=====

有效利用第三方外掛與資源

支援網一上線,是以 Gmaps + 刊登版(可留言)的姿態誕生,後來才漸漸演變成現在的回報互助論壇形式。其實眼尖的程式設計師朋友應該有注意到,整個網站在後期的架構改版上,其實我並沒有「自己多寫」很多功能。

我不是不會寫,我是不願自己花時間下去寫。

這個網站是由我一人 handle(雖然 CNN 記者在聯絡我時,不太相信這網站的背後是一個人而不是一個團隊)。我本人的時間與精力,對這個網站來說是重要資產,不能隨便遭到浪費

COSCUP 的 Q & A 時間時,也有場上的觀眾提問:

他提到現在救災網有好幾個,訊息也很多,有沒有考慮製作 API,與其他網站「整合一下」。

我在當時的回答,大意記得應該是這樣的:( 也許有出入,就當我寫文章時將論點補充的更完整一點)

=== 分隔線 ===

我不會現在做,也許過幾天會作( 整合 / API ),但絕對不是現在( 災情發生的頭幾天)
第一個,何謂 API?給 API (就算是 RSS),資料的類型或交換格式總得也要討論一下吧。
第二個,給 API 的意義在哪裡?要做到多個網站訊息完全不重複,幾乎是不可能做到的事情。而且「整合資訊」這對整個行動真的有巨型利益的提昇到值得我投注下去時間開發(雖然以 Rails 製作 RSS 輸出不難)嗎?

也有人問我,為什麼我不作個 bot 去撈 twitter / plurk 利用關鍵字把災情資訊倒回來?但這在整個架構想法來說,卻是完全不必要的行為。我的看法是,在這段黃金期間要做的事,是要以同樣的資源能夠做出更多的事。資訊的整合傳播固然很重要,但更重要的卻是回報機制的確立。這樣才能真正有效的減少救災資源被重複浪費的程度。

資訊牆可以刷得很爽沒有錯,但是刷的那麼快,我真的不知道有多少人會去看,能從中幫上多少忙。還有多少重複的訊息在上面是 n 次傳播浪費救災資源。這也是我不製作整合微網誌、新聞進來整個系統的程式的原因。

目前幫忙的鄉民真的非常多。所以我的想法很簡單,我的系統就是寧願以大量的鄉民加上有效分類/回報機制/站內搜尋,去換取降低資源被重複浪費、和加速互助通報的效率

第三,網站後期拿掉 gmap support,也是基於這個原因。gmap 上一開始的資訊剛開始也許有參考價值,但隨著量爆增到幾千筆之後,也漸漸失去意義。而支援網剛開始只有縣市分類 + gmap 。後來拿掉了 gmap,但多了訊息分類( 這部份,非常感謝 PTT 的志工大力幫忙,七百筆我大概分到吐血),也突出了回報功能,也是基於情勢演變以及上述考量。

=== 分隔線 ===

而我覺得值得讓大家參考的大概是這個想法:「短時間之內要做的事實在太多了,所以在初期真的不要妄想去整合以及做大功能。找出你真的能(短時間)做到,而且一做出來就可以做出巨量貢獻的功能才是最重要的。能不自己做的功能就不要自己手刻。需要人家幫忙 support 的話,就做出一個簡易協調的機制方便使用(如給志工用的管理後台,iframe 內嵌資訊)

支援網上「能不自己做的功能就不要自己手刻」這種例子非常多,我整理幾個部份給大家參考。

[ 使用 Registrano 當作志工管理/招募系統 ]

Registrano

這個想法,是因為 PTT Emergency 志工 willyt 所生,他希望我幫忙做一個志工管理系統。我是做的出來,但要花兩天時間,不符合成本效益。但後來稍微思考了一下,志工管理報名系統到底需要些什麼呢?

  1. 登記報名(有額滿限制)
  2. 志工與派工者的需求資訊
  3. 能寄信
  4. 能發簡訊

Registrano 統統符合需求,而且提供了報名表單外嵌以及 widget 功能。於是使用 Registrano 為主體就拍板定案,同時怕有阿宅不會用這個系統,也商請了熱血阿宅朱學恆幫忙寫了教學

[ 使用 Google Doc + Iframe 整合第三方資訊 ]

圖片 8

說實在,這段期間,請我幫忙加功能或寫程式統整資訊的人真的很多。但老實說,不是覺得這功能沒必要,就是花時間寫處理對方封閉格式的程式實在太花時間。

而這一個方法也是從 PTT Emergency 網頁版 Inspire 來的,PTT Emergency 網頁版 是由 Google Sites 建製,但剛上的頭一天,就因為瀏覽次數過高被暫停使用。隔天復站後,鄉民想到聰明的替代辦法,就是內容以 Google Doc 製作,publish 成 html 版,再以 iframe 內嵌在 Google Sites Google Doc 的 html 不但沒有 access limit,同時它也方便使用,又可多人編輯。完全可取代掉自建 CMS 以及帳號控管的麻煩。

因此如果有類似需求,幾乎往後都以此法請對方比照辦理。

[ 使用 Google Custom Search ]

圖片 9

網站上的資訊那麼多,為了降低重複回報的頻率,提供一個搜尋功能是很重要的。以我的技術,製作一個用 Sphinx 為 based 的簡易站內 Search Engine 並不是難事。但問題在於,Heroku 上面沒有辦法跑...冏。最後 Google 的葉平教授,建議我使用 Google Custom Search 輕鬆解決了這個問題。

[ 使用 Google Friend Connect 小工具 ]

圖片 11

這一個網站,雖然本身幾乎是個留言板。所以再做一個留言給站長的留言板,也不是什麼難事,但是真的沒有什麼必要。於是最後使用了 Google Friend Connect 小工具 提供的留言板,只要簡單填一下資訊,copy css / javascript 回來就收工了。

另外補充的一點,連這個系統的 theme ( Web App Theme ) 和 helper (Handicraft Helper)都是 Opensource 的資源。

莫拉克颱風災情支援網 - 救災網站背後技術與技巧 (1)

Published on:

有鄉民說想看當年八八風災的技術筆記,特此撈出來回憶。這是我 2009 所作,當年 25歲。

=====

[這篇文章是我的投影片文字版]

今天( 2009/8/15 )是 COSCUP 第一天,我在早上九點半有個 Talk,有關於 Ruby Web Framework - Sinatra。不過兩天前,我向大會 submit 了新的 topic,改成了 『莫拉克颱風災情支援網 』。

臨時改題目,大家應該會覺得奇怪,這...網站,說穿了不過是個雙向留言板,到底有什麼好湊成一個講題。

也許大家不知道,在這六天( 8/9 - 8/ 15) handle 網站的期間,我其實從觀察其他網路救災團隊運作,和自己實際運營網站時發生的事件,得到了不少經驗。剛好 8/15 就是COSCUP ,才讓我決定臨時改變主題,整理分享這一些心得。

雖然不知道以後還用不用得上(希望台灣以後不要再發生這種大災難),但我希望的是藉由這次經驗的分享,能讓其他人以後再投入網路救災之時,能更有個脈絡方向,能耗費更少精力但能更有效的投入網路支援救災的部份。

=====

莫拉克颱風災情支援網 ( 以下簡稱支援網 ),到底有什麼特點值得拿出來講呢?

  1. 它是這次風災最早上線的手刻系統 ( 8/9 12:18 撰寫完成8/9 01:03 announce、 )。
  2. 網站最穩定(唯一沒被 DDoS 到掛站)
  3. 功能相對其他救災網站完整。
  4. 善於整合地三方資訊。

我的投影片,就是直接以這次開發支援網的技術、實際經驗,來解釋幾個我覺得經營架設、網路支援救災網最需注意的幾個重點...。

說到架設這類網站,你會想到什麼需要注意的事項?

  1. 功能完整
  2. 統一資訊
  3. 一台不錯機器
  4. 一隊負責整理更新的網路志工

大概就這些吧...

鄉民最後的直覺結論就會導出:「用 CMS ( Wordpress / Drupal / Joomla ),找個空間,上網找一隊志工支援...收工!」

要是這麼簡單就好了。真的這樣搞,上線會遇到的第一個問題,就是 被‧打‧爆 ....

====

個人這次針對這次經驗,整理了五個重點,供大家參考。我認為救災支援網站需要的是

  1. 儘快上線,功能其次
  2. 高流量承載與調校 (被打掛 = 無用
  3. 廣為人知
  4. 有效利用第三方外掛與資源
  5. 有效防止來亂的

儘快上線,功能其次



也許一些朋友比較知道,我現在的職業是程式設計師,強項就是 Ruby on Rails 敏捷網站開發。Ruby on Rails 不僅是我最熟悉的網頁框架,也是世界上開發網站最快速的框架。也因為這樣的因素,我有時候就比較倒楣的常會被抓去支援作一些臨時性的網站救火。這次支援網也是因為比利潘的召喚,臨時從以前做過的舊網站硬改出一個符合需求的直接上線 -- 改版(15min)+ Deploy( 45min)大概總共只花了一小時。

因為需求很明確,因此我作的就只是一個很簡單的「Google Maps + 刊登版(可留言)」的網站,不需要其他雜功能。這也是沒有選擇現成 CMS,直接用手刻的主要原因。

高流量承載與調校



而在前面提到。支援網是從頭到尾沒有被打爆過的網站。不能被打爆,我認為是身為救災消息集散中心一個很重要的 key point。當災難發生,可預見的是,這一類網站一定會瞬間湧進巨大的流量。伺服器可以反應慢沒關係,但一定要擋的住。因為一旦擋不住癱瘓掉了,甚至癱瘓長達幾個數小時。這要命的幾個小時所造成的後果就等於救命稻草蒸發,所有網友心血白費。

那一定有人會覺得好奇,RoR 不是傳說中以效能不佳的惡名著稱?為什麼這次幾個站台之內,被打掛的反而都是 PHP 的站台...

[網站功能保持簡單]

我要澄清一點的是:其實 RoR 並沒有大家想像中的效能糟,它的效能比一些知名的 PHP Web Framework 來的更佳(qps 高很多)。而且我更想提出進一步的是,如果已經預見會是大流量的 event site,隨便使用不熟悉的 PHP CMS,會造成更糟的下場。這也是前一段為什麼會強調「功能其次」的原因,因為功能越「完整」,可能表示效能越不佳。而那些完整的功能,也許並非能在事件中發揮到很大的功能,甚至這部分的 code (plugin / module)更有可能是超吃系統資源的怪獸。而這些功能如果又不是你開發的,短時間你連 tune 都無從 tune 起。

[容易 Scale]

Ruby on Rails Application 較為人熟知的架設方式,是跑好幾隻 mongrel 起來,再用 apache 或 nginx 當 reverse proxy 跑在前面擋。但這次跟往常比較不同的地方是,支援網架構在 Rails 雲端(Heroku)之上。也因為這層關係,網站變得比較好 Scale,幾乎不必再分神去監控系統是否會垮掉。(雖然我當初只是因為懶得管機器...deploy 在雲端)

支援網最高峰那日大概整天是快 40 萬 pageview( Google Analytics),開了 3 台 Heroku 的 dyno。如果當初是拿 VPS 或 dedicated server 跑,大概會陷入一直監控它是不是會掛掉,或者是機器不夠撐要搬家重弄的惡夢...。現在只要信用卡刷下去就...

[Web Performance Tunning ]

雖然個人在網路公司服務的關係,也熟悉 Backend Performance Tunning 的一些技巧。但我深知我的長項是網站敏捷開發,因此頭兩日幾乎是把心力都投注在寫 Code 之上。功能寫的差不多,才回頭改善開啟網站的速度。

調校網站大概抓了幾個重點去作:

  1. 改善 db query

  2. 打開 YSlow ,依照 High Performance Web Sites 的 tips 去 tune。

(a) 靜態檔案壓縮 - rails 的 靜態檔案 helper 有個很棒的功能,就是指定 :cache => true,就會自動把所有需要用到的 css / js ,combine 成單一檔案。這樣的好處就是可以降低 request 數,減輕對 httpd 的壓力。

(b) CSS 擺上面,JS 擺下面。

(c) 後來多開 dyno 並沒有太大的速度改善,而 Heroku 的底層是 EC2,很明顯的問題就出在卡頻寬。而 YSlow 更告訴我一件驚人的事,html 只有 19k,但我使用的 js framework 有 150k。這時候隨即下的判斷,就是向公司同事 @gslin 求援,把靜態檔案通通丟上 CDN(CDN 費用由公司 PIXNET 贊助)。上 CDN 帶來很明顯的好處:提供 delivery 檔案的速度品質、有的廠商會幫忙上 gzip(甚至多幫忙處理 IE6 下 gzip 的問題)、減輕對 httpd 的壓力。

這幾個措施一做完,網站開起來就變得很快,同樣資源也能撐更多上線人數...

廣為人知



網站上線了。再來的問題:要怎麼讓別人知道有這個網站?我個人因為是比較著名的部落客,噗浪推特有相對比別人多的 follower (各約一千多人),廣播的廣度夠大。但只有我一個人負責廣播,效力是不會持久的。重要的救災訊息中心的位址,除了迅速傳播還要持久傳播

因此我在網站上線時也作了兩件事:

(1) 製作推噗按鈕:

噗浪現在是台灣當紅的微網誌。因此要做的是就是讓這個網站在噗浪上燒起來,燒越久越好……。如果現在在噗浪搜尋 "http://disastertw.com" 的話,應該會驚奇的發現一件事,河道上無時無刻幾乎洗滿了眾網友廣告這個網站的噗。 怎麼做到的?我製作了一個推噗按鈕…… 推噗按鈕 網友大多是懶惰的,作公益有時只是順便而已。而在噗浪貼連結,是有特殊語法的,沒有人有美國時間幫你弄好連結...何況 ReP 也沒有辦法直接 copy 效果。即使訊息傳的快,恐怕也無法持久。 為了解決這個問題,想到的簡單的方式就是直接幫網友生好連結與敘述,輕鬆一按 Enter 就噗出去了,完全不費力。之前在 Dell 之歌的事件時,我跟 EvenWu 在當時就順便測了一下這個按鈕的行銷效果,嗯,流量大概成長了三倍以上吧.... 支援網在噗浪上面,延燒這麼久完全是有原因的。

(2) 針對搜尋引擎作有效的 SEO

再來,就是 SEO 的技巧。一般網友,在災情一發生時,不一定會知道有這個支援網站。也許他想幫忙,但是很有可能也無從幫起。這時候變成要向搜尋引擎下手,讓網友一搜尋「莫拉克」,馬上就知道有這個支援網站的存在。

為此,我也做了幾件事:

  • (a) 經過上面的噗浪宣傳,還有噗浪同步 twitter 的效果,可以導入非常多的 inbound link,有益分數。
  • (b) meta keywords 塞關鍵字
  • (c) 調整 Page Title ...

搜尋引擎排名就會有非常顯性的提昇,都在搜尋引擎結果第一頁的前幾名。