愛料理網站建置經驗談

Transcript

1. 愛料理 網站建置經驗談 ྛٓठ [email protected]

2. 關於我 ·•林宜儒 Lawrence https://fb.com/yiru.lin ·•Polydice, Inc. 寶利拾股份有限公司 ·•愛料理 iCook.tw（網站與 iPhone

   app） ·•Mr. Plurk ·•Inside 網路趨勢觀察部落格 www.inside.com.tw

3. 愛料理食譜分享社群

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

   ·•粉絲人數： 24.7 萬人

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

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

7. None
8. None
9. None
10. None

11. 網站緣起

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

13. None
14. None
15. None
16. None
17. None
18. None
19. None

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

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

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

    are nothing 沒做就是零分

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

    ·•Pingdom, New Relic, Cloudwatch, Exceptional, Google Analytics ·•自建 Log parsing 機制

24. 我們所運用的技術

25. 選用 Rails 的理由 ·•Rails 是個成熟且可信賴的網頁開發框架 ·•豐富的生態系 ·•大量的套件可運用 ·•大量的參考文件、書籍、教材 ·•許多廠商專門為 Rails

    提供服務 ·•社群蓬勃發展 ·•node.js 也有類似條件

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

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

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

    tools/services

29. devise & omniauth ·•帳號管理系統 （註冊、登入、驗證、忘記密碼等等） ·•社群網站整合 ·•Facebook、Twitter 、支援 oauth 的網站

    ·•搭配 devise_invitable 建立 email 邀請功能 ·•可以追蹤使用者是由誰邀請加入

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

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

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

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

34. sunspot_rails & rsolr ·•站內搜尋引擎 ·•即將換成 elasticsearch ·•重要的是： ·•可自定斷詞規則 ·•提供多元的查詢 API

    ·•換的理由：架構、效能、未來發展

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

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; } }

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

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

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

    SES

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

    <% end if can? :update, answer %>

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

    scope, default_scope 運用

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

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

    => "nofollow") %>

44. cells ·•邏輯較為複雜或通用的頁面元件 ·•優點： ·•簡化 Controller/View 的複雜度 ·•cells 可個別進行 cache ·•可視為一般

    Controller 使用 （例如 include 某些特定的 helpers）

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

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

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

48. Bootstrap

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

50. None

51. Font Awesome ·•向量 Icon ·•搭配 Bootstrap 使用 ·•透過 CSS 指定樣式

    ·•尺寸、顏色、效果

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

    ·•requireJS、Backbone.js、Handlebars、jQuery

53. 關於 SEO

54. 關於 SEO

55. 關於 SEO

56. 關於 SEO

57. 關於 SEO

58. 關於 SEO •氣炸鍋

59. 關於 SEO •情⼈人節

60. 用的雲端服務

61. 用的雲端服務

62. 用的雲端服務

63. 用的雲端服務

64. 用的雲端服務

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

66. 用的雲端服務

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

68. 用的雲端服務

69. 用的雲端服務

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

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

    99.85%

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 要如何善用這些工具來改善工作流程和 節省會加以描述。"

73. 愛料理 分享幸福時刻