把遇到錯誤的、學習到的前端筆記在這邊

總瀏覽量

Copyright © Tzeng Ying-chi. 技術提供:Blogger.

2019/08/22

[2019鐵人賽] - 5.筆記IoT初練習-利用REPL模式來開發!


今天要來簡介REPL怎麼用在Arduino上~ ٩(。・ω・。)و 


首先要來介紹REPL是什麼?

REPL 全名為「Read-Eval-Print Loop」讀取-求值-輸出 循環,是一種簡單的交互式的編輯環境 ;用戶輸入事件、表達式或是運算式,再由電腦進行處理運算,接著輸出給用戶,如此循環下去。

REPL很常見在前端開發者開發環境中,像瀏覽器的開發者工具的Console、使用終端機Terminal開啟Node,這些都是REPL~

例如以下:
→ Chrome中,開發者模式的Console drawer


→ 使用Terminal開啟Node JS的REPL模式

所以我們可以很方便的使用JavaScript在這些工具上debug或者開發等動作ヽ(・×・´)ゞ

那進入正題~
Johnny-five也提供了REPL的API,說明要怎麼在Arduino上調用REPL


Component Classes-Board #REPL: http://johnny-five.io/api/board/#repl


我們要使用Johnny-five提供的REPL範例來示範Arduino會怎樣動作~(๑•̀ㅂ•́)و✧
程式碼如下
var five = require("johnny-five"); var board = new five.Board(); board.on("ready", function() { console.log("Ready event. Repl instance auto-initialized!"); var led = new five.Led(13); this.repl.inject({ // 寫在這邊的函式可以透過REPL來操控 // 範例為操控LED的亮(on)與滅(off)
on: function() { led.on(); }, off: function() { led.off(); } }); });

Examples-Board-REPL: http://johnny-five.io/examples/repl/

當板子on ready後,REPL初始化也隨之啟動
範例中第9行呼叫了J5內建的方法 repl.inject 在大誇號裡面可以自訂函式,可以看到範例中有簡單的LED亮和滅的功能 ~


我在範例中增加上一篇的介紹的blink功能來實際操作給大家看( • ̀ω•́ )

首先執行範例檔repl.js在terminal輸入 node repl.js 電腦便會透過傳輸線上傳程式到Arduino上。
→ terminal輸入 node repl.js

可以看到執行Node JS後電腦開始找連接阜,連接上Arduino開發版之後執行REPL模式,
Connected狀態後,REPL會隨之初始化~
接下來我們試著操控LED燈即時的亮、滅、閃爍,在REPL模式中分別執行function on()、off()、blink() 來看實作結果!

→REPL模式下呼叫函式 on();

→REPL模式下呼叫函式 off();

→REPL模式下呼叫函式 blink();

很方便吧~ヽ(・×・´)ゞ

這就是Johnny-five提供REPL的方法,
「讀取函式→運算資料→輸出到Arduino運行結果→再繼續等待下一個循環動作」
讓我們可以簡易的查看實現的結果~ d(`・∀・)b

本文到這邊先下台一鞠躬了~
有錯敬請留言改正,感謝您的閱讀 <(_ _)>

2019/08/16

[2019鐵人賽] - 4.筆記IoT初練習-用JavaScript控制Arduino吧!


用JavaScript將統一世界!!(欸欸....不是吧XD

上一篇我們利用Aruduino的原生語言來測試版子是否正常,以及小小燒錄範例程式等~
讓大家了解熟悉並操作一下Arduino的環境 ٩(。・ω・。)و

魯宅我雖然有大學的時候有上過C語言的課程,但現在幾乎都忘光光了.....
但出社會轉職後現在上班都在寫JavaScript,哪有沒有辦法用JavaScript寫iOT呢?
在我心裡是存在這樣的疑惑的....

經過了一番搜尋後答案是,可以的! 。:.゚ヽ(*´∀`)ノ゚.:。灑花
就讓我們看看要怎麼用JavaScript來一統世界軟硬體吧XD


這邊要準備的環境有

硬體部分

> Arduino Uno 一片
> USB TypeB 線材一條
> LED燈 隨便來一顆(也可以不用,用內建的LED也可以)

硬體部分和上篇是一樣的~

軟體環境部分

> Node.JS (穩定版即可)
> Arduino Web Editor
> npm johnny-five

準備好之後Let's go!( • ̀ω•́ )
先來看一下成功的結果

執行NodeJS來控制Aruduino

Step 1. 燒錄Firmata協定

Firmata 協定是軟體和硬體溝通的橋樑,你可以用各種程式語言讓 Arduino 和 host computer 溝通藉由控制腳位等等
官方介紹原文在此

>The Firmata library implements the Firmata protocol for communicating with software on the host computer. This allows you to write custom firmware without having to create your own protocol and objects for the programming environment that you are using.

Arduino Firmata Libraryhttps://www.arduino.cc/en/reference/firmata

依照上一篇  Step 4.  電腦USB接上 Arduino 後,開啟 Arduino Web Editor,最左邊 Meun列選擇
 [ Libraries → Search Libraries 中輸入" firmata " → 找到 Firmata 如圖所示下拉選擇最新版本 → 直接燒錄進 Arduino 即可 ]

→ 圖解說明 (ง๑ •̀_•́)ง





→ 燒錄 Firnata 等待幾秒~  ( ´Д`)y━・~~




→ 燒錄 Firnata 成功的樣子 ヽ(・×・´)ゞ




Step 2. 安裝 johnny-five 套件

創新專案並且安裝 johnny-five 套件用 JavaScript 來控制 Arduino ,步驟如下:

1. 創建 package.json 
開啟終端機,到專案資料夾路徑下輸入指令 npm init 接著會出現要你填寫初始專案的相關資訊,想略過的話也可以一直按enter就好,這邊不多解釋了~
創立完後會產生package.json這隻檔案,主要的功能是用來掌控專案資訊等等的....

→ 輸入指令 npm init

 → 輸入專案資訊,確認無誤輸入 yes

2. NPM Install johnny-five 
創建好package.json後,我們就可以來安裝最主要的johnny-five了!
輸入指令 npm install johnny-five --save 按下enter,開始安裝吧~ ლ(́◕◞౪◟◕‵ლ)

 → 輸入指令 npm install johnny-five --save


→ 安裝好johnny-five 會長這樣~(❛◡❛✿)


完成!ε٩(๑> ₃ <)۶з
這時候資料夾結構應該會像這樣↓↓↓

環境的安裝是搞比較久一點也比較無聊....
但只要弄好這邊後面就可以來好好的玩啦~(๑•̀ω•́)ノ


Step 3. 接上你的Arduino板吧!

接下來就要實作程式部分囉!ヽ(・×・´)ゞ

有如學習程式一切的開始「Hello World」~
Arduino的第一個程式「Blink」閃耀你的LED吧!XD

程式碼如下


var five = require("johnny-five");
//引入johnny-five
var board = new five.Board(); //宣告Arduino開發版
board.on("ready", function() { //當Arduino開發版ready好,做以下動作
var led = new five.Led(13); //宣告led在開發版第13腳

led.blink(500);
//每500毫秒 LED會亮→滅→滅...持續的閃爍 });


解說一下上面做了哪些事情~

首先 var board = new five.Board(); 這行
一開始要先調用J5的 Board(); 告訴電腦USB連接到,初始化實體的Arduino板子
依照官網所說不用特別設定通訊埠,但是雖然官網是這樣說.....
本魯一開始就是遇到沒有設定通訊埠而報的錯 ╮(╯_╰)╭


Component Classes-Board: http://johnny-five.io/api/board/



所以還是加一下好了........(´-ι_-`)

-----
var board = new five.Board({
port:"目前Arduino和電腦連接的Port",
});
-----

如何知道Arduino連到哪一個通訊埠?

Win的使用者可以透過裝置管理員查看
Mac的使用這需要輸入指令 $ ls /dev/tty.*
查看Arduino連接的是哪一個port

Johnny-Five (簡稱J5) 的寫法沒有什麼特別不同的地方,可以看到第七行
board.on("ready", function() {
    //執行的內容
});
語法上平時有在寫JS的朋友們應該都蠻熟悉的~ヽ(・×・´)ゞ

第10行 利用J5的 led();函式宣告板子第13隻腳為輸出腳位,當有動作時會輸出5V電壓
第13行 剛剛宣告的LED 利用內建的閃爍函式blink(); 其動作為LED on-off 這樣算一次動作,在括號裡面填寫毫秒數,在毫秒內會做完一次的動作。
範例中的blink(500);的意思就是 500毫秒會做完一次的 LED on-off 的動作,然後重複動作。
大致上的程式的動作差不多是這樣啦~(有錯請訂正 (つд⊂)

以電子角度來講,
new five.Led(13); 就代表板子輸出電壓的腳位是第13腳
blink(); 這個函式其實就是電壓不斷的一直變化 5V→0V→5V→0V→5V 一直循環下去~


Step 4. NodeJS GO!!

程式寫好之後,開啟終端機到該目錄底下輸入 node 檔名.js

就是這麼簡單!
電腦便會連接上你的Arduino板子,並開始動作
現在應該可以看到板子上的LED燈一閃一閃的吧(就和一開始的動圖一樣動作) ( ~'ω')~


恭喜你用JavaScript統一軟體世界了 (X 

J5真的造福了我們這些新手開發者來進入物連網的世界!
但是有一些硬體方面的東西可能對不是本科系的人來說會比較難理解....
我們就繼續慢慢看下去吧~

本文到這邊先下台一鞠躬了,有錯敬請留言改正,感謝您的閱讀啦~<(_ _)>

2019/07/23

[2019鐵人賽] - 3.筆記IoT初練習-環境安裝&基礎Arduino開發版測試


進入正題吧!讓我們動起來!

上兩篇很無聊的介紹一下之後 ,要來實際的碰實體版啦!動起來┌|◎o◎|┘
這篇要帶大家測試自己的板子有沒有問題,以及介紹燒錄的方式所需要的材料有

硬體部分

> 新台幣買材料(欸不是吧XD
> Arduino Uno 一片
> USB TypeB 線材一條
> LED燈 隨便來一顆(也可以不用,用內建的LED也可以)

先帶大家看成功的結果

成功的話,板子的第13隻腳 LED 會閃爍~

第一步:燒錄範例程式,檢查板子好壞

首先準備好硬體後,我們要先檢查拿到的板子到底是不是正常可以運作的~
電子產品有千百種不能work的理由,像是電路板破裂線路斷掉等等,因為這種電路板有時候不像肉眼看到的線路走向,有一些板子可能是三層版、四層版線路會layout在裡面,我們拿到硬體產品時,一定要先測試一下基本功能到底正不正常,才不會辛苦寫好程式,卻不會動又找不出原因,浪費很多時間!

先燒錄基本的閃爍程式就好,斯斯有兩種,燒錄方法也有兩種~

1.使用Arduino IDE
> 下載連結:https://www.arduino.cc/en/Main/Software

這個是Arduino官方所出的IDE,可以編輯程式也可以透過IDE燒錄軟體。
要特別注意是Arduino IDE只能用來撰寫Arduino的原生程式,以我的主題來說的話(JS),這個IDE就只能當燒錄器來使用了....

介面就像這樣

以前我在玩Arduino的時候,都是用這個IDE在編輯與燒錄的,這個IDE需要下載才能使用,直到最近才發現有Web線上版,功能和下載版是一樣的,後來我筆電也不下載了,直接用下面我要介紹的Web線上版就好了~


2.使用Arduino Web Editor
> 線上連結:https://create.arduino.cc/editor

只能說真的進步的好快啊~ ( ´Д`)y━・~~
以前都還要下載軟體、設定等等繁瑣的程序,現在居然推出線上編輯了!真的是對開發者來說便利很多啊~

我們要使用第二種方式,也就是Web Editor來線上燒錄!


進行燒錄測試

Step1:
到剛剛的連結處 https://create.arduino.cc/editor
 點選「online tools」→「ARDUINO WEB EDITOR




Step 2:
一開始會要求你登入或是新建帳號,也可以用google帳號直接註冊!
以後就可以在線上儲存專案,這邊我是直接使用google帳號,任君喜好即可~

→ 註冊/登入完後即可進入下一步驟 GOGO~ (ง๑ •̀_•́)ง




















Step 3:
登入進入編輯介面後會偵測有沒有安裝連線外掛,如果沒有的話照著他的指示安裝即可,這邊也沒有什麼問題~

→ 尚未安裝連線外掛的人,可以接著看下面的流程~٩(•ิ˓̭ •ิ )ง

→ 會進入下載頁面,選擇系統使用的平台下載掛件~

→ 等待Loding~  ( ´Д`)y━・~~

→ 檔案解壓縮之後,就一直按 下一步 就好了~



















→ 安裝終於完成啦~ヽ(́◕◞౪◟◕‵)ノ

→ 按Next進入編輯頁面~




















Step 4:
安裝完連線套件後,電腦USB接上Arduino UNO版後會像下圖一樣有連接訊息跑出,代表已經可以進行燒錄啦~ヽ(*´∀`)ノ


這個就是我們用來編輯&燒錄的頁面,網頁版的介面和下載IDE的介面差不多,我們要使用這個網頁來燒錄Arduino!





















Step 5:燒錄Blink範例
測試版子基本燒錄功能正不正常,首先點擊左側選單「Example」 →選擇Built In裡的「Blink」範例,點選之後會在編輯區出現內建的Sample程式碼→按下編輯區上面的「Upload」 燒錄到開發版~



解釋按下Upload之後的他會做哪些動作:
1.編譯檢查看看程式有沒有錯誤
2.檢查Arduino連接狀態
3.都沒有錯的情況下才會進行燒錄動作喔~

所以如果有出現任何的報錯,如果你是燒錄範例程式的話,請檢查看看板子連接上有沒有問題,如果是有原生程式的話,就看看報錯內容囉~


Step 6:燒錄成功!
如果以上都沒有問題的話,燒錄成功會出現「Success:Saved on your online Sketchbook and done uploading Blink」代表「Blink」程式燒錄成功!



Arduino開發版會即時呈現程式的內容喔!


可以看到板子第13腳的內建LED一秒閃爍一次,就代表以上都沒問題成功囉~
(灑花。:.゚ヽ(*´∀`)ノ゚.:。


恭喜完成你人生中第一個電子產品了XD
雖然說這些步驟比較無聊,但是都是之後檢測硬體好壞的基礎!
做好之後我們就可以邁向自造玩具的夢想前進!(๑•̀ㅂ•́)و✧


2019/07/19

[2019鐵人賽] - 2.筆記IoT初練習-Arduino硬體小小介紹


如果學一種程式就能做出自己的玩具,那有多好!

沒錯!這三十天就是要用做出自己的玩具來~(欸?不是要寫技術文嗎?
這次硬體部分主要採用Arduino,程式語言使用JavaScript等來實現我們的夢想!

謎之音:不介紹一下樹梅派嗎?為什麼不用樹梅派呢??
因為Arduino對新手來說比較單純啊~所以我就採用Arduino了~
我絕對不會說我⋯我還沒買啊⋯也來不及研究 > <a


→ 擷取2016年做的簡報來解釋Arduino和樹梅派差在哪裡~

硬體部分

這次要用的是最常見的Arduino UNO版,非常推薦新手入門使用~
Arduino UNO使用5V電壓,就和普通的USB一樣或是手機附的變壓器供電即可,亦可直接插電腦的USB供電使用
不過有些值得注意的事情,如果要擴充藍芽或是wifi模組電流量需要比較重,就需要接到5V2A訊號會比較穩定 ,那如果要用到馬達類的,就要獨立電源了~
這邊未來如果有用到再來解釋,先暫時提醒一下~

→ 使用Arduino開發的優點

訊號部分

剛入門的朋友們這兩種I/O訊號是必須知道的知識~
類比訊號(Analog) 與 數位訊號(Digital)

類比訊號(Analog) 可以比喻成大自然的變化,像是溫度連續變化一樣。
溫度、濕度就是一種類比的訊號,就像氣溫 會慢慢掉下來,不會突然從28度變成10度,即將要下雨的天氣濕度也不會這一秒50%下一秒變100%。

數位訊號(Digital) 就像程式0與1的變化,沒有連續。
與類比的變化反之,就像我們寫程式,布林值等等不是1就是0,數值是沒有連續性的,不同於類比訊號數值是隨時隨刻變化的!

Arduino 上有不同的腳位,我們稱之為Pin腳分別接收不同類別的訊號
不同版別腳位可能不太相同,使用前請詳閱公開說明書(X)
我指的是文件啦XD 未來在連接上才不會錯誤喔~






可以看到上面的圖片,右上接腳的部分2~13Pin腳有寫Digital就是我們數位訊號接腳,如果有數位訊號需要輸入就必須要接這一些腳位才會動作,同理右下有Analog In的印刷 就代表類比的訊號需要接這些腳位

其餘腳位可以自行google「Arduino 簡介」就會有非常多資訊跑出來,畢竟arduino也出一陣子了,就不浪費時間在這上面了~我們的重點是後面的用javascript寫玩具出來啊!!(X


相關連結我都放在這邊了~自己來看看吧XD

.Aruduino官方網站:
https://www.arduino.cc/
.Wiki-Arduino Uno介紹(en):
https://en.wikipedia.org/wiki/Arduino_Uno
.Arduino Uno功能簡介:
https://openhome.cc/Gossip/Books/mBlockArduino1-3and1-4.html


最後附上我2016年去參加智慧生活研習會,會後做的簡報

Arduino於智慧生活及能源電子-Application簡易介紹:http://app.emaze.com/@AZCRLOII/presentation-name#1


2019/06/25

[2019鐵人賽] - 1.筆記IoT初練習-相關介紹


IoT一直是我很想研究的領域....


原是讀電子科系七年的我(雖然書沒讀好XD),但是對"做東西"這件事一直很有興趣~
以前媽媽總是說我又在"必蝦咪mon"(台語:搞什麼東西),現在創意時代與技術門檻的降低,人人都可以"必蝦咪出來",人稱「Marker 創客」

以前在讀書的時候,要做專題用的是單晶片8051,板子也要自己焊上去,硬幹出來!(痛苦...
寫的語言也不像現在百花齊放,是用組合語言(Assembly language)來撰寫韌體燒入到IC中,驅使晶片動作,光一個小程式就要不斷的compiler在等幾分鐘的燒錄時間.....

多虧技術的進步,現在有Aruduino、樹梅派等還有已經模組化的sensor,只要你有創意和耐心學習,人人都可以創造出自己想要的產品!
Aruduino和 Raspberry Pi就不多多介紹了,現在google已經有太多介紹文了,附上官網連結
有興趣的人可以去官網看看介紹~

.Aruduino:https://www.arduino.cc/
.樹梅派Raspberry Pi:https://www.raspberrypi.org/

隨著技術發達,Aruduino原本要用C語言來開發,國外開發者想到

"Arduino 執行 C 語言,而主控端執行 JavaScript,一次要編寫和維護兩種程式。既然瀏覽器和伺服器都用 JavaScript,若 Arduino 也能用 JavaScript 控制,那豈不完美?"

於是Johnny-Five(又譯作:霹靂五號)誕生了!
Johnny-Five:http://johnny-five.io/



可以看到官網也寫到:
> Johnny-Five is the JavaScript Robotics & IoT Platform. Released by Bocoup in 2012, Johnny-Five is maintained by a community of passionate software developers and hardware engineers. Over 75 developers have made contributions towards building a robust, extensible and composable ecosystem.

只能讚嘆這群maker,感恩這群maker了~
讓我們現在能夠以簡單的方式專注於開發,用JS就能控制Arduino控制板,真的是很幸福的一件事啊!

下節:環境相關設定