沒有官方拍賣的我們為了能夠順利玩遊戲自己架了第三方交易媒合系統(Artale Market)

前言

大約在今年的五月初入坑了楓之谷世界上面的楓之谷懷舊服 - Artale，這遊戲上面有個內建的交易系統，可以讓玩家刊登物品來進行交易，但是這個系統在 5/15 的時候，因為效能問題而炸裂，官方決定暫停這個系統的運作，並宣稱會進行內部重構，時至今日已經過了兩個月，仍然還沒修復完成。

玩家整理的事件懶人包

在這樣的情況下，我跟有在玩遊戲的朋友們決定自己架設一個交易媒合系統，讓玩家能夠在沒有官方拍賣的情況下順利交易。

從開發到上線，約花了五天的下班時間，全程透過 Github Copilot Agent Mode vibe coding 進行開發，成功在五天內上線 MVP。

截圖版本非 MVP 版本

什麼是交易媒合系統？

交易媒合系統是一個讓玩家可以刊登物品，並且讓其他玩家可以搜尋到這些物品的系統。這個系統不會直接處理交易，而是提供一個平台讓玩家可以互相聯繫，進行交易。

這種網站形式也不是我們發明的，在其他遊戲也有類似的系統，例如：

• mapleland.gg
• warframe.market

初始成員

名稱	角色
我	工程師
朋友 A	客服 / 行銷 / PM
朋友 B	客服 / 金主爸爸(?)

技術選型

因為只有我一位工程師，所以這個專案對我來說是 Side Project 的性質，一方面想挑戰一下用 vibe coding 去摸索一個我完全不熟悉的技術，另一方面因為有 SEO 的需求，所以選了完全沒摸過的 React + Next.js 作為主要技術棧，走 Serverless 部署，並且使用了以下技術：

技術類別	技術選擇
前 + 後端	React + Next.js
UI 框架	Tailwind CSS + DaisyUI
狀態管理	zustand
表單驗證	zod + react-hook-form
資料擷取	swr + axios
認證	NextAuth.js + Discord OAuth

vibe coding 踩坑紀錄

最一開始，我沒有給他任何 Reference，就直接開始開發，這樣的 vibe coding 方式讓我在開發過程中遇到了一些問題：

1. AI 在你沒給參照的時候，他不會去考慮用套件解決問題：
   • 寫表單功能的時候，AI 只會給我一個基本的表單結構，並不會主動去優化代碼，例如使用 react-hook-form ，也不會主動去使用 zod 進行表單驗證
   • 寫 API 請求的時候，AI 只會給我一個基本的請求邏輯，並不會主動去優化代碼，例如使用 axios 及 swr 來進行資料請求／快取
2. 最好認真 Review AI 所寫的後端代碼：
   • AI 設計 DB Schema 的時候，不一定會考量到正確的 index 設定，這會導致資料庫查詢效能不佳
   • 如果你的資料有配置外鍵，並且你在商業邏輯上允許 Cascade Delete，最好在需求上寫清楚
   • 明確規範變數的 naming convention，例如 snake_case 或 camelCase，這樣 AI 才能夠一致地使用，在這個專案上，前後端都是 React + Next.js 但是 AI 在生成代碼的時候，還是給了後端使用 snake_case 以及前端使用 camelCase 的變數命名方式，這讓我在處理資料時需要額外處理轉換
   • 明確定義時間格式，這樣 AI 才能夠一致地使用，在這個專案上，例如直接在文檔標注使用 ISO 8601 時間格式，這樣 AI 才能夠一致地使用

因為前面踩了一堆坑，所以後來研究發現 github copilot 可以指定 copilot-instructions 這個文檔，這樣每次 AI 生成代碼的時候，都會參考這個文檔，可以避免前面提到的問題。

交易媒合系統是如何運作的？

因為剛好有 Youtuber 介紹我們的系統，所以我就直接貼連結

簡單來說：

1. 玩家可以在系統上刊登物品，並且設定價格
2. 其他玩家可以在系統上搜尋物品，並且聯繫刊登者進行交易
3. 玩家看到有興趣的道具，可以直接點擊聯繫按鈕
   • 這個按鈕會直接開啟 Discord 的私訊對話，並且透過定型文帶入預設的訊息內容，讓玩家可以快速聯繫刊登者
4. 在 Discord 私訊對話中，玩家可以進行交易協商，並且約定交易時間
5. 當交易完成後，玩家可以在系統上標記交易完成，
   • 這樣其他玩家就可以看到這個物品已經被交易完成，並且將交易結果顯示在完成的交易列表中
   • 每日的排程會自動統計交易完成量最多的 100 種物品，並且將這些物品的交易次數顯示在首頁的今日物價指數列表

今日物價指數

自動化 與 AI

Artale Market 大量依賴 Github Action 進行每日的自動化排程作業

即便只有一個人開發，也是發 PR 請 Github Copilot 協助 Review

一些上線前後的有趣事件

收到了一些信件來問可不可以協作

在上線 MVP 的六小時內就收到了信件來問可不可以協作，裡面還包含個人的 Github / Linkedin，而且看履歷剛好跟我熟人在同一間公司，沒有太多猶豫就收編人家作為第二位工程師，所以我們現在其實算四人團隊

雖然後續陸續也有收到了一些信件詢問協作，但是信件中都沒有附上個人的 Github / 履歷 / 熟悉的技術棧任一項，所以後續也沒有增加協作者了

還沒上線就有新聞稿

因為我們有行銷的關係，有在社群平台及巴哈上面預熱，結果在我開發的第三天，就有野生的媒體幫我們做了新聞稿
Yahoo 遊戲新聞

網站被爬蟲騷擾

有人直接 mirror 我們網站的內容到中國那邊，而且只 mirror 上架資料，並不會同步下架狀態，導致我們的使用者被騷擾，在我們發現之後，調整了防火牆規則把爬蟲斷頭，對方還指控因有鍵政 ID 出現影響兩岸關係，不再提供資訊…

因為中國 domain 申請都需要備案，所以我們根據聯絡資訊去寄了抗議信，順便把所有中國的 IP 都封鎖了…

目前的狀態

由於每天都有大量的使用者在訪問這個網站，為了不讓自己虧錢，所以我們有放 google adsense 的廣告

目前有達成損益平衡，而且多出來的收益足夠支撐我們做一些花錢但效益可能沒那麼高的功能
例如：

通知系統
這功能直接把我們 db 成本翻倍，還上了分布式快取來分擔 db loading

花錢請工讀生幫忙整理裝備資訊，為後續裝備搜尋做鋪路:

捐錢

我們有把多的盈餘扣除成本後，捐獻部分給需要的公益團體，希望玩家社群除了被貼上不務正業的標籤外，還能夠有更多的正面形象