iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 3
4
IoT

IoT沒那麼難!新手用JavaScript入門做自己的玩具~系列 第 3

[Day 3]-雖然很無聊但還是要做一下檢測~環境安裝&基礎Arduino開發版測試

IoT沒那麼難!新手用 JavaScript 入門做自己的玩具!(iT邦幫忙鐵人賽系列書)

★本系列文章已集結成冊,和系列文不同的是:

  • 本書使用大量的圖解來說明LED系列、多種感測器等原理。
  • 補足系列文程式碼的解說,增加逐行程式碼的詳細解說!
  • 全彩的書籍,用圖解的方式,讓讀者來理解Johnny-Five各種API的功能與效果,讓你不會只讀文字看到想睡覺而學不起來。

歡迎大家做出自己想要的玩具,為了樂趣而學習,讓學習變成你的樂趣!ヽ(・×・´)ゞ
讓Arduino也能用JavaScript創造出屬於自己的作品!

★購書連結-天瓏網路書局:
https://www.tenlong.com.tw/products/9789864345328

《IoT沒那麼難!新手用 JavaScript 入門做自己的玩具!(iT邦幫忙鐵人賽系列書)》
博客來、金石堂、momo、誠品、PChome、讀冊,均有販售喔!─=≡Σ((( つ•̀ω•́)つ
ISBN:9789864345328

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

上兩篇簡單的介紹一下之後,要來實際的碰實體版啦!
動起來~┌|◎o◎|┘

這篇要帶大家測試自己的板子有沒有問題,以及介紹燒錄的方式!
所需要的材料有~

硬體部分

  • 新台幣$$ (總要買材料吧XD
  • Arduino Uno *1
  • USB Type B 線材 *1
  • 會亮的 LED 隨便 *1(也可以不用,用內建的 LED 也可以)

先帶大家看成功的結果ヽ(・×・´)ゞ

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

那麼我們開始實作吧!ヽ(・×・´)ゞ

第一步:檢查與測試開發板

準備好硬體後,我們要先檢查拿到的板子到底是不是正常可以運作的~

電子產品有千百種不能 work 的理由!
例如:電路板破裂、線路斷掉等等...( ´Д ´)y━~~

現在的 PCB 電路板技術發達,我們用肉眼看不到線路的走向,
有一些板子可能是三層版、四層版,線路會 layout 在電路板一層一層之中;

我們拿到硬體產品時,一定要先測試一下基本功能到底正不正常,才不會辛苦寫好程式,卻不會動又找不出原因,浪費很多時間!(´_ゝ´)

首先我們燒錄基本的閃爍程式來測試開發板的好壞!
斯斯有兩種,燒錄方法也有兩種~

  1. 使用 Arduino IDE

下載連結:https://www.arduino.cc/en/Main/Software
這個是 Arduino 官方所出的 IDE,可以編輯程式也可以透過 IDE 燒錄軟體。

如果要編輯程式要注意,
Arduino IDE 只能用來撰寫 Arduino 的原生程式!

以我目前的主題來說,這個 IDE 就只能當燒錄器以及假設遭遇到不可預測的問題時,可以開啟監控視窗當做 debug 開發使用。(但目前是用不太到)

  1. 使用 Arduino Web Editor

線上連結:https://create.arduino.cc/editor

我只能感嘆技術進步的好快啊~

以前都還要下載軟體、設定繁瑣的程序...(暴露年紀)
現在居然推出線上編輯器了!對開發者來說真的便利很多啊!
這麼方便的東西當然要來試用一下啊!(✪ω✪)
所以這次我們選用第二種方式燒錄的方法來解說,也就是Web Editor來線上燒錄!

第二步:燒錄範例程式

Step 1.

到剛剛的連結處

Arduino Web Editor:
https://create.arduino.cc/editor

點選 online toolsARDUINO WEB EDITOR




Step 2.

一開始會要求你登入或是新建帳號,也可以用google帳號直接註冊,任君喜好~
這邊我是直接使用google帳號,以後就可以在線上儲存專案比較方便一點(๑´ڡ´๑)

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



Step 3.

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

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


→ 進入 下載頁面選擇作業系統平台下載掛件


→ 等待下載中... Loding.... ( ´Д´)y━・~~


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


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


繼續繼續!!┌|◎o◎|┘

→ 按 Next 進入編輯頁面



Step 4.

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


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



Step 5.

測試開發板版,測試基本燒錄功能正不正常!

首先點擊左側選單 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
雖然說這些步驟比較無聊,但是都是之後檢測硬體好壞的基礎!
做好之後我們就可以邁向自造玩具的夢想前進!(๑•̀ㅂ•́)و✧

文後

今天大樂透中秋加碼沒中...繼續寫文章去QQ


同步連載於blogger-King 學習前端之人生
著作權為 Ying-chi Tzeng所有,轉載請告知,感謝您^^


上一篇
[Day 2]-新手的開發板初體驗!Arduino 硬體小小介紹~
下一篇
[Day4]-用 JavaScript 控制 Arduino 吧!- Node.js + Johnny-Five 環境篇
系列文
IoT沒那麼難!新手用JavaScript入門做自己的玩具~33

2 則留言

1
阿展展展
iT邦好手 1 級 ‧ 2019-10-18 05:08:54

免安裝!! 心跳心跳!!!!/images/emoticon/emoticon42.gif

/images/emoticon/emoticon24.gif

0
wilson1966
iT邦研究生 5 級 ‧ 2019-11-14 15:23:49

哈! LED燈亮了,我也完成我人生中第一個電子產品了
/images/emoticon/emoticon41.gif

讚耶~一起來做玩具吧!!/images/emoticon/emoticon12.gif

我要留言

立即登入留言