<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 x Arduino 奧義
###### `進階` 3 小時
##  課程目的
你有沒有曾經照著 Arduino 的教學範例去做，最後卻還是出現了 Error…
你有沒有曾經覺得做個網頁很簡單，但是用網頁去控制家電用品卻很困難...
你有沒有曾經走進電腦書店，盯著書架，卻不知道要購買哪些物聯網的教材講義...
##  課程目標
三個小時的課程，你將精通 Web x Arduino 的奧義！
三個小時的課程，你將擁有別人就算看書也學不到的技術力和知識力！
三個小時的課程，你的 Arduino 將會長出一對 Web 翅膀，透過 Wi-Fi 自由自在的翱翔雲端！
##  課程內容
* Webduino 開發環境概要
* Webduino vs Arduino
* 雲端開發環境準備工作
* Webduino Fly 設定與使用
* 不寫程式的視覺化開發
* Webduino Blockly 教學
* 實戰元件快速上手 ( 課程實做 )
* 「智慧小燈」 App：用手機控制 LED 燈
* 「I'm Busy!」狀態顯示：用手機自行控制 LED 點矩陣做出想要的圖示效果
* 「自我流」門禁系統：刷 RFID 門禁卡，自動辨別和記錄訪者，並回應或開關門
* 打造革命性的開發環境
* 「序列埠、藍芽、Wi-Fi」全系列支援
##  課前準備
1. 電腦 ( 安裝 Chrome 瀏覽器 )
2. 行動電源
3. 智慧型手機
4. Web:Bit 開發板
<div class="result">
###  成果展示
<div class="pic">
▲ 利用 Webduino Blockly 編輯工具，實作 RFID 感應磁扣切換 Youtube 影片
</div>
<div class="pic">
▲ 利用 iPhone 打開網頁，繪製 LED 點矩陣圖形
</div>
</div>