中文 | English

物聯網的利器:Web + Arduino 等於什麼呢?

作者曹 永忠@makerdiwo

圖(11)

文曹永忠、許益祥、許智誠、蔡英德

編王昱夫

這幾年來,「物聯網」絕對是最熱最夯、最火紅的詞彙之一,連台積電董事長張忠謀都在大喊「物聯網是Next Big Thing」,究竟它到底是什麼?物聯網和我們生活有什麼關係呢?物聯網的概念始自1995年,比爾蓋茲在《未來之路》一書中提到的智慧家庭狂想,是為其濫觴;接著1998年,美國麻省理工學院Auto-ID中心主任愛斯頓(Kevin Ashton)提出物聯網(Internet of Things,簡稱IoT)一詞,正式為這樣的概念立下典範。

1998年物聯網概念出現時,當時的技術價格仍然昂貴,因此對於這樣的想法總是「只聞樓梯響,不見人下來」,直到2007年,「iPhone出現」才真正為物聯網拉開序幕!「物聯網起飛最重要的因素就是智慧型手機,我們使用手機控制智慧車、智慧家庭與智慧手環,手機是物聯網裝置的操控中樞」。

《數位時代》第247期專訪中,友訊董事長高鶴軒說:除了智慧型手機,10年內各類感測器價格從1.3美元滑落到0.6美元,RFID標籤(無線射頻識別技術)的價格也下滑到0.1美元。全球家庭Wi-Fi通訊協定覆蓋率已達25%,更省電的ZigBee進入一般家庭,這些代表全球已經處在物聯網的時代!

在創客的圈子裡,有了Arduino這樣的創造神器,加上會寫 C/C++ 程式語言,就可以連接各種電子零件與模組做出多種有趣的應用。然而對於Web開發者而言,學習並掌握C/C++語言的門檻依然存在。為了讓Web開發者(Front End Developer)也能輕鬆、自在地踏入自造者運動環節,使用他們熟悉的 HTML/JavaScript語法,輕鬆控制物聯網(IoT)的裝置,一家位於南台灣高雄的新創團隊「Webduino」,透過元件整合,使用Web元件技術、WiFi晶片以及Arduino Firmata協定,開發了Webduino開發板(如圖表 1所示),大幅降低了開發IoT的技術門檻,接下來就讓我們好好瞭解Webduino如何使用HTML/JavaScript來驅動物聯網(IoT)的裝置吧~

webduino_new

圖表1. Webduino外觀

什麼是Webduino開發板?

Webduino開發板是結合了Arduino Pro Mini(如圖表 2.(a) 所示)和WiFi 模組(如圖表 2.(b) 所示)晶片,所開發出來的電路板,如圖表 1. 所示之Webduino開發板,只要插電就自動連上雲端,進行物聯網裝置的開發。

Promini

圖表2(a).Arduino Pro Mino

ESP8266

圖表2(b). ESP8266 Wifi 模組

圖(2)

圖表 2 Webduino 聯網示意圖

Webduino開發板是一塊易學易用的物聯網開發板,不管是入門使用者、進階開發者、資深研究者等,不需要理會硬體的煩雜技術,只需用Web技術,就可以控制Arduino相容的感應模組的神兵利器!如圖表 3. 所示,任何前端開發工程師只要用 HTML/JavaScript 語法立即點亮LED燈。

圖(3)

圖表 3 使用Front End 技術控制Webduino

Webduino 與 Arduino 的差異

如圖表 4所示,Webduino開發板的終極目標,是希望用『Web技術控制Arduino』,所以Webduino開發板不用接電腦、不用學C/C++、也不用燒錄程式,任何前端開發工程師只要用 HTML/JavaScript就可以開發物聯裝置的應用。

圖(4)

圖表 4 Webduino與Arduino比較圖

由於Webduino開發板只要連接電力後,透過簡單的設定,就可以成為物聯網裝置,而且前端開發工程師只要撰寫HTML/JavaScript程式,就可以直接在瀏覽器中執行,可以達到跨平台的相容力。所以桌上型PC、行動裝置(Android、iPhone、iPad…)都可以簡單使用,且不需要安裝App,所以也沒有更新、上架的煩瑣問題。

圖(5)

圖表 5 一般前端開發工程師開發 HTML/JavaScript情境圖

Webduino的開發方式

Webduino新創團隊整合了最新的Web元件化技術 (WebComponents),開發者只要使用自訂HTML標籤就可以完成Webduino開發板的連接與物聯網裝置的監控。

原理很簡單:每一片Webduino開發板,預設都有一個專屬的雲端通道代碼,開發者只要撰寫HTML標籤,在device屬性填入雲端通道代碼,這個網頁就可以輕易完成和Webduino開發板的連線。

圖(6)

圖表 6 Webduino雲端通道設定

驅動感測模組:對於每一種電子感測模組都有一個對應的HTML標籤,例如LED的HTML標籤為 <wa-led></wa-led>,只要將LED插上Webduino開發板,並在HTML標籤的屬性中填寫led的腳位,就可以使用。

圖(7)

圖表 7 Webduino之感測模組裝置設定

以下是完整的網頁程式碼:

<html>
<head>
<script src="http://webduino.io/components/webcomponentsjs/webcomponents.js"></script>
<link rel=’import’ href=’http://webduino.io/components/webduino/web-arduino.html’></link>
<link rel=’import’ href=’http://webduino.io/components/webduino/wa-led.html’></link>
</head><body>
<web-arduino device="????">
<wa-led pin=’10’ state=’on’></wa-led>
</web-arduino>
</body></html>

控制多個Webduino開發板

我們可以在網頁中,只要使用一個HTML標籤就可以連接並控制一個Webduino開發板,但是,如果要同時控制多個Webduino開發板會很困難嗎?其實不會,我們只要在一個網頁中,撰寫多個HTML標籤,就可以同時控制多個Webduino開發板,下面就來介紹如何接線實現利用 IoT按鈕,控制另一個IoT裝置點亮LED:

步驟一:接上按鈕與 LED

按鈕是一個很常見的元件,當我們進行點壓的時候,按鈕上的四隻腳會呈現全部通路的情形,為了避免有短路的發生,我們要接一顆電阻進行保護,下圖是利用 webduino 開發板(如圖表8. 所示 )與麵包板所接出來的按鈕範例,這裏我們會用到的腳位包括:3.3v腳位、11腳位與GND腳位。

圖(8)

圖表8. Webduino 開發板(按鈕控制端)

步驟二:接上 LED

在另外一塊webduino開發板(B板)接上LED,長腳接在 11,短腳接在 GND。

圖(9)

圖表9. Webduino 開發板(Led顯示端)

讀者也可以透過影片,看到整個實驗的過程與結果:

Webduino在未來物聯網的發展趨勢

未來的物聯網市場大餅,可能是IT產業發展至今所遇到前所未有的發展契機,面對這樣廣大的使用者們,多樣化應用與異質化的使用族群,將不是任何單一企業、組織、學校等單位可以吃下來的,唯有更簡易、方面與跨平台的觀念可以在未來的物聯網應用中,佔據不倒的地位。

Webduino 開發板雖然才剛起步,就內含常見的10種傳感器提供使用,憑藉著這樣概念發展出的Webduino開發板,值得讓所有的HTML/JavaScript前端開發者,當成進攻物聯網市場的神兵利器!

圖(11)

附註:

  1. Webduino官網 
  2. Webduino開發板所使用的Arduino為Pro mini
  3. Webduino開發板所使用的WiFi晶片為 ESP8266
  4. Webduino新創團隊位於高雄軟體科學園區,於2015/4成立

本文內文引用自合作友站 makerdiwo 提供局部內容,完整內文請參考:原文連結

Tags 舊轉載

分享到社群

vMaker編輯部

歡迎各界朋友投稿你的maker故事,不論是個人作品、創客觀點或是創客的經驗分享,我們都十分期待能聽到您的分享。 投稿請至:contact@vmaker.tw