2. Global
Footprint

3. 講者介紹
 微軟最有價值專家（連任五屆）
 Tech Days 2012、2013講者
 MSDN 講座講者
 微軟實戰課程日講者
 《ASP.NET MVC4 網站開發美學》
 twMVC 聯合創辦人

4. MVC 快速導覽
 把應用程式架構給切分為三個部分，分別為：
 Model（模型）

5. MVC 快速導覽
 把應用程式架構給切分為三個部分，分別為：
 Model（模型）
 View（視圖）

6. MVC 快速導覽
 把應用程式架構給切分為三個部分，分別為：
 Model（模型）
 View（視圖）
 Controller（控制器）

7. MVC 快速導覽
 MVC 的三個組成部分所負責的功能不同，相互獨立。

8. MVC 快速導覽
 MVC 的三個組成部分所負責的功能不同，相互獨立。
 MVC 並不等於三層式架構。

9. MVC 快速導覽
本圖取自《ASP.NET MVC4 網站開發美學》

10. MVC 與 Web Form 的不同
 MVC 為純粹的 Web 不適用 Web Form 事件導向
的觀念。

11. MVC 與 Web Form 的不同
 MVC 為純粹的 Web 不適用 Web Form 事件導向
的觀念。
 Web 沒有狀態。

12. MVC 與 Web Form 的不同
 MVC 為純粹的 Web 不適用 Web Form 事件導向
的觀念。
 Web 沒有狀態。
 Web Form 可以不在乎 CSS 和 JavaScript。

13. MVC 與 Web Form 的不同
 MVC 為純粹的 Web 不適用 Web Form 事件導向
的觀念。
 Web 沒有狀態。
 Web Form 可以不在乎 CSS 和 JavaScript。
 MVC 不可排斥 HTML、CSS、JavaScript 。

14. MVC 與 Web Form 的不同

15. 新接觸 MVC 的常見問題？
 開發速度比使用 ASP.NET Web Forms 慢？

16. 新接觸 MVC 的常見問題？
 開發速度比使用 ASP.NET Web Forms 慢？
 現有 ASP.NET Web Forms 能直接轉為 ASP.NET
MVC？

17. 新接觸 MVC 的常見問題？
 開發速度比使用 ASP.NET Web Forms 慢？
 現有 ASP.NET Web Forms 能直接轉為 ASP.NET
MVC？
 M、V、C 真的能夠分工開發嗎？

18. 新接觸 MVC 的常見問題？
 開發速度比使用 ASP.NET Web Forms 慢？
 現有 ASP.NET Web Forms 能直接轉為 ASP.NET
MVC？
 M、V、C 真的能夠分工開發嗎？
 使用 MVC 開發是否可以讓設計人員去維護 View？

19. 新接觸 MVC 的常見問題？
 開發速度比使用 ASP.NET Web Forms 慢？
 現有 ASP.NET Web Forms 能直接轉為 ASP.NET
MVC？
 M、V、C 真的能夠分工開發嗎？
 使用 MVC 開發是否可以讓設計人員去維護 View？
 MVC 專案可以使用 Server Controls 嗎？

20. 新接觸 MVC 的常見問題？
 開發速度比使用 ASP.NET Web Forms 慢？
 現有 ASP.NET Web Forms 能直接轉為 ASP.NET
MVC？
 M、V、C 真的能夠分工開發嗎？
 使用 MVC 開發是否可以讓設計人員去維護 View？
 MVC 專案可以使用 Server Controls 嗎？
 ASP.NET MVC 是否會取代 ASP.NET Web Forms？

21. 新接觸 MVC 的常見問題？
 開發速度比使用 ASP.NET Web Forms 慢？
 現有 ASP.NET Web Forms 能直接轉為 ASP.NET
MVC？
 M、V、C 真的能夠分工開發嗎？
 使用 MVC 開發是否可以讓設計人員去維護 View？
 MVC 專案可以使用 Server Controls 嗎？
 ASP.NET MVC 是否會取代 ASP.NET Web Forms？
 還需要了解 HTML, CSS, JavaScript ?

22. 輪子別再做了
利用網路資源快速開發網站才是王道

23. Bootstrap 是什麼？
 Bootstrap 是由 Twitter 維護的 CSS Framework 專案，
可以讓我們快速完成一個有一定水準的網站。

24. Bootstrap 是什麼？
 Bootstrap 是由 Twitter 維護的 CSS Framework 專案，
可以讓我們快速完成一個有一定水準的網站。
 Bootstrap 提供了基礎的 Layout 與 Grid System。

25. Bootstrap 是什麼？
 Bootstrap 是由 Twitter 維護的 CSS Framework 專案，
可以讓我們快速完成一個有一定水準的網站。
 Bootstrap 提供了基礎的 Layout 與 Grid System。
 Bootstrap 有足夠的 CSS 樣式並且可支援 RWD。

26. Bootstrap 是什麼？
 Bootstrap 是由 Twitter 維護的 CSS Framework 專案，
可以讓我們快速完成一個有一定水準的網站。
 Bootstrap 提供了基礎的 Layout 與 Grid System。
 Bootstrap 有足夠的 CSS 樣式並且可支援 RWD。
 Bootstrap 包含實用的元件與 JavaScript。

27. Bootstrap 是什麼？
 Bootstrap 是由 Twitter 維護的 CSS Framework 專案，
可以讓我們快速完成一個有一定水準的網站。
 Bootstrap 提供了基礎的 Layout 與 Grid System。
 Bootstrap 有足夠的 CSS 樣式並且可支援 RWD。
 Bootstrap 包含實用的元件與 JavaScript。
 Bootstrap 易於修改與自訂。

28. Bootstrap 是什麼？
 Bootstrap 是由 Twitter 維護的 CSS Framework 專案，
可以讓我們快速完成一個有一定水準的網站。
 Bootstrap 提供了基礎的 Layout 與 Grid System
 Bootstrap 有足夠的 CSS 樣式並且可支援 RWD
 Bootstrap 包含實用的元件與 JavaScript
 Bootstrap 易於修改與自訂。 （講是這樣講不過要改
的動需要對於 CSS、LESS 有相當的功力 ）

29. 利於溝通
 Prototype 結束後可以直接轉 Production。

30. 利於溝通
 Prototype 結束後可以直接轉 Production。

31. 利於溝通
 Prototype 結束後可以直接轉 Production。

32. 易於修改
 Bootstrap 不是都長一樣！

33. 易於修改
 Bootstrap 不是都長一樣！

34. 易於修改
 Bootstrap 不是都長一樣！

35. 易於修改
 Bootstrap 不是都長一樣！

36. Bootstrap 怎麼學？
 Bootstrap 一點都不難

37. Bootstrap 怎麼學？
 Bootstrap 一點都不難
 難的在開發人員對於 CSS 的「基本觀念」

38. Bootstrap 怎麼學？
 Bootstrap 一點都不難
 難的在開發人員對於 CSS 的「基本觀念」
對你來說是一個方便的

39. 立即動手做一個行動網站
http://data.taipei.gov.tw/opendata

40. 輪子別再做了
 Bootstrap 官網 （2.3.2）
http://getbootstrap.com/2.3.2/index.html
 Layout 範例與常用套件
http://bootsnipp.com/

41. 實際部屬上 Windows Azure

45. 其他的部屬方式
Windows Azure
本機
機制
雲端
空間
版控
系統

46. 案例分享

47. 路跑界有一個傳說

48. 沒有一次可以順暢報名

49. 每次知名活動開放報名官網都會炸掉

50. 我只想跑步而已，主辦單位出來面對！

53. 進擊的太白粉
 網友自發的路跑活動

54. 進擊的太白粉
 網友自發的路跑活動
 99小時募到 NT$6,298,367

55. 進擊的太白粉
 網友自發的路跑活動
 99小時募到 NT$6,298,367
 活動網站最高同時 1103 人上線

56. 進擊的太白粉
 網友自發的路跑活動
 99小時募到 NT$6,298,367
 活動網站最高同時 1103 人上線
 網站 downtime = 0

58. 完全沒有當掉

59. 流量圖表

60. 流量圖表

61. 開發時程
 10小時（包含申請 Windows Azure）

62. 使用技術
 ASP.NET MVC 4
 Web API

63. 使用技術
 書本頁數超過 800頁
 MVC開發技巧完整涵蓋
 市面上唯一完整說明 Web API

64. 使用平台
 Windows Azure Web Site

65. Windows Azure Web Site
• 可隨時調整硬體支援，應付突來的流量。

66. Windows Azure Web Site
• 可隨時調整硬體支援，應付突來的流量。
• 快速部屬

67. Windows Azure Web Site
• 可隨時調整硬體支援，應付突來的流量。
• 快速部屬
• 支援多種語言 ASP.NET , PHP , node.js , Python

68. Windows Azure Web Site
• 可隨時調整硬體支援，應付突來的流量。
• 快速部屬
• 支援多種語言 ASP.NET , PHP , node.js , Python

69. Windows Azure Web Site
• 可隨時調整硬體支援，應付突來的流量。
• 快速部屬
• 支援多種語言 ASP.NET , PHP , node.js , Python
• 自動支援負載平衡

70. Windows Azure Web Site
• 可隨時調整硬體支援，應付突來的流量。
• 快速部屬
• 支援多種語言 ASP.NET , PHP , node.js , Python
• 自動支援負載平衡
• 至少要開兩台

71. 開兩台以上要注意的事項
• 程式開發的觀念要轉換到 Web Farm

72. 開兩台以上要注意的事項
• 程式開發的觀念要轉換到 Web Farm
• 不要在個別執行個體中儲存狀態

73. 開兩台以上要注意的事項
• 程式開發的觀念要轉換到 Web Farm
• 不要在個別執行個體中儲存狀態
• 不要認為下一次的要求會在相同的執行個體中處理

74. 開兩台以上要注意的事項
• 程式開發的觀念要轉換到 Web Farm
• 不要在個別執行個體中儲存狀態
• 不要認為下一次的要求會在相同的執行個體中處理
• 不要忘記像動態產生的影像是由網頁載入的事情

75. 開兩台以上要注意的事項
• 影響最大的就是 Session

76. 開兩台以上要注意的事項
• 影響最大的就是 Session
• 請改用透過 Session State Provider 儲存 Session
• Windows Azure Caching
• SQL Azure
• Windows Azure Storage

77. 開兩台以上要注意的事項
• 影響最大的就是 Session
• 請改用透過 Session State Provider 儲存 Session
• Windows Azure Caching
• SQL Azure
• Windows Azure Storage
• 儲存到用戶端
• cookies

79. Windows Azure Web Site
• 可隨時調整硬體支援，應付突來的流量。
• 快速部屬
• 支援多種語言 ASP.NET , PHP , node.js , Python
• 自動支援負載平衡
• 至少要開兩台
• 建置成本非常低?

82. • 你覺得「進擊的太白粉」募款結束的這
段時間花了多少錢？

84.  NT$ 2,293
費用

85.  NT$ 2,293
費用

86. 費用
免費模式 (Free)
•免費！流量限制為
165MB/天，每月最大 5GB，
超過時會中斷網站服務。
•每個訂閱帳戶可享有10個
免費網站額度。

87. 費用
免費模式 (Free)
•免費！流量限制為
165MB/天，每月最大 5GB，
超過時會中斷網站服務。
•每個訂閱帳戶可享有10個
免費網站額度。
 共享模式 (Shared)
• 每小時 NT$ 0.404 元，每
月約 NT$301元。
• 每月贈送 5GB 流量，如超
過才依流量使用計費。

88. 標準模式 (Standard)
 依虛擬機器大小，每月費用約為 NT$2,309~9,234 不等，
而且擁有 的保障。
 每月 5GB 流量免費，如超過才依流量使用計費。
費用
SLA 99.9% 表示一年最多只能停機 8.76小時

89. 
費用

90. 特別感謝
 以上案例分享資料由輝網資訊 –
Andy & Calvert 授權於
微軟雲端平台開發者日使用。

91. 現在就開始吧
http://WindowsAzure.com

93. 參考資料
• Windows Azure Website
• http://www.windowsazure.com/zh-tw/services/web-sites/
• Windows Azure 網站服務入門
• http://www.microsoftvirtualacademy.com/training-
courses/windows-azure-websites-jumpstart
• Studyazure 雲端學堂
• https://www.facebook.com/studyazure

94. Blog : http://demo.tc
twMVC: http://mvc.tw
G+: http://demo.tc/+
FB: http://fb.me/demo.fan
Plurk: http://plurk.com/demoshop

95. 謝謝各位
• 本投影片所包含的商標與文字皆屬原著作者所有。
• 本投影片使用的圖片皆從網路搜尋。
• 本著作係採用 Creative Commons 姓名標示-非商業性-相同方式分享 3.0 台灣 (中華民國) 授權條款授權。

96. 如何獲得百萬跑車?
2013/09/30 前, 只要依照規定啓用 MSDN 訂閱隨附的 Windows Azure 權益, 即有機會將北美預估
零售價 118,600 美元的 Aston Martin V8 Vantage Coupe 開回家.
詳情請參閱 Windows Azure 網站 : http://www.microsoft.com/taiwan/windowsazure/