線上學習網站

影片＋測驗學習英文以及數學，階梯式從簡入深的課程設計，智慧追朔學生知識缺口

產品概念

在英文方面，這個產品透過影片中的文字、影像以及聲音加強學生印象，搭配各式測驗讓學生即時練習。我們也有翻譯重組練習，讓學生對閱讀產生自信。

數學方面，這個產品將每個概念以 5 分鐘左右的影片呈現，並串連影片之間的學習流程。學生在學習新知識之前檢測自己的能力，確定能力達標之後再開始學習新的內容。能力未達標的話，會提供學習路徑引導學生，確保學習不會走錯路。

🟢 營運中！可以點擊連結進入（網頁有做響應式設計，但是還是更適合在手機上使用）。

我負責的部分：前端、後端、內容製作工具、DevOps、測試、規劃、以及統籌。

技術關鍵字：Firebase（Auth、Firestore、Functions）、Google Cloud（Storage、Load Balancer、CDN）、FaaS、Angular。

第三方服務串接：Stripe、Messenger、Speechace。

測驗內容

在英文學習中，我們安插基本的聽字拼音、克漏字選擇題以及翻譯重組和發音練習（第三方辨識技術），每個測驗都可以刺激不同的感官。

在數學學習中，測驗特別的重要。雖然測驗都以選擇題為主，但是我們強調的是測驗的時間點以及作用。在學習之前的能力檢測稱為《前導知識檢測》，學習之後也可以針對章或是節作範例題目。我們也有提供會考例題，而且每一個例題都會提供解題方法以及相關的概念影片，做題不再填鴨。

影片目錄以及產品截圖

下方有影片目錄、播放介面以及訂閱畫面。

技術細節

後端

因為採用 Firestore 當作資料庫，這個部分沒有實作 API，但是為了未來的擴展，有做一層資料存取的抽象化程式庫，未來可以隨時替換後端實作。

這個產品有作 OpenGraph 優化，在分享的時候會產生精準的截圖以及文字。

前端

模組化

除此之外，我們許多元件有依照功能放在自己的 Angular CLI 專案中，加快專案建置的過程。

測試

測試在小團隊中格外的重要，他可以保證工程師對一個功能所做的修改沒有影響到其他部分。

我們的應用程式中，部分的邏輯有做測試，確保前端的程式邏輯沒有問題。許多前端用到的程式庫也有在 Azure CI 做測試。

軟體工程

我用許多 Higher-order 的設計，簡化參數設定。

上圖目錄截圖有許多列表式的畫面，不但是有做 Lazy Loading 漸進式載入，也有套用 Angular CDK 的 Virtual Scroll，降低前端對後端的讀取量。

我們有一個 LRU 快取，與 RxJS 結合，讓整個網頁的資料不會有過多的重複載入。