狠狠撸

狠狠撸Share a Scribd company logo
那些在	 NTUST.CC 背後	 
你所不知道的故事
JSON @ SITCON 2014
2014.3.15
About me
JSON (謝宜峯)	 
台灣科技大學資工系	 
Web Developer!
yfxie@me.com!
http://www.json.tw
Agenda
NTUST.CC 的故事
使?用的免費資源
相關技術
大學生活「選課」	 
無疑是最重要的戰役
by ?米卡的塗鴉本
對使用者而言	 
NTUST.CC是什麼?
选课前的沙盘推演
那些在狈罢鲍厂罢.颁颁背后。你所不知道的故事
個人模擬+學校的查課系統	 
差別?	 
直接上戰場 個?人模擬 使?用CC
用来找教室也很方便
CC也扮演校園的?
交易平台
原本以為不会有人用
结果
那些在狈罢鲍厂罢.颁颁背后。你所不知道的故事
那些在狈罢鲍厂罢.颁颁背后。你所不知道的故事
聽說在網址後面加	 
female!
會看到	 隱	 	 藏	 	 版彳
ㄏ	 	 
ㄢˋ
經調查顯示有更多的	 
使用者透過CC來找	 
同	 	 學ㄓ	 	 
ㄥ
ㄇ	 	 
ㄟˋ
那些在狈罢鲍厂罢.颁颁背后。你所不知道的故事
那些在狈罢鲍厂罢.颁颁背后。你所不知道的故事
各位还是不要太认真
對我而言	 
NTUST.CC又是什麼?
练功
你知道把木瓜種的	 
又大有美的方法嗎
快去看碍础狈翱
它也是憤怒下的產物	 
待會再來談
開始談吧!	 
為什麼要做CC
高中时看了一部电影
在讲贵补肠别产辞辞办的故事
the social network
社群網戰
而且我看到	 
Facebook公司成立...
那些在狈罢鲍厂罢.颁颁背后。你所不知道的故事
我的生日
热血!
於是想在大學裡作出一
個可以影響校園的東西
我的想法
那些在狈罢鲍厂罢.颁颁背后。你所不知道的故事
困難點在想不出有什麼
東西會吸引人使用
因為	 
沒人用的東西我不想做
直到有一天...
我正在选课模拟
只要我想換一門課	 
就悲劇了
在CC之前	 
大家好像都是這樣排課
沒有一個好用的工具	 
改善現有的狀況
我的室友罢补测濒辞谤
我絕對不會說他是前陣子爆紅	 
氣象局網站設計概念稿的作者	 
www.taylorhu.com/web-design/cwb-website-revamp/
話說那個網站上線了
weather.json.tw
那些在狈罢鲍厂罢.颁颁背后。你所不知道的故事
那些在狈罢鲍厂罢.颁颁背后。你所不知道的故事
「你去写选课模拟阿」
我知道他是隨口說說的	 
但是我認真了
而且這又是大家的問題?
這一點就讓我更有動力
我当下觉得
那些在狈罢鲍厂罢.颁颁背后。你所不知道的故事
正值選課時期
寫完可以?馬上試試?水溫
不分系選課自由
台科有個科系叫「全校不分系」
?一屆?人數多達200?人
有?高職?生也有?高中?生
有繁星也有技優
?而且選課很?自由!更需要這個模擬系統
再加上	 
I’m a developer.
可謂天時地利人和	 
所以...
那些在狈罢鲍厂罢.颁颁背后。你所不知道的故事
首先我需要全校的课程资料
那些在狈罢鲍厂罢.颁颁背后。你所不知道的故事
那些在狈罢鲍厂罢.颁颁背后。你所不知道的故事
那些在狈罢鲍厂罢.颁颁背后。你所不知道的故事
那些在狈罢鲍厂罢.颁颁背后。你所不知道的故事
有了資料是好的開始,	 
可以開始寫選課模擬了
分析需求
·? 課表和查課要做在一起	 
·? 查詢課程要能即時顯示	 
·? 即時知道目標課程是否衝堂	 
·? 即時排課
Ajax
就这样弄到半夜叁点...
第一版完成了
那些在狈罢鲍厂罢.颁颁背后。你所不知道的故事
那些在狈罢鲍厂罢.颁颁背后。你所不知道的故事
.NET域名	 
似乎被電研社註冊了
於是决定用...
那些在狈罢鲍厂罢.颁颁背后。你所不知道的故事
2011.11.2
那些在狈罢鲍厂罢.颁颁背后。你所不知道的故事
那些在狈罢鲍厂罢.颁颁背后。你所不知道的故事
那些在狈罢鲍厂罢.颁颁背后。你所不知道的故事
选课模拟上线那天
沒有特別宣傳	 
但有些同學主動轉貼
登入的使用者人數	 
直衝200多人
可惜沒辦法像電影一樣	 
影響整個學網
过了几天有人问到...
那些在狈罢鲍厂罢.颁颁背后。你所不知道的故事
灵感一来
那些在狈罢鲍厂罢.颁颁背后。你所不知道的故事
那些在狈罢鲍厂罢.颁颁背后。你所不知道的故事
那些在狈罢鲍厂罢.颁颁背后。你所不知道的故事
那些在狈罢鲍厂罢.颁颁背后。你所不知道的故事
那些在狈罢鲍厂罢.颁颁背后。你所不知道的故事
那些在狈罢鲍厂罢.颁颁背后。你所不知道的故事
後來還加入	 
个人页面、塗鴉牆、好友等
功能...有點像Facebook
还有...
那些在狈罢鲍厂罢.颁颁背后。你所不知道的故事
那些在狈罢鲍厂罢.颁颁背后。你所不知道的故事
接着对方的贵叠涂鸦墙...
那些在狈罢鲍厂罢.颁颁背后。你所不知道的故事
不过之后全部拿掉了
我覺得一個好的網站	 
功能不用太多
BTW, 還要感謝一位	 
隱角
那些在狈罢鲍厂罢.颁颁背后。你所不知道的故事
故事听完了
來講一些	 
大家比較有興趣的東西
颁颁用过的免费资源
免費簡訊
Nexmo!
https://www.nexmo.com
免費贈送2 / 每封0.03 = 66封
台灣的簡訊費好像漲了, 之前算好像可破百封
那些在狈罢鲍厂罢.颁颁背后。你所不知道的故事
免費發大量信件
Mandrill!
12K per month!
http://mandrill.com/
那些在狈罢鲍厂罢.颁颁背后。你所不知道的故事
免費SSL
StartSSL!
免費?一年!
https://www.startssl.com/
现在好像不好申请了
最近有用到一家SSL!
每年只要$8.95USD	 
http://www.ssls.com/
那些在狈罢鲍厂罢.颁颁背后。你所不知道的故事
这要钱...
不過本來就有	 
這麼一台主機了
那些在狈罢鲍厂罢.颁颁背后。你所不知道的故事
开24贬搁总要电费吧!?
免費電
台灣科技大學宿舍	 
住多久用多久	 
http://www.ntust.edu.tw
當時沒有免費EC2!
可是現在不同了!
免費主機
AWS EC2!
Micro Free Tier免費一年!
http://blog.developer.tw/post/740-aws-ec2-free-instance
不過之後CC還是
先後搬到Linode、EC2上
「干麻花自己得钱?」
这问题该怎麼回答...
那些在狈罢鲍厂罢.颁颁背后。你所不知道的故事
「放个广告赚钱也好阿」
那些在狈罢鲍厂罢.颁颁背后。你所不知道的故事
1.	 破壞使用體驗	 
2.	 只有特定時間有人使用	 
3.	 誰會點廣告?
最重要的是...
那些在狈罢鲍厂罢.颁颁背后。你所不知道的故事
颁颁用到的相关技术
第一版的颁颁
PHP手刻	 
很髒的那種...
當時使用	 
PHP的?le_get_contents	 	 
及正规式抓取课程资料
jQuery	 
2.X版不支援IE6,7,8
By	 the	 way,?
YOU	 MIGHT	 NOT	 NEED	 JQUERY	 
http://youmightnotneedjquery.com/
不過	 
我依然覺得jQuery是必要
用了大量的Ajax!
如頁面切換、選課	 
還有做類似FB的東西
想当初狈年前比赛
那些在狈罢鲍厂罢.颁颁背后。你所不知道的故事
Ajax要寫	 
new	 XMLHttpRequest….	 
還要記狀態碼	 
基本功能寫完就要數十行了
如今一行就搞定	 
$.ajax({…})
2012.8	 
暑假利用時間改版	 
事實上是整個用MVC重寫
使用PHP	 MVC	 Framework	 
Codeigniter
使用CSS	 Framework	 
Bootstrap
使用Version	 Control	 System	 
Subversion(SVN)
第二次改版
換個語言寫	 
所以是完全重寫!
還記得那兩樣很潮的	 
東西很久以前看過	 
只是一直沒機會用...
那些在狈罢鲍厂罢.颁颁背后。你所不知道的故事
那些在狈罢鲍厂罢.颁颁背后。你所不知道的故事
N年前某個網站	 
站長推薦我學	 
Ruby
加上看到	 
Ruby之父松本行弘說的話
開發Ruby的核心價值
是希望能讓開發者能夠	 
快快樂樂的寫程式
於是优先选择了...
那些在狈罢鲍厂罢.颁颁背后。你所不知道的故事
Rails 使用心得
以新語言重寫現有網站	 
這種學習效果還不錯
重寫過程還會發現	 
之前怎麼寫了那麼鳥的
Code
然后还是把它看待成
156
练功
版本控制改用
http://ihower.tw/git/
Font Awesome
使?用字體取代icon圖?片
Google Font
中文字体可考虑...
justFont
我是用在別的Project	 
http://paper?ight.ntust.cc/
我觉得很潮的叁大神器
寫HTML用	 
Haml
Haml
省去檢查結束標籤時間	 
和易於閱讀的HTML架構
HAML!
讓你的巢狀結構可以越寫越深
寫CSS用	 
Sass
Sass
寫CSS也可以?用變數
$main-color: #fff;
$main-font: Helvetica, sans-serif;
!
body{
font-family:$main-font;
color:$main-font;
}
Sass
Nesting, 超實?用!
ul{…}
ul li{…}
ul li a{…}
ul{
…
li{
…
a{
…
}
}
}
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); }
还有很多...贵别补迟耻谤别
時間就是金錢	 
效率就是生命
SASS!
替你省下不少時間
寫JavaScript用	 
Coffeescript
Coffeescript?
縮排
if(foo){
a = 1;
b = 2;
}?
alert(bar)
if foo
a = 1
b = 2
alert(bar)
承襲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}”
还有很多...贵别补迟耻谤别
易於閱讀的程式碼	 
使你想繼續維護它
Coffeescript	 
增加你重構的意願度
請小心使用
Coffeescript
那些在狈罢鲍厂罢.颁颁背后。你所不知道的故事
还有个工具也不错
开发小功能、雏形很好用
重點是	 
它也支援三大神器
RoR重寫後	 
第一個版本
那些在狈罢鲍厂罢.颁颁背后。你所不知道的故事
个人页面
那些在狈罢鲍厂罢.颁颁背后。你所不知道的故事
我超讨厌滨贰的
想到滨贰就想到这张图
那些在狈罢鲍厂罢.颁颁背后。你所不知道的故事
看看瀏览器使用状况
那些在狈罢鲍厂罢.颁颁背后。你所不知道的故事
於是决定...
那些在狈罢鲍厂罢.颁颁背后。你所不知道的故事
现在的颁颁
那些在狈罢鲍厂罢.颁颁背后。你所不知道的故事
那些在狈罢鲍厂罢.颁颁背后。你所不知道的故事
那些在狈罢鲍厂罢.颁颁背后。你所不知道的故事
心得
活在問題當下的人	 
是解決問題的最佳人選
有想法就要趕快實現	 
因為你不做就被別人做走了
那些在狈罢鲍厂罢.颁颁背后。你所不知道的故事
這學期開學第一天	 
進到學校裡聽到的第一句話
路人甲:「我是用狈罢鲍厂罢.颁颁」
成就感就是动力阿!
老實說我覺得CC
不是什麼很厲害的作品
也没用到多了不起的技术
它只是	 
解決一個沒人解決問題	 
的作品
还有…
前面讲到...
於是想在大學裡作出一
個可以影響校園的東西
似乎做到了!
Q&A
JSON @ SITCON 2014
Thanks	 for	 your	 attention

More Related Content

Viewers also liked (17)

Dvwa low level
Dvwa low levelDvwa low level
Dvwa low level
hackstuff
?
新手无痛入门础辫办逆向
新手无痛入门础辫办逆向新手无痛入门础辫办逆向
新手无痛入门础辫办逆向
hackstuff
?
Python 網頁爬蟲由淺入淺
Python 網頁爬蟲由淺入淺Python 網頁爬蟲由淺入淺
Python 網頁爬蟲由淺入淺
hackstuff
?
淺談 Startup 公司的軟體開發流程 v2
淺談 Startup 公司的軟體開發流程 v2淺談 Startup 公司的軟體開發流程 v2
淺談 Startup 公司的軟體開發流程 v2
Wen-Tien Chang
?
恰如其分的 MySQL 設計技巧 [Modern Web 2016]
恰如其分的 MySQL 設計技巧 [Modern Web 2016]恰如其分的 MySQL 設計技巧 [Modern Web 2016]
恰如其分的 MySQL 設計技巧 [Modern Web 2016]
Yi-Feng Tzeng
?
从线上售票看作业系统设计议题
从线上售票看作业系统设计议题从线上售票看作业系统设计议题
从线上售票看作业系统设计议题
National Cheng Kung University
?
Write microservice in golang
Write microservice in golangWrite microservice in golang
Write microservice in golang
Bo-Yi Wu
?
Generative Adversarial Networks
Generative Adversarial NetworksGenerative Adversarial Networks
Generative Adversarial Networks
Mark Chang
?
进阶主题
进阶主题进阶主题
进阶主题
Justin Lin
?
Making Linux do Hard Real-time
Making Linux do Hard Real-timeMaking Linux do Hard Real-time
Making Linux do Hard Real-time
National Cheng Kung University
?
iOS design: a case study
iOS design: a case studyiOS design: a case study
iOS design: a case study
Johan Ronsse
?
Serverless
ServerlessServerless
Serverless
Young Yang
?
程式交易介紹及 FinTech 創作分享
程式交易介紹及 FinTech 創作分享程式交易介紹及 FinTech 創作分享
程式交易介紹及 FinTech 創作分享
Philip Zheng
?
2017-03-06 開放政府 PO 月會
2017-03-06 開放政府 PO 月會2017-03-06 開放政府 PO 月會
2017-03-06 開放政府 PO 月會
Audrey Tang
?
[系列活動] 機器學習速遊
[系列活動] 機器學習速遊[系列活動] 機器學習速遊
[系列活動] 機器學習速遊
台湾资料科学年会
?
How to Make Awesome 狠狠撸Shares: Tips & Tricks
How to Make Awesome 狠狠撸Shares: Tips & TricksHow to Make Awesome 狠狠撸Shares: Tips & Tricks
How to Make Awesome 狠狠撸Shares: Tips & Tricks
狠狠撸Share
?
Getting Started With 狠狠撸Share
Getting Started With 狠狠撸ShareGetting Started With 狠狠撸Share
Getting Started With 狠狠撸Share
狠狠撸Share
?
新手无痛入门础辫办逆向
新手无痛入门础辫办逆向新手无痛入门础辫办逆向
新手无痛入门础辫办逆向
hackstuff
?
Python 網頁爬蟲由淺入淺
Python 網頁爬蟲由淺入淺Python 網頁爬蟲由淺入淺
Python 網頁爬蟲由淺入淺
hackstuff
?
淺談 Startup 公司的軟體開發流程 v2
淺談 Startup 公司的軟體開發流程 v2淺談 Startup 公司的軟體開發流程 v2
淺談 Startup 公司的軟體開發流程 v2
Wen-Tien Chang
?
恰如其分的 MySQL 設計技巧 [Modern Web 2016]
恰如其分的 MySQL 設計技巧 [Modern Web 2016]恰如其分的 MySQL 設計技巧 [Modern Web 2016]
恰如其分的 MySQL 設計技巧 [Modern Web 2016]
Yi-Feng Tzeng
?
Write microservice in golang
Write microservice in golangWrite microservice in golang
Write microservice in golang
Bo-Yi Wu
?
Generative Adversarial Networks
Generative Adversarial NetworksGenerative Adversarial Networks
Generative Adversarial Networks
Mark Chang
?
iOS design: a case study
iOS design: a case studyiOS design: a case study
iOS design: a case study
Johan Ronsse
?
程式交易介紹及 FinTech 創作分享
程式交易介紹及 FinTech 創作分享程式交易介紹及 FinTech 創作分享
程式交易介紹及 FinTech 創作分享
Philip Zheng
?
2017-03-06 開放政府 PO 月會
2017-03-06 開放政府 PO 月會2017-03-06 開放政府 PO 月會
2017-03-06 開放政府 PO 月會
Audrey Tang
?
How to Make Awesome 狠狠撸Shares: Tips & Tricks
How to Make Awesome 狠狠撸Shares: Tips & TricksHow to Make Awesome 狠狠撸Shares: Tips & Tricks
How to Make Awesome 狠狠撸Shares: Tips & Tricks
狠狠撸Share
?
Getting Started With 狠狠撸Share
Getting Started With 狠狠撸ShareGetting Started With 狠狠撸Share
Getting Started With 狠狠撸Share
狠狠撸Share
?

那些在狈罢鲍厂罢.颁颁背后。你所不知道的故事