超圖解物聯網IoT實作入門:使用JavaScript/Node.JS/Arduino/Raspberry Pi/ESP8266/Espruino

書名很長,以下簡稱《超圖解物聯網IoT實作入門》

封面的控制板和3C裝置圖案,刻意以黑白灰階方式呈現,傳達軟體的重要性,若沒有軟體驅動,這些高科技裝置宛如沒有靈魂的軀殼;背景採用和JavaScript標誌相同的黃色系。

《超圖解 Arduino 互動設計入門》序言中的「序」字,繪製成印刷電路板風格;本書強調的是裝置之間的連結,因此「序」字也做出對應的改變。

內容簡介

本書是《超圖解 Arduino 互動設計入門》的姊妹作,強調串聯網路軟體和微電腦控制板, 以 JavaScript 為主軸,開發網路應用程式、手機 App、互動網頁、資料庫程式和操控微電腦。書中包含網頁式遠端遙控 LED 燈、即時溫濕度 、保全自動感測拍照蒐證、網頁式遠端 LED 繪圖板、即時影像監控 、影像辨識擺頭控制攝影機雲台、雲端溫濕度監控、即時資訊動態圖表、藍牙機器人遙控手機 App 等多元範例(感謝本書編輯黃昕暐先生提供文案)。

本書特色

  • 統括物聯網應用開發的全面技術
  • 前端 JavaScript 到後端 Node.JS 實踐物聯網創意
  • 結合 Arduino、Raspberry Pi 實作物聯網感測控制節點
  • 詳述 C/P 值最高的 ESP8266 Wi-Fi 模組
  • 活用 Apache Cordova 開發跨平台物聯網行動 App
  • 使用 JavaScript 即可駕馭的 Espruino 嵌入式控制板
  • 採用 MongoDB 建構後端資料庫
  • 利用 D3.js / C3.js 打造資訊圖表
  • 連結 IFTTT 串連各項雲端服務

《超圖解物聯網 IoT 實作入門》目錄

各章節導讀,請參閱「新書預告:《超圖解物聯網IoT實作入門 使用JavaScript/Node.JS/Arduino/Raspberry Pi/ESP8266/Espruino》」這篇貼文。

第0章 無所不在的 JavaScript 與物聯網裝置

  • JavaScript 與物聯網
  • MPU、MCU與SoC介紹
  • 章節導讀

第1章 JavaScript 入門

  • JavaScript 入門
  • JavaScript 語言基礎
  • 函式定義
  • 定時產生隨機數字
  • Array(陣列)物件
  • 認識 Object(物件)類型
  • BOM(瀏覽器物件模型)與 DOM(文件物件模型
  • 動手做 操作網頁物件
  • 在網頁中嵌入 JavaScript
  • 事件處理程式

第2章 認識 jQuery 程式庫

  • jQuery 簡介
  • jQuery 語法基礎
  • AJAX 技術:動態更新 HTML 內容
  • 動手做 從 Arduino 輸出純文字溫度
  • 網頁訊息交換格式
  • Arduino 輸出 JSON 訊息
  • 調整燈光亮度的網頁介面
  • 動手做 接收調光值的 Arduino 網站程式
  • 動手做 製作滑桿介面網頁
  • AJAX 的安全限制

第3章 Node.js 入門

  • 在電腦以及樹莓派安裝 Node.js
  • Node 程式設計起步
  • 使用 http 模組建立網站伺服器程式
  • 事件驅動、非阻塞 I/O 示範:讀取檔案
  • global(全域)物件與模組檔案
  • 安裝與管理模組:使用 npm 工具程式
  • 使用 Express 框架開發網站應用程式
  • 使用 package.json 管理 Node 專案的模組程式
  • 動手做 從 Arduino 傳遞溫溼度值 給 Node 網站
  • 動手做 讓 Arduino 定時上傳 DHT11 資料
  • 使用 JSONP 格式跨網域存取資訊

第4章 Node.js 序列埠通訊與樹莓派 GPIO 控制

  • 安裝編譯 Node 模組所需的軟體
  • 動手做 Node.js 序列埠通訊
  • 動手做 從 Node.js 傳送序列資料
  • 透過 Node.js 執行系統指令
  • 樹莓派的 GPIO 簡介
  • 動手做 GPIO 輸出入訊號練習:按開關閃爍 LED
  • 動手做 透過紅外線感測模組拍攝照片
  • 樹莓派 GPIO 整合 Arduino 控制板
  • 5V 和 3.3V 電壓準位轉換

第5章 使用霹靂五號操控 Arduino

  • 霹靂五號:用 JavaScript 控制 Arduino
  • 動手做 用霹靂五號指揮 Arduino 閃爍 LED
  • 動手做 啟用上拉電阻並讀取開關訊號
  • 動手做 類比輸入與 PWM 輸出程式實驗
  • 動手做 檢測溫度
  • 動手做 控制伺服馬達
  • 動手做 控制 LED 矩陣顯示圖像
  • 使用 Socket.io 建立即時連線
  • 動手做 建立即時通訊程式
  • 動手做 瀏覽器與矩陣 LED 作畫

第6章 電子郵件、串流視訊、電腦視覺與操控伺服馬達

  • 透過 Node 傳送電子郵件
  • 動手做 雲端蒐證 / 拍照自動寄送 e-mail
  • 動手做 串流視訊 / 推播即時影像
  • 使用 MJPG 壓縮與串流視訊
  • 控制伺服馬達雲台
  • 動手做 使用方向鍵操控伺服馬達雲台
  • 動手做 攝影機雲台的 Node 伺服器程式碼
  • 使用觸控螢幕虛擬搖桿操控攝影機雲台
  • 瀏覽器連接遊戲控制器(電玩把手)
  • 動手做 使用 gamepad.js 程式庫建立遊戲器操作的網頁程式
  • 機器視覺(computer vision)應用
  • 使用 tracking.js 偵測人臉
  • 動手做 臉孔偵測與伺服馬達連動
  • 動手做 偵測顏色

第7章 Espruino 控制板簡介

  • Espruino 程式開發軟體
  • Espruino 的基本硬體操作指令
  • 動手做 使用光敏電阻製作小夜燈
  • 動手做 呼吸燈效果
  • 動手做 超音波控制燈光亮度
  • Espruino 的睡眠模式
  • 動手做 深層睡眠實驗
  • 動手做 藍牙控制 LED
  • 動手做 藍牙遙控車(馬達控制)
  • 動手做 利用 SD 記憶卡紀錄溫濕度變化
  • 動手做 控制伺服馬達
  • STM32 微控器相容板
  • 動手做 替 STM32 控制板燒錄 Espruino 韌體

第8章 使用 MongoDB 資料庫以及ejs 樣版引擎建立動態網頁

  • 資料庫簡介
  • 安裝 MongoDB
  • MongoDB 的基本操作
  • 查詢資料
  • 更新與刪除資料
  • 使用 mongoose 套件連結 MongoDB 資料庫
  • 連結 MongoDB 並讀取資料的程式
  • 動手做 儲存 Arduino 上傳的溫溼資料
  • 認識樣版引擎
  • 動手做 在 ejs 樣版中顯示最近 10 筆溫濕度資料
  • 動手做 分頁顯示資料

第9章 資料視覺化:使用 C3.js 與D3.js 繪製圖表

  • 使用 C3.js 繪製圖表
  • 顯示動態平移的即時線條圖
  • 動手做 使用資料庫數據描繪折線
  • 動態顯示 Arduino 檢測類比值
  • 動手做 使用圖表動態顯示感測器數據
  • 簡易數位濾波
  • 使用 D3 程式庫
  • 認識 SVG
  • 使用 D3 繪製 SVG 圖像
  • 使用動態資料繪製折線圖
  • 結合數據動態附加 HTML 元素

第10章 使用 Cordova 開發行動裝置 APP

  • 認識 Cordova
  • 設置 Cordova 的 Android 開發環境
  • 下載與設置 Android SDK
  • 安裝 Cordova 工具程式和 Ant
  • 使用 Cordova 建立手機 App
  • 啟用 Android 手機的 USB Debug 功能
  • Cordova 網頁的基本程式架構
  • jQuery Mobile 框架入門
  • 動手做 手機 App 網路控制 Arduino

第11章 製作藍牙手機遙控 App

  • 製作藍牙遙控 LED 燈 App
  • 動手做 Arduino 端的藍牙 LED 開關程式
  • 作藍牙機器昆蟲遙控 App
  • 動手做 手機體感(加速度感測器)控制伺服馬達
  • 動手做 透過手機 USB 介面連接 Arduino 板
  • 透過返回(Back)鍵關閉 App

第12章 ESP8266 物聯網應用入門(一)

  • ESP8266 模組簡介
  • NodeMCU 開發版簡介
  • 使用 AT 指令操作通用型 ESP 模組(ESP-01)
  • 動手做 透過 Arduino 執行 ESP8266 的 AT 命令
  • Wi-Fi 無線網路簡介
  • 動手做 透過 ESP-01 的 AT 命令建立 HTTP 伺服器
  • 使用 Arduino 開發 ESP8266 程式
  • 使用 ESP8266WiFi 程式庫連接無線網路
  • 使用 ESP8266WebServer 程式庫建立 HTTP 伺服器
  • 動手做 處理 GET 或 POST 請求
  • 讓 NodeMCU 扮演網路前端上傳資料(IFTTT)

第13章 ESP8266 物聯網實作(二)

  • 設置區域網路域名
  • 動手做 使用 ESP-01 模組開發 Arduino 物聯網
  • 透過 OTA 更新 ESP8266 的韌體
  • 使用 OLED 顯示器呈現 IP 位址和溫濕度值
  • 動手做 在 OLED 顯示 IP 位址與動態溫濕度
  • 使用 JavaScript 程式開發 ESP8266 程式
  • 使用 Espruino 的 Wifi 程式庫
  • 觸發執行 IFTTT 網路程式

255 thoughts on “超圖解物聯網IoT實作入門:使用JavaScript/Node.JS/Arduino/Raspberry Pi/ESP8266/Espruino

  1. 請教老師:
    第13-3節中使用NodeMCU搭配OLED及DHT11中的範例,實作完成後可正常運作,但卻也發現,nodeMCU在接上電源後,有時會出現無法正常開機現象.如OLED似乎沒過電的情形,但我感覺應該是NodeMCU OS沒正常開機,只好拔離USB電源從新再插一次才可以正常運作.我試過更換零件及nodeMCU,似乎這樣的組合都會有類似的情況發生,是否是電源供應不足所造成的呢.我也試過使用外接的直流電源模塊來供電但仍無法有效解決這個問題.
    謝謝

    1. 我在實驗時並沒有出現類似的情況,因為0.96吋OLED顯示器的消耗電流僅約20mA~30mA,不至於造成電流不足… 如果用外接電源,OLED的電源可以接5V。

      thanks,
      jeffrey

    2. 謝謝老師回答.
      另一問題是腳位不夠用的問題.
      當NodeMCU1.0 ( D0~D8 ) 腳位都用完了.
      是否還可使用那些腳位來接其他傳感器.
      如果有我該如何去使用它.

  2. 其實我是先在raspberry rev.b 上試的,以下為資訊(raspberry pi, 2)
    npm: 3.7.3
    node: 5.8.0

    npm install johnny-five

    > serialport@1.7.4 install /home/pi/ch5/five/node_modules/serialport
    > node-pre-gyp install –fallback-to-build

    make: Entering directory ‘/home/pi/ch5/five/node_modules/serialport/build’
    CXX(target) Release/obj.target/serialport/src/serialport.o
    In file included from ../src/serialport.h:5:0,
    from ../src/serialport.cpp:3:
    ../../nan/nan.h:261:25: error: redefinition of ‘template v8::Local _NanEnsureLocal(v8::Local)’
    NAN_INLINE v8::Local _NanEnsureLocal(v8::Local val) {
    ^
    ../../nan/nan.h:256:25: note: ‘template v8::Local _NanEnsureLocal(v8::Handle)’ previously declared here
    NAN_INLINE v8::Local _NanEnsureLocal(v8::Handle val) {
    ^
    :

    1. 我剛剛在Raspberry Pi 2的一個未曾安裝過Johnny-Five的系統上,測試安裝成功。
      原本系統內建的Node.js是0.10.x版本,升級到5.12.0版。
      我的安裝步驟如下:

      1. 首先升級系統軟體:
      $ sudo apt update
      $ sudo apt full-upgrade

      2. 取得Node 5.x版本:
      $ curl -sL https://deb.nodesource.com/setup_5.x | sudo -E bash –

      3. 安裝Node.js:
      $ sudo apt install nodejs

      4. 安裝Johnny-Five:
      $ npm install johnny-five

      在安裝Johnny-Five過程中,取得serialport程式庫出現錯誤,但是安裝程式會自動重新編譯。
      最後測試連接在USB埠的Arduino UNO(連接埠名稱是”/dev/ttyACM0″),測試成功。

      thanks,
      jeffrey

  3. 謝謝回答
    1. $ curl -sL https://deb.nodesource.com/setup_5.x | sudo -E bash –
    版本沒變還是5.8.0
    2. node blink.js 還是不行,請看 ( var board = new five.Board({ port: “/dev/ttyACM0” });)

    pi@raspberrypi:~/ch5/five $ ls
    basicInput.js LM35_2.js node_modules pot2.js servo.js wait.js
    blink2.js LM35.js package.json replLED2.js sw.js 檔案說明.txt
    blink.js matrix.js pot1.js replLED.js test.js
    pi@raspberrypi:~/ch5/five $ node blink.js
    module.js:341
    throw err;
    ^

    Error: Cannot find module ‘firmata’
    at Function.Module._resolveFilename (module.js:339:15)
    at Function.Module._load (module.js:290:25)
    at Module.require (module.js:367:17)
    at require (internal/module.js:16:19)
    at Board.Serial.connect (/home/pi/ch5/five/node_modules/johnny-five/lib/board.js:142:7)
    at new Board (/home/pi/ch5/five/node_modules/johnny-five/lib/board.js:324:24)
    at Object. (/home/pi/ch5/five/blink.js:4:14)
    at Module._compile (module.js:413:34)
    at Object.Module._extensions..js (module.js:422:10)
    at Module.load (module.js:357:32)

  4. 老師您好:

    想請問您一下目前我是照著Arduino due 的 schematic( Due-schematic ) 去自製自己的 Due Board
    目前的情況是燒錄沒問題,但是IC完全不會做我程式應要有的動作,就像是有燒錄成功,但是沒有燒進去的感覺

    “燒錄時”
    從usb port到 Atmel-16U2 量的到TX RX 訊號,16u2外接的 TX RX (16U2 ->pin 10 ,11 )的燈號也有亮,而從16U2到SAM3X的 TX RX 也有燒錄訊號的波型進入,且最後會顯示燒錄成功

    我燒了一個閃爍的程式做測試, 但在量測Pin68 (Digital 13) 腳位時 ,電位不會改變

    我又再燒錄了一個一直回傳值的程式進去,但SAM3X TX端點完全沒有訊號出來到USB PORT

    一開始想說會不會是我的IC壞掉了,我又再更換了一個IC做測試,結果是一樣的

    但能夠編譯燒錄成功,不就是代表說16U2能夠正常跟SAM3X 做交涉嗎?

    不知道是哪裡出狀況了

    有什麼其他資訊需要附上在煩請告知 感謝

  5. 請問第13章ESP-01 使用jQuery UI 程式庫連結,
    如果IP 分享器沒有連上網路,
    就會無法下載jQuery UI 介面就會出現無法送出資料 問題.
    我先載到電腦,
    改路徑為js/jquer-xxx.min.js,
    好像也不行.

    1. 在網頁裡面指定這樣的路徑:js/jquer-xxx.min.js,代表讀取和HTML檔所在相同路徑裡的js資料夾當中的jquer-xxx.min.js檔。

      你把.js檔放在電腦上,和ESP8266裡面的HTML是完全不相干的儲存路徑。如果你的IP分享器沒有連上網路,你必須將.js檔存入ESP8266的快閃記憶體。請參閱這三篇補充文章說明:

      在ESP8266的SPIFFS檔案系統存放網頁檔案(一)

      在ESP8266的SPIFFS檔案系統存放網頁檔案(二)

      在ESP8266的SPIFFS檔案系統存放網頁檔案(三):Wi-Fi無線網路燈光控制與調光器

      thanks,
      jeffrey

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *