User 12844 1479004709

王士誠

0968-679-772  •  [email protected]  •  4-x.tw

我是王士誠。 熱衷於實作與系統開發,並擅於透過網頁整合各種資訊系統。 

休閒之餘喜愛發想 Side Project,開發各種網頁擴充功能目前累積總使用人數約 30,000 人以上。 



技能


  • Basics:HTML5|CSS3|JavaScript|jQuery
  • Styling:Bootstrap|RWD
  • Frontend Frameworks:React
  • Backend Frameworks:Node.js
  • Building tools:Webpack|Npm & Yarn|Eslint
  • Database:Firebase|MySQL
  • Dev skills:Git Version Control
  • Mobile Application:Webview | PWA Application

專業經歷



成功大學 工程科學所 研究助理,2019 年 7 月 - 2021 年 9 月

  1. 設計與開發線上數位學習系統
  2. 開發資料蒐集系統,並進⾏資料分析
  3. CSS 框架使⽤ Bootstrap
  4. 後端使⽤ Node.js 與資料庫 Firebase
  5. 規劃與掌控專案時程及成本

Experiences 00 00@2x 504900dc09d82f711fdb54cf5763251cab5193a844856da978b2b8f3907ecd5a

勝強科技 前端工程師,2018 年 7 月 - 11月

  1. 設計與製作公司形象規範、網站視覺風格
  2. ERP 系統開發
  3. CSS 框架使⽤ Bootstrap
  4. 後端使⽤ C# 與資料庫 MS-SQL
  5. 與業務、企劃、程式設計等相關⼈員配合,協同執⾏專案
  6. 規劃與掌控專案時程及成本
  7.  設計電⼦商務平台,並進⾏維護
  8. 負責網⾴程式的開發設計與修正更新
  9. 協調其他網⾴設計師,進⾏網站連結設計之相關事項
  10. 負責網站更新與管理


Experiences 00 00@2x 504900dc09d82f711fdb54cf5763251cab5193a844856da978b2b8f3907ecd5a

前端開發作品


PaoGo 共享代購平台

這是一個讓使用者互相代購的平台。 使用基於 Bootstrap 的 Creative Tim NOW Ui Kit ,並進一步刻板的網頁。 透過 AJAX POST 方法與後端串接,帶入使用者 JWT Token 請求頁面相關資料。

Paragraph image 02 00@2x cb1a9cce8ec2420576e7f93d4a97d2663cb38d3060b7943702140d7f6da9f81e
Projects 01 00@2x 9a5a97084c8e268ae3725d8e03654d1815ae2eb597b59c292ae4d0beffa7b703

註冊畫面


Projects 01 01@2x 5659ae1046a29c3ededd36e4a50b2c0f0c26b5fd7152a5d1cc138de803a81cbf

登入畫面

Projects 01 02@2x fe789c7495428f4bddd216a44a8d0d12ce13fbeed0f26e9c9f2fa6c5fb4b5cc2

個人頁面

Projects 01 00@2x 9a5a97084c8e268ae3725d8e03654d1815ae2eb597b59c292ae4d0beffa7b703

建立需求


Projects 01 01@2x 5659ae1046a29c3ededd36e4a50b2c0f0c26b5fd7152a5d1cc138de803a81cbf

需求清單

Projects 01 02@2x fe789c7495428f4bddd216a44a8d0d12ce13fbeed0f26e9c9f2fa6c5fb4b5cc2

任務清單

前端開發作品


Weather Disease

Weather Disease - Dengue Fever 是一個整理有關登革熱的分析平台。 

 使用Bootstrap 刻板的網頁。  全站為靜態網頁,使用 JS 刻畫大量視覺化圖表。

Paragraph image 02 00@2x cb1a9cce8ec2420576e7f93d4a97d2663cb38d3060b7943702140d7f6da9f81e
Projects 01 00@2x 9a5a97084c8e268ae3725d8e03654d1815ae2eb597b59c292ae4d0beffa7b703

簡介畫面


Projects 01 01@2x 5659ae1046a29c3ededd36e4a50b2c0f0c26b5fd7152a5d1cc138de803a81cbf

產品畫面

Projects 01 02@2x fe789c7495428f4bddd216a44a8d0d12ce13fbeed0f26e9c9f2fa6c5fb4b5cc2

小組介紹

Projects 01 00@2x 9a5a97084c8e268ae3725d8e03654d1815ae2eb597b59c292ae4d0beffa7b703

(視覺化資料) 動態歷年圖表


Projects 01 01@2x 5659ae1046a29c3ededd36e4a50b2c0f0c26b5fd7152a5d1cc138de803a81cbf

(視覺化資料) 可分區 圖表

Projects 01 02@2x fe789c7495428f4bddd216a44a8d0d12ce13fbeed0f26e9c9f2fa6c5fb4b5cc2

(視覺化資料) 標示分區折線圖

Projects 01 00@2x 9a5a97084c8e268ae3725d8e03654d1815ae2eb597b59c292ae4d0beffa7b703

呼吸燈閃爍標示


Projects 01 01@2x 5659ae1046a29c3ededd36e4a50b2c0f0c26b5fd7152a5d1cc138de803a81cbf

(視覺化資料) 世界地圖 圓點標示

Projects 01 02@2x fe789c7495428f4bddd216a44a8d0d12ce13fbeed0f26e9c9f2fa6c5fb4b5cc2

(視覺化資料) 動態搜尋表格

Chrome Extension


4cUrls

將網址列中不必要的參數移除,點按擴充功能圖示可以快速複製網址。

線上會議自動接受工具

讓 Google Meet™ 自動接受所有加入者請求,不用再手動一個個案同意。

SScholar

基於 SCI-HUB 快速搜尋論文PDF檔案。右鍵可以使用 Google Scholar。

STranslate

將整段句子透過右鍵選單使用 Google 翻譯進行翻譯。同時翻譯內容將會自動換行功能,提升翻譯整段句子易讀性。

SDeepL

將整段句子透過右鍵選單使用 DeepL 翻譯進行翻譯。同時翻譯內容將會自動換行功能,提升翻譯整段句子易讀性。

NAER

在任何一處瀏覽到需要查詢的單字時,只需要將單詞選取後右鍵點擊「NAER 找單字」,即可快速開啟搜尋結果。

Messenger-Lite

一款可以直接點擊圖示即可開啟 Facebook Messenger 的小工具。

BestYT

將 YouTube 片尾推薦縮圖與頻道縮圖等資訊移除,避免遮擋到片尾內容。

SShopee

瀏覽到感興趣的商品名稱時,將名稱選取後右鍵快速開啟蝦皮搜尋結果。

Google-Maps-Lite

一款簡單的 Google 地圖搜尋工具。 

選取字句右鍵透過 Google 搜尋地圖。

Google-Images-Lite

一款簡單的 Google 圖片搜尋工具。 

選取字句右鍵透過 Google 搜尋圖片。

SCurrency

將包含貨幣單位的價錢選取右鍵點擊「貨幣搜尋」,即可快速開啟搜尋結果

專案開發


COVID-19 防疫平台


  • React.js
  • Webpack
  • Npm & Yarn
  • Eslint
  • babel
  • Firebase Hosting

Paragraph image 02 00@2x

語音轉文字服務


  • Microsoft Speech to Text API
  • Microsoft Translator API 
  • Progressive Web Apps
  • HTML5
  • CSS
  • JavaScript
  • Firebase Hosting

Paragraph image 02 00@2x

JS爬蟲 GitHub應用


  • HTML5
  • CSS (Bootstrap 4)
  • JavaScript
  • Google Sheet Api
  • CORS Anywhere
  • Firebase Hosting
  • Without GitHub API

Paragraph image 02 00@2x

專案開發


溫室環境監測系統

  • Apache ECharts
  • HTML5
  • CSS
  • JavaScript
  • Firebase Hosting
  • Firebase Authentication
Projects 01 00@2x

爬蟲備份感測器數值

Projects 01 00@2x

多個感測器清單

Projects 01 00@2x

單感測器視覺化圖表

Projects 01 01@2x

雙感測器視覺化圖表

專案開發


縮網址服務


  • HTML5
  • CSS (Bootstrap 4)
  • JavaScript
  • Firebase Dynamic Links
  • Firebase Hosting

Paragraph image 02 00@2x


解析 Scratch 專案


  • HTML5
  • CSS (Bootstrap 4)
  • JavaScript
  • Firebase Hosting
  • JavaScript library (zip.js)

Paragraph image 02 00@2x

WordPress 專案


丰尚整形外科診所 

APlus 睿智網路工務所   

Projects 01 00@2x

受好事創生創意有限公司邀約,對丰尚整形外科診所進行網站規劃與製作。並在擔任公司網站顧問,與技術支援。

Projects 01 01@2x

協助 Aplus 站長進行架設科技部落格,並擔任網站技術支援。


台灣科技促進語言學習理論與實踐學會 

愛瘋樂園

Projects 01 00@2x

受實驗室學長邀約,共同製作 PPTELL 學會官方網站。

Projects 01 01@2x

協助 愛瘋樂園站長 站長進行架設科技部落格。


王士誠

0968-679-772 • [email protected]4-x.tw