C6svqm4fdewp8recbkvq

潘家偉 ( Jeremy )

喜歡學習新技術且勇於嘗試新挑戰,做任何事情⼀定全⼒以赴,不希望在未來留下遺憾。曾經在趨勢科技擔任 QA Engineer,負責產品自動化測試與前端工作,目前在萬達寵物擔任 Front-End Engineer。

前端工程師 Front-End Developer
新北市,TW
[email protected]

學歷

國立臺北科技大學,2015 年 9月 - 2017 年 8月

碩士 - 資訊工程所

私立元智大學,2010 年 9 月 - 2014 年 5 月

學士 - 資訊工程學系

工作經歷

趨勢科技 Trend Micro 股份有限公司,QA Engineer,2018 年 3 月 - 2020 年 2 月

  1. 使⽤ Selenium 撰寫⾃動化測試
  2. 進⾏產品的 Regression test、E2E test、Integration test
  3. 使用 React、Redux 進行前端開發
  4. Bug 修正
  5. 撰寫 test plan / test case 

萬達寵物股份有限公司,Front-end Engineer,2020 年 7 月 - 現在

  1. 使用 React 與 Next.js 開發毛孩市集網站與公司內部系統
  2. 開發公司前端團隊共用元件
  3. Bug 修正
  4. 使用 Jest 與 Puppeteer 撰寫 Unit Test 與 E2E Test 

技能


Language

  • JavaScript
  • TypeScript
  • Python


Front-end

  • React
  • Next.js
  • Redux
  • Gatsby
  • Apollo
  • Webpack


HTML / CSS

  • HTML 5 
  • Bootstrap
  •  Material-UI
  • Blueprint
  • SCSS
  • Styled Component
  • Tailwind


Back-end

  • Node.js 
    • Express.js
    • GraphQL
    • Prisma
  • Python
    • Django


Testing

  • Jest
  • Puppeteer
  • React Test Library
  • Selenium


Database

  • MySQL
  • PostgreSQL
  • DynamoDB


DevOps

  • Git
  • AWS CodeBuild
  • Docker
  • Jenkins

專案


毛孩市集電商網站

毛孩市集是台灣的寵物電商平台,販賣各式各樣的貓狗寵物用品,網站中提供了購物網站的各種功能,例如:購物車、信用卡付款、第三方會員登入、會員中心、線上客服…等。專案使用 React 搭配 Next.js 開發,並且使用 Apollo Client 透過 GraphQL 與後端溝通,元件使用 Jest 撰寫單元測試,另外,也使用 Puppeteer 進行 E2E 測試,確保每次發佈前功能運行正常。

  • Front-End:TypeScript、React、Next.js、GraphQL、Apollo Client
  • UI / CSS Framework: Blueprint、SCSS
  • DevOps:AWS Codebuild

Paragraph image 06 00@2x
Paragraph image 06 01@2x
Paragraph image 06 02@2x

寵物公園 POS 機

寵物公園門市的庫存銷售管理系統,提供門市人員進行商品結帳、查詢會員資料、查詢銷售資料、商品退貨…等,傳統的 POS 系統為桌面應用程式,在此專案我們將系統搬至 web 上運行,大量使用了 React Context API 進行資料的傳遞與更新,專案整合了 state-decorator library 來管理元件內複雜的狀態,讓開發更輕鬆且提升可讀性。

  • Front-End:TypeScript、React、Next.js、GraphQL、Apollo Client
  • UI / CSS Framework:Material-UI、CSS-in-JS
  • DevOps:AWS Codebuild

Paragraph image 06 00@2x
Paragraph image 06 01@2x
Paragraph image 06 02@2x

萬達寵物 ERP 系統

萬達寵物的企業資源規劃系統,讓公司員工能即時的管理公司內的料件、銷售、庫存、促銷資料…等,當變更資料需要上級主管同意時,主管可以使用簽核功能執行同意或拒絕的動作。此專案使用 Blueprint 打造高度客製化的元件,也使用 exceljs 進行批次資料上傳,方便員工處理多筆資料。

  • Front-End:TypeScript、React、Next.js、GraphQL、Apollo Client
  • UI / CSS Framework:Blueprint、SCSS
  • DevOps:AWS Codebuild

Paragraph image 06 00@2x
Paragraph image 06 01@2x
Paragraph image 06 02@2x

Trend Micro Maximum Security

Trend Micro Maximum Security 是⼀套歷史悠久的防毒軟體,具備病毒防護、網⾴防護、家長防護網及阻擋垃圾信件…等,在這個專案我主要負責進⾏各種產品的測試,包括⾃動化測試、E2E 測試、各個模組間的整合測試…等,也會協助國內外的客服人員解決客⼾的問題。

  • Automation Testing Language:Python
  • Automation Testing Framework:Selenium


Paragraph image 06 00@2x
Paragraph image 06 01@2x
Paragraph image 06 02@2x

Trend Micro Security

Trend Micro Security 是⼀個 Edge / Chrome extension,主要有網⾴防護、廣告阻擋及密碼管理的功能,在這個專案我主要負責修正錯誤及部分前端⼯作。

  • Frond-End:React.js, Redux
  • Back-end:C#
  • Workflow:Jenkins, Git

Paragraph image 04 00@2x
Paragraph image 04 01@2x

作品


Sp0rtsb00k

Sp0rtsb00k 是⼀個可以查詢 NBA 數據的網站,包括每⽇對戰成績、對戰數據、單季排名…等。資料從 NBA 官⽅網站及其它運動網站取得,並且根據 GraphQL 資料查詢格式提供前端拿到需要的資料,未來規劃完成 Gamecast 及 Schedule 功能,並且加入其他聯賽的資料。

  • Front-End:Next.js, Material-UI, CSS
  • Back-End:Apollo Server
  • Database:PostgreSQL (ORM: Prisma), DynamoDB
  • Workflow:AWS, Jenkins, Git

Paragraph image 06 00@2x
Paragraph image 06 01@2x
Paragraph image 06 02@2x

Twitch Helper

Twitch-helper 是⼀個 Chrome 的 extension,提供 Twitch 聊天室表情符號的提⽰功能,也會⾃動存取曾經輸入過的字句,⽅便使⽤者聊天。

  • Frond-End:React.js, HTML, CSS
  • Back-End:Golang

Paragraph image 02 00@2x

校務資訊系統

此系統提供⼀個平台讓各處室承辦⼈員存放表單內容,且根據不同的⾝份給予相對應的權限。系統除了作為資料庫讓承辦⼈員能匯入、匯出、查詢等等,還加上了分析功能,根據各處室提出的分析需求和題⽬,設計分析⽅法,並且以長條圖、折線圖和表格 的⽅式,呈現在畫⾯上使⽤者看,更進⼀步地使⽤迴歸分析、多元迴歸分析及⽪爾森相關係數來幫助使⽤者了解分析結果,以及 各資料之間的關係。

  • Front-End:HTML, CSS, jQuery
  • Back-End:Java Servlet
  • Analysis:R Language
  • Database:MySQL 

Paragraph image 06 00@2x
Paragraph image 06 01@2x
Paragraph image 06 02@2x

小畫家

研究所 Design Pattern 課程完成的作品,類似 Windows ⼩畫家的程式,具備產⽣長⽅形、圓形和正⽅形、移動位置、組成群組、解散群組、圖形上下排序、undo 和 redo、刪除圖形功能。

  • Langauge:C++
  • Framework:Qt

Paragraph image 02 00@2x

自傳


個人簡介 


我出生在一個和樂融融的家庭,從小父母灌輸給我認真處世的態度,姐姐也是我的榜樣,讓我養成凡事全力以赴的精神,即使面對困難也會想辦法解決,不會輕言放棄。平日我喜歡打籃球、慢跑、聽音樂或是玩些電腦遊戲來紓解心情,好準備下次的挑戰。


求學歷程


因為對於軟體的開發有極大的興趣,所以大學決定就讀資訊工程科系,大學期間修讀了程式設計、資料結構與演算法,讓我的程式基礎非常紮實,因此對於其他程式語言也能駕輕就熟,除了核心課程,選修方面我選擇了一些其他程式語言與應用的課程,例如內嵌式系統設計、生物資訊概論與敏捷是軟體開發,幫助我更了解資訊對於社會上的運用及如何將軟體套用到機器上與硬體結合,而藉由以上課程的學習,我也嘗試寫一些app小程式及網頁開發,希望增加一些程式開發的經驗。 進入研究所後,我學習到更進階的撰寫程式技巧,例如物件導向設計這門課學習到如何設計一個基於物件導向的大型程式架構,在樣式導向設計則學會套用Design Pattern來減少程式之間的相依性,增加可讀性並方便日後的維護,另外,我也選修軟體測試這門課,學會從一個測試人員的角度來看程式,並且對程式進行白箱測試及黑箱測試;在研究方面,我跟著教授使用機器學習的技術來進行模型的開發,找出人類無法從數據中觀察到的關聯性並進一步預測。


工作經驗 


研究所畢業後,我進入趨勢科技擔任 QA Engineer ⼀職,主要負責產品的測試,包括⾃動化測試、回歸測試、E2E 測試及整合測 試…等,當測試到 bug 時,我會先找出重現的步驟,接著根據錯誤的訊息從程式碼中尋找可能的原因並提供解決⽅案給 RD 參考,因此同事們對我的能⼒及⼯作態度給予肯定,另外,由於研究所有前端相關的經驗,我也負責部分的前端工作。在趨勢的這段⽇⼦,我體驗到了完整的軟體開發流程,從產品經理決定新版本的新功能到 RD 開始開發,接著 QA 進⾏測試直到產品穩定,最後產品成功發佈後,直接⾯對客⼾幫忙排除問題及聽取回饋,這些過程雖然辛苦,但獲取到的經驗對我的未來非常有幫助。 離開趨勢後我來到萬達寵物擔任 Front-End Engineer,負責毛孩市集網站與公司內部系統的前端開發,開發團隊非常重視一致且簡潔的 Coding Style,且功能開發完成必須由其他同事審查程式碼,當有想法時即可在 PR 中提出並且修正後才能進行合併,因此大大提升了我的程式碼品質。同事間除了認真開發外,每週也會定期舉辦讀書會,主題包括了前端與後端技術,甚至到日常生活的興趣都有,開心之餘也讓我受益良多。


未來規劃 


未來我希望能朝資深工程師邁進,讓我能運⽤這幾年工作的開發經驗與累積的程式碼撰寫能力,⽽在⼯作期間我也非常樂於學習任何新的技術並加強不⾜的地⽅,盡⼼盡⼒完成公司指派任務,進⽽創新軟體的功能,提升公司的競爭⼒。