CakeResume Talent Search

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

• 針對播放器的卡頓優化，提升了播放器的流暢性與降低加載時間，提升了四季平台的網頁駐留時間、以及增加了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

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

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

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

• 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