會做網頁就能開發IoT!Webduino讓你直接以HTML控制Arduino開發板!!
開發板雖然號稱人人都能開發,但是先決條件還是在於要熟悉如C、C++、Java等程式語言,並非完全沒有門檻。而Webduino正是打造一個Web開發環境,來降低開發難度的計畫,只要會寫網頁、會HTML就幾乎可以無縫接軌。
簡單來說 Webduino 就是包裝好的 Arduino + WIFI 硬體+軟體,透過 HTML 控制硬體裝置,讓只懂前端的人也可以輕易控制硬體裝置,自行開發 IoT 相關產品。
本篇以最基本的 LED 開關來當作範例,並且從基礎設定開始教起,讓想一窺 Webduino 的人有個初步了解。
首先必須先購買 Webduino 裝置,可以上官網購買:https://webduino.io/
包含一片 Webduino 馬克 1 號 主機板+USB電源線+說明書
Webduino 馬克 1 號:
黑色那塊板子是 WIFI 網卡,下方有 蜂鳴器、LED、電阻
藍色那塊板子是 Arduino Mini
背面有裝置的 SSID 和 Device ID
※ Device ID 不要給別人知道喔!不然別人就可以控制你的裝置,後面再說明!
接下來要開始設定 Webduino,首先將側邊開關切到 STA,並且接上電源。
※ 此步驟先將裝置當成一般分享器,進去設定基本資訊後才能正常運作。
將電腦連上 Webduino 裝置,SSID 有寫在 Webduino 附的說明書上,通常是 wa 開頭,密碼預設為 12345678
連接完畢後輸入網址 http://192.168.4.1 就可以進入設定網頁,輸入家中或公司的 WIFI 連線 SSID 及 密碼,之後按下 SUBMIT 按鈕。
設定完成後就會出現以下畫面
將開關切換到 AP,並且接上電源,就可以開始使用 Webduino 了。
開啟網頁 https://webduino.io/device.html 輸入 Device ID 按下 submit 按鈕。
顯示 OK 就表示 Webduino 正常運作中,可以開始進行 IoT 開發。
接下來要製作一個 HTML 控制 Webduino,程式碼如下:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta charset="utf-8" /> <title>控制單顆 LED 燈</title> <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script> <script src="https://webduino.io/components/webduino-js/dist/webduino-all.min.js"></script> <script src="https://webduinoio.github.io/webduino-blockly/webduino-blockly.js"></script> <script type="text/javascript"> $(function () { var led; boardReady('改為你的Device ID', function (board) { board.samplingInterval = 20; led = getLed(board, 10); led.off(); }); $("#led_button").click(function () { if ($(this).html() == "開") { $(this).html("關"); led.on(); } else { $(this).html("開"); led.off(); } }); }); </script> </head> <body> <button id="led_button" style="font-size:100px">開</button> </body> </html>
將 10 和 GND 接上 LED,按下 HTML 中的按鈕,就可以控制 LED 開 或 關。
以上就是基本的 Webduino 控制方式。
個人看法:
Webduino 真的是非常容易使用,讓只了解前端的人輕易就能開發 IoT 裝置,就算我會 Arduino 也覺得太方便都想偷懶了......
但我覺得 Webduino 在安全性還需要加強,否則我不會將它使用在正式環境上!!
原因為 Device ID 太容易破解,想想如果 Device ID 只有 四位數 a-z A-Z 0-9,36^4 共有 1,679,616 台裝置,並且 Webduino 提供查詢功能,就可以用來掃描所有裝置。
掃描完畢後再將運作中的裝置 IO 開啟 或 關閉,那不就非常恐怖......
所以個人暫不會將 Webduino 用在正式環境上,以上是個人看法供參考。
附註:
Webduino 馬克 1 號 說明書
留言
高雄出差外約line:a35053小港叫小姐/左營區外約愛愛/旅 ( 2021-04-29 )高雄出差外約line:a35053小港叫小姐/左營區外約愛愛/旅館約小姐
高雄出差外約line:a35053小港叫小姐/左營區外約愛愛/旅館約小姐
高雄出差外約line:a35053小港叫小姐/左營區外約愛愛/旅館約小姐
高雄出差外約line:a35053小港叫小姐/左營區外約愛愛/旅館約小姐
高雄出差外約line:a35053小港叫小姐/左營區外約愛愛/旅館約小姐
高雄出差外約line:a35053小港叫小姐/左營區外約愛愛/旅館約小姐
高雄出差外約line:a35053小港叫小姐/左營區外約愛愛/旅館約小姐
高雄出差外約line:a35053小港叫小姐/左營區外約愛愛/旅館約小姐
高雄出差外約line:a35053小港叫小姐/左營區外約愛愛/旅館約小姐