2021 的知識分享平台：托特 - 用了哪些工具與框架開發平台？

以下為工程師視角所撰寫的文章，適合有程式基礎的工程師閱讀。

歷經一年的時間，托特從網站開始，漸漸有了 FB 粉專、自己的部落格跟 APP。開始有了些用戶活躍度，也開始在 Google 搜尋有更多的關鍵字曝光。正在閱讀文章的你，潛意識下應該也有自己做產品的憧憬吧！這裡想與大家分享一下我們是如何開發托特這一系列的產品。

首先得要歸功於這個技術蓬勃發展的年代，想做什麼都不需要重頭開始。開發產品只會變得越來越簡單，一個人可以辦到更多事情。善用大神們搭建好的服務或是框架會讓整個開發流程事半功倍。

專案

托特的程式開發基本是由一人完成，以用戶觀點來看我們有網站跟 APP，事實上我們寫了四個專案 (repository)。網站部分對 thoth.tw 以及 app.thoth.tw 開了兩個專案、APP 開了一個、後端 API 也開了一個。

app.thoth.tw：

為托特的核心內容。允許用戶登入、發文及互動等等。主要框架為 React、Apollo Client，以及 Base Web。

這個世代網站開發可以很複雜，前端用的不外乎就是 React、Angular 、Vue 其中一種框架來開發。托特使用 create-react-app 快速生成 React 的開發環境，讓我們可以專注於業務邏輯的開發。

Apollo Client 是基於 GraphQL 的前端 lib，幫助 React 管理資料的流向以及與後端的 API 對接。

Base Web 是 Uber 開發的一套 UI 框架，提供很多現成 UI 元件，同時也很方便以它為基礎來客製化自己的網站樣式。

thoth.tw：

包含了托特首頁以及部落格。為追求效能，我們採用了 Gastby.js 這個框架。Gastby.js 也一樣是基於 React，其目的是把所寫的程式打包轉換成靜態網頁，進而大幅提升網站的加載速度。效能好的網站通常會有更高的關鍵字排名，也就是越容易出現在搜尋結果的前面。

使用 Gastby 的同時，我在後面使用了 Strapi 這個 headless CMS 來存放我們所有的部落格文章、作者資訊以及圖片等。整體來說 thoth.tw 的開發走的是 Jamstack ，有興趣的人可以參考 https://jamstack.org/ 。

api.thoth.tw :

後端 API 的架構我採用的是 Node + ExpressJS ，再搭配 Apollo Server 來搭建 GraphQL 的服務。GraphQL 是近年才推出的概念，相較於大家常用的 Restful API 去定義好固定的 endpoint ，它讓前端可以更彈性地下 Query 去拿前端想要的東西。

資料庫採用的是雲端資料庫 Firestore 以及緩存用的 Redis。因為 Firestore 是屬於 NoSQL 的一種，查找功能能力有限，所以我另外搭配了 Elasticsearch 來彌補這方面的不足。

app :

網頁用了 React，所以 APP 也理所當然用了 React Native + Expo。Expo 可以讓我們在開發過程中完全不需要動到原生的 Android or iOS，可以像寫網站一樣直接寫 Javascript，直接同時部署 Android 與 iOS APP，大大降低了開發上的知識門檻。

既然是 React Native + Javascript，也就意味著串接後端資料的部分我們也可以採用跟網站一樣的機制。我們同樣也用 Apollo Client 來管理資料流，使用 GraphQL 的查找語法向後端獲取資料。

—

以上是托特整個平台的架構。托特在選擇架構主要的方向是：

• 以提升一人開發效率為主，所以我統一了前後端框架用的程式語言 - JavaScript。也算是唯一可以開發前後端以及 APP 的語言。
• 框架選擇偏向設置簡單且易使用的，想要先做出 MVP 然後快速迭代。

在找尋這些工具時有一些重點：

• 除非你真的對某一個框架、工具很有興趣想試試看，否則還是以自己熟悉的優先。
• 多看網路上的文章多比較，貨比三家，了解一下不同工具的優缺點。
• 看看 Github 上面的星星數以及網路上的活躍度。
• 可以不時的上 Hacker News 看看最新最火的工具有哪些。

除了主要業務邏輯之外，托特的部署架構也越來越完整，並且有一些監測以及數據分析的工具加以支援。

部署

在部署方面，托特隨著時間做了不少的改進。一開始的 MVP 版本著重於業務邏輯開發，部署就單純只是租一台機器把它安裝上去而已。後來隨著 Redis、Elasticsearch等等加入，我把這些服務用 Docker 包裝，在生產環境中用 docker-compose 去啟動服務。

最近為了支持未來的可擴展性，我開始把服務用 helm 裝在 kubernetes(k8s) cluster 上，在未來隨時增加機器來應付更多的流量，也可以避免單一機器有狀況而導致整個服務 shutdown。

現在也開始讓這些部署流程變得自動化，ci/cd 的部分我用的是 Github Actions，在推出新版的程式碼時，它能自動化的幫我們打包然後部署在 k8s 上面。

數據監控：

• Google Analytics：網站跟 APP 上都有埋點來觀看哪些頁面觸及率最高以及哪些功能用的最多。
• Sentry：當錯誤發生時會自動進行紀錄跟通知，幫助我排查問題。
• Google Search Console：這個跟程式開發沒有關係，當把網址註冊上 Google 後，Google 就會提供這些網頁觸及率相關的資訊。

結論

從一個全端工程師到開發一個真正的產品以及建立一個品牌的過程還需要非常多的知識點跟努力。除了學不完的技術之外，還會跨領域的接觸到更多面向的事情，包括作圖及設計、買廣告、偶爾寫寫文章以及做些推廣、功能發想、找尋夥伴、與夥伴間的合作等。

當功能持續疊加的同時，需要的知識也越多。這時候倚靠的是個人的學習能力、解決問題的能力還有行動力，推動我們達成目標的則是熱情跟興趣。

Slowly but surely，現在的托特是現在進行式，不論未來的發展，希望我們都能享受在這過程中的樂趣。