34 views
<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"> ![](/uploads/upload_5ddf6640a6e5cdfff2334ffcadb761bc.png) # Webduino雲端開發實作,打造MP3播放器、元件擴充技術、自訂Blockly程式積木,一天學會 ###### `進階` 6 小時 ## ![](/uploads/upload_65f1b457e95d6f8fc94beeeaa45d15e7.svg) 課程目的 開發板應用常常找不到合適的程式積木嗎?那就自己做吧!本次課程精心設計6大主題及許多實作範例,從雲端平台應用與介紹、運用現有Google Blockly來結合傳感器,進一步教學如何擴充各種元件,最後剖析Google Blockly編程架構,包裝專屬自己的傳感器積木並加入Webduino Blockly使用。 ## ![](/uploads/upload_549a9523108383e3c48e23dd52a8ad6c.svg) 課程目標 1. 快速學會使用 Webduino 技術經由 WiFi 控制開發板。 1. 掌握最新的 Google 試算表、MP3、LCD 元件使用方式。 1. 使用 Webduino 開發包,透過 Arduino IDE 插件進行雲端燒錄韌體。 1. 了解 Webduino 韌體程式架構,並能自行擴充韌體。 1. 學習 Google Blockly 積木編程技術,能包裝自訂的傳感器積木。 1. 全套軟硬整合應用教學,培養跨領域的思維與開發等能力。 1. 認識講師,遇到困難有人回答。書本資料太多、網路資料太分散,現場有人教學得快。 ## ![](/uploads/upload_76d8af8406b9c435bc83c72c5e5cdab1.svg) 課程內容 ![](/uploads/upload_2638c5a046baa0bae308494294d44488.png) ## ![](/uploads/upload_cfe6c2033ba5caf352335920c07ba7f6.svg) 課前準備 1. 馬克一號開發板 x1 1. 溫溼度傳感器 x1 1. MP3 x1 1. 喇叭 x1 1. 記憶卡 x1 1. LCD顯示器 x1 1. 麵包板 x1 1. 杜邦線 <div class="result"> ### ![](/uploads/upload_1a73c2d77753895360c738bfc31b8c16.svg) 成果展示 <div class="pic"> ![](/uploads/upload_73e432621d1dc1fddcd27afb5e387cbf.png) </div> <div class="pic"> ![](/uploads/upload_fcfc1908cd686edd3ecd3f2488740df5.png) </div> <div class="pic"> ![](/uploads/upload_e235177ba25f92a6a6681e2221905ee2.png) </div> </div>