Stanley

開發經驗8年,管理經驗3年,擁有完整全端開發經驗,包括SEO、前端 (React / Vue)、Serverless(Nodejs, Ruby)、後端 (Ruby on Rails) 到運維一手包辦,同時也透過Cordova以及 Flutter開發2款APP以及上架。在過去的接案時期累積許多扎實的開發產品從0到1的經驗到運維面的架構規劃也考取AWS架構師證照,擁有豐富的開發經驗 。 


曾擔任前端和技術主管,處理專案切分、管理、分配任務能達到最快的開發進度,熟悉如何使用工作優化管理,讓整個團隊進行流暢,目前希望能找到適合的技術管理職。


IELTS Band: 6 (2018 / 9) 

Side Project: Paghihub


結合Sketch的UX操作方式實現做RWD網站的工具,目標改善靜態頁面切版的生態,讓設計師做完設計即是RWD網頁。

  • 原有串連API與後端互動且可發佈,但目前改為local版本不處理儲存資料
  • AWS HTTP gateway + AWS Lambda (Node.js) + AWS DynamoDb + AWS Elasticsearch
  • Vue  + ClouldFront
  • 精通深層樹狀(Nested)資料處理

人生經歷

Firstage2020年7月~2021年7月中 (一年合約制)

擔任技術主管,處理AWS全球架構和規劃管理,帶領 2 位前端2位後端工程師開發
  • 精通WYSIWYG Editor的開發,同等Medium編輯器
  • Nuxt.js + AWS Amplify
  • 原使用Ruby on Jets框架開發Lambda,之後改為AWS CDK (Typescript)
  • 熟悉AWS Severless開發生態和AutoScaling等高負荷架構
  • 整合Stripe國際金流,並使用NoSQL實現訂閱和單次購買的資料庫架構

在菲博弈:2019年3月2020年3月 (疫情回台)

擔任前端主管帶領 4 位華人工程師開發前端,並同時全英文溝通及管理 2 位菲律賓本籍人開發Ruby on Rails 

  • 使用 Vue 開發 4 個現金網目前 2 個在線
  • 優化前端現金網效能 Google Pagespeed (Lighthouse),已上線 2 個現金網最高分電腦98,手機96 (滿分100)
  • 代理中心
  • 重構部分現金網後台介面及權限管理
  • 使用 Quasar (Cordova) 開發兩個聊天APP,已上架 IOS, Android
  • 使用 Flutter 開發電競資訊站
  • 使用 Ruby on Rails 開發 Web Socket 聊天室、後台管理,及RESTful API
  • 主持公司內部技術分享每個禮拜一次為期 6 個月,分享各種前後端技術
  • 使用Github Action 整合 CI 流程
  • 現金網的會員中心前端改版
  • 開發Cypress整合測試、PWA、Postman API 測試、Postman Mock

澳洲闖蕩 Zetya:2017年4月~2019年2月

在澳洲公司BookThatApp (澳洲老闆) 全英文環境下擔任全端 Full Stack (React / Rails) 工程師,同時須管理一位前端工程師

  • 使用 Zoid, iframe-resizer和 React 實做 4 個 iframe 跨網域套件,可以坎在任意網站以及不同網域可互傳資料的預約型工具
  • 使用 React 開發電商管理後台
  • 使用 Rails 獨立開發 RESTful API 供套件使用
  • 使用 Flipper 實現只使用 Master Branch 的開發流程,亦即直接使用 Master 開發新功能不使用 Staging,優點可使開發功能時無Commit Conflict,不會有Stale Branch


在台經歷 Infocharge : 2015年2月 ~ 2017年3月

擔任全端 Full Stack (Vue / Rails) 工程師

  • 使用 LogStash 儲存人臉辨識資料(表情、心情)並使用 Elasticsearch 分散式搜索特定資料
  • 使用 GrapeJs 開發可客制廣告畫板的工具。
  • Vue 打造 CMS 後台顯示數據,開發廣告金額下單介面、廣告開始暫停以及預約功能、計價報表系統
  • 使用 Sidekiq (Redis) 大量非同步發佈回收廣告機制

接案時期:2014年6月~2016年3月 

歷經了 10 個專案從需求訪談、需求分析縮小到MVP範圍、跑Scrum、前端開發、後端開發、運維(AWS / GCP)

  • 開發過完整 3 個已上線購物車服務、1個純 RESTful API Server、2個BLOG服務、 3 個預約型產品服務、1個人臉辨識服務供銀行內部使用
  • AlphaCamp Javascript, Rails 線上教程助教

專案管理經驗

每週技術分享

  • 每個禮拜每個組員分享15分鐘技術內容,包技術文件、當周遇到的困難和解決方法、Code Reivew時學到的技巧,此方法有助於讓每個組員了解互享不同專案內部粗略的概況,提升每個組員的水平使開發加速,每個人知道遇到什麼樣的問題該找誰


開票原則

  • 票盡量完整敘述減少各個流程的口頭溝通,再小的票都做紀錄及追蹤或是組員會自己開票紀錄,使用看板(Kanban)管理開票以及管理票的流程,並透過看板了解各個組員進度。

整合工具

    以下工具整合以下流程,各服務會串接到 Slack 接收即時資訊,各組員各自負責的專案群組會有各自訊息

  • (開票) 使用Zenhub管理開票及進程
  • (Mock開發) 使用Postman整合管理所有API,且可當Mock API
  • (測試) 使用Eslint、Prettier、Cypress整合測試配合Github Action,跑 CI 流程
  • (部署) 開發部署工具並整合 Github Action 做CD部分 (因運維其他因素後來取消)
  • (收集線上Bug) 裝Rollbar即時接收Bug訊息

前端經歷


Vue

媒合預約型產品的網站,i.e:預約剪頭髮、做指甲的設計師的工作時段,或是健身教練的上課時段。

快速掌握影集與漫畫的進度。寫定時爬蟲的程式,郵件通知最新集數與連結網址。 
前端可管理想要訂閱的網址,後端會定期爬資料顯示在前端。

  • Advertisement Management System
純 Vue 打造簡易廣告 Carousel 工具
使用者可增加刪除Slider並選定版型,上傳照片後可發布到 Android Tablet 輪迴播放 (與GrapeJs客製平台是不同功能)

Android Tablet輪迴播放後會經由鏡頭的人臉辨識系統抓取有效數據,所以使用Vue打造數據管理系統,可觀看報表以及經濟效益 (花了多少錢有多少人觀看) ; 也可經由此平台管理廣告發布,可選定該Carousel發佈到指定的 Android Tablet。


Quasar / Cordova / Flutter

  • 透過 Flutter / Quasar 開發 IOS Android UI介面 
  • 實作熱更新,只更新畫面靜態CSS, JS資源,不透過冷更透過 Flutter / Quasar 開發 IOS Android UI介面 
  • 新使APP需要重新下載
  • 手機可像Wechat一樣,向上滑開始錄音,放開及結束錄音,並根據手機系統產生不同音檔格式
  • 實作Websocket與Server溝通串接語音、照片、以及文字訊息
  • 具有開發雙平台的Git管理經驗(與一般產品開發流程必然不同)
  • 熟悉使用Cordova操作IOS Android權限
  • 傳接友盟Umeng 消息推送、移動統計
  • 使用Sqlite3處理歷史訊息

Side Tool
  • Github Action 
  • 使用Postman Tiny Validator (v4 JSON Schema) 
  • 使用Postman 寫整合測試,週期性測試並數據回報 
  • Eslint / Prettier / Stylint 
  • Yarn / NPM 
  • 善用 Webpack, webpack-dev-server 打包 (Babel / Polyfill) 
  • Cypress 撰寫整合測試,並使用Github Action 達到 CI 流程 
  • Cypress 實踐爬蟲 PWA 優化使用者體驗
  •  Rollbar Bug 監控


Javascript 實作過功能

  • Grapejs 客製拖拉HTML單元元件及邏輯行為,使用元件製作生成任意網頁 
  • Full Calendar 銜接後臺資料以及能實作出calendar能即時預約的功能 link 點右上角的預約 
  • Sortable 可對組件做任意排序,並回傳順序
  • Google map 串接以及判斷使用者所在地 可再經由Search結果動態即時產生location上的座標點 ( 與Yelp搜尋方式一模一樣 ) 
  • Cropper 多張照片可在 同個頁面 同時選擇 同時裁切 同時上傳 
  •  JQuery cart cookies 版 使用 JQuery cookies 實作購物車以及實作出購物網站前端的購物商業行為(增加減商品數量、計算總金額運費等等) 
  • Lazy loading 可配合 kaminari 實作、或是預Load資料在前端但不顯示照片等方式實作 
  • JQuery / CSS animate 運用CSS配合 JQuery 可手刻做出 modal carousel以及決大部分90%網頁上能見的過場動畫 
運維經驗

DevOps

  • 熟悉Linux 操作
  • New Relic 環境監測
  • Rollbar Bug Report
  • 熟悉 Nginx / Passenger / Capistrano 自動化部署 
  • 熟悉 Cloud Flare 設定 及SSL服務
  • 熟悉 Server(Ubuntu) Operation
  • 熟悉 Production / Staging / HSTS 部署
  • Google Cloud Server
  • 熟悉AWS的服務,曾參加AWS的官方AWSome Day。(結業照片) 
  • Elasticsearch 
  • Logstash
  • Kibana
  • Let's encrypt 無限期自動更新


    AWS Cloud Server Structure

    熟悉使用 AWS 服務打造以下架構 :

    • 使用 Auto Scaling 配合 Health Check 達成當 Server死掉可另開 EC2 Instance

    後端經驗


    Rails / Ruby

    • OOP 物件導向
    • Rspec 測試
    • Capybara Integration 測試
    • Ruby Regex
    • Rails Cache
    • Liquid 模板語法
    • Test preload server (Boost Test Speed)
    • 熟悉 Rails Performance / SQL Query 調教 - 私人筆記
    • 熟悉 Refactor Patten  - 私人筆記
    • 序列化 API 版本管理


    Other Skill

    • Laravel 僅開發過兩個月,但由於Laravel 完全借鑒Rails,架構內容80%相似,可直接上手開發
    • Docker
    • Github Action整合 CI / CD (前端)
    • Zenhub管理團隊開發票以及進程
    • JSON Web Token ( JWT )
    • Postman 整合測試、JSON Response測試,可產生每日週報監控API


    Git 版本控制

    • Git 熟悉 add、commit、branch、checkout、merge、 rebase、revert、reset、stash、push、pull、init 等指令 
    •  接案共同協作皆用Git flow / Github flow 流程
    • 常態性為公司 Git mentor


    Async Job


    Rails 實作過功能

    • Rails RESTful API server
    • Devise 會員系統
    • 使用 Cell 實現 Partial 級別的 Cache
    • Kaminari 實現前端分頁功能,以及API Request 分頁功能
    • State Machines 管理狀態,像是訂單的Status
    • Nokogiri 爬蟲 
    • Ransack 搜尋功能
    • Searchkick ( Elastic search ) 搜尋功能 
    • Paranoia 物件假刪除
    • Active Model Serializers 管理 JSON Render
    • Roo Spreadsheet 表單處理
    • Rails Admin會員後台 
    • SEO Meta-tag / Sitemap 
    • Carrierwave / Paperclip 檔案上傳
    • 使用Flipper以及透過UI操作,可實現及控制不同用戶在Production環境可擁有不同功能或邏輯的商業邏輯,或是開發像是V1, V2不同版本功能


    3th Party 實作過功能

    • Firebase (JSON db)
    • Firebase Auth
    • Android Pay server side validation 
    • Apple Pay server side validation
    • S3 File Upload 
    • Twilio 電話簡訊驗證  
    • Google Map 串接及 Geocoder 地理位置應用 
    • Mailgun 發信功能串接 
    • Rpush 串接 Google,  Apple推播服務 
    • 智付寶 Pay2go 金流串接 
    • 紅陽 Esafe 金流串接
    • FB API 串接 
    • Shopify API 串接