<style> pre.flow-chart > svg{ height: 80vh; margin-top: 0px; } </style> # Url Shortener [url shortener](http://172.104.104.31:3000) --- # ~~仙貝~~先備知識 - [ ] install node - [ ] javascript - [ ] arrow function - [ ] npm - [ ] express - [ ] 一顆願意 debug 的心 - [ ] google 的能力 --- # 原理 ---- ## 一對一對應 ---- | origin url | code | | --------------------------------------------- | ----- | | https://www.youtube.com/watch?v=oUIDL4SB60g | hk | | https://hackmd.io/@izccwinter/url-shortener#/ | slide | | https://oj.ckcsc.net/problem/0001 | hw | ---- 看到 `code` 對應到 `url` --- # 我們需要的功能 ---- ```graphviz graph graphname { index -- redirect index -- backdoor index -- admin index -- view } ``` --- # 頁面介紹 ---- #### index ```flow start=>start: 輸入網址 button=>operation: 產生短網址的按鈕 send=>operation: 將資料傳送至後端 end=>end: 進入view頁面 start->button->send->end ``` ---- #### create ```flow start=>start: 取得 code isbackdoor=>condition: 確認後門口令 verifyUrl=>condition: 確認是否為有效 url excludeItself=>condition: 排除短網址的 url isBackdoor=>condition: 確認是否是後門 randomCode=>operation: 取得隨機 code customCode=>operation: 自訂 code saveRecord=>operation: 儲存紀錄 backdoor=>end: 傳送後門頁面 error=>end: 錯誤頁面 root=>end: 首頁 view=>end: view start->isbackdoor isbackdoor(yes)->backdoor isbackdoor(no)->verifyUrl verifyUrl(yes)->excludeItself verifyUrl(no)->error excludeItself(yes)->root excludeItself(no)->isBackdoor isBackdoor(yes)->customCode->saveRecord isBackdoor(no)->randomCode->saveRecord saveRecord->view ``` ---- #### view ```flow start=>start: 取得 code （從 get method，或是 backdoor） getData=>operation: 去 DB 撈資料 ifExistence=>condition: 有這筆紀錄 notFound=>end: 找不到 render=>end: 渲染出漂漂 der 畫面 start->getData->ifExistence ifExistence(no)->notFound ifExistence(yes)->render ``` ---- #### redirect ```flow start=>start: 取得code（從 get method） getUrl=>operation: 去 database 撈資料 ifExistence=>condition: 有這筆資料 redirect=>end: 重定向（轉跳） notFound=>end: 找不到 start->getUrl->ifExistence ifExistence(yes)->redirect ifExistence(no)->notFound ``` ---- ### 進階選項 ---- #### admin ```flow start=>start: 取得 cookie isAdmin=>condition: 如果是管理員 getData=>operation: 去 DB 撈資料，丟給 client admin=>end: 管理員頁面 redirect=>end: 當作 code 送到 redirect 處理 start->isAdmin isAdmin(yes)->getData->admin isAdmin(no)->redirect ``` ---- #### backdoor ```flow start=>start: 開始 ifCorrect=>condition: backdoor token 是否正確？ notCorrect=>end: 當作一般網址處理 setToken=>operation: 設定 token backdoor=>end: 送出後門頁面 start->ifCorrect ifCorrect(no)->notCorrect ifCorrect(yes)->setToken->backdoor ``` --- # 其他應用 ---- 1. 聊天室 [教學](http://single9.net/2017/12/node-js-%E8%88%87-socket-io-%E5%8D%B3%E6%99%82%E8%81%8A%E5%A4%A9%E5%AE%A4%E5%AF%A6%E4%BD%9C/) 2. TODO list [教學](https://medium.com/@atingenkay/creating-a-todo-app-with-node-js-express-8fa51f39b16f) 3. 報天氣 APP [教學](https://codeburst.io/build-a-weather-website-in-30-minutes-with-node-js-express-openweather-a317f904897b) 4. 畫廊 [教學](https://webapplog.com/express-js-tutorial-instagram-gallery-example-app-with-storify-api/)