nuxt3

projects

![news-preview](https://i.imgur.com/9TXnLJW.png)

### 摘要 — 獨自開發的中型資訊站

正式網址：https://bbin-news.com/

B2B的遊戲新聞網站，客戶可以接收到最新、最即時的產品資訊。主要使用者為公司內部及遊戲的營運商（俗稱業主），是一個具有會員功能的中等規模新聞網站。

工作約6成的時間都在進行此專案，使用Nuxt3(vue3)+TypeScript+pinia。為時1年完成主架構，並接著繼續進行主功能新增與開發。

---

### 專案中的角色 — 主要的前端工程師

- 20%完成度後接手: 重構以前的程式碼，改為更優的通用組建架構。
- 基於SEO的考量改為Nuxt3。後續進行一系列SEO優化，包括GA4和GTM埋設、文章結構優化，首頁部分的SEO分數高達100分。
- 此專案有少許的單元測試，主要是核心邏輯部分進行測試，以jest作爲測試工具。

### 主要使用的技術、工具或系統 — Nuxt3 + Pinia + TS

- 包含但不限於以下功能：會員登入、i18n多國語系、留言功能、即時通知、banner輪播、投票功能、彈窗功能、表單填寫…etc
- 技術：
    - 核心：⛰️ Nuxt3(vue3), 🍍 Pinia, TypeScript, @nuxtjs/i18n
    - 其他：Swiper, Pusher, gsap
- 其他執行項目：
    - SEO優化：GA4+GTM的事件埋設、title和descripion相關的meta資料優化…等
    - 單元測試：以jest為主，進行函式的單元測試

### 成果展現

待補截圖

### 時程規劃 — 入職後到現在的Main Project

- 為期半個月，完成主要的前端「可抽換頁面」架構撰寫
- 接著半個月，進行vue3的組件與功能開發，並逐步加上TypeScript。
- 後續約半年～一年時間繼續「第二階段」的開發，以「會員系統」為主的新功能開發

---

### REF

- https://bbin-news.com/

B2B的遊戲新聞網站，客戶可以接收到最新、最即時的產品資訊。主要使用者為公司內部及遊戲的營運商（俗稱業主），是一個具有會員功能的中等規模新聞網站。

Nuxt3框架新聞資訊站

【專案】BBIN News專案簡介

### 摘要 — 壓力之下仍維持品質

demo網址：
http://pcs-go-plus-247649813.ap-northeast-1.elb.amazonaws.com/#/zh/games-management/poker-hall

使用者可以在「後台」自行創建「說明頁」內容，不用再打開Visual Studio Code，不必再實際動手編寫html，解決非工程師使用者得親自「更改html代碼」的困擾。

僅以2~3週開發完成主架構，即便專案時間緊迫，仍維持程式的高品質水準，後續另一個專案基於此專案開發，毋須打掉重構，可順利地擴充功能來進行專案。

---

### 專案中的角色 — 前台與後台並進

- 以SlateEditor套件開發後台的「富文本編輯」，使用者可以自行創建「說明頁」內容，套用「預先寫好」的組件，直接編輯其中內容，而不必動手改code。
- 使用了React Context進行global state管理，以最新版ReactRouter做路由切換
- 僅以2~3週開發完成主架構，仍維持程式的高品質水準，後續進行新功能開發，毋須打掉重構再繼續。

### 主要使用的技術、工具或系統

- 技術
    - 核心：React18, Slate, Slate-react, React-router,TypeScript
    - 其他：axios, mui, sass

### 成果展現

前台

![](https://i.imgur.com/LsRakhM.png)

後台

![](https://i.imgur.com/YLBaG9U.png)

![](https://i.imgur.com/4uJp2Ff.png)

### 時程規劃

- 約15個工作天的開發，從無到有，以agile敏捷開發的方式，逐步迭代開發前台與編輯內容的後台
- 後續根據回饋，僅有做一些設計上的微調，與少數的bug修正，幾乎無太多根本上的調整。

---

### REF

- http://pcs-go-plus-247649813.ap-northeast-1.elb.amazonaws.com/#/zh/games-management/poker-hall

使用者可以在「後台」自行創建「說明頁」內容，不用再打開Visual Studio Code，不必再實際動手編寫html，解決非工程師使用者得親自「更改html代碼」的困擾。

以Slate富文本套件為核心的簡易編輯器

【專案】【React】說明頁簡易編輯器

### 摘要

此專案為「定時」抓取網頁的檔案，並搭配登入下載驗證，做到「自動化」更新數據資料，無須再以人工方式定期手動下載。

接手時已經完成約7成，是執行剩下3成的排程抓取關鍵。主要為補上後續的排程，與檔案處理的功能撰寫。除了功能的實作，開發的同時，也將程式進行重構，將其變得更加精簡，每個執行的函式顆粒度更小。

---

### 專案中的角色

負責專案的接續開發，與需求端進行溝通討論。確認「最後定案」的實際執行排程，敏捷式地進行頻繁的測試與除錯，直到需求的最終拍板定案，將專案做最後的結案收尾，才正式完成這個案子。

### 主要使用的技術、工具或系統

主要使用了以下技術與套件：python的虛擬環境venv, schedule, time，以及pm2將其封裝為完整的服務。

### 時程規劃

因為其他主專案開發的時程，此專案是在其他空閒時間才開發，因此為時1~2個月才陸續完成功能的開發。在正式發布之前，進行QA測試以驗證資料的正確性，以及檢驗排程的功能是否正常，最後大約在第三個月左右，才正式啟用服務。

服務啟用後，偶爾進行「無預期發生之錯誤」的debug，陸續完善功能，後續執行數個月的期間，都沒有發生問題，很順利如預期地執行自動化排程下載。

---

### REF

- 排程執行套件 schedule: https://schedule.readthedocs.io/en/stable/

Work Projects

【專案】BBIN News專案簡介

Nuxt3框架新聞資訊站

【專案】【React】說明頁簡易編輯器

以Slate富文本套件為核心的簡易編輯器

【專案】Python自動化爬蟲專案

利用schedule套件定時抓取檔案

72企鵝