Webduino 安裝 燈泡閃爍 Blinky 範例 教學 Webduino 安裝 燈泡閃爍 Blinky 範例 教學
  物聯網、  Webduino、  Arduino       ez      2016-04-13

會做網頁就能開發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 號 說明書


標籤:   Arduino、  Webduino、  物聯網、  組裝教學

我要留言