建構ESP8266的Arduino IDE開發環境

第三章　ESP8266/Arduino整合開發軟體(IDE)安裝與設定

三、１　Arduino整合開發軟體(IDE)下載與安裝

三、２　ESP8266開發環境設定

三、３　Arduino IDE與ESP8266模組板連接測

試

在本書中所使用的開發工具是Arduino官方所提供的『整合開發環境』(Integraed Development Environment，又簡稱為IDE)，其所使用的語言則是Arduino相容的Processing語言（類似C/C++語言），類似Ｃ但又帶點ＪＡＶＡ風格的語言，只是語法較簡單且格式較自由。有鑑於有些讀者或許還不曾接觸過Arduino這個產品，所以本書打算從開發軟體的下載與安裝開始，一路到基礎的範例程式的設計與說明為止，如果已經有過Arduino程式使用與設計經驗的讀者，請自行選擇跳過這章節前面基礎的部份。

三、１　Arduino整合開發軟體(IDE)下載與安裝

俗語說”工欲善其事，必先利其器”，如果徒有性能強大的硬體裝置，卻缺少良好的軟體配合也是惘然，以目前筆者撰寫此文時Arduino IDE的版本已到1.8.12版，如果還沒安裝的讀者請先連線到Arduino官方網站(http://www.arduino.cc)，應該可以看到【圖三．１】的中標記１『Arduino官方網站首頁』畫面，接著將滑鼠移到上方主功能表單中標記２的『SOFTWARE』選項，這時網頁會自動顯示下拉選項，在點選標記３的『DOWNLOADS』選項之後便可以進入下載開發軟體的頁面(如【圖三．２】所示)。

圖三．１　Ａｒｄｕｉｎｏ官方網站首頁

(本圖及以下所有之畫面皆引用自Arduino官方網頁及其IDE軟體，其內容及權利皆屬Arduino官方所有，僅此致謝)

由於筆者是使用Win 10的個人電腦系統，所以就以此為範例說明，在【圖三．２】讀者可看到圖中標記１的紅色框線之處，便是目前最新的Arduino IDE版本(版本號碼為1.8.12)的下載點，如果讀者看到本文時去官方網站下載的話，由於時間的落差，可能會看到更新的版本也不一定，不過整個下載與安裝的流程應該是大同小異！而網頁右上方用紅線框起來的標記２是Windows版的開發程式，有兩種選項可以下載，上方的是一般標準的Windows安裝版(Windows Installer)，下載完成之後依照一般在Windows底下軟體安裝(Install)的步驟進行就可以。下方處的則是單機壓縮獨立版(Windows ZIP file)，也就是說下載之後，經過解壓縮便可以直接執行，不需要再經過安裝的過程；很多綠色自由軟體似乎都是這樣，兩者在使用上並沒有什麼差異，只是後者對於整個開發環境軟體程式的管理(例如刪除或反安裝等)都必須自己處理就是了。至於標記３的版本是專門針對Win 8.1或10的OS電腦，如果點選的話會前往Microsoft Store去下載，讀者有興趣的話可自行前往試試看。

至於標記４則是蘋果Mac OS系統電腦的下載點，而標記５是Linux版作業系統的下載點，讀者們可依自己的電腦種類與OS的不同去下載所需的版本。筆者安裝的是Windows單機壓縮獨立版(Windows ZIP file)，感覺上這樣比較符合這款具綠色精神的軟體的旨意，後面也會以這個版本做安裝的說明。

圖三．２　Arduino IDE不同工作系統下載選擇頁面

在【圖三．２】中不管點選了哪一種Windows版的ＩＤＥ開發程式，接下來都會進入【圖三．３】的下載頁面，在網頁的右下方有兩個下載的選項，標記１的第１項(just download)是免付費直接下載，而第２個則是贊助他們後再下載；說實在Arduino社群的這些朋友們不計酬勞讓大家享用他們的辛苦成果，的確是讓人很欽佩！如果可以的話贊助他們一些也不為過，不過由於是跨國界的付款，假如沒有適當的信用卡好像還無法共襄盛舉，所以大家如果無法贊助的話就記得要感念在心頭就是了。

圖三．３　Arduino IDE下載頁面

當Arduino IDE軟體下載及安裝(或解壓縮)完成後，我們如果打開Arduino IDE所在的資料夾來看的話，其內容如【圖三．４】所示，其中編號１的便是Arduino IDE的主程式，只要點擊它便可以起動程式。而標記２的『libraries』資料夾是Arduino IDE的函式庫資料夾所在之處，也是這個整合開發工具的精華之所在，因為其中包括了眾多由Arduino開發團隊所撰寫設計的一些內建函式，其中大部份都和擴充應用模組(shield)、週邊裝置及感測器有關，例如液晶顯示器(LCD)、非同步串列傳輸(Serial/UART)、伺服馬達(Servo Motor)步進馬達(Stepper Motor)、網際網路(Ethernet)、無線網路(WIFI)及各式各樣的感測器(Sensor)如溫度、濕度、壓力、紅外線‧‧‧等等！可說是琳琅滿目種類繁多，這讓許多的使用者能夠很容易的去完成他們的程式設計，難怪那麼多人會喜歡使用它！

圖三．４　Arduino IDE資料夾內容

至於標記３的『drivers』資料夾，是存放所有Arduino 家族開發模組板的ＵＳＢ轉UART/RS232介面晶片的驅動程式，當第一次把Arduino 模組板插上你的電腦時，就和所有使用ＵＳＢ介面的裝置一樣，電腦都會偵測到並自動去安裝驅動程式，以Ｗｉｎ７以上的系統來說，幾乎不用擔心會有找不到驅動程式的問題，可是如果你的電腦還是Window XP系統的話，由於Arduino 家族不同模組板使用了不同的ＵＳＢ轉UART/RS232介面晶片，Window XP系統常會無法自動偵測到及安裝驅動程式，這時就必須用手動的方式將驅動程式的來源指向這個“drivers”資料夾的路徑與位置。

標記４的「examples」資料夾是存放所有Arduino 的應用範例程式，更是Arduino IDE軟體的精華所在，前面提到的程式庫中所有的種類都有相關的應用範例可供參考，而且大部份程式庫還不只一個應用範例，可說是內容豐富；只要能把這些範例程式弄清楚，大概就可以稱為Arduino 的高手了，建議有興趣而且想學好Arduino 的讀者不妨把它們一一叫出來仔細研究一下！

當程式正常起動時會先看到【圖三．５】的起動畫面，完成後接著跳到【圖三．７】的新建程式畫面，在【圖三．５】畫面中顯示的是最新版IDE(1.8.8)起動畫面，和之前的版本(【圖三．６】)有很明顯的不同之處，我們除了可以看到Arduino的官方Ｌｏｇｏ之外(標記１)，眾開發團隊人員的姓名在此已隱而不見，取而代之的是標記２紅色框框的介紹連結網址(arduino.cc/credits)。在Arduino剛起來的時候的確是個公益組織，可是當它們蔚為風潮大受歡迎之後，接踵而來的龐大商機令誰都會怦然心動，他們的組織與成員好像也因此有了大幅的更動；為了這龐大的利益，他們便推出一個新系列的產品，也就是標記３所示的「Genuino」開發板族系，以便與舊的『Arduino』家族區隔。至於兩者之間的差異？由於筆者還是活在舊的世界裡，至今還沒用過這款新的模組板，所以也不是很了解，筆者的觀念裡，只要是好用又可用，何必管他新舊？就像這句話：『管他黑貓白貓，只要是會抓老鼠就是好貓』，各位說是嗎？

圖三．５　新版Arduino 1.8.8 IDE起動畫面

圖三．６　舊版Arduino ＩＤＥ起動畫面

圖三．７　Arduino IDE新建程式畫面

　　

當進入【圖三．７】的新建程式畫面時，左上方標記１的抬頭標題文字「sketch_may09a| Arduino 1.8.12」中，左邊是這個新建立程式的名稱，右邊的文字代表的是這個ＩＤＥ整合開發環境的版本(1.8.12版)；而如果去翻英文字典查一下「sketch」這個單字的意義，可以得知代表『素描』或『草稿』的意思；在原始Arduini團隊中的創始人Massimo Banzi先生等Arduino 開發團隊成員，當初在設計這個系統時，本來就是針對一些非電子專業人士，而且是一些藝術或是創意工作者而設的，所以他們對這些程式檔案也視為藝術工作的內容，因此才會取「sketch」這個名字作為檔案的預設名稱。而後面部份則是這個檔案的新建日期，其中” may09”代表五月(May) 9日，然後依照檔案建立的順序由ａ、ｂ、ｃ、…這樣一路延伸下去，因此為了讓檔案能更具有意義及可讀性，使用者最好把每一個新的檔案另存(即即上方主選單中標記２『檔案』這個選項中的『另存新檔』功能)成不同的名稱。

而在【圖三．７】新建程式畫面右下方標記為３之處的文字內容，分別代表所使用的Arduino開發模組板型號(在此為Arduino/Genuino Uno板)，以及開發板在個人電腦上所佔用的序列通訊埠(即COM6)，如果這組訊息與目前實際的情形不合時，我們就必須先動手去修改它才行。修改的方式分成兩個部份，當要修改Arduino模組板型號時，如【圖三．８】所示，首先我們用滑鼠點選標記１的『工具』下拉功能選項，然後點選標記２『開發板』這個選項，這時Arduino IDE會把目前所有可用的模組板型號都列在右方的開發板管理員視窗中，此時使用者便可依自己的需要點選正確的模組板型號。標記３處就是我們這次製作所使用的Uno板選項。

圖三．８　Arduino IDE選取模組板型號畫面

如果要修改Arduino模組板所使用的電腦通訊埠，則可依【圖三．９】中所示的步驟，和前面一樣我們先用滑鼠點選標記１的『工具』下拉功能選項，然後點選標記２「序列埠」這個選項；同樣的Arduino IDE會把目前我們電腦中所有可用的通訊埠都列在右方的標記３之處，接著使用者便可依Arduino模組板實際連接的埠號去點選它。當上述Arduino模組板與所使用的電腦序列通訊埠都設定好之後，此ＩＤＥ開發工具視窗的右下方便(即標記４之處)會呈現出使用者最後的設定內如容。

圖三．９　Arduino IDE使用電腦通訊埠選擇畫面

理論上來說不管我們撰寫哪一種語言的程式，基本上都是使用英文，以Arduino IDE這個開發工具所使用的語言來說是一種類似Ｃ又採用了一點ＪＡＶＡ的語法，只是又比這兩種語言簡單自由些；不管怎麼樣都是英文的環境，照理來說使用者對英文應該很熟，不過還是有許多朋友只對程式的指令與語法是ＯＫ，可是對工具中其他環境與操作部份的英文字彙還是不太能接受；而Arduino IDE中也針對不同的語系提供了支援，如果使用者想工作在中文的環境底下也是有路可循。首先假設我們一開始是處於英文環境底下，如【圖三．１０】所示，先點選Arduino IDE畫面左上方標記１的『File』，然後選擇標記２的『Preferences』功能，便可看見【圖三．１１】的『環境與偏好設定』畫面。其中標記１之處是我們所撰寫程式的預設存放位置，如果要改變的話，可以透過標記２的「Browse」按鈕去調整；其中標記３的『Editor Language』下拉清單即為Arduino IDE開發工具所使用的語言選擇項，如果要選用我們習用的繁體中文(標記４)語系，就必須往下移動滑桿到中間的位置才看得到。當這些設定都選取好之後，最後按下右下方的『ＯＫ』按鈕便大功告成。

圖三．１０　Arduino IDE英文環境設定畫面一

圖三．１１　Arduino IDE英文環境設定畫面二

不過要注意的是Arduino IDE開發工具並不會馬上改轉換成中文環境，必須先結束程式重新再啟動才行！【圖三．１２】、【１３】是【圖三．１０】、【１１】中文化之後的結果，讀者們可以比較一下兩者的異同之處。

圖三．１２　Arduino IDE中文環境設定畫面之一

圖三．１３　Arduino IDE中文環境設定畫面之二

三、２　ESP8266開發環境設定

在完成上述的下載與安裝動作之後，我們還是不能馬上在其中開發和設計ESP8266的程式，這是因為我們只是安裝及設定好標準的Arduino IDE整合開發環境而已，可是ESP8266相關的開發模組板並非Arduino的原生模組板之一，所以原始的Arduino IDE整合開發軟體並不支援任何一款的ESP8266模組板。幸好網路上已經有許多熱心的創客、專家及軟體高手，因為有鑒於ESP8266這塊具WiFi功能的模組板便宜又好用，而且功能又強大，因此紛紛跳下來設計出許多方便又好用的開發軟體，所以目前除了原廠樂鑫公司所提供的C語言SDK開發工具之外，還多了包括相容於Arduino IDE及Lua語言、Python語言及JavaScrip等語言。

本書之所以要此用Arduino IDE作為ESP8266的開發軟體，主要是因為Arduino 這個系列的產品早已經是風靡全世界，不要說是專業的電子人，連許多業餘的國、高中生都可看到有人在使用，就算不曾接觸過它，想要開始入門學習也很容易，再加上目前在Arduino IDE中已經提供了各式各樣豐富的函式庫，而且其中許多都可以直接相容於ESP8266晶片，既然有這麼好的環境我們當然要善加利用了。

圖三．１４ Arduino IDE/ESP8266設定畫面

要將Arduino IDE設定為可用ESP8266晶片的開發環境，我們必須先回到【圖三．１２】的『Ａｒｄｕｉｎｏ　ＩＤＥ設定畫面』去點選「偏好設定」這個選項，在進入【圖三．１４ Arduino IDE/ESP8266設定畫面】後，在下方標記１之處有一名為『額外的開發板管理員網址』輸入欄位，只要輸入下列的網址即可：

《 http://arduino.esp8266.com/stable/package_esp8266com_index.json 》

如果覺得欄位的空間太小不方便輸入，亦可點選標記２的按鈕，這時會出現標記３名為『額外的開發板管理員網址』的彈出視窗，使用者便可以在中間空白處輸入上述網址(標記４)；如果以後有需要新增的其他的非官方開發板，只要依序在下面輸入相關的對應網址就可以了，例如圖中空白視窗的第二行就是ESP8266的下一代ESP32的支援網址。輸入完之後再按下『確定』按鈕就大功告成，完成在Arduino IDE中ESP8266開發環境的第一階段設定工作！

接下來要做的工作就是把所有跟ESP8266相關而且經過ESP8266官方社群認可的開發板都載入Arduino IDE內，在啟動Arduino IDE之後如【圖三．１５】所示，先用滑鼠左鍵點擊上方主能表標記１的【工具】選項，等下拉功能表出現後，再將滑鼠移到標記２的『開發板』選項上，此時系統會自動彈出右方的『開發板管理員』視窗，接著再用滑鼠點選標記３的「開發板管理員」功能，這時系統會開啟一新的『開發板管理員』視窗(即【圖三．１６】)。

圖三．１５ 啟動Arduino IDE開發板管理員設定可用的ESP8266開發板

在一開始的時候【圖三．１６】的『開發板管理員』視窗會顯示許許多多不同開發板的相關選項與內容，看起來令人眼花撩亂，不過我們只須用滑鼠左鍵點擊上方[類型]欄右邊標記２的相關搜尋文字輸入欄位，輸入《ESP8266》這個關鍵字，就可以看到標記３名為『esp8266 by ESP8266 Community版本2.5.0 INSTALLED』的欄位視窗框，記得要先將滑鼠移到這個欄位視窗框上，才會看到相關的選項與按鈕。假如之前已經安裝過這個管理軟體，便會顯示”INSTALLED”的訊息。如果是第一次按裝或者是要更新軟體的版本，可點選標記４的下拉功能按鈕，便可看到標記５的下拉視窗，然後點選所要的版本，並按下標記６的【安裝】按鈕，系統便會將標記７中所有由ESP8266所衍生出來的相關開發板資料載入Arduino IDE中。經過上述的安裝與設定後，Arduino IDE才算是真正的相容於ESP8266這個系列的開發板，不過要先確定你所使用的開發板已經名列在標記７的清單裡面。

圖三．１６ 於開發板管理員中設定所有相關可用的ESP8266開發板

三、３　Arduino IDE與ESP8266模組板連接測試

　　經過前面的一連串的選擇與設定後，感覺上Arduino IDE和我們所選用的模組板似乎可以連接使用了，不過即使電腦已經正確偵測及安裝好模組板的驅動程式，也不保證就可以正常下載燒錄寫好的程式，這是因為還有一些內建的函式庫如果沒有預先安裝的話，在程式編譯的階段就會沒辦發通過；如果是第一次使用Arduino IDE這個開發系統的使用者，或者說要使用新的模組板，一般來說最好先試燒錄一些程式看看。在太極拳中第一招叫『起手式』，而在寫Ｃ語言或者ＪＡＶＡ語言的程式時都會先寫一個起手程式，就是在螢幕上顯示”Hello World!”這個字串；一樣的Arduino IDE也有一公認的起手程式，就是「Blink」這個內建的範例程式，由於它已經內建在Arduino IDE裏面，所以即使還沒學過Arduino 語言程式的新手，也可以藉由開啟這個範例程式的方式來測試Arduino IDE與ESP8266模組板的連接狀態。接下就讓我們看看如何進行這個測試的過程。

在Arduino標準的開發過程是要先選擇所使用的開發板，當我們完成前面的ESP8266開發環境的設定工作之後，先用滑鼠左鍵點擊【圖三．１７】上方主能表標記１的【工具】選項，等下拉功能表出現後，再將滑鼠移到標記２的【開發板】選項上，此時系統會自動彈出右方的『開發板管理員』視窗，接著使用者只要上下移動滑鼠便可找到所要使用的開發板型號。在圖中標記為３、４的「NodeMcu 1.0(ESP-12E Module)」及「WeMos D1 R1」這兩款ESP8266開發板，是本書建議採用的開發板，其特性與外觀會在後面的單元再做詳細的介紹。在點選完成之後，【開發板】選項的右邊便會出現使用者所選擇到的開發板型號名稱。

圖三．１７ Arduino IDE/ESP8266開發板設定畫面

在選擇好開發板的型號之後，還必需設定這塊板子所使用的串列通訊埠的號碼；我們再次用滑鼠左鍵點擊【圖三．１８】上方主能表標記１的【工具】選項，在下拉功能表出現後，再將滑鼠移到標記２的『序列埠：』選項上，系統一樣會在右方自動彈出『序列埠』這個視窗，在其中系統會將所有存在電腦中的序列埠號碼都列出來，使用者可依開發板實際連接的位置去點選(以圖三．１８來說「WeMos D1 R1」這片開發板是分配在COM6)。

由ESP8266所構成的子模塊(ESP-01~ESP-12F)，因為針對不同的使用場合與成本，其外接的Flash記憶體大小也會有所不同；像前面建議使用的兩款開發板它們的Flash記憶體都是4M bytes，不過由於受限於CPU本身程式記憶體管理的限制，所以真正能被程式所使用的只有1M bytes而已，其餘的記憶體只能轉成儲存檔案資料(SPIFFS)之用；由於開發板已經內建這麼多的記憶體，而且後面我們也會有一些跟SPIFFS相關的應用實習，所以最好也先把它設定好。

圖三．１８ Arduino IDE/ESP8266序列通信埠設定畫面

圖三．１９ Arduino IDE/ESP8266設定畫面

要設定SPIFFS的功能，一樣是要先點選主能表的【工具】選項，只是這時我們要選擇下拉功能表中的『File Size:』選項，也就是【圖三．１９】中標記２的地方；當滑鼠移到這裡時，系統會在右方自動彈出Flash記憶體的設定選擇視窗，以「NodeMcu 1.0(ESP-12E Module)」和「WeMos D1 R1」這兩款ESP8266開發板來說，由於使用的是ESP-12E/F這兩款的子模塊，它們的Flash記憶體都是4M bytes，所以為了充分利用所有的記憶體，最好是選擇標記３的「4M(3M SPIFFS)」選項！

在開發板和通訊序列埠設定好之後，照理接下來就可以叫出「Blink」這個基礎的範例程式來測試了，不過由於ESP8266和Arduino家族一系列的開發板是截然不同的產品，所以開啟的方式也不太一樣，接著就讓我們看看如何開啟ESP8266專用的「Blink」範例程式。

圖三．２０ 開啟Arduino IDE內建ESP8266的 Blink範例程式畫面

　　請參考【圖三．２０】的Arduino IDE畫面，首先我們用滑鼠點選螢幕左上方主選單標記１的[檔案]選項，等下拉選擇頁面展開之後，再將滑鼠移到標記２的『範例』處，這時應該可以看到一卡車的範例程式列表(即標記５的方框)彈出來供使用者選擇；接著將滑鼠移到這塊方框內，由於前面的範例(【圖三．１８】)是選用了「WeMos D1 R1」這款ESP8266開發板，所以我們往下滑動直到看到標記６名為『WeMos D1 R1的範例』的區域為止，然後再將滑鼠移到標記３名稱為『ESP8266』的選項，此時可在右方看到標記為７的範例程式彈出視窗，其中標記４的「Blink」就是這個範例程式，在點選它之後，便可以在【圖三．２１】中看見「Blink」這個範例程式的內容了。其中標記２的部份便是「WeMos D1 R1」這片開發板的基本相關參數，和所使用的序列通信埠(COM6)。

圖三．２１　範例程式Blink內容畫面

　　在每一片標準的Arduino 開發板上，都有內建一顆ＬＥＤ燈並接在編號為１３的數位接腳上，當１３腳輸出High時便會點亮這顆ＬＥＤ燈，如果輸出Low則會熄滅；而原始的Arduino的『Blink』範例程式會讓這顆ＬＥＤ燈點亮一秒後熄滅一秒，並且不斷的重複下去。在Arduino IDE中寫好的程式要先經過編譯才能載入／燒錄到模組板的單晶片內，【圖三．２２】左上方標記４的『』按鈕符號稱為「Verify」，直接翻譯為『驗證』，其實也就是一般程式中所謂『編譯』(Compiling)的意思；而旁邊另一個標記為５的『』按鈕符號稱為「Upload」，直譯為『上傳』，按下它便會連續執行『編譯』與『載入』(即燒錄) 兩個動作。

如果上傳燒錄程式成功，在【圖三．２２】下方的狀態視窗中出現標記１『上傳完畢』與標記２的「flush complete」提示訊息；假如編譯發生錯誤或是燒錄失敗，下方的狀態視窗都會出現相關的訊息提醒使用者，使用者便可依訊息的內容找出問題再去修正，直到一切無誤且燒錄成功為止。由於Arduino IDE　1.5.7版之後的環境都可在視窗的左方替程式加上行號，因此當有錯誤發生時，只要依下方的狀態視窗中標示的錯誤行列處尋找，便可以很容易的找到bug並予以修正。

圖三．２２　範例程式Blink編譯完成／燒錄成功畫面

如果一切都正確無誤的話，使用者便可看到「WeMos D1 R1」開發板上的ESP8266郵票板(又稱為ESP-12E模組板)上的內建ＬＥＤ燈以亮一秒滅兩秒的節奏閃爍著；前面說過所有標準的Arduino開發板上這顆ＬＥＤ燈的位置是在數位的第１３腳，可是在ESP8266所有的子板塊這顆ＬＥＤ燈的位置是在第２腳(同時也是上傳燒錄用的TX腳)，因此如果直接拿原始的Arduino『Blink』範例來測試的話，可能會無法看到正確的結果；所以在【圖三．２２】中的ESP8266內建『Blink』範例程式中，這顆ＬＥＤ燈的腳位是以標記３的「LED_BULITIN」內建常數變數來代表，而這個常數會隨著使用的開發板不同而由系統自行調整。

如果在開發測試的過程中出了一些狀況，但是我們無法確定是什麼問題時，一般都會以燒錄『Blink』這個範例程式來測試系統的狀態是否正常，看是硬體連線的問題？還是程式本身的問題？然後再依測試的結果去找出問題所在，建議讀者們也可以比照辦理。