TinyPilot: Month 23

Michael Lynch

TinyPilot:第 23 個月

原文由 Michael Lynch 發布,訂閱此部落格

一句話總結

耗時八個月的重新設計終於完成了!

本月亮點

  • TinyPilot 網站的重新設計終於完成了。
  • 我學會了製作 Debian 套件,而且比想像中簡單得多。
  • 我已經放棄 Vue 以及前端框架了。

目標評分

每個月月初,我都會訂下當月想完成的目標。以下是本月目標的達成狀況:

發表一篇關於用 TinyPilot 打造家用實驗室 NAS 伺服器的部落格文章與影片

這是我一年多來第一篇不是回顧或年終總結的部落格文章。它在 reddit 上的反應平平,但衝上了Hacker News 第 2 名

這篇文章為 TinyPilot 的網站帶來了大量訪客,讓單月不重複訪客達到 1.4 萬人。這是歷史新高,比先前的紀錄高出 30%。我花了約 45 小時撰寫文章與製作影片,這樣的成果也算是值得了。

完成 TinyPilot 網站重新設計

  • 結果:終於完成了!
  • 評分:A

重新設計終於完成了。過去四個月裡,每個月我都以為這個專案就快收尾了,結果總是有突發狀況導致延宕。現在,它總算正式完工了。

聘請行銷代理商或自由工作者

  • 結果:六月初聘請了一位自由工作者
  • 評分:B

我找到一間感覺可能合適的代理商,但心裡總覺得不太對勁。我們談好三個月合約的價格,我答應後,他們卻要求改成至少簽五個月。這是個很大的警訊。我還是試著繼續跟他們協調,但他們的提案都讓人覺得不太可靠,最後我決定終止洽談。

幸好,我的電子工程合作夥伴推薦了一位數位行銷自由工作者。從第一次通話開始,他就比我接觸過的任何人都更合拍,所以我當場就決定聘用他。

TinyPilot 數據統計

指標2022 年 4 月2022 年 5 月變化
不重複訪客5,26814,296+9,028 (+171%)
總瀏覽量11,97424,131+12,157 (+102%)
銷售營收$43,771.00$54,844.20+$11,073.20 (+25%)
企業訂閱$47.75$47.750
權利金$2,253.61$3,269.56+$1,015.95 (+45%)
總營收$46,072.36$58,161.51+$12,089.15 (+26%)
獲利-$19,392.76$6,445.38+$25,838.14 (+inf%)

這個月在訪客與銷售方面的表現都很強勁。訪客幾乎成長為三倍,銷售額也提升了 25%。

大多數訪客來自 Hacker News,不過似乎對銷售沒有太直接的影響。事實上,在文章登上 Hacker News 之前,銷售額就已經有望比四月成長約 25%。成效可能會延後顯現,因為六月開局的表現異常強勁。

TinyPilot 網站重新設計

唉,這個重新設計啊。

該從何說起呢?

這個專案已經拖了好幾個月,感覺結尾永遠都在幾週之後。

在專案初期面試設計師與代理商時,我跟他們說,我希望花 8,000 到 15,000 美元,做一個為期幾個月的重新設計。我還特別強調,我絕對不想要一個得花六個月、燒掉 4 萬美元後,才能看出對銷售有沒有實質影響的專案。

結果,這個專案花了八個月、耗資 46,000 美元。我完全掉進了自己最想避免的陷阱裡。

之後我會再寫一篇更長的部落格文章詳述這段經歷,但主要的錯誤有以下幾點:

  • 範圍過廣:我應該嚴格控制範圍,先從品牌重塑開始,再讓代理商擴展到全面性的重新設計。
  • 工時回報太慢:我應該堅持要求代理商即時回報計費工時,而不是延遲兩週才回報。如果我看不到一項工作花了多久,就無法在發現成本超出預期時及時調整範圍。
  • 時程缺乏透明度:我應該更積極要求對方說明時程,才不會對專案拖這麼久感到措手不及。
  • 管理時間投入不足:我原本以為,一間每月工作 40 小時的代理商,與一位每月工作 40 小時的自由工作者,需要的管理成本差不多。但代理商牽涉更多人,人越多,就需要更多管理

不過,來看看成果吧。這次專案重新設計了結帳流程中的三個頁面:首頁、產品頁與購物車頁面:

舊版首頁截圖新版首頁截圖

首頁重新設計前後對比

舊版 Voyager 2 產品頁截圖新版 Voyager 2 產品頁截圖

產品頁重新設計前後對比

舊版購物車頁面截圖新版購物車頁面截圖

購物車頁面重新設計前後對比

先不論花費,我對成果是滿意的。我認為新設計無庸置疑地比舊版更好。新的標誌與圖片讓整個專案看起來更專業、也更有辨識度。

所以,新設計確實比較好,但它真的好到值 46,000 美元嗎?

如果能回到過去,我肯定不會花這麼多錢、投入這麼多時間來做重新設計。不過,它還是有可能回本。

扣除固定成本後,TinyPilot 銷售營收中有 70% 是獲利。這代表重新設計必須帶來 66,000 美元的額外銷售才算回本。如果它能讓銷售提升 10%,我就能從平均每月 50,000 美元增加到 55,000 美元。這樣大約一年就能回本。如果更好的行銷能吸引更多訪客,我回本的速度還會更快。

Debian 套件其實很簡單

我在 TinyPilot 上做過一個比較奇怪的設計決策,那就是它的安裝與更新機制。我們是用Ansible 來做的,這是一套原本設計給維運工程師用來大規模部署系統的工具。當初我用 Ansible 在 Raspberry Pi 上部署第一個 TinyPilot 原型,這個流程跑得通,我們就一直沿用了下來。

我知道在 Linux 上有更好的軟體安裝方式,但我沒有相關經驗。TinyPilot 對 Raspberry Pi 硬體功能的設定有特殊需求,我很怕要把標準安裝工具改到符合需求會很麻煩。與其如此,我們就繼續用 Ansible,畢竟它運作正常、也沒出什麼問題。只是速度比較慢,原本幾秒鐘就能完成的安裝得花兩分鐘,但還算可以接受。

兩年下來,我們已經把 Ansible 用到極限了。安裝流程變得越來越複雜,更新一次甚至要花五分鐘以上。

我以前也考慮過 Debian 套件(例如 apt-get),但聽過不少關於 Debian 打包工具難用的評價。再加上還要架儲存庫伺服器、產生金鑰、處理套件簽署流程?感覺光是要把基本環境架起來就要花很多功夫,之後要滿足我們的需求更是痛苦不堪。

抱著實驗的心態,我試著做了一個 Debian 套件,結果發現比我想像中簡單得多。Debian 套件其實就是具有特定資料夾結構與幾個特殊檔案的 tar 壓縮檔。我大約花了一小時就做出第一個可用的 .deb 檔。

至於儲存庫伺服器和金鑰對?其實那是選配的。你完全可以直接散布 .deb 檔案,不一定需要架設儲存庫。

debhelper 這個官方用來建立 Debian 套件的工具,確實如傳聞中那樣令人困惑又難用,但其實並非必要。我們發現直接跳過 debhelper、手動產生 Debian 的中繼資料檔案反而更簡單。

更棒的是,我們不需要一次就從 Ansible 猛然切換到 Debian 套件。我們可以照自己的步調,逐步把邏輯從 Ansible 搬到 Debian 套件上。

我們的第一個 Debian 套件是給 Janus 這個開源 WebRTC 伺服器用的。以前我們是在每台裝置上從原始碼編譯這個應用程式,要花約 30 分鐘。新的 Debian 套件幾秒鐘就能安裝完成。而且即使我們需要 32 位元 ARM 的執行檔,也能在 x64 的雲端伺服器上透過 Docker 的 QEMU 整合來建置 Debian 套件。我們用來編譯與打包程式碼的所有程式碼都是開源的

以下是在學習 Debian 套件時對我們有幫助的資源:

搜尋廣告的效益趨於平緩

上次計算時,Google 搜尋廣告看起來效果非常好。我每花一美元在 Google Ads 上,就能賺 0.69 美元的獲利。現在經過更長時間、累積更多數據後,情況就沒那麼樂觀了。

上個月計算數據時,我包含了四月與五月第一週的資料。那第一週剛好是個異常值,所以若以月份來切分,獲利就沒那麼亮眼:

指標4 月5 月
廣告支出$804.12$4,283.71
曝光次數5,270239,498
點擊次數3513,327
點擊率 (CTR)6.6%1.4%
單次點擊成本 (CPC)$2.29$1.29
轉換營收$1,314.91$7,649.60
廣告投資報酬率 (ROAS)1.631.79

我的營收中約有 30% 要用於硬體與人力成本,所以廣告投資報酬率(ROAS)達到 1.43 大致就是損益兩平(1.43 - 30% = 1.0)。高於這個數字就是獲利。以 1.79 來說,我每花一美元在廣告上還能賺 0.26 美元,所以我會繼續投放。

TinyPilot 新聘的數位行銷顧問檢視了我的 Google Ads 帳戶,發現有幾個地方我在低價值關鍵字上花了過多預算,所以未來幾個月我們應該有機會改善這些數字。

副業專案

PicoShare

PicoShare 是我在三月發布的開源工具,用來分享那些因檔案太大而無法用電子郵件傳送的檔案。

五月時,我新增了在上傳後編輯檔案中繼資料的功能:

PicoShare 中繼資料編輯畫面截圖

五月時,我在 PicoShare 中新增了編輯檔案中繼資料的功能。

原本你只能在上傳檔案時新增備註與選擇到期時間,而且一旦決定就無法更改。現在 PicoShare 更有彈性了,讓你可以隨時變更檔案的中繼資料與到期日。

新增編輯畫面後,我發現這也是讓刪除檔案流程更不容易出錯的好機會。以前只要在檔案清單中點擊刪除按鈕,檔案就會直接消失——沒有確認、也無法復原。現在要刪除檔案,必須先進入編輯畫面、點擊刪除,然後再確認刪除:

PicoShare 刪除確認對話框截圖

我新增了確認對話框,以減少誤刪檔案的情況。

WanderJest

2020 年初,我正在打造 WanderJest,一個幫助人們尋找附近現場喜劇表演的網站。我在三月時因疫情而暫停了這個網站。隨著生活慢慢恢復正常,我開始在週末與晚上重新投入 WanderJest。

在開發 PicoShare 的過程中,讓我印象深刻的一點是,更簡潔的技術架構能大幅提升我的開發速度:

PicoShareWanderJest
後端GoGo
前端Go templates + HTML5Vue 2
資料儲存SQLite + LitestreamFirestore

Firestore 會拖慢我的速度,原因在於要修改結構描述非常困難。我所知道的唯一做法是撰寫客製化的遷移程式碼並部署到正式環境的伺服器上。而使用 SQLite 時,我只要下載正式環境的資料庫、寫幾段 SQL 來調整,然後再推回伺服器就行了。

我現在正在重構 WanderJest,打算用 Go 樣板取代 Vue,並用 SQLite 取代 Firestore。

WanderJest 現行網站截圖以 Go 為基礎的新版 WanderJest 網站截圖

目前以 Vue 為基礎的 WanderJest 網站(左)與使用 Go HTML 樣板重構中的版本(右)對比

用 Go 寫前端比我想像中容易。前期的體驗不如 Vue 來得好。我很懷念條件式渲染或響應式屬性這些功能,在原生 JS 中是沒有的。但整體來說,用 Go 來渲染頁面要簡單得多。

用 Vue 時,我在頁面上渲染資料的流程是:

  1. 後端從資料儲存中取得資料。
  2. 後端衍生出一份只包含想與前端共享屬性的資料副本。
  3. 後端將資料序列化為 JSON。
  4. 前端從後端取得 JSON 資料。
  5. 前端根據從後端取得的資料填入頁面元素。

相比之下,用 Go 樣板渲染頁面只需要兩個步驟:

  1. 後端從資料儲存中取得資料。
  2. 後端用資料儲存中的資料填入頁面樣板。

我得等到功能追上 Vue 版本後才能確定,但我預估總程式碼行數可以減少約 50%。

總結

完成了什麼?

  • 完成了 TinyPilot 網站的重新設計。
  • 發布了新的 TinyPilot 版本。
  • 發表了一篇關於我的家用實驗室 NAS 伺服器的新部落格文章。
  • 聘請了一位數位行銷自由工作者。

經驗與收穫

  • Debian 套件比想像中簡單。
  • 沒有前端框架,生活更輕鬆。

下個月的目標

  • 建立一個可用於安裝 TinyPilot 的獨立 tar 壓縮檔。
  • 完成一篇關於 TinyPilot 網站重新設計的完整部落格文章初稿。
  • 將付費搜尋廣告的廣告投資報酬率(ROAS)提升至 2.0。

本文章由 muse-spark-1.2-contributor 進行翻譯

留言