2018一些重要的地雷跟突破
2018
即將結束
花一點時間整理一下今年一些比較的地雷跟突破
Google Analytics Report API
之前在公司的某個專案有使用到Google Analytics Report API(那時候是使用v3)
那時候看配合後端人員在串這個
光聽完他講解串接的流程就傻眼
因為真的太過複雜
而且還不是程式寫完就好
之後每次只要佈署一個新的客戶
就要到Google API Console做一堆設定
最近自己的專案也開始嘗試串這個API
幸運的是
我最近開始串的時候有出了v4
v4有些流程有簡化(包含Google API Console的設定)
讓我沒有串的那麼痛苦
而且往後的設定也算是輕鬆
Google Photo API
本來串這個API是打算可以在自己系統中使用Google Photo當圖片庫
方便直接設定文章圖片
這是串好的樣子
一開始想的很美好
後來也真的串好了能夠設定文章圖片
結果後來發現圖片過沒多久就失效
最後仔細看完官方文件才發現
Google Photo好像不太想被直接拿來當圖片庫來call
所以他的圖片url只有一小時有效
看到這裡才有點後悔一開始沒仔細看清楚文件
結果花了一個禮拜發現加入系統的圖片url只有一小時有用
但是其實說真的那一個禮拜也不是真的白白浪費
如果真的要可行只要我系統有一個圖片庫系統
新增圖片的方式除了上傳
還能用Google Photo API抓取圖片下載回來再上傳
這種情境下其實一個小時的時效問題就不是問題
當然也學到教訓
之後看文件還要再看仔細一點
未來再找機會把這個功能弄回自己系統中
Webpack跟yargs的矛盾
今年我開發滿多Node.js的App
做了很多Server Side的Micro Service
像是puppeteer-server-side-render、cron-service、line-weather-notify、ciao-deploy
這種Micro Service做多了之後發現很多都需要設定檔
而我們通常都透過CLI的參數來指定設定檔的路徑
或是設定其他CLI的參數來做更多設定
這時候我們就會需要類似yargs這種專門處理CLI參數的Node.js套件
一開始我是希望透過CLI參數指定js或json設定檔
然後透過yargs取得路徑後在Node.js中動態import那支設定檔
但是Webpack最大的問題就是打包後路徑會直接寫死
動態載入設定檔的方法不可行
後來找到終於找到解決方式
想要享受Webpack帶來的便利
就要解決yargs動態載入的問題
yargs在Webpack中不能直接使用
不過沒關係
因為我最主要只是想使用它本身最厲害的處理CLI參數功能
所以只要裝它的核心功能yargs-parser就可以了
另外因為不能動態import js
所以我們要在CLI帶入json設定檔路徑
再利用Node.js的readFileSync去讀那隻json設定檔
大概是這樣
就可以解決上述問題然後繼續使用Webpack開發Node.js
// CLI範例: node app.js --config=/home/$USER/config.json
import yargsParser from 'yargs-parser'
global.args = yargsParser(process.argv.slice(2))
// ...
const config = JSON.parse(readFileSync(argv.config, 'utf8'))
這個問題找了一小段時間才找到核心問題還有解法(這段期間也不知不覺開發了兩三個Service)
當然
如果不是用Webpack開發Node.js的話
就不會遇到上述問題
就單看開發人員對於Webpack的喜好程度來取捨
我個人是覺得開發好打包成一支js真的很好傳輸、發佈
不用每次佈署都要clone專案然後yarn install
所以就偏向使用Webpack開發
Ajax Reuqest因為url多加一個斜線導致被拒絕
這個問題算滿蠢的
簡單來說大概就是原本不知道下面兩種url其實是不一樣的
/api?foo=bar
/api/?foo=bar
結果造成發ajax的時候一直被自己的Server拒絕
看Chrome的Debug Network一直出現ajax request 301 Moved Permanently這個錯誤
最好笑的是這個搞錯的api是拿來上傳圖片的api
而且傳到server存好圖片資料後圖片再傳到S3
所以一開始我一直以為是在S3那邊被擋掉
一直去看S3的上傳檔案的文件
然後看301 error的處理方式
結果都找不到解
更頭痛的是這個問題本機開發都沒有
只有上正式機EC2才出現
所以一開始真的不知道怎麼debug
還好後來檢查前端發的ajax url後有發現
改完之後就搞定
結束了一場鬧劇
寫了一個Chrome Extension給家人方便課程搶票
這個課程是我妹要上畫畫才藝班的課
然後這個課在台中算是滿搶手
每次開放報名都三五分鐘就搶光
我媽說之前他很多次都搶不到
兩年前開始我就開始幫忙搶票
最一開始我是先寫一段js貼在chrome console中執行
算是快速填完表單
最後只要手動人工填完驗證碼就好
那次開始之後我們都是第一個搶到
後來發現需要自動倒數時間+自動填表單比較方便
所以去年開始我是用那時候剛接觸的nightwatch.js來寫自動填單(雖然nightwatch.js是測試工具)
用nightwatch.js自動倒數+填單後就更加方便了
但是唯一麻煩的地方就是我還是要搶課前開啟nightwatch.js來倒數搶票
每次搶課都是早上九點要搶
結果我都要八點我就起床開nightwatch.js來跑
有時候真的不太想那麼早起
所以今年就稍微研究了一下chrome extension
寫了簡單的套件
可以先設定好所有要填的資料
只要按下倒數就可以了
這個因為操作比開nightwatch.js簡單多了
我做好這個chrome extension後
就可以交給我媽自己搶票了
醫療系統的X光片結節標識系統做到跟桌面軟體一樣
這個是公司的一個專案
客戶是打算做一個線上的醫療系統
主要功能就是讓使用者能夠上傳自己的肺部X光照
然後交給醫師透過我們做的系統標識有肺部結節的地方
最初客戶的客戶(也就是醫生)是透過一套叫Osirix的Mac桌面軟體來標識結節
而現階段是要把這套標識的功能搬到Web上
這個對我們來說算是滿大的挑戰
簡單講一下標識界面的主要需求
- 要讓醫生能夠透過滑鼠框出有問題的結節(這個動作叫標識)
- 照片能夠自由放大、縮小、拖曳移動(因為結節有時候很小)
- 一個人的X光照就有上百張，客戶希望能夠透過滑鼠滾輪快速切換X光照而且不能有任何delay(基本上要快到跟動畫一樣)
- 已經標過得標識(上面第一點的動作)要可以點兩下修改(包含移動、縮放)
- 大量的大檔案上傳而且要能續傳
一開始光知道這幾個主要需求就有點頭痛
真的是不太好做
尤其是要可以縮放
這個會影響到畫標識(方框)的相對位置
還有大量圖片快速切換而不能卡的問題(最後解法是先預載用server push載入全部上百張的圖片然後滑鼠滾輪切換z-index來更換圖片)
這中間tune了又tune終於解決了各種極端的需求
算是在工作上真的有遇到大量技術困難點的一次經驗
不過搞定後經驗值算是有提昇
最後交付時客戶的回應也超乎預期
只說了一句：系統真的很好用，跟原本的桌面軟體幾乎一樣
算是目前聽過最好的回應
這段期間也研究了許多套件
然後把這些套件使用到極致
像是jquery-panzoom、jquery-ui的(draggable resizable)、uppy
還有學到平常不會用到的續傳協定tus
算是成功、圓滿而且滿有收穫的一個專案
因為head中錯誤的html格式，造成Facebook crawler把meta移到body中
先說一下結果
這個問題主要是因為我在meta中放入不正確的html
然後Facebook Crawler來爬的時候
vue-meta設定好的tag就被移到body中(不知道為什麼，但是這個狀況只在Facebook Crawler中會發生)
造成Open Graph Tag整個抓不到
事發原因
後來才發現
因為我系統提供後台可以設定Google Tag Manager的功能
正常的GTM代碼是一個script tag包起來的代碼
但是我系統初始化時那個GTM代碼的欄位是一串預設字串Google Tag Manager
然後前端抓到這個字串就直接塞到head中
因為純字串並不是正確的HTML格式
然後就造成上述的結果
Debug過程
雖然是一個小小的錯誤
但是debug還滿久的
因為一開始沒想到是HTML格式問題
還以為是我的SSR Crawler壞掉
還是vue-meta這個套件的問題
找了快兩個禮拜才發現原來是自己系統塞了純字串到head中
這個問題沒遇過還真的不知道會連到影響到meta
Line Notify API發圖片的問題(axios在Node.js不能使用multipart上傳檔案)
在今年的最後一個月
有開發一個用Line做氣象通知的小專案
專門發氣象通知給家人群組用的
其中有一個功能是用puppeteer截空氣盒子的空氣品質截圖
截圖後要用Line Notify API把圖片發出去
一開始我是用axios發Line Notify API
使用的時候發現單純發訊息的時候會成功
但是只要用multipart夾帶圖片時就會被擋掉
而且Line的Server也只回應說圖片不正確
查了一下發現有人跟我遇到一樣的issue
axios其實在Node.js中不支援multipart
雖然issue內有其他人提到說可以裝form data的package來解
但是我裝完form data試了很多次還是不行
後來直接用curl來發Line通知
而且更簡單幾乎一行就解決
搞定後終於可以繼續開發下去