# 明志科大109學年畢業專題製作-雲端飲水機管理系統
* 指導老師
* 黃植振老師
* 成員
* 陳存平
* 張志仰

## 海報

### [流量監測網站連結](https://joviannas.synology.me:3000)

## 前言
### 動機
隨著現代人生活水平逐漸提升，越來越注重生活品質方面的需求，從校園內處處可見的飲水機就知道，飲水是生活中不可缺少的一環。飲水機內的濾芯就好比人體器官中的腎臟，因此定期更換內部的濾心才不會導致濾心內汙染物過多以致於過濾水中雜質的效能降低。

目前校園內都是定期一次更換所有飲水機的濾心，但是每台飲水機的使用頻率及用水量都不相同，因此會造成一些飲水機的濾芯其實不需要這麼頻繁的更換，或是必須提高更換濾芯的頻率，過程中可能導致資源的浪費。

### 目標
構建一個管理飲水機的雲端資料庫，並結合物聯網相關技術，透過水流感測器紀錄飲水機的流量，將感測資料以網頁呈現，讓使用者可以使用網頁上的功能檢視特定時間的總量和平均的數據，以及在水流量達到濾心更換標準時網頁上的提醒功能提供給使用者及管理者，以利於後續飲水機裡濾芯的狀況評估。

## 系統概念
**▲系統概念圖**
### 伺服器端
利用容器化技術，使架設好的MongoDB資料庫與網頁伺服器，能夠以輕量的方式在各種已安裝Docker的環境運行。
### 感測端
利用Raspberry Pi上的GPIO腳位與周邊的模組控制，來讀取水流量值，並利用Wi-Fi上傳時間區間內所讀取的流量、裝置時間和裝置編號至資料庫。
### 網頁端
以響應式介面(RWD)呈現，讓網頁結構在各種螢幕比例下不會變形，網頁內容分別為：飲水機地圖、樓層或區域總水流量圓餅圖、各裝置累計流量直線圖，連接方式以HTTPS進行連接。

## 實作

### 感測端硬體架構
使用 Raspberry Pi 作為模擬飲水機的控制器，利用控制器上的GPIO作為周邊模組與硬體的溝通橋樑。

周邊模組包含了：
* 液位感應模組
* 水流計模組
* 雙路繼電器模組：控制馬達110V交流電源
* RTC 時鐘模組：讓Raspberry Pi在未通電時能保存系統時間

操作人員可以透過感測器連接與控制電路板上的輕觸開關與指示燈和液晶顯示模組來操作、得知目前控制器上的資訊與功能。

想像對照一般的飲水機，給水桶相當於水塔，水塔內的水經由水管送到飲水機的儲水桶，透過高準位與低準位的液位感應模組，判斷抽水幫浦是否需要動作，供儲水桶儲水，再利用水管上的水流計模組讀取水流過的水量，來達到統計水量的目的。
**▲感測端架構圖**

### 感測端程式設計
使用的程式語言為Node.js，利用其非同步與Callback的特性來設計，程式的主要功能為接收模組間的訊號，累計水流計的流量、接收液位感應器產生的中斷來控制繼電器、顯示資料庫連接指示燈、控制液晶顯 示模組上的文字，程式流程圖如下。

|  |  |
|:---------------------------------------------:|:---------------------------------------------:|
| **▲主程式與測試資料庫連接流程圖** | **▲水流模組與幫浦停止按鈕中斷流程圖** |
|  | |
| **▲液位感應器流程圖** | **▲時序中斷流程圖** |

### 感測器連接與控制電路
利用EasyEDA軟體繪製Raspberry Pi與周邊模組連接的電路，在電路上擁有3組按鈕與LED燈，與周邊模組的插座，跟連接到Raspberry Pi的排線接口。電路中預留5V的直流電源接口來讓模組有充足的電源供應，在電源旁則串聯一個1N4001二極體，防止電源接錯，傷害到周邊電路。

|  |  |
|:---------------------------------------------:|:---------------------------------------------:|
| **▲Schematic** | **▲PCB Layout** |

### 感測端實體圖
控制板為使用系上的雕刻機製成，黃燈為電源指示燈。

|  |  |
|:---------------------------------------------:|:-------------------------------------:|
| **▲控制板實體圖** | **▲感測端實體圖** |

### 使用者網站設計
網頁框架為使用Bootstrap 4，它提供響應式介面的網格系統和導覽列的功能，讓網站可以能夠讓使用者在使用不同解析度的設備時也能夠有適合的呈現。網頁中的數據主要為測試圖表所建立，並非實際數據。
#### 首頁
使用Mapbox和OpenStreetMap提供的地圖服務與Leaflet JavaScript函式庫所提供的彈出視窗和地圖上的標記點，並包含定位功能。
地圖中的彈出視窗為使用Highcharts讀取mongoDB資料庫數據所建立的特定建築物內所有飲水機的圓餅圖，在首頁上方則是導覽列，供使用者在網站上能快速的連接至其他的內容。

**▲網站首頁截圖畫面(電腦版)**
**▲網站首頁截圖畫面(手機版)**

#### 導覽列
使用Bootstrap 4提供的階層下拉選單功能，供使用者能快速的連接至其他內容，第一層選單為建築，第二層為建築裡各個飲水機的編號。
**▲網站導覽列截圖畫面(電腦版)**
**▲網站導覽列截圖畫面(手機版)**

#### 個別飲水機頁面
頁面上半部內容為提醒使用者目前讀取的資料和該裝置的總水流量和平均流量，直線圖數據為使用Highcharts讀取mongoDB資料庫數據所建立，Highcharts提供日期區間功能與直線圖拖移，讓使用者能輕易地得知區間內的資料。
**▲個別飲水機的數據圖(電腦版)**
**▲個別飲水機的數據圖(手機版)**

### Docker架設
為了讓網站伺服器與資料庫能夠能在不同的作業環境下運作且具備輕量的檔案，所以在最後把伺服器打包成Docker檔，上傳至Docker hub上。
**▲Docker 在macOS14 運作畫面**

###### tags: `JavaScript` `WebPage` `Docker` `RaspberryPi` `MongoDB`