那些在NTUST.CC背後。你所不知道的故事

32,295 views

Published on

Published in: Technology
8 Comments
146 Likes
Statistics
Notes
No Downloads
Views
Total views
32,295
On SlideShare
0
From Embeds
0
Number of Embeds
6,164
Actions
Shares
0
Downloads
274
Comments
8
Likes
146
Embeds 0
No embeds

No notes for slide

那些在NTUST.CC背後。你所不知道的故事

  1. 1. 那些在 NTUST.CC 背後 你所不知道的故事 JSON @ SITCON 2014 2014.3.15
  2. 2. About me JSON (謝宜峯) 台灣科技大學資工系 Web Developer! yfxie@me.com! http://www.json.tw
  3. 3. Agenda NTUST.CC 的故事 使⽤用的免費資源 相關技術
  4. 4. 大學生活「選課」 無疑是最重要的戰役 by ⽶米卡的塗鴉本
  5. 5. 對使用者而言 NTUST.CC是什麼?
  6. 6. 選課前的沙盤推演
  7. 7. 個人模擬+學校的查課系統 差別? 直接上戰場 個⼈人模擬 使⽤用CC
  8. 8. 用來找教室也很方便
  9. 9. CC也扮演校園的
 交易平台
  10. 10. 原本以為不會有人用
  11. 11. 結果
  12. 12. 聽說在網址後面加 female! 會看到 隱 藏 版彳 ㄏ ㄢˋ
  13. 13. 經調查顯示有更多的 使用者透過CC來找 同 學ㄓ ㄥ ㄇ ㄟˋ
  14. 14. 各位還是不要太認真
  15. 15. 對我而言 NTUST.CC又是什麼?
  16. 16. 練功
  17. 17. 你知道把木瓜種的 又大有美的方法嗎
  18. 18. 快去看KANO
  19. 19. 它也是憤怒下的產物 待會再來談
  20. 20. 開始談吧! 為什麼要做CC
  21. 21. 高中時看了一部電影
  22. 22. 在講Facebook的故事
  23. 23. the social network 社群網戰
  24. 24. 而且我看到 Facebook公司成立...
  25. 25. 我的生日
  26. 26. 熱血!
  27. 27. 於是想在大學裡作出一 個可以影響校園的東西
  28. 28. 我的想法
  29. 29. 困難點在想不出有什麼 東西會吸引人使用
  30. 30. 因為 沒人用的東西我不想做
  31. 31. 直到有一天...
  32. 32. 我正在選課模擬
  33. 33. 只要我想換一門課 就悲劇了
  34. 34. 在CC之前 大家好像都是這樣排課
  35. 35. 沒有一個好用的工具 改善現有的狀況
  36. 36. 我的室友Taylor
  37. 37. 我絕對不會說他是前陣子爆紅 氣象局網站設計概念稿的作者 www.taylorhu.com/web-design/cwb-website-revamp/
  38. 38. 話說那個網站上線了 weather.json.tw
  39. 39. 「你去寫選課模擬阿」
  40. 40. 我知道他是隨口說說的 但是我認真了
  41. 41. 而且這又是大家的問題
 這一點就讓我更有動力
  42. 42. 我當下覺得
  43. 43. 正值選課時期 寫完可以⾺馬上試試⽔水溫
  44. 44. 不分系選課自由 台科有個科系叫「全校不分系」 ⼀一屆⼈人數多達200⼈人 有⾼高職⽣生也有⾼高中⽣生 有繁星也有技優 ⽽而且選課很⾃自由!更需要這個模擬系統
  45. 45. 再加上 I’m a developer.
  46. 46. 可謂天時地利人和 所以...
  47. 47. 首先我需要全校的課程資料
  48. 48. 有了資料是好的開始, 可以開始寫選課模擬了
  49. 49. 分析需求 ·• 課表和查課要做在一起 ·• 查詢課程要能即時顯示 ·• 即時知道目標課程是否衝堂 ·• 即時排課 Ajax
  50. 50. 就這樣弄到半夜三點...
  51. 51. 第一版完成了
  52. 52. .NET域名 似乎被電研社註冊了
  53. 53. 於是決定用...
  54. 54. 2011.11.2
  55. 55. 選課模擬上線那天
  56. 56. 沒有特別宣傳 但有些同學主動轉貼
  57. 57. 登入的使用者人數 直衝200多人
  58. 58. 可惜沒辦法像電影一樣 影響整個學網
  59. 59. 過了幾天有人問到...
  60. 60. 靈感一來
  61. 61. 後來還加入 個人頁面、塗鴉牆、好友等 功能...有點像Facebook
  62. 62. 還有...
  63. 63. 接著對方的FB塗鴉牆...
  64. 64. 不過之後全部拿掉了
  65. 65. 我覺得一個好的網站 功能不用太多
  66. 66. BTW, 還要感謝一位 隱角
  67. 67. 故事聽完了
  68. 68. 來講一些 大家比較有興趣的東西
  69. 69. CC用過的免費資源
  70. 70. 免費簡訊 Nexmo! https://www.nexmo.com 免費贈送€2 / 每封€0.03 = 66封 台灣的簡訊費好像漲了, 之前算好像可破百封
  71. 71. 免費發大量信件 Mandrill! 12K per month! http://mandrill.com/
  72. 72. 免費SSL StartSSL! 免費⼀一年! https://www.startssl.com/
  73. 73. 現在好像不好申請了
  74. 74. 最近有用到一家SSL! 每年只要$8.95USD http://www.ssls.com/
  75. 75. 這要錢...
  76. 76. 不過本來就有 這麼一台主機了
  77. 77. 開24HR總要電費吧!?
  78. 78. 免費電 台灣科技大學宿舍 住多久用多久 http://www.ntust.edu.tw
  79. 79. 當時沒有免費EC2! 可是現在不同了!
  80. 80. 免費主機 AWS EC2! Micro Free Tier免費一年! http://blog.developer.tw/post/740-aws-ec2-free-instance
  81. 81. 不過之後CC還是 先後搬到Linode、EC2上
  82. 82. 「幹麻花自己得錢?」
  83. 83. 這問題該怎麼回答...
  84. 84. 「放個廣告賺錢也好阿」
  85. 85. 1. 破壞使用體驗 2. 只有特定時間有人使用 3. 誰會點廣告?
  86. 86. 最重要的是...
  87. 87. CC用到的相關技術
  88. 88. 第一版的CC
  89. 89. PHP手刻 很髒的那種...
  90. 90. 當時使用 PHP的file_get_contents 及正規式抓取課程資料
  91. 91. jQuery 2.X版不支援IE6,7,8
  92. 92. By the way,
 YOU MIGHT NOT NEED JQUERY http://youmightnotneedjquery.com/
  93. 93. 不過 我依然覺得jQuery是必要
  94. 94. 用了大量的Ajax! 如頁面切換、選課 還有做類似FB的東西
  95. 95. 想當初N年前比賽
  96. 96. Ajax要寫 new XMLHttpRequest…. 還要記狀態碼 基本功能寫完就要數十行了
  97. 97. 如今一行就搞定 $.ajax({…})
  98. 98. 2012.8 暑假利用時間改版 事實上是整個用MVC重寫
  99. 99. 使用PHP MVC Framework Codeigniter
  100. 100. 使用CSS Framework Bootstrap
  101. 101. 使用Version Control System Subversion(SVN)
  102. 102. 第二次改版
  103. 103. 換個語言寫 所以是完全重寫!
  104. 104. 還記得那兩樣很潮的 東西很久以前看過 只是一直沒機會用...
  105. 105. N年前某個網站 站長推薦我學 Ruby
  106. 106. 加上看到 Ruby之父松本行弘說的話
  107. 107. 開發Ruby的核心價值 是希望能讓開發者能夠 快快樂樂的寫程式
  108. 108. 於是優先選擇了...
  109. 109. Rails 使用心得
  110. 110. 以新語言重寫現有網站 這種學習效果還不錯
  111. 111. 重寫過程還會發現 之前怎麼寫了那麼鳥的 Code
  112. 112. 然後還是把它看待成
  113. 113. 156 練功
  114. 114. 版本控制改用 http://ihower.tw/git/
  115. 115. Font Awesome 使⽤用字體取代icon圖⽚片
  116. 116. Google Font
  117. 117. 中文字體可考慮...
  118. 118. justFont 我是用在別的Project http://paperflight.ntust.cc/
  119. 119. 我覺得很潮的三大神器
  120. 120. 寫HTML用 Haml
  121. 121. Haml
  122. 122. 省去檢查結束標籤時間 和易於閱讀的HTML架構
  123. 123. HAML! 讓你的巢狀結構可以越寫越深
  124. 124. 寫CSS用 Sass
  125. 125. Sass 寫CSS也可以⽤用變數 $main-color: #fff; $main-font: Helvetica, sans-serif; ! body{ font-family:$main-font; color:$main-font; }
  126. 126. Sass Nesting, 超實⽤用! ul{…} ul li{…} ul li a{…} ul{ … li{ … a{ … } } }
  127. 127. Sass Mixins @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } ! .box { @include border-radius(10px); }
  128. 128. 還有很多...Feature
  129. 129. 時間就是金錢 效率就是生命
  130. 130. SASS! 替你省下不少時間
  131. 131. 寫JavaScript用 Coffeescript
  132. 132. Coffeescript?
  133. 133. 縮排 if(foo){ a = 1; b = 2; }
 alert(bar) if foo a = 1 b = 2 alert(bar)
  134. 134. 承襲Ruby特色 if(foo){ a = bar; } a = bar if foo var name = “JSON” var msg = “hello” var foo = name + “ say ” + msg 也更於易讀 name = “JSON” msg = “hello” foo = “#{name} say #{msg}”
  135. 135. 還有很多...Feature
  136. 136. 易於閱讀的程式碼 使你想繼續維護它
  137. 137. Coffeescript 增加你重構的意願度
  138. 138. 請小心使用 Coffeescript
  139. 139. 還有個工具也不錯
  140. 140. 開發小功能、雛形很好用
  141. 141. 重點是 它也支援三大神器
  142. 142. RoR重寫後 第一個版本
  143. 143. 個人頁面
  144. 144. 我超討厭IE的
  145. 145. 想到IE就想到這張圖
  146. 146. 看看瀏覽器使用狀況
  147. 147. 於是決定...
  148. 148. 現在的CC
  149. 149. 心得
  150. 150. 活在問題當下的人 是解決問題的最佳人選
  151. 151. 有想法就要趕快實現 因為你不做就被別人做走了
  152. 152. 這學期開學第一天 進到學校裡聽到的第一句話
  153. 153. 路人甲:「我是用NTUST.CC」
  154. 154. 成就感就是動力阿!
  155. 155. 老實說我覺得CC 不是什麼很厲害的作品
  156. 156. 也沒用到多了不起的技術
  157. 157. 它只是 解決一個沒人解決問題 的作品
  158. 158. 還有…
  159. 159. 前面講到...
  160. 160. 於是想在大學裡作出一 個可以影響校園的東西
  161. 161. 似乎做到了!
  162. 162. Q&A
  163. 163. JSON @ SITCON 2014 Thanks for your attention

×