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

那些在 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域名
似乎被電研社註冊了

沒有特別宣傳
但有些同學主動轉貼

登入的使用者人數
直衝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/

不過本來就有
這麼一台主機了

免費電
台灣科技大學宿舍
住多久用多久
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的核心價值
是希望能讓開發者能夠
快快樂樂的寫程式

以新語言重寫現有網站
這種學習效果還不錯

重寫過程還會發現
之前怎麼寫了那麼鳥的
Code

版本控制改用
http://ihower.tw/git/

Font Awesome
使⽤用字體取代icon圖⽚片

justFont
我是用在別的Project
http://paperﬂight.ntust.cc/

我覺得很潮的三大神器

省去檢查結束標籤時間
和易於閱讀的HTML架構

HAML!
讓你的巢狀結構可以越寫越深

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

縮排
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
增加你重構的意願度

開發小功能、雛形很好用

重點是
它也支援三大神器

RoR重寫後
第一個版本

活在問題當下的人
是解決問題的最佳人選

有想法就要趕快實現
因為你不做就被別人做走了

這學期開學第一天
進到學校裡聽到的第一句話

路人甲：「我是用NTUST.CC」

老實說我覺得CC
不是什麼很厲害的作品

也沒用到多了不起的技術

它只是
解決一個沒人解決問題
的作品

JSON @ SITCON 2014
Thanks for your attention

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

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (17)

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