<style>
.main{
}
.main img{
border-radius:10px;
}
.main h1{
text-align: center;
border: none;
color:4B4B4B;
letter-spacing: 3px;
}
.main h6{
text-align:right;
color:#F4AA14;
font-size:18px;
}
.main code{
background-color:#FFF0D1;
padding: 8px 10px;
border-radius: 20px;
margin-right:7px;
}
.main h2{
background-color:#0B8D97;
color:#fff;
width: max-content;
padding: 7px 25px 7px 17px;
border-top-right-radius: 40px;
border-bottom-right-radius: 40px;
border-bottom: none;
margin-top:46px;
margin-bottom: 25px;
}
.main h2 img{
padding-bottom: 4px;
border-radius:0;
}
.main p,li{
font-size: 18px;
line-height: 29px;
letter-spacing: 0.15em;
color:#525252;
}
.main .result{
background-color:#0B8D97;
padding:0.8rem 1rem 1rem 1rem;
border-radius: 10px;
}
.main .result h3{
text-align:center;
color:#fff;
margin-bottom:3rem;
}
.main .result h3 img{
margin-bottom:0.5rem
}
.main .result .pic img{
border: 5px solid #FFFFFF;
}
.main .pic{
text-align:center;
width: 84%;
margin: auto;
margin-top: 2rem;
}
.pic p{
color:#fff;
text-align:left;
font-size:1.8rem;
line-height:4rem
}
</style>
<div class="main">
# Webduino PM2.5 偵測站實作，打造空氣偵測站、架設Web伺服器、環境數據監控，一天完成
###### `進階` 6 小時
##  課程目的
看不見的 PM2.5 很可怕，想要自己打造空氣偵測站嗎？這次課程講師精心設計一連串課程，結合 6 大傳感器，實作 7 大環境數據應用，讓你在一天的課程中學會「偵測即時數據」、「資料儲存」、「圖表資料統計」、「OLED控制」，最後打造Web伺服器和監控網頁，實現自家環境自己監控。
##  課程目標
1. 快速學會使用 WebSocket / MQTT 經由 WiFi 控制開發板。
1. 結合動態圖表 / Google Maps / Google SpreadSheet 儲存並顯示資料。
1. 學習自己架WebServer，在家也能自行打造全年無休的智能監控裝置。
1. 快速掌握 OLED 控制方式、打造PM2.5空氣偵測站。
1. 全套軟硬整合應用教學，培養跨領域的思維與開發等能力。
1. 各行各業未來都可能需要結合感測器與雲端應用。
1. 認識講師，遇到困難有人回答。書本資料太多、網路資料太分散，現場有人教學得快。
##  課程內容
Webduino 是開源的 OpenSource，此課程將完整剖析 Webduino 通訊架構 ( MQTT、Firmata )，並且讓大家自行架設私有雲以及串接自己的傳感器，不管是在網頁使用 JavaScript、HTML，或是在 NodeJS 進行後端監控，都可以輕鬆與開發板進行雙向通訊，大幅縮短從 Arduino 到雲端的開發歷程。
##  課前準備
1. Smart 開發板
1. 杜邦線 (公母) x10
1. 杜邦線 (公公) x10
1. OLED
1. PM2.5 感測器
1. 麵包板
1. 蜂鳴器
1. 按鈕(Smart 內建)
1. 光感(Smart 內建)
1. 三色燈(Smart 內建)
<div class="result">
###  成果展示
<div class="pic">
▲ Webduino Blockly + OLED 顯示圖片與文字
</div>
<div class="pic">
▲ 透過程式積木立即輸出圖片動畫到 OLED 螢幕
</div>
<div class="pic">
▲ 偵測空氣品質狀態並寫入 Google 試算表
</div>
</div>