奧巴馬籌款網站的制作過程
日期： 2012年12月14日
</div>1.
Kyle Rush是一個網站工程師。
2011年6月，他加入BarackObama.com，負責設計2012美國大選的奧巴馬官網。
（圖為2011年6月的奧巴馬官網）
除了宣傳，官網的主要目的就是籌款。
上一次大選，奧巴馬籌到了6.9億美元。這是一個很大的數字，但由于過去4年美國經濟一直沒有起色，本次大選勢必要投入更多的資金，團隊內部估計資金需求將達到創紀錄的10億美元。
一個籌集10億美元的網站，歷史上從來沒有過。Kyle Rush不知道自己能否做到，但是他很清楚，如果籌不到錢，奧巴馬沒法贏得大選。
2.
2012年美國大選現在已經結束了，奧巴馬有驚無險地擊敗了羅姆尼。他最終籌到了11億美元，成為歷史上籌款金額最高（也是花錢最多）的總統候選人。（排在第二位的就是羅姆尼，他也籌到了10億美元。）
這11億美元之中，線下籌集了4.1億，線上籌集了6.9億。單單BarackObama.com一個網站，就創造了2.5億美元的捐款。
在6個月的時間里，BarackObama.com共有
* 17,807,917個訪問者，81,548,259次頁面訪問
* 4,276,463次捐款
* 捐款轉化率24%（每四個訪問者，就有一人會捐款）
</blockquote>這樣輝煌的成績，是如何取得的？
3.
制作一個超大流量的、體驗良好的、能夠說服人們捐款、并能安全快速處理這些捐款的網站、絕非易事。
最近，Kyle Rush寫了一篇文章，披露了許多內幕，從技術角度總結了BarackObama.com的制作心得。下面，我們就來看看奧巴馬的技術團隊是怎么做到的。
（圖為2012年5月的奧巴馬官網）
網站的制作班子，從2011年下半開始組建，Kyle Rush是第一個加入的前端工程師，負責網頁的外觀和用戶體驗。
一開始，網站放在團隊自購的服務器上，運行和捐款都還算平穩。但是，隨著競爭不斷加劇，局勢變得令人擔憂了。到了2012年5月，羅姆尼當月的籌款金額第一次超過了奧巴馬。
競選總部決定，網站必須改版，盡一切可能爭取捐款。于是，技術團隊開始大規模的擴充，全職的前端工程師從1個人擴充到了14個人，其中6人專門負責制作籌款頁面。
4.
技術團隊做出的第一個決定是，使用靜態網站生成器Jekyll，用靜態網頁取代動態網頁，加快網頁打開速度。網站的打開應該越快越好。有研究稱，打開速度每慢100毫秒，Amazon的銷售額就下降1%。
第二個決定是，將全部網頁放上CDN，使用的服務商是Akamai。它是世界最大的CDN供應商，共部署了50000多臺服務器，美國各地都能獲得理想的訪問速度。奧巴馬芝加哥競選總部，可以在20毫秒內載入官網的HTML網頁。
第三個決定是，將捐款的后臺做成API調用。這是因為有23%的訪問者使用移動設備，所以必須部署多個前端（Web端和移動端）。使用API，可以讓不同前端以相同方式與后臺通信，彼此之間用JSON格式傳遞信息。
第四個決定是，后臺用PHP語言開發，放在Amazon的EC2平臺上。
第五個決定是，為了避免宕機，開發兩個后臺。一旦一個系統停止工作，立刻自動切換到另一個。這點很重要，因為宕機不僅影響士氣，而且經濟損失巨大。因為捐款每分鐘都在涌入，最高記錄是一小時300萬美元，你不能讓它停下來。
5.
新網站初步完成后，使用webpagetest.org進行測試，結果令人鼓舞。
原版頁面4秒鐘后還沒載入，新版只用1秒就可以看到。整個平臺的訪問速度上升了60%，捐款轉化率增加了14%。
接下來，就是微調頁面的各種細節，一共進行了240次a/b測試，也就是說，至少迭代了240個版本。
調整后的頁面，視覺效果和用戶體驗都有了巨大的提升（點擊看大圖），捐款轉化率因此又提高了49%。。
隨著奧巴馬的當選，BarackObama.com共進行了1101次前端部署。
6.
事實證明，整個開發方案非常成功，順利完成籌款任務，沒有一分鐘宕機。
Kyle Rush感到有必要總結，留下記錄。除了上面的開發過程，他還提到前端團隊使用的工具：版本控制Github ，a/b測試管理Optimizely，代碼編譯CodeKit。
Kyle Rush最后總結說：
"我百分之百肯定，這是我經歷過的最好的開發環境。我們不斷調整，捐款轉化率的提高令人難以置信。整個團隊感到無比滿足。但是，最高興的還是看到，2013年1月21日巴拉克·奧巴馬依然是美國總統！"
</blockquote> （完）本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！
