---
date: "2023-09-01 14:08:05"
---

# zuzugo 租租狗：一個租屋網站資訊的自動通知系統

> [!TLDR]
> zuzugo 是一個被我暫時放置的專案，簡單來說就是 591 租屋網爬蟲。
>
> 不過這個專案，既幫助我找到現在的租屋處，而且能夠發一篇貼文記錄，也算是功成身退了 XD


介紹一個我在 2023 上半年做的專案：其名為「[zuzugo 租租狗：屬於你的租屋快訊](https://github.com/Yukaii/zuzugo)」。

> _There are only two hard things in Computer Science: cache invalidation and naming things_.
>
> -- Phil Karlton

電腦科學最難的兩件事就是快取失效與命名。雖然已經很老哏了，但好哏就是能一用再用，那就先從專案名稱開始聊起吧！

## 何來「租」？何謂「狗」？

這要說起「網路爬蟲」這老題目了，軟體工程師們追求的最大的自動化，在此體現。

開瀏覽器用人眼閱讀，BAD！寫爬蟲程式自動抓取，GOOD！

追求最偷懶的方式完成工作，同時又花了比單純人工多 _十倍_ 的力來達成，~~這才是軟體工程之道！~~

爬蟲爬蟲爬蟲......就想到了狗爬式！！俗話說的好，「一個好的開源專案都需要有一隻動物來當吉祥物」，那就決定是你啦，可愛的狗勾！

正巧決定名稱時想起另一個專案 [bbgo](https://github.com/c9s/bbgo)，逼逼狗，雖然 bbgo 的 BB 是 Bollinger Bands，go 是程式語言，但因為念起來有趣好記，總是要疊字字一下下的吧！

於是，租租狗 zuzugo 這個名字就這樣誕生啦！

## 聊聊技術

所有的入門的 [^1]，通通都得是免費的！租租狗專案中使用了以下的套件以及技術方案：

- 使用 Next.js 並架於 Vercel 上
- Background Jobs 和 Cron Task 使用 [Inngest](https://www.inngest.com/) 的免費方案
- 資料庫用 [supabase](https://supabase.com/) 免費方案
- 使用辣個[惡名昭彰效能不好](https://www.prisma.io/blog/prisma-5-f66prwkjx72s)的 Prisma 來當 ORM
- 用 [`jsx-slack`](https://github.com/yhatt/jsx-slack) 來寫 Slack 訊息
- 用 [bolt](https://github.com/slackapi/bolt-js) 和 [Next.js 的整合](https://github.com/seratch/slack-bolt-extensions)來做 Slack Bot
- 用 [`@seratch_/bolt-prisma`](https://github.com/seratch/slack-bolt-extensions/tree/main/packages/bolt-prisma) 把 [NextAuth](https://next-auth.js.org/) 的 Slack Oauth 和 Bolt 的認證整合在一起！

想想當初這篇會一直躺在草稿的理由就是做的過程太多太煩，一堆服務套件大雜燴，好像都可以寫一點，但又懶的寫。~~還是這邊就請大家自己翻 [code](https://github.com/Yukaii/zuzugo) 了，反正都開源，如果有問題再來發 Issue 這樣 w~~

### 前端部分

在這個專案，爬蟲和前端反而是比重較小的。591 的爬蟲大家都寫過了，我就搜了一個用 TypeScript 改，修掉小 bug 和當時已經不能用的部分。租租狗這個專案也沒有網頁的前端，通知系統就是 Slack 和 Line，所謂「前端」就是 API 的 Payload。也因為用了 `jsx-slack` 這個用 JSX 來寫 Slack 訊息的套件，在修改 Slack 輸出時像在寫 React，才帶給我「我在寫前端」的錯覺 XD （Yes, exactly learn once and write everywhere :p）


https://github.com/Yukaii/zuzugo/blob/main/lib/slackApp/components/Subscriptions.tsx

### 用 Inngest 來做 Background Jobs 和 Cron Tasks

因為用了 Vercel 這種 Serverless 產業鏈，所以 Background Jobs 那些就要另外找方法解決，剛好 Inngest 就和 Vercel 深度整合就來試試了，發現還不錯呢！

比如說 Slack bot 的 webhook callback 需要在一定時間內回傳，此時就可以用 Inngest 排程任務，把 webhook payload channel 等資訊 enqueue 起來，然後先回個 response 200，之後在回傳訊息給使用者，即使需要長時間的查詢，也能打造高互動性的 Slack Bot UI！~~（這邊沒有在臭 prisma 的 startup time，絕對沒有）~~

### NextAuth x Prisma x Bolt 的三重奏！

怎麽這麼像大尾 YTB [多米大人](https://www.youtube.com/@domidolosobig)的標題！不行！！！

詳細過程大家可以看 [PR#94](https://github.com/Yukaii/zuzugo/pull/94)，會這樣寫絕對不是因為時間過太久所以我忘記了。

根據[我當時留言](https://github.com/Yukaii/zuzugo/pull/94#issuecomment-1451975741)的內容，Slack 有 OAuth 和 App Installation 兩種授權 App 的方式，我最後實作時的做法是先讓使用者裝完 App 後，redirect 再走一次 OAuth 認證，讓使用者在畫面盡量簡單的條件下，完成兩次安裝。

[^1]: https://www.youtube.com/watch?v=brl7Zf1FGpc ，天大地大，沒想到在 2023 還能用這個哏，我還是走不出台科啊（誤）

## 問題

至於為何一個通知系統會搞到要搞 OAuth 和 Slack Installation 呢？其實原本「又」想做成能多人共用的服務了。

Slack 的通知上原本你可以用 Webhook URL 的方式手動設定，但是要做到讓一般非開發者的使用者拿到 Webhook 的過程實在是太麻煩了，就想照 [slacker](https://github.com/vercel-labs/slacker) 的方式，用 Slack App installation 的方式來做來讓大家可以輕鬆安裝租租狗到自己的頻道。

扯到多人就扯到維護，扯到維護就扯到錢（~~就先別算你寫扣的這些時間了~~），不收個錢實在說不過去。

不過拿 591 爬蟲的資料來收錢本身就是個問題了，大家可以參考[這個 Issue 的整理](https://github.com/Yukaii/zuzugo/issues/63)。用圖來說就是：


有著判例和法規的限制，身為一個大人，自然不會知法犯法的，對吧。

於是就讓租租狗這個專案繼續放置到下次要租房子的時候，再來重啟吧 XD

## Shoutout

這邊要特別感謝 [Steward](https://github.com/steward379/)，他為了租租狗真的畫了一隻狗作為專案 Logo，順帶一題，我們還有用[小孤獨野鎚蛇](https://home.gamer.com.tw/artwork.php?sn=5609336)的配色做了一個同人版，不過這邊就不方便放了（逃


## 彩蛋

在今年年初的 g0v 第 54 次黑客松有進行了一次[成果發表](https://www.youtube.com/watch?v=VKjeLGKLNEs)，報告租租狗當時的進度，有興趣一睹站長尊容的可以移駕觀賞（？？）

因為最近在留長髮，這個影片也順便記錄了半年多前的頭髮長度 XDD 關於男孩子留長髮的話題，未來會在寫一篇新的文章來介紹，敬請期待！

（完）