<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">
# Web + Arduino 智能監控潮潮 Der
###### `進階` 3 小時
##  課程目的
近年來由於物聯網的蓬勃發展，各式智能監控的設備不斷的推陳出新，智能監控已經是智慧生活不可或缺的一部分，也早已成為業者虎視眈眈的戰場。
在本次 Webduino 智能監控的課程，除了會帶領大家認識一些新的傳感器，更會藉由這些有趣的傳感器，打造自己專屬的智能監控應用，進一步激發與眾不同的想像和創意，整堂課純粹利用 Web 的技術串接 Arduino，拋開艱難的 C/C++，一起擁抱全新一代的開發模式吧！
##  課程目標
不論您是視覺設計師、網頁設計師、前端攻城獅、後端攻城獅、還是全端攻城獅，只要您「會一點點的 HTML、Javascript、CSS」，只要您「不想用 C/C++ 去控制 Arduino」，您就可以來報名。
不論您是已經學習過 Webduino 的老朋友，或是正要開始學習 Webduino 的新朋友，這門課也都會不同的體驗和感受。
##  課程內容
* Webduino 基本介紹
* 如何利用 Web 技術控制 Arduino
* 實際做點智能監控有關的應用
* 繼電器
* 溫濕度傳感器
* 人體紅外線傳感器
* 超音波傳感器
* 聲音訊號接收器
* 震動開關
* 蜂鳴器
##  課前準備
1. Webduino 開發板 x1
1. Arduino Pro mini x1
1. WIFI 模組 x1
1. 人體紅外線傳感器 x1
1. 蜂鳴器 x1
1. 溫濕度傳感器 x1
1. 聲音訊號接收器 x1
1. 振動開關 x1
1. 繼電器 x1
1. 風扇組 x1 ( 風扇+馬達+電池 )
1. 杜邦接線 x2 (公-母)
1. 電線 x12 ( 紅2 綠2 藍2 黃2 黑2 白2 )
1. 1k 電阻 x1
1. 麵包板 x1
1. 按鈕 x1
1. 零件盒 x1
1. 電源線 x1
<div class="result">
###  成果展示
<div class="pic">
▲ Web:Bit 教育版平台介面
</div>
<div class="pic">
▲ 遊戲範例
</div>
</div>