前言
先前有寫過六角學院舉辦"前端精神時光屋"跟"JS地下城"的做過了一些side project的練習(但其實都沒撐到最後....這真的很需要恆心跟熱情), 但這都不算自己真正想做的project, 以前也曾經想自己來想個題目, 練練自己的技能, 但說實在, 自己硬想出來的題目也是做做停停的, 一個TodoList都還做不完, 當然後來也想, 自己想做自己的side project, 有時候把願景放太大, 自己想做的功能很多, 想要多炫, 後來發現都也只是想想…
正逢這幾周周末都在下雨, 本想出去看個電影, 但我個人的習慣都會去PTT電影版查查想看電影的評價, 好壞雷的比例也是我決定要不要看這部電影的參考指標, 不過每次就是要從登入ptt ->進入電影版 ->下電影關鍵字 -> 過濾新聞或其他無關評價的文章-> 自己再用瀏覽腦海中統計, 雖然只要習慣了操作方式, 似乎其實不會花太多時間, 不過有鑑於自己對於操作繁瑣的事情容易感到厭煩, 而且這種繁瑣的操作也不符合自己在做UI的設計模式, 所以自己就想說能不能有一個網站, 可以直接知道這部電影的好壞雷的各有多少。想想自己也學了前端這麼久, 後端好歹也碰過一些, 應該是可以來試試看吧!
捲起袖子, 開始自己第一個Side Project
首先先大概想一下預期需要的技術
- Web Server/API
- UI
- 網頁爬蟲
有鑑於先前自己的經驗, 先別把需求弄得太多太複雜, 先專注在自己主要的需求
UI查詢 -> server 爬蟲 -> 過濾網頁結果 -> 回傳過濾結果
Web Server
要用JS起一個web server, 最簡單的方式就是用Node.js大家最熟悉的框架 - Express.js, 另外Express 有提供一個express-generator , 直接產生一個web server 並已經幫你建好server的環境設定跟檔案, 例如UI檔案(目前是使用jade, html板模), router, log模組, error handler等等
思考脈絡
首先, 我需要先想想資料要從哪裡取得, 通常逛PTT都是透過PCMan或是手機APP, 但如果要從node server 爬蟲, 目前只想到最簡單的作法是去爬網頁內容, 幸好, PTT有網頁版, 這樣一來資料來源就有了。
接著就是要把他抓下來, 一般大家做爬蟲, 比較常看到的就是用python, 或是perl。 不過這兩樣東西很久沒碰了, 如果只是為了這個小小的專案再去複習這時間成本有點高, 並且我的目的也是可以呈現在網站上, 所以這也是我當初選擇Express其中原因之一。好像有點離題了…., Node server 抓網頁內容下來很簡單, 但要解析內容出我想要的內容卻沒那麼容易, 以前的做法都是用regular expression - 正規表示法, 一 一過濾, 但正規表示法沒那麼常用, 而且要組成正確的真的需要試很多次, 還不一定可以合乎需求, 所以放棄了這個方法。請教了google大神, 很快地就可以找到工具了 - cheerio。這東西讓在Node server 爬蟲變得很簡單。簡單的說他就是可以在nodejs用jquery的語法去處理server抓下來的網頁。身為一個前端, jqeury基本上是大家入門的時候都會學到的工具, 所以要熟悉這個工具不需要花太多時間就可以上手。
UI呈現
有了資料, 也有爬蟲工具, 接下來要想的是要呈現甚麼東西。目前想到的關注點:
- 使用者搜尋
- 好/負/普/無 雷文章以及無法分類(例如新聞)的文章數量
- 好雷佔所有好/負/普文章比率
- 保留各篇心得文章的連結, 至少還是看的到心得內容
網頁內容篩選
目前要分辨這篇心得文章的好負雷, 最快的方式就是看它的標題分類, 也就是像"[好雷]XXX", “[負雷]OOO”, 不過到最後發現有些人會把好壞的評價寫在標題內, 像是"[雷] 超好雷XXX", 目前還是暫時放在其他當中, 不過這類文章的比例不多, 最後算出來的評價雖然還是有些誤差, 不過不至於差太多, 還是保有一些參考價值。
再來就是關鍵字問題。這問題是最棘手，因為中文形容詞很多。目前都是使用最常見的關鍵字來篩選, 等看到有新的詞彙再慢慢加入。目前分成四類
"好雷" "負雷" "普雷" "其他"
好雷: "好", "爽", "佳", 都是好雷文章常出現的關鍵字負雷: "爛", “負” 就是歸類成負雷文章普雷”: "普" 就是不好不壞剩下的(無雷, 新聞等等)無法被歸類的就是分到其他
成果
剩下實作的部分就是一些單純的功能, 統計, 顯示清單, 樣式等等, 就不多贅述, 其他的功能。
最後網頁做完後, 最後還有一個最重要的步驟是我可以隨時隨地都可以使用到這個網站, 不然做這網站就功虧一簣了。最簡單的方法就是用docker 包成image 丟到aws上, 在EC2起一個instance跑
畫面
心得
其實沒想到自己真的會動手做了一個自己想要做的網站, 其實還是覺得有點不真實, 一直以為自己是個很懶, 很難在工作以外還會動手寫程式, 算是蠻大的一步, 不過目前還是不想花太多時間在工作以外的時間, 畢竟工作整天都在寫程式, 還在要假日時間寫很怕會上班的時候反而不太想寫XD
====
後記
因為aws 超過一定的額度會收費, 改用heroku不用錢, 可以用爽爽
附上網址: https://ptt-movie-crawler.herokuapp.com/
這樣就可以給大家玩玩
===
再更
因為Heroku 今年(2022/11)沒有免費版的版本了…
所以我再換新的免費PAAS服務Render
但這個服務的免費版有個缺點, 只要這個服務超過15分鐘沒有收到request, 那麼render會先暫時停止這個服務, 等有request 需要再花大約30s才能重新運行此服務