- 擁有 4 年前端開發與維護經驗 (Vue.js、Nuxt.js)
- 熟悉 HTML5 / JavaScript / CSS3 / webpack
- 熟悉 Git 版本控制系統
- 具備 RWD 經驗
- 擁有從概念到生產的專案經驗，包括提案、討論、執行
- 溝通協作能力強，具備獨立工作能力
- 能自主解決技術問題，也能和團隊討論架構
- 擁有積極、以解決方案為導向的心態
- 能夠快速學習不熟悉的程式語言
開發技能
開發前
前期規劃 於最短時間將專案目標訂下
- 與 UIUX 設計師溝通、確認畫面與流程
- 規劃 prototype：使用 drawio 或 marvelapp 等工具規劃功能需求、流程、畫面，提升團隊對於畫面、功能的理解性 (例：規劃購物平台初版畫面與功能，加速進入實作初版階段，後續持續進行畫面風格優化與功能追加)
- 後端資料需求：與後端工程師討論所需資料 format、api 需求
- 團隊 demo、確認方向與時程
開發中
開發實作 注意專案和元件的重複利用性與擴展性
- 使用 vue.js 搭配 vuex 進行前端資料與狀態管理，減少 80% 重複發送 api 取得頁面所需資料的步驟
- 運用 vuetify 等 UI framework 減少 50% 開發元件時間
- 運用 chrome 開發者工具監測記憶體使用狀況，降低 90% 記憶體洩漏的可能性
- 撰寫 e2e testing (使用: nightwatch.js)，提升兩倍的頁面操作穩定性 (例：提升ugym 設備雲端系統畫面顯示正確性)
- 其他已具備能力:
- websocket 串接 (例：ugym 運動系統中傳送即時運動數據)
- 第三方登入串接 (例：搭配 firbase 進行串接，加快購物平台使用者登入速度)
- 使用者權限設計與實現登入註冊系統
- 實現多語系功能
開發後
前端部署 提升網頁 loading 時間
- 使用 AWS S3、Cloudfront (CDN) 進行部署，減少 60% 首次開啟網頁 loading 時間
- 持續進行功能測試，確認使用者體驗可優化處
技能
具備技術
前端語言
- HTML5、CSS3、JavaScript(ES6)
- Vue：搭配 Vuex 處理資料
- Nuxt
- React：使用 function component 方式進行開發
前端技能
- RESTful API 串接：設計資料格式給後端
- Websocket 串接
- AWS: Cloudfront(CDN)
- e2e testing: nightwatch.js
- Git: 使用 sourcetree 圖形化介面做輔助
- 第三方登入串接: facebook、google、line、apple id、instagram
- firebase: 第三方登入、messaging
- 導入多國語系: vue-i18n
- 網頁樣式佈景主題應用: sass
- RWD 與 Grid System
- 與 UI/UX 設計師、後端有良好溝通
前端 UI framework
- UI framework：Bootstrap、Quasar、Vuetify 、Vue-material
前端優化
- 監測記憶體洩漏: 使用 chrome 監測記憶體使用狀況
- 前端優化：CSS sprites、lazy-load、Gzip
後端語言
- Ｃ＃
後端技能
- RESTful API 開發
- 使用 docker 部建環境
- 實作 rtmp、rtsp 影音串流
- 串接設備資料 (ex. TCP、MQTT、RabbitMQ)
- 資料庫維護 (ex. InfluxDB、MySQL、PostgreSQL)
具備工具、平台使用技術
- Visual studio code ：使用Nuxt.js、 Vue.js、React 等語言進行開發
- Visual Studio ：使用 C# 進行開發
- Sourcetree ：進行 git 版控，並了解 git flow 流程
- AWS 使用 AWS S3、Cloudfront (CDN) 進行部署
- Firebase ：製作登入系統，進行第三方登入串接
- Postman ：進行 api 串接、資料傳送與接收測試
- Drawio ：規劃畫面 prototype 與畫面功能流程
- Adobe XD ：規劃畫面 prototype
- Marvelapp：規劃畫面 prototype
- Docker ：建立 image、container
語言
- English — 中階 (多益860)
參與專案
Recently
- 安全守護平台 (前、後端) (主要維護、新功能開發者)
- 智慧巡房平台 (前、後端) (主要維護、新功能開發者)
- 跌倒偵測系統平台 (前端) (主要開發者)
Past
- Lale app 的 PC 版本(桌機應用程式) (與他人協作開發)
- Lale app 中的工作 tab 全部頁面 (主要開發者)
- Lale app 貼圖市集頁面 (主要開發者)
- Lale app 中的消息 tab 全部頁面重構 (JSP => Vue.js) (與他人協作開發)
- ugym 系列產品 (運動系統) (主要開發者)
- ugym 設備雲端系統 (主要開發者)
- 銀髮族運動系統 (主要開發者)
- 購物平台前、後台畫面 (主要開發者)
公司專案
[Nuxt + C#] 安全守護平台
專案說明:
以安全守護平台整合多種物聯網產品訊息，將所有裝置的設備管理、人員管理、事件管理與告警管理整合成單一平台，免除重複建檔，提高工作效率 。
個人於專案擔任:
1. 前端網頁的維護、新功能開發
2. 後端的維護、新功能開發
3. 與新 IoT 設備串接資料至雲端
4. 資料庫管理 (PostgreSQL)
5. docker 建立與維護
個人於專案之技術價值:
1. 與各項 IoT 產品進行串接，並使用 line notify 將告警事件轉發至 Line 群組中
2. 使用 rtmp、rtsp 串接影音串流，並將影音錄影、截圖、直播於前端畫面中
[Vue] ugym 設備雲端系統
使用客戶: 臺北大學運動中心、國立臺灣師範大學、國立清華大學、友達光電、東海大學(預)
專案說明:
管理健身房場域中的全部設備，提供設備之使用率、設備類型、電量等資訊報表。
個人於專案擔任:
1. 前期畫面、功能規劃
2. 前端畫面設計
3. 前端畫面與功能實作
4. 與後端討論 API 需求
5. 前端佈署: AWS、Cloudfront
個人於專案之技術價值:
1. 搭配 firebase 進行五種第三方登入方式串接，使用者登入速度提升兩倍以上
2. 規劃使用者權限與其對應畫面，達成一頁多權限使用者使用目的
3. 與 ioT 工程師進行 websocket 事件串接，將設備即時狀態於 1 秒內顯示於畫面中
4. 使用 e2e testing (端對端測試) 來提升兩倍的畫面操作正確性
[Vue + Line bot] ugym 運動系統
使用客戶: Own Fitness、臺北大學運動中心、運動易利站新莊店、Artra、國立臺灣師範大學、國立清華大學、友達光電、東海大學(預)
專案說明:
提供個人運動報表、心率圖表、運動訓練計畫、挑戰賽等功能，並於運動當下使用手機綁定設備，提供即時運動數據與訓練計畫。
個人於專案擔任:
1. 前期功能規劃
2. 各項新支線功能、畫面規劃
3. 前端畫面與功能實作
4. 與後端討論 API 需求
5. 串接 Line bot，並管理各場域之 Line bot 與客製化 Line bot 按鈕功能
6. 前端佈署: AWS、Cloudfront
個人於專案之技術價值:
1. 使用 vue.js 將基本產品模組化，達到 95% 可重複使用模組產品於不同健身房客戶上
2. 串接 websocket 技術，將運動即時資料於 1 秒內更新於畫面中
3. 導入多國語系
4. 使用 sass 搭配 @mixin、@function 處理不同佈景所需要產生的樣式設定，實現不同網頁樣式佈景主題。
[Vue + Electron] Lale app PC 版
專案說明:
將原有的 Lale APP 的聊天系統做成 PC 版本聊天系統，提供使用者傳送訊息、照片、檔案、視訊與通訊功能。
個人於專案擔任:
1. 前期功能規劃與畫面規劃討論
2. 前端畫面與功能實作
個人於專案之技術價值:
1. 運用 Vue + Electron 來建立桌面應用程式，並於一個月內有釋出第一版
2. 導入 Webrtc + Pubnub 製作語音/視訊通話功能，於一個禮拜將此陌生技術運用於專案中，並成功與手機 app 版本做溝通
接案與 Side Project
[接案] [Nuxt] [STar.T Faculty]
老師與學生的媒合平台
web: https://start-faculty.com/
個人於專案擔任:
1. 前端畫面、功能實作
2. 串接 API、firebase、Google Map
個人於專案之技術價值:
1. 使用 firebase messaging 功能接收通知，並加入 Service Worker，讓電腦網頁在背景時也可以接受通知，並於螢幕右下角顯示出來
2. 串接 google map API，實現顯示地圖、搜尋地址、顯示目前位置等功能。
3. 使用 tinymce 來實現編輯器的功能畫面
4. 使用 echarts 來實作各式圖表，增加資料的可讀性
5. 與後端串接綠界科技 Ecpay，實現線上支付功能
6. 導入多國語系
[Side Project] [Vue] 即時 youtube 搜尋
code: https://github.com/grace550213/youtube-demo
web: https://grace550213.github.io/youtube-demo/#/
1. 使用三天的時間串接 youtube 官方公開 api
2. 運用 component 的觀念，將相似或重複的部分製作成元件，減少 70% 程式碼的空間量。
3. 網頁能：
－搜尋影片、播放清單、頻道的功能
－可以收藏喜愛的影片、播放清單與頻道
[Side Project] [React] Todo List
code: https://github.com/grace550213/to_do_list_react
web: https://grace550213.github.io/to_do_list_react/
1. 使用 React 中的 function component 來開發
2. 拆分基本的 component
3. 使用 useState 管理資料，並實現元件間的資料傳遞
工作經歷
前端工程師 • 友達光電
六月 2022 - Present
1. 參與專案:
．安全守護平台： 維護、開發前端、後端、資料庫、docker；串接各項長照相關 IoT 設備，設備傳送事件時，透過 Line notify 通知 user 。
．床墊監測平台：維護前端、後端、資料庫、docker；接收床墊呼吸、心率等各項資料；顯示各床位人員之呼吸狀態與在床狀態；開設 RESTful API 供其他不同床墊設備將資料傳入系統。
．跌倒偵測平台：顯示 AI 跌倒偵測 model 判斷畫面、即時骨架畫面、跌倒相關告警事件。
2. 擁有技術:
．使用 Nuxt、Vue 開發前端。
．使用 Websocket 取得即時骨架資料，依資料畫出 svg 圖片。
．docker 建立：使用 docker 將專案環境建置。
．開發 RESTful API：使用 C# 技術進行開發
．管理多種資料庫：InfluxDB、PostgreSQL、 MySQL
． 使用 rtmp、rtsp 串接影音串流，並將影音錄影、截圖、直播於前端畫面中
前端工程師 • 宇康醫電股份有限公司(中光電集團)
三月 2021 - 六月 2022
1. 參與專案:
．ugym 設備雲端管理系統： 串接 Websocket，於一秒內提供即時設備狀態、電量；於登入系統中串接第三方登入，使用者的登入速度提升兩倍以上；使用 e2e testing (端對端測試) 來提升兩倍以上的畫面操作正確性
．ugym 數位健身房系列產品：運用一個半禮拜的時間將基本前端畫面模組完成, 達成 95% 可重複使用模組於不同健身房客戶上，達成每擴展新的健身房客戶，可於一小時內完成佈建。
．銀髮族運動系統 ： 將 uGym 的 系列產品擴展，於三天將專案結案，降低 70% 專案開發成本；導入 chart.js ，將複雜的資料圖表化，提升兩倍的使用者視覺體驗。
．購物平台、平台後台： 規劃使用者權限；實作登入系統；處理購物、訂單、商品上下架審核流程。
2. 擁有技術:
．提高使用者黏著率：藉由 line 好友當網頁入口，串接 line login 、LIFF app 等功能，提高近 70% 使用者進入網頁的方便性。
．第三方登入：串接多種第三方登入方式，並搭配使用 firebase 提升兩倍以上的串接速度 。
．資料可視化：使用 chart.js 將資料圖表化，提升兩倍的使用者視覺體驗 。
．即時更新畫面機制：運用 Vue.js 與 websocket 進行串接，將資料於一秒內更新於畫面中。
．自動化測試：使用 nightwatch.js 撰寫 E2E 測試，提升兩倍以上畫面運行的正確性。
．前端效能優化：CDN 使用 (AWS Cloudfront)、CSS Sprites、lazy-load、Lazy Loading Routes (路由懶加載)，綜合以上功能的使用，加速兩倍以上的頁面 loading 速度。
前端工程師 • 華苓科技
五月 2020 - 二月 2021
1. 參與專案:
．Lale app 聊天功能 的 PC 版本：運用 electron + vue 建構桌面應用程式、遷入 webrtc + pubnub 完成語音與視訊通話功能，並於一個月內有釋出第一版。
．Lale app 中的 B2B 頁面：使用 vue 進行開發，與 app 端與舊有 JSP 人資表單系統做整合，改善 70% 舊有系統的使用方便性。
．Lale app 貼圖市集頁面：熟悉 API 串接、HTML5/CSS3/Javascript 技術，並於一個禮拜將專案結案。
．重構產品 Lale app 中的"消息 tab"所有相關頁面：於兩周內將原本的 JSP 架構改使用 Vue 進行開發，套用 Quasar UI 框架，提升 60% 的開發速度 。
2. 擁有技術:
．擅長使用 Vue 開發，並搭配 Vuex 處理資料。
．熟悉 Git 版本控制
．了解 RWD 與 Grid System
．懂得如何與後端工程師溝通，設計 API 資料格式
．與 UI/UX 設計師溝通，了解 user 端需求
店襄理 • 台灣通用磨坊_哈根達斯
七月 2018 - 五月 2020
．與店內其他兩位幹部一同帶領 6 位工讀生一同為店內業績打拼。
．目前已完成兩大檔期活動，近期母親節活動團隊幫助店內增加 128 萬以上的銷售業績。
．根據每周營收分析，與團隊共同討論，做出行銷策略，訂下明確目標，互相督促執行。
行政助理 • 私立國小
八月 2016 - 七月 2018
．負責 3 個處室的大小事務，產出報表、製作活動報告、各處室溝通、人事協調等。
．提升各處室業務完成度、辦活動效率。
．每年完成 2 項招生入學活動、完成多項活動成果報告。
．溝通能力與獨立解決事物是必要條件。
人格特質
- 每項工作經驗累積並不拋棄，將技能謹記在心，綜合運用在每項工作上。
- 具有良好的團隊合作精神及溝通能力 。
- 具備獨立作業能力 ，懂得適時尋找資源，解決問題。
- 對程式開發有熱忱，並自備自學能力。
