ChuBoy
Web developer
Data analyst

scroll down

技能與專案

FRONTEND

FRONTEND

FRONTEND

Vue

音樂清單

media player
firebase
youtube api

專為電腦使用者設計「以清單為導向」的播放器,部屬在Firebase且擁有熱門排行統計的功能,使用者可以建立與分享自己的音樂清單。

React

聊天室

node server
sqlite
socket.io
Next.js SSR

部屬在虛擬機的全端網頁作品(採用JessHsu的設計稿),透過Web Socket,使用者可以即時地傳輸訊息與圖片。

BACKEND

BACKEND

BACKEND

Python

文章點滴

爬蟲
資料科學
後端框架
資料庫

Line Bot聊天機器人

line APInodemongodb

故事由來:服役期間受營外回報所困擾,只要是最晚回的那個就得隨時收集大家的訊息並且按照座號排序整理,為了不讓大家互相傷害,乾脆寫一支linebot幫忙搞定!!!

技術層面:line開放開發者使用messaging api的服務,可以新增機器人的頻道,將channelId、channelSecret、channelAccessToken 透過安全應用層https以post的方式和後端伺服器安全地連結,同時後端node.js套件npm中有一個linebot套件包,結合免費的 Heroku---提供免費後端平台的服務PaaS,就能客製化自動彙整班兵回報的機器人。

網址連結:https://github.com/billju/ninja-hattori

Android範例

demoandroid studio

故事由來:當創客時參加了ARM競賽,以無人商店為題,因緣際會下自學安卓APP開發,希望寫個APP能夠掃描商品標間,並配合物聯網將客人的需求快速加入購物車,為了不忘記這些技術概念,將每塊功能以使用範例的方式紀錄下來作為手冊。

功能簡介:MyStore APP可以掃描商品上的QR CODE並且連結至後端伺服器進行行動支付,同時具有購物車與餘額查詢功能。

網址連結:https://github.com/billju/Android-source-code-demo

Packing最佳化

operation researchoptimizergurobi

故事由來:就學期間有門課在研究線性規劃模型,大家都做TSP(traveling sales problem)路徑搜索問題,我想做不一樣的,反而將線性規劃(linear programing) 套用在物流業界中貨物堆疊的問題,做出不一樣的成果,此模型可設定堆疊條件進行規劃,像是貨物的重量、下方貨物的面積。

網址連結:https://github.com/billju/gurobi-packing

逐字稿&字幕編輯軟體

rich text editorweb audiomediaSRT file IO

故事由來:開會總是要做會議紀錄,若要在紀錄細節時,邊聽錄音檔邊寫紀錄常常需要切換桌面應用程式,不斷切換播放器與編輯器的頁面,還容易因為沒打時間點,花費許多額外心力尋找關鍵字,因此我特製了專屬編輯器讓工作變得更方便,後來又靈光乍現地擴充了影片上字幕功能,並且把檔案IO格式轉為通用的SRT,讓影音製作者也能夠享受到這番方便性。

技術層面:因web audio的解碼會佔據大量記憶體的問題,改對即時產出的波峰進行取樣,讓長達數小時的影音也能將波形視覺化,並自製文本編輯器將每段文字加入時戳標籤。

網址連結:https://chuboy.dev/transcriber

Webpack我全包了

npmwebpack

最新文章:webpack入門與設定範例,介紹如何打包HTML/Pug, CSS/Sass/Scss, JS/Babel,以及完整範例。

網址連結:https://hackmd.io/tkWGj4THScCtgumJRMkhXA

lightGIS地理資訊系統

OOPVanilla JSWEB GIS

全手刻的網頁版輕量地理資訊系統,除了能夠當繪圖軟體、進行圖層分析,還能當圖片檢視器,打開右方開關開啟圖層,拖曳圖層名稱切換先後順序,點擊右鍵開始繪製,可匯入圖片檔與geojson檔, 未來將整合PTX資料,我希望整合交通資訊,讓規劃者能更快速的進行疊圖分析,讓用路人有更多元的運具選擇, lightGIS可以上傳csv、geojson、圖片等檔案,以及編輯完後可以匯出geojson、png、svg,使其可以相容市面繪圖軟體與GIS軟體。

網址連結:https://chuboy.dev/lightGIS

路徑搜索演算法

不管是做導航軟體或是遊戲,總是離不開路徑搜索的問題,A*演算法設計了f,g,h三個權重進行比對,能夠快速又有效率地找出通往目的地的方法,以下是個迷宮小遊戲範例,點擊方框可以興建或拆除障礙物,點擊按鈕試試看。

Click me!

MORE PROJECTS

visit site

Pomodoro

visit site

Tetris

visit site

Agar.io

visit site

Draggable Tetris

visit site

Freecell

visit site

Greenband

Lorem ipsum dolor sit amet consectetur `adipisicing elit. Perspiciatis dolorum eius inventore officia qui quisquam, aspernatur quaerat sint, assumenda nobis architecto corporis excepturi atque asperiores tempora non quibusdam aperiam vitae.

點圖片進入連結,點黑底返回