HackUST 2017 後記

第一天中午的時候已經把 Demo 做出來了，但是不知道為什麼刪除node_modules之後，Expo 就直接崩潰了。這是因為package.json裡面根本就沒有把完整的dependencies寫出來，當我輸入npm install的時候就不能順利安裝。於是我只能在 CodePen 裡面開一個 Pen 用來做控制器。

技術細節

這個控制器利用window.addEventListener('deviceorientation', handleOrientation);來監聽 Android 裝置的方向。當加速規偵測到裝置方向的變化，它就會調用handleOrientation方法。

而handleOrientation方法有兩個目的：

1. 獲取event裡面的alpha, beta, gamma數值，它們分別代表裝置的 z 軸，x 軸，y 軸動向。

z 軸介乎於 0 ~ 360 度之間，x 軸介乎於 -180 ~ 180 度之間，代表裝置的前後動向。y 軸介乎於 -90 ~ 90 度之間，代表裝置的左右動向。

1. 發送 event 到服務器。

這個很簡單，利用 socket.io 就可以了。比如說socket.emit('event');

而在展示用戶數據的時候，我們用 C3.js 來做實時渲染數據。利用 C3.js，我們很容易就可以產生 D3 圖表，而不是重寫 D3 代碼。我們也可以修改每一個元素的樣式。感覺再寫下去就變教學文了。

比賽照片

以下是比賽時拍攝的一些照片：

Imgur

感謝這次一起參賽的三位隊友。

Imgur

Imgur

hackUST 2017 (Calpa Liu)

Imgur

Imgur

這次主辦單位派發了港幣 120 元的餐券，還有很多零食，飲料。最重要的是，有我最喜歡的忌廉汽水 www。希望以後都可以繼續參加比賽，學習更多的編程知識。

參考資料

1. Detecting device orientation - MDN
2. Socket.io 官方文檔
3. C3.js 官方 Starter