ACG Period

我和Ruby想寫一個能夠自動通知漫畫出版的應用程式，我們需要一個平台來訂閱，並用Line來通知。我用Figma畫了framework，確認我們的想法一致，我再製作更精細的mockup。 Ruby開始爬蟲並存到資料庫，我則負責前端，我當時還不知道怎麼寫前端，所以我們暫時放下這個想法......

直到最近，Ruby又提起了這個專案，他認為現在我的能力可以完成ACG Period的前端了，甚至後端也可以交給我，所以我開始動工，我也想證明我做得到。 我們決定先完成小目標：把首頁完成，而且能透過api抓取資料庫，顯示最新出版的資訊。

我遇到的阻礙

• 怎麼在前端使用測試驅動開發？
• 我沒有在前端串接過api
• 我沒有寫過api，我該怎麼建立、又該怎麼寫api的測試？

我解決和學習到的

在前端實作測試

有了上次使用測試驅動開發（TDD）的經驗後，我希望在往後的專案都能使用。我尋找前端的測試工具，讀了幾篇文章後決定使用Jest、React Testing Library和Cypress來測試前端的功能。 不過前端的測試文章不多（或只是我沒找到），我在撰寫時還是不太確定這樣測試是否足夠，目前會做的測試是功能正常或該出現的圖案、文字有顯示在頁面上。

在讀React Testing Library的文件上頭強調：「只要假設你預期做什麼事情時，畫面會發生什麼變化即可。」 也就是說寫測試式時不必去思考被測試的程式是怎麼運作的，只要專注在期望會得到的結果即可。 才讓我理解測試不過是這麼簡單的事，我現在都依照這個原則來撰寫測試。

我還沒看到適合測試樣式的方法，現在習慣先寫測試的我，每次在直接寫樣式時都有種類似裸著身體的不安感（不知為何我只想到這個形容詞）。

串接api

完成靜態的部分後，我開始寫需從資料庫獲取資料的部分，因為我沒有接過api，這對我來說也是個挑戰，除了該怎麼接之外，還得知道該怎麼測試。 後來我參考其他api的回傳格式來假想屆時api會回傳的資料，搭配Jest的mock function、Cypress的intercept來仿造http request，測試成功接收到資料、失敗時畫面想要呈現的內容。再使用axios和React hook串接和呈現api回傳的內容，這次比個人網站多了些互動的功能，趁機多瞭解了React hook的state。

另外，為了有較好的SEO和使用者體驗，我利用了next.js讓首頁採用SSR的方式呈現前十筆最新的出版資料， 但這部分不能用仿造response的方式來測試，在api完成前，我先直接篡改next.js會產出的資料，好讓測試可以通過。 之後完成api的時候，我就直接使用真正的api來測試是否有順利運作，因為前面有仿造http request，串接真正的資料時只要稍作修改很快就上線了。

用Cypress測試直接看到畫面，能更清楚問題發生的樣子，只是耗費的時間較長，感覺也比較耗電腦資源；Jest需要想一下測試失敗的原因，不過測試的速度非常快。

利用Django撰寫api

Ruby已經寫好爬蟲的資料庫，我只需要寫api。因為先前我用過Django，因此決定使用Django REST framework。 畢竟我從沒寫過api，還是參考了幾篇教學後才明白這個框架帶來的便利有什麼，（也一如往常地）煩惱了該怎麼寫測試。

先前我資料庫是使用Django內建的sqlite，這次使用的是mySQL，且又是已經建立好的資料庫，還好Django有提供方法連接外部資料庫。 因為我設定僅能讀取外部資料庫，不可寫入，導致在測試時遇到困難。 因為測試時會創立一個暫時的測試用資料庫，好方便嘗試各種功能，但不可寫入的限制導致其無法運作，後來找到折衷的辦法，讓測試時可以暫時新增測試資料庫。 測試寫完後，因為這次要寫的內容簡單，只需列出最新出版書籍的清單，用DRF很快就完成了。

最後...

我完成了第一次串接和撰寫api。我完整地把前後端都寫完，而且無論前後端都有使用測試來確保功能沒問題，並且把成功部署到VPS上，加上SSL憑證。 歡迎到ACG Period網站看看。 之前我是使用Django來寫自家公司訂貨後台，沒有做前後端分離，因此這次分開撰寫對我而言又是一個重大的里程碑！