專案

播放器

影音串流播放器模組設計、廣告IMA處理與各種客製化開發組件

多媒體片庫平台產品 

媒體檔案(影音圖文)儲存系統

主控廣告監控平台

提供廣告(IMA或SSAI)撥放取消等操控與低延遲監看


醫學衛教後台

衛教後台之前端開發

醫學衛教前台

衛教前台之前端開發

英語新聞

新聞瀏覽與語音複誦


卡車媒合後台

卡車訂單管理

拖救車智慧派遣

高公局拖救車派遣監控系統

愛心訂車網頁

復康巴士訂車網頁


對講機商品網頁

公司硬體設備宣傳

物流訂單後台系統

管理物流訂單

無障礙計程車管理後台

班表與訂單排班管理系統

處方心中藥用藥管理

練習作品

綠能公司網頁

商品展示


技能

  • 後端語言: C# ( Webform, MVC, .NetCore, Entity Framework ), node.js
  • 前端語言: Vue(vue3), Typescript, Javascript, Video.js, Webpack, Gulp.js, Rollup.js, scss/css
  • 資料庫: MSSQL, MySql, Oracle, MongoDB, Redis
  • 消息代理: MQTT, SignalR 
  • Css 框架: Bootstrap, SemanticUI, Quasar, Material, .etc

工作經歷

遠端前端工程師

識界雲端科技股份有限公司(新創)  •  May 2022 - September 2023

  • 醫療衛教前後台開發(前端開發)
    • 串接綠界金流完成支付功能、串接youtubeAPI完成影片網址預覽功能。
    • 根據設計稿完成前端畫面與功能,並盡力追求UIUX精準度提昇畫面品質。
    • 建構設計前台Vite SSR架構、後台文檔編輯器功能客製化。
    • #Typescript #JavaScript #Vue3 #Sass #Vite #Pinia #綠界支付 #SSR

軟體工程師

民間全民電視股份有限公司   •  May 2019 - April 2022

  • 影音串流播放器模組設計、廣告、客製組件處理(獨立開發)
    • 針對播放器的卡頓優化,提升了播放器的流暢性與降低加載時間,提升了四季平台的網頁駐留時間、以及增加了VOD 活躍用戶量 15% ~20%,帶來大幅的廣告收益成長,目前播放器產品同時被應用在四季線上串流平台、Hinet線上節目、yahoo防疫直播記者會上。
    • 用Typescript重構影音串流播放器的架構與UI、並將功能進行解耦與客製 ,將十幾個播放器版本統一為一個,且分離業務邏輯,依照功能切割為模組,讓每一個模組盡量依照單一職責切分,並定義接口和文檔,以利於維護和擴充,並利於除錯
    • #Typescript #JavaScript #GoogleImaSDK #Video.js #M3u8 #Scss/Css #Rollup #Gulp
  • 多媒體片庫平台產品(前端開發)
    • 全面優化整個系統的UIUX體驗,並全程參與產品設計與流程、功能的規劃,讓使用者在使用上更便利,獲得一致好評,產品目前已應用在部分中大型企業、公司新聞媒體部門。
    • 協助團隊導入前端typescript和npm模塊打包、git的使用,幫助團隊在多個產品環境的開發上,能快速除錯、佈版、並減少了需求變更的開發時間,壓縮了約35%的檔案大小,提升整體操作、UI更新的流暢感,解決原來頁面的效能問題。
    • 實作並改善上傳多檔、大檔案切割、樹狀效能、會員機制、多圖加載等機制、客製化PDF加載器UI。
    • #Typescript #JavaScript #SemanticUI #jQuery #SignalR #MVC #Webpack #CSharp #大檔案 #延遲加載
  • 主控廣告控制後台開發(獨立開發)
    • 為改善主控在直播監控中,廣告與串流的延遲時間差,架設了公司C++串流服務器,導入Rtmp與http-flv串流轉換、播放器串接,讓時間差從20~30秒降低至2~4秒內,大幅提升直播監控的即時性。
    • 使用Socket與WebSocket技術+Redis,配合公司後端完成AWS廣告串流裁切,讓主控也能手動控制廣告,排除原來google ima廣告限制,能在各裝置的播放器上進行廣告播放,提升收益系統。
    • UIUX與前端架構重新設計,並加入服務健檢、LDAP登入等功能,強化平台監控功能。
    • #Typescript #JavaScript #Quasar #Rtmp #.NetCore #Vue.js(Vue3) #Socket和WebSocket #SignalR #C# #API #Videojs #Redis

平台開發工程師

漢民漢曜科技股份有限公司  •  July 2017 - April 2019

  • 車輛訂車管理後台(全端開發)
    無障礙接送訂車前台(前端開發)
    無障礙接送管理後台(全端開發)
    政府拖救車派遣智慧系統(全端開發)
    卡車媒合系統(前端開發)
    • 完成網站多國語系(C# Resources),產品後來被應用在中南美洲的部分企業的內部車輛監控平台。
    • 改善前端地圖監控訊號機收機制,由頁面輪詢改為MQTT串接即時更新車輛位置,使公司每個月的地圖用量費用節約了數萬元的流量成本 。
    • 因需求變更繁複,當後端變更接口時,前端常常會需要花費許多時間更新並且除錯,因此提出用Typescript強型化前端結構與接口,因應快速變化需求,且有效降低每次需求變更時的錯誤與時間。
    • 全面優化整個前端UIUX,RWD、並根據需求完成地圖動畫、圖表、exe報表上傳匯出、會員登入、發票機控制、Firebase推播等處理實作。
    • 與PM參與客戶端流程討論,收集客戶建議,提出前端改善建議,並解決客戶端瀏覽器相容問題。
    • 完成用路人簡訊通知以及簡訊中的縮網址服務
    • #Typescript #JavaScript #Scss #GoogleMapAPI #MVC #Razor #MQTT #RequireJs #Polyfill #API #Firebase推播 #簡訊通知 #發票機串接 #縮網址服務

光電工程師

XX醫療股份有限公司   •  July 2014 - May 2016

  • 負責光學系統設計與光學研磨相關技術
  • 接觸ISO 13485等驗證與確效相關流程

學歷

國立暨南國際大學

應用材料暨光電工程學系  學士(畢業)

 2010年 9月 - 2014年  6月

國立中壢高級中學(央大附中)

高中  普通科(畢業)

2007年 9月 - 2010年 6月



SKILLS

  • Backend Language: C# ( Webform, MVC, .NetCore, Entity Framework ), node.js
  • Frontend Language: Vue(vue3), Typescript, Javascript, Video.js, Webpack, Gulp.js, Rollup.js, Scss/Css
  • Database: MSSQL, MySql, Oracle, MongoDB, Redis
  • Message broker: MQTT, SignalR 
  • Css framework: Bootstrap, SemanticUI, Quasar, Material, .etc

Work Experience

Remote front-end engineer

Iclarityvision Technology Co., Ltd.  •  May 2022 - September 2023

  • Front-End Development for Medical and Health Education(Front-End Development) 

    • Integrated the Green World Cash API and Youtube API into our software to enable payments processing and video preview features.

    • Developed the front-end based on design drafts, focusing on achieving UI/UX and improving image quality.

    • Designed front-end Vite SSR architecture.

    • Customized document editor function modules in the back end.
      #Typescript #JavaScript #Vue3 #Sass #Vite #Pinia #Cash API  #SSR

Software engineer

FTV(Formosa TV)   •  May 2019 - April 2022

  • Video Streaming Player Module Design, Advertisement, and Custom  Component Development(Self-Developed) 

    • Redesigned and optimized the architecture and coding methods of the video player, significantly improving performance and efficiency. Reduced loading time, leading to a 15% increase in active users and higher advertising revenue.

    • Implemented the product on 4GTV, Hinet, and Yahoo’s COVID-19 conference live broadcast. 

    • #Typescript #JavaScript #GoogleImaSDK #Video.js #M3u8 #Scss/Css #Rollup #Gulp

  • Product Platform of Multimedia Library (Front-End Development)

    • Significantly improved overall UI/UX, making the system more user-friendly and receiving positive feedback from clients.

    • Collaborated with the team to integrate front-end TypeScript, npm modules, and Git, reducing development time and compressing file sizes by 35%. This streamlined operations and resolved performance issues from the original page.

    • #Typescript #JavaScript #SemanticUI #jQuery #SignalR #MVC #Webpack #CSharp #Big file #lazy loading

  • Master Advertising Control Management Website(Self-Developed)

    • Optimized Live Monitoring: Established a C++ streaming media server and integrated Rtmp and http-flv streaming media conversion, reducing live monitoring delay from 20-30 seconds to 2-4 seconds.

    • Enhanced Advertisement Control: Implemented Socket, WebSocket and Redis to enable AWS advertisement switching, eliminating Google IMA restrictions, and increasing revenue.

    • Streamlined System with Added Features: Redesigned system UI/UX and architecture, adding features like service health checks and LDAP login for improved platform monitoring.

    • #Typescript #JavaScript #Quasar #Rtmp #.NetCore #Vue.js(Vue3) #Socket和WebSocket #SignalR #C# #API #Videojs #Redis

System Development Engineer

HanTek Technology Co., LTD  •  July 2017 - April 2019

  • Logistics tracking IoT  (full-end development)
    • Multilingual Website Development: Successfully implemented a multilingual website using C# Resources, which was later applied to internal vehicle monitoring platforms in parts of Central and South America.

    • Improved Real-Time Signal Reception: Enhanced the front-end map monitoring system by transitioning from page polling to MQTT-based real-time vehicle location updates. This optimization resulted in significant monthly saving of tens of thousands of dollars in map usage fees.

    • Technical Leadership: Led the team in adopting TypeScript to strengthen the front-end structure and interfaces, enabling rapid adaptation to changing requirements and reducing debugging time.

    • Comprehensive UI/UX Optimization: Optimized the entire front-end, including RWD ( Responsive Web Design), and implemented various features based on demand, such as map animations, charts, Excel report uploading and exporting, member logins, invoice machine control, and Firebase push notifications.

    • Customer-Centric Improvements: Actively participated in requirements interviews with project managers and clients, collecting feedback and proposing enhancements. Successfully addressed issues related to browser compatibility.

    • Enhanced Communication: Introduced pedestrian SMS notifications and URL shortening services for improved communication and user experience.

    • #Typescript #JavaScript #Scss #GoogleMapAPI #MVC #Razor #MQTT #RequireJs #Polyfill #API #Firebase notification #SMS notification #Invoice machine serial connection #short URL service

Optoelectronic Engineer 

Medical Technology Devices Inc.   •  July 2014 - May 2016

  • Responsible for optical system design and optical polishing related technologies 
  • Execute ISO 13485,validation and verification

Education

Department of Applied Materials and Optoelectronics Engineering / Bachelor(Graduate)

National Chi Nan University

September 2010 - June 2014