最近有參與高雄的開源社群Code for Kaohsiung,除了人到場以外,也想盡份心力,所以試著來提出一個構想,花了些許時間建立了模型,並且拿到社群介紹這個構想。這個構想源自於之前所研究的D3.js,在後期的學習,會思考怎樣可以簡易的建立資料,並且運用圖表分享。
這僅僅是原型
這個原型輸入Google試算表的Key後,會從試算表中擷取資料,將資料的key及value整理後,使用者只要選擇需要的key,就會直接轉換成圖。如果完成預期情況使用者會透過以下步驟:
- 在Google spreadsheet上建立資料表格
- 取得Google spreadsheet Key
- 在該網站上貼上Key,並開始測試圖表
- 儲存圖表狀態,並且儲存
- 分享圖表
當天雛形已經可以做到很基本的1、2、3,介紹後不少人有興趣,讓我更有信心完成它,於是就找了高雄前端社群的主辦人來協助完成。
前端執行
在開始製作時,為了可以快速且順利的完成,選擇較擅長的幾個技術,搭配些許其他應用,以下是主要的CSS Framework & javascript lib。
- bootstrap (套用版型,以及部分plugin功能)
- Jquery & Jquery UI (主要Javascript lib)
- D3.js , C3.js (繪製圖表)
這些套件已經有包含大多數所需要的功能,可以快速地完成所需要的功能,不過在執行中遇到了些問題,像是Two way binding…,原本想用Jquery寫就是希望可以快點產出,而在使用者操作的部分,如資料的選擇、圖表的切換,如果沒有使用Two way binding,是很難達到良好的使用者體驗。如果還有下次,會希望趕快研究angular,在這部分可以較容易達到這個需求。
後端
後端是使用Node.js,也是想趁機了解node Express的架構,以及前端配合的方式,在實際開始時,發現node express挺好上手的(就以前端來說),接下來我也在上面運行gulp、coffeescript、sass等等…。如果有機會,會再向大家介紹所使用的前端技術的。
Deploy到Heroku是很棒的經驗,雖然在之前學Rails有推過一次,但這次不是透過教學啊!Heroku的方式,讓我有真正轉職到工程師的感覺,多麽的輕鬆優雅指令解決繁雜步驟…。
前端半成品
網站的入口,進入後如果是老手直接填入Key就可以了,如果是新手,會引導到教學範例。
這個圖表我從主計處挖來的資料,是關於各個行業的平均薪資,也可以看出各個行業在不同時間的成長及消退,從中也可以知道什麼行業行情好…,很值得入坑…。
除此之外,還會有其他使用者分享的頁面、範例教學、圖表下載等等功能,這些頁面也是不斷地調整操作流程,試著讓使用者易於理解。
如果可能的話,會盡量在農曆年前釋出第一版,也希望大家能夠給我們更好的回饋,並且以行動支持Code for Kaohsiung,不斷的激發更好的創作能量。