薛少康

Dec 2022-Now

前端工程師

方碼科技有限公司

• 架設抽獎網站
• 活動網站萬人報到執行速度加速10倍
• 維護更新活動平台

自傳

我是薛少康，畢業於大同大學電機系。2021年11月開始學習寫網頁的技術。

於方碼科技的期間，我負責維護活動設定的後台、報到的平台，與製作抽獎系統。

1. 活動報到平台在應付萬人以上時，處理速度時常需要等10秒左右，將前端儲存的資料改為使用 ES6 Map 後，在取得或改變資料的速度上有改善，網站執行速度加快10倍。

2. 抽獎系統在設定部分，讓每個獎項可以用多個條件去篩選出抽獎者，並為了在中途離線的情況下依然正常操作，利用Redux Toolkit 將資料統一管理並存於本地端；抽獎主頁為了讓畫面上的中獎列表能使用鍵盤向下滾動列表，接觸到 tabindex 的屬性，讓元件可藉由鍵盤focus，不必使用滑鼠往下滾動視窗。

在資策會前端班的課程中，期末專題我們做動物園網頁，而我負責遊戲部分與客服機器人。

遊戲部分我製作了每日刮刮樂、大家來找碴還有冷知識4選1。

1. 刮刮樂使用到 Canvas 的技術，選擇 globalCompositeOperation 工具，監聽使用者滑過的地方變得透明，來創造刮去銀漆的特效。

2. 大家來找碴藉由 localStorage 存取關卡，並且有倒數計時器的功能，其中我印象較深刻的是提示功能，利用陣列與狀態處理尚未選取的正確位置，並隨機選一個給予使用者協助。

3. 冷知識的部分，從資料庫隨機撈取10題，記錄玩家答題的選項並檢討，提供給對題目有興趣卻忘記當時答題情況的玩家，更好的使用者體驗，另外還有點數獎勵制度提升遊玩意願與購物的機會。

另一個客服機器人，畫面採用模擬類似 Line 對話框的風格，功能上包括自動關鍵字回覆、快捷選單，除此之外，還有1對1專人客服。

1. 自動回覆功能取材自台北動物園的常見 QA ，並儲存在資料庫中，當使用者輸入完問題後，到資料庫撈取回答即回傳至前端對話框。

2. 快捷選單是我常看到其他網站的客服機器人最重要的地方，所以我在選單中設計幾個增進使用者體驗、讓操作更順暢的功能。其中訂票功能可以直接在選單內呼叫 Redux，把商品加入購物車。另外我撈取政府的 API 做1週天氣預報，統整了日期、圖示、降雨機率、平均氣溫，做成卡片。

3. 1對1專人客服，在老師提到 webSocket ，和參考Line的獎金獵人比賽第一名的作品後，我腦中就有這想法了。為了實現這功能我使用到 Socket.io ，因為這不包含在課程中，於是我先跟著官網的教學做，但它是不分房間的多人對話，而我想做到的是分房間的1對1的客服對話。因此仍需判斷不同使用者與客服之間傳遞的對話，不能混淆不同房間對話，其中最難的地方，怎麼把使用者與房間綁在一起，是我覺得相對具挑戰性的，也逐漸對socket的技術有更多的興趣與想法。