愛料理網站建置經驗談

淺談愛料理網站的技術架構以及運用的第三方套件，都是很簡單且常見的套件。

在 Rails 所提供的完整生態系中，倘若能善用各種資源，讓團隊可以專注在解決特定問題、發展產品上，將會對公司、網站的營運有非常大的助益。

Transcript

1. 愛料理
   網站建置經驗談
   ྛٓठ
   Lawrence@polydice.com
   

   View Slide

2. 關於我
   ·•林宜儒 Lawrence https://fb.com/yiru.lin
   ·•Polydice, Inc. 寶利拾股份有限公司
   ·•愛料理 iCook.tw（網站與 iPhone app）
   ·•Mr. Plurk
   ·•Inside 網路趨勢觀察部落格
   www.inside.com.tw
   

   View Slide

3. 愛料理食譜分享社群
   

   View Slide

4. 數據概況
   ·•上線時間：2011. 11. 8
   ·•會員人數： 50,000 人
   ·•食譜數量： 8,500 道食譜
   ·•粉絲人數： 24.7 萬人
   

   View Slide

5. 分享食譜以及幸福時刻
   

   View Slide

6. 我深信食物的力量
   在我們的家庭裡占有一席之地
   為我們留住生命中的美好
   Jamie Oliver
   

   View Slide

7. View Slide

8. View Slide

9. View Slide

10. View Slide

11. 網站緣起
    

    View Slide

12. 因為愛煮菜才做這網站嗎？
    

    View Slide

13. View Slide

14. View Slide

15. View Slide

16. View Slide

17. View Slide

18. View Slide

19. View Slide

20. 相容性
    IE7/IE8/IE9、Firefox、Google Chrome、Safari、iPhone
    

    View Slide

21. 團隊的信念
    ·•資訊技術是我們的核心價值之一
    ·•Done is better than perfect.
    ·•持續創新
    

    View Slide

22. Team building
    ·•培養團隊夥伴們對於網路、行動網路的
    敏銳度
    ·•相近的溝通頻率，很重要
    ·•對產品要有愛與認同
    ·•公司文化：要快樂、要持續動手做
    ·•Ideas without execution are nothing
    沒做就是零分
    

    View Slide

23. 產品營運
    ·•追蹤各種數據
    ·•每天、每週、雙週、每月的成長率
    ·•Google Analytics、MySQL、Redis 交互運用
    ·•用 d3.js 呈現在後台供營運人員查看
    ·•透過各種監控的服務，掌握營運狀況
    ·•Pingdom, New Relic, Cloudwatch, Exceptional,
    Google Analytics
    ·•自建 Log parsing 機制
    

    View Slide

24. 我們所運用的技術
    

    View Slide

25. 選用 Rails 的理由
    ·•Rails 是個成熟且可信賴的網頁開發框架
    ·•豐富的生態系
    ·•大量的套件可運用
    ·•大量的參考文件、書籍、教材
    ·•許多廠商專門為 Rails 提供服務
    ·•社群蓬勃發展
    ·•node.js 也有類似條件
    

    View Slide

26. 感謝 Rails 生態系
    ·•運用了各種 Ruby gems 提高生產力
    ·•正在試圖努力回饋開放社群
    

    View Slide

27. Architecture
    Web Server
    Database
    Message Queue
    Workers/Schduler
    AWS EC2
    AWS EC2
    AWS RDS/MySQL
    AWS EC2/Redis
    Load Balancer
    AWS ELB
    CDN
    AWS Cloudfront
    AWS EC2/Redis
    AWS S3
    File Storage Database
    Search Engine
    AWS EC2/Solr
    DNS management
    AWS Route 53
    AWS EC2/Memcached
    Cache
    

    View Slide

28. 我們使用的各種工具
    ·•Rails 3.2.8
    ·•Ruby Gems
    ·•Bootstrap, powerful front-end framework.
    ·•3rd-party tools/services
    

    View Slide

29. devise & omniauth
    ·•帳號管理系統
    （註冊、登入、驗證、忘記密碼等等）
    ·•社群網站整合
    ·•Facebook、Twitter 、支援 oauth 的網站
    ·•搭配 devise_invitable 建立 email 邀請功能
    ·•可以追蹤使用者是由誰邀請加入
    

    View Slide

30. kaminari
    ·•資料分頁用
    ·•可輕易自定輸出的 HTML 格式
    ·•方便自定樣式
    ·•Kaminari.paginate_array 很實用
    

    View Slide

31. carrierwave
    ·•檔案上傳套件
    ·•搭配 imagemagick/mini_magick 處理縮圖
    ·•利用 Fog 可直接將檔案傳至 AWS S3
    ·•搭配 CDN 動態輸出檔案網址
    config.fog_host = lambda do
    lambda do |file|
    host_number = file.path.sum % 4
    "http://cdn%d.icook.tw" % host_number
    end
    end
    

    View Slide

32. simple_form
    ·•表單產生器
    ·•產生對應的
    ·•欄位名稱
    ·•欄位型態
    ·•欄位提示
    ·•開發者、設計師有一致的標準依循
    

    View Slide

33. client_side_validations
    ·•利用 JavaScript 進行用戶端資料驗證
    ·•搭配 Model 事先定義好的邏輯進行驗證
    ·•搭配 simple_form、bootstrap 很方便
    

    View Slide

34. sunspot_rails & rsolr
    ·•站內搜尋引擎
    ·•即將換成 elasticsearch
    ·•重要的是：
    ·•可自定斷詞規則
    ·•提供多元的查詢 API
    ·•換的理由：架構、效能、未來發展
    

    View Slide

35. acts_as_list, acts_as_tree
    ·•基本資料結構，list, tree
    ·•運用在：
    ·•多層次分類
    ·•需自定排序的資料
    ·•使用者自定的食譜清單
    

    View Slide

36. compass/compass-rails
    ·•大量好用的 helpers
    ·•CSS3/Layout/Reset/Typography 等
    @include border-radius(4px, 4px);
    .simple {
    -webkit-border-radius: 4px 4px;
    -moz-border-radius: 4px / 4px;
    -khtml-border-radius: 4px / 4px;
    border-radius: 4px / 4px; }
    }
    

    View Slide

37. Message Queue: resque
    ·•發信、抓資料、更新資料、統計數據
    ·•resque
    ·•resque_mailer
    ·•resque-scheduler
    ·•resque-pool
    ·•resque-exceptional
    

    View Slide

38. exceptional
    ·•網站經營，應盡可能避免例外出現
    ·•例外出現時，要能主動發現
    ·•程式出現 exception 時主動通知
    ·•getExceptional.com
    

    View Slide

39. aws-ses
    ·•運用 AWS SES 進行 SMTP 發信
    ·•便宜好用，進階的統計功能需自行開發
    ·•早期我們用 Sendgrid，最近換到 SES
    

    View Slide

40. cancan
    ·•權限控管
    ·•網站管理員、一般使用者、測試人員
    <%= link_to edit_question_answer_path(question, answer) do %>
    ฤा౴Ҋ
    <% end if can? :update, answer %>
    

    View Slide

41. state_machine
    ·•超重要
    ·•資料的狀態管理
    ·•草稿、待發佈
    ·•已發佈
    ·•標記為垃圾或是 soft_delete
    ·•搭配 Rails 的 scope, default_scope 運用
    

    View Slide

42. jbuilder
    ·•JSON template builder
    ·•用來提供 Web Services
    

    View Slide

43. rails_autolink
    ·•讓帶有 URL 或 email 的內容變成超連結
    <%= auto_link(@post.body, :all, :rel => "nofollow") %>
    

    View Slide

44. cells
    ·•邏輯較為複雜或通用的頁面元件
    ·•優點：
    ·•簡化 Controller/View 的複雜度
    ·•cells 可個別進行 cache
    ·•可視為一般 Controller 使用
    （例如 include 某些特定的 helpers）
    

    View Slide

45. inherited_resources
    ·•一直寫一樣的程式很膩吧？
    ·•inherited_resources 透過更多的 convention
    減少開發人員撰寫重複程式碼的機會
    ·•運用在後台，處理以 CRUD 為主的操作
    

    View Slide

46. 測試，真的很重要
    ·•rspec-rails
    ·•rspec-cells
    ·•factory_girl_rails
    ·•ffaker
    ·•populator
    ·•should-matchers
    ·•guard
    

    View Slide

47. Unicorn
    ·•Zero-downtime deployment
    ·•斷線影響到數千個使用者，成本很高
    ·•uptime 很重要
    ·•可以 zero downtime 最好
    

    View Slide

48. Bootstrap
    

    View Slide

49. Bootstrap
    ·•完整的文件（開發者與設計師好溝通）
    ·•豐富的元件
    ·•容易自定樣式
    ·•透過 Responsive Design 適應各種尺寸
    

    View Slide

50. View Slide

51. Font Awesome
    ·•向量 Icon
    ·•搭配 Bootstrap 使用
    ·•透過 CSS 指定樣式
    ·•尺寸、顏色、效果
    

    View Slide

52. 關於前端
    ·•大量運用 jQuery，少部分 Backbone.js
    ·•未來會增加 Backbone.js 或其他前端 MVC
    ·•將較為複雜的邏輯交給前端
    ·•前端、後端分工可更明確切割
    ·•requireJS、Backbone.js、Handlebars、jQuery
    

    View Slide

53. 關於 SEO
    

    View Slide

54. 關於 SEO
    

    View Slide

55. 關於 SEO
    

    View Slide

56. 關於 SEO
    

    View Slide

57. 關於 SEO
    

    View Slide

58. 關於 SEO
    •氣炸鍋
    

    View Slide

59. 關於 SEO
    •情⼈人節
    

    View Slide

60. 用的雲端服務
    

    View Slide

61. 用的雲端服務
    

    View Slide

62. 用的雲端服務
    

    View Slide

63. 用的雲端服務
    

    View Slide

64. 用的雲端服務
    

    View Slide

65. 用的雲端服務
    ·•ELB
    ·•EC2
    ·•RDS
    ·•S3
    ·•Cloudfront
    ·•Route 53
    ·•SES
    ·•Cloudwatch
    

    View Slide

66. 用的雲端服務
    

    View Slide

67. New Relic
    ·•Application Performance Monitoring
    ·•Deployment
    ·•Throughput, Apdex, Availability, etc.
    

    View Slide

68. 用的雲端服務
    

    View Slide

69. 用的雲端服務
    

    View Slide

70. 結論
    ·•架網站很簡單，積木堆一堆就有了
    ·•持續的營運與成長才是真正的挑戰
    ·•網站上線，才是真正的開始
    ·•盡可能優先採用現成的解決方案
    

    View Slide

71. Server Operation
    ·•高度依賴 Amazon Web Services
    ·•盡可能自動化
    ·•大量依賴各種工具、script
    ·•九月份 Uptime: 99.85%
    

    View Slide

72. 工商服務
    RubyConf Taiwan 2012
    ·•Ruby Toolbox for DevOps, Richard Lee
    隨著各種行動、社交網路服務的蓬勃發展，以及敏捷軟體開發和 SaaS、雲
    端運算的普及化，在現今的網路服務，程式的開發以及服務的維運已經變
    得密不可分。開發者時常是身兼得伺服器管理以及營運的角色，也因此產
    生了 DevOps 這樣的新一代工作職位。
    ·•Provisioning - 透過 Chef / Vagarnt 等 Ruby 相關工具來達成自動化部署
    以及彈性的調整伺服器數量
    ·•Continous Integration & Deployment - 透過 Capistrano / Janky / Hubot 以及
    GitHub 的 API 整合來達成持續整合和部署
    ·•Monitoring - 透過 God / Fluentd 等工具來監控伺服器以及程式狀況、並
    且收集所需要的記錄以便後續進行分析
    在演講的內容中，將會使用目前本公司的服務以及工作流程來作為例子分
    享，會特別針對中小型的 Startups 要如何善用這些工具來改善工作流程和
    節省會加以描述。"
    

    View Slide

73. 愛料理
    分享幸福時刻
    

    View Slide