<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 實在有夠潮！
###### `進階` 3 小時
##  課程目的
在物聯網的發展洪流裡，越來越夯的自造者 ( Maker ) 時代已經來臨，而 Arduino 就是這個世代最關鍵的神兵利器。
什麼是 Arduino 呢？ Arduino 是一塊比手掌還小的電路控制板，也可以說是一個開放原始碼的微型電腦，使用者可以接上任何裝置與傳感器，例如 LED 燈、超音波傳感器、馬達、喇叭、溫溼度傳感器...等，配合一些自動控制的程式，就可以輕輕鬆鬆地做個機器人、飛行器或遠距離感測器。
雖然 Arduino 是如此的天生神力，也有包羅萬象的傳感器等著我們去使用，但要控制這些形形色色的傳感器，就必須要具備 C/C++ 的基礎知識，更不用說一套完整的物聯網服務應用，甚至要同時學習 App 與 Web 的開發技術，好像沒有一些輕鬆的開發方式，可以把這些複雜的領域全部囊括整合，因此也造成了許多只會網頁技術或只會開發 App 的工程師們，遲遲無法朝向物聯網的領域發展。
##  課程目標
本課程將會帶領大家，「只」利用 Web 技術 ( HTML、Javascript、CSS )，就可以串接 Arduino 的傳感器，就可以簡簡單單的做出「同時讓網頁、行動裝置與 Arduino 彼此互動」的設計應用。
##  課程內容
* 認識 Arduino。
* 如何利用 Web 技術控制 Arduino 傳感器。
* 實際利用 Web 與 Arduino 的傳感器做點應用。
* LED、三色 LED
* 超音波傳感器
* 按鈕與推播
* 伺服馬達
##  課前準備
1. Webduino 開發板 x1
1. Arduino Pro mini x1
1. WIFI 模組 x1
1. 超音波傳感器 x1
1. 伺服馬達 SG90 x1
1. 單色LED x2
1. 三色LED x1
1. 麵包板 x1
1. 杜邦接線 x2 (公-母)
1. 電線 x12 ( 紅2 綠2 藍2 黃2 黑2 白2 )
1. 1k 電阻 x1
1. 按鈕 x1
1. 零件盒 x1
1. 3 號電池 x4 ( 照片電池品牌僅供參考 )
1. 電池盒 x1