於資策會前端班的專題發表中使用 React 製作遊戲頁面與客服機器人的功能,我從這次的過程中,發現自己滿喜歡靠程式創造東西的。
在接案公司的期間,我經歷多個專案的頁面切版,從大學系所官網、銀行行銷網頁到政府交通部徵稿頁面 。
目前任職於方碼科技,負責維護活動設定的後台、報到的平台,與製作抽獎系統。
上班之餘偶爾做些小作品,豐富自己的眼界與經驗。
手機 : 0987-121-908
藉由刮刮樂的每日遊戲獎勵,提升使用者對網頁的黏著度。我使用了Canvas 的重疊效果,來製造把銀漆刮去的感覺。在參考網路其他人的作品後,我發現有些還沒有刮到字,就會直接顯示結果,所以我有在這塊多做琢磨,我將條件改為刮到文字的80%,才會將其餘部分直接顯示出來,而這部分語法也是我學到較深刻的。
使用CSS中的3D效果製作翻牌,藉由兩次翻牌判斷是否一樣,結束遊戲。
核心工具: jQuery 、 CSS
Dec 2022-Now
June 2022-Nov2022
百岳國際股份有限公司
Nov 2020-Nov 2021
台北文華東方酒店 Mandarin Oriental, Taipei
2015 - 2019
我是薛少康,畢業於大同大學電機系。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的技術有更多的興趣與想法。