# Hot Traders - README
{%hackmd BJrTq20hE %}
> [TOC]
## 團隊
### 協作者
@kafuuchino @cheung4843 [@傑森](https://hackmd.io/@XeE4l86OSbCYQN13oFPNag) [@warner1129](https://hackmd.io/@warner1129)
### 工作分配

| GUI與爬蟲 | 伺服客戶接口</br>資料庫架設 | 互動式圖表生成 | 後端資料處理 |
|:---------:|:----------:|:--------------:|:------------:|
| 傑森 | kafuuchino | cheung4843 | warner1129 |

最後修改時間:
> [time=Fri, Jun 10, 2022 2:06 AM]
## 使用說明

### 概要

近期加密貨幣投資興盛，許多交易所也推出了跟單服務，平台擷取近期收益率排名前段的交易員，推薦給其他交易員跟單，新手小白可藉由跟著資深交易員一起賺錢，同時平台與被跟單者也可以收到相應的抽成，如此對三方都有利處。

不過我們發現平台上充斥著不少疑似為機器人帳號，或是靠運氣上榜的交易員，若是跟這些交易員的單，可能反而會造成虧損。而平台上提供的參考數據僅是一個總覽，並且也相當不直觀。於是我們就想到可以將跟單平台上面交易員的交易數據與歷史幣價結合，並繪製成圖表，提供一個更直觀的數據參考，甚至從中學習交易策略。

### 操作指南
#### 啟動介面
程式啟動會跑進度條連接伺服器，之後會跳出Enter鈕，點擊可進入主頁面


#### 主頁面
主頁面中會有交易員列表，可利用滑鼠滾輪或者是旁邊隱藏式拖曳條進行滑動(當滑鼠在其上面或按住它時會顯示)
交易列表包含交易員的照片、名字、收益率，使用者可依照喜好點擊有興趣的交易員的🔍按鈕，可進入交易員的操作圖表

交易列表共兩種: 當前最佳與歷史上榜，點擊按鈕可來回切換
> * 當前最佳為目前交易所榜上的12位交易員(可能少於12位)
> * 歷史上榜為伺服器運行至今累積的曾經上榜交易員


主頁面包含一搜尋欄，輸入關鍵字並按下Enter會生成名稱帶有關鍵字的交易員列表

主頁面包含一設定按鈕，按下後跳出設定介面，包含團隊名單、語言切換、主題切換、圖表圖示意義說明

#### 交易員頁面

包含交易員資訊、主要交易幣種、與交易圖表
使用者可依喜好選擇不同交易幣種來使用其對應的互動式圖表


### 圖表說明
#### 簡略說明


點擊交易員圖示右方的🔍按鈕，將會出現如上圖的圖表，繪製的開始時間為交易員歷史交易紀錄中最早開倉時間之當天凌晨整點；結束時間為最後平倉時間的次日凌晨整點。

#### 圖示簡介

圖表中，以一組三角形與圓形，代表一組交易，三角形的X軸標示開倉時間，Y軸則標示開倉價；圓形的X軸標示平倉時間，Y軸標示平倉價。若圖示為紫色則代表做空，反之，藍色代表做多。若交易點的樣式是淺色，則代表該次交易其收益率小於等於零。

#### 操作說明
* 使用滑鼠滾輪將圖表放大與縮小。
* 使用滑鼠拖動圖表。
* 將滑鼠放到交易點上以顯示詳細資訊。

## 系統說明
### 系統架構

我們將系統設計為主從結構，主要有以下考量:
* 將主要程式部署在伺服器，方便資料蒐集與調用
> 目前我們數據更新頻率為 1次/天
* 前端APP輕量化
> * 介面只負責調用交易員資料與處理好的圖表
> * 使用者運作流暢，載入數據檔案小
* 方便維護
> 在日後的版本升級與更新僅需調整伺服器內部程式
* 方便移植
> 客戶端僅涉及伺服器的端口呼叫與接收回饋資料，方便在不同平台發布應用程式

### 網路爬蟲&資料擷取

因為交易所設有防爬蟲機制，使用一般的 request 和 jsoup 無法進入網站。因此前期我們花了大量的心力研究如何破解反爬蟲機制。起初，我們嘗試在程式加入 fake_headers 與修改登入參數來偽裝成人類使用者，無效。我們嘗試抓取網站回傳參數來揣摩防爬蟲機制，終於不在被拒絕但收到 Error 502。最後，我們利用Selenium 套件，搭配無窗口瀏覽器驅動，成功進入網站。
抓取過程主要利用 ActionChain 來模擬使用者一切行為，並透過XPATH定位網站元素，最後將擷取元素寫入伺服器檔案以供日後處理。

{%youtube p2mM63yZkbs %}

### 交易所API調用

我們主要透過Binance 交易所的API端口，來獲取交易種的歷史價格。我們先從資料庫中調用交易員的第一筆與最後一筆交易日期，將其設為參數傳給API。值得注意的是，API一次最多請求500筆歷史數據，且資料庫的交易員日期格式不符合API要求，因此我們必須利用 DateTime 套件先行轉換格式並按照500筆時間區間分批請求，最後統一彙整成一json檔，方便日後圖表生成處理。


### 伺服器建立與管理

我們選擇 Ubuntu Server 20.04.4 LTS 作業系統，將主機置於自宅 24 小時運作作為後端爬蟲與資料存取的伺服器。為了追求穩定性與節省系統資源，使用的 Server 版僅有純文字介面，在處理完 Port Forwarding 與 DNS 等對外網路的設定後，皆以 SSH 進行遠端連線，並使用基於 SSH 上的加密 SFTP 進行檔案傳輸。


### 檔案處理與後端整合

在專案初期，因為有限的先備知識以及為了方便程式開發的測試與進行，我們僅是以單純的文字檔儲存爬蟲的擷取結果。也因此必須撰寫相關的程式進行檔案的管理，包括：更新合併、篩選、依特定條件將檔案分開......

### SQL 資料庫建立與調用

隨著爬蟲運作時間的累積，專案開發的進程，所需的查詢功能更加進階，使用單純的文字檔儲存資料開始顯現出弊端，總需為了多一個查詢功能耗費時間設計對應的查詢程式，且在檔案上的管理相當不方便。剛好此時計概上到了檔案管理與資料庫的章節，施伯伯上課所說的內容如餘音繞樑一般，在我們的心裡旋繞著，因此我們決定架設關聯式資料庫 MySQL 伺服器。

話雖如此，MySQL 語法對我們來說是個全新的領域，在剛開始接觸時也是花費了不少時間在做功課，從架設資料庫、用戶權限設定、建立資料表、無數次的嘗試各種 MySQL 語法。最後我們的努力也沒有白費，捨棄了文字檔的資料管理，以資料庫儲存不論是在資料更新、查詢上，都方便了不少，可說是大大提升了專案開發的效率。

下圖為資料庫各個 `Tables` 的 `Schema`，以及最上方 `SELECT * FROM data;` 的結果，目前已累計 7000 多筆交易資料。


### GUI 使用者介面設計
介面的設計理念: 簡潔、易於使用
#### 自定義Interface
java 裡的Intialize 是在開始運行程式當下便啟動，這將使一開始載入時間拉超久(必須獲得"所有"交易員的圖表才能進入)，而且使用者在運行期間並不是每位交易員的的數據都是必須的，這將造成空間與時間的浪費，因此，我們便自定義了一個初始化Interface，讓場景在轉換期間才會初始化。

#### 伺服器調用數據
在運行客戶程式後，會先進入載入進度條，我們利用java的多線程同時和伺服器建立連線，在連線建立完成後調用交易員資料table(包含照片、名稱、收益率)，數據載入完成後，進入主頁面的按紐便會浮現。
#### 交易員列表生成
將交易員的照片、名稱、收益率 包成一個Class，並將數據轉程ArrayList 方便列表讀取，利用ScrollPane加List生成在程式中動態生成列表，並根據數據不同設置不同樣式。注意，ScrollPane裡的滑動條並不會主動初始化和適應列表長度，需要在載入列表時特別設定。
#### 設定欄位
包含:開發團隊名單、修改語言、修改主題、圖表信號意義。
#### 搜索欄
讀取Textfield文字利用sql資料庫自帶的搜尋來搜尋交易員並生成具有同關鍵字的交易員列表
#### 資料錯誤訊息
資料請求採用例外處理，在發生錯誤時會跳出錯誤框並顯示返回按鈕，讓程式不卡死或當機
#### 交易員圖表
在點擊交易員按鈕後會進入交易員圖表，在進入畫面前會先和伺服器請求該交易員前四種主要交易幣種，並對應生成按鈕。在按下按鈕時進入載入畫面。載入畫面與圖表請求以多線程的同時進行，請求原理利用socket將交易員id與交易種傳入伺服器程式，丟給運行中的畫圖程式後生成圖表的html檔，再透過伺服器程式回傳，最後利用HtmlEditor 顯示圖表。

### 互動式圖表設計與生成

#### 技術說明:
##### 簡要
繪圖工具:使用`Bokeh`，繪圖結果以HTML檔儲存。

圖表其實是為兩個圖表合併而成，因資料龐大，合併過程並不容易。
左圖的幣值k線圖資料係利用Binance之API取得，其中時間的Interval為1h。
資料經過處理過後如下圖格式:
右圖為交易員的交易對，X軸的顯示格式與左圖有明顯的不同，因交易對多集中為某個短促的時間區間，導致X軸相當短小，故圖表必須是「k線圖的X軸遷就於交易員的X軸」
資料經整理過後如下圖格式:

##### 流程:

st=>start: 輸入交易員ID與幣種
op0=>operation: 從伺服器中取得對應資料(取得temp.txt)
op1=>operation: 資料除錯與時間格式轉換
op2=>operation: 取得畫圖開始與結束之時間標記，並將交易紀錄時間切割成一小時為一單位
op3=>operation: 時間標記與幣種作為引數傳入API，傳回json檔
op4=>operation: 將json檔進行資料處理並轉換成可操作的資料結構
op5=>operation: 繪製K線圖
op6=>operation: 繪製交易點
op7=>operation: 掛上圖表工具
op8=>operation: 儲存圖表
e=>end: 程式結束，回傳HTML檔

st->op0->op1->op2->op3->op4->op5->op6->op7->op8->e

實際執行之流程檢查如下圖:
##### 檢查工具
* 開發時為了快速瞭解資料分佈情況所撰寫的檢查工具。
* 上圖資料僅為測試用，非實際資料。
* 實際圖表不包含K線圖下方的資料表工具。

### 伺服器-客戶端呼叫與回應

由於我們期望客戶端僅負責 GUI 介面的處理，爬蟲、數據資料，甚至是圖表生成的功能皆是在伺服器運作，資料可以使用 Java 的 MySQL 套件 JDBC 進行連接，但圖表相對起來就比較費工夫。為此我們使用 Java 提供的 Socket 功能，以其建立於 TCP 通訊協議的基礎上，進行與伺服器之間的對話，並索取圖表的 HTML 內容。


---
###### tags: `專案`