超圖解物聯網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 網路程式

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

  1. 補充少講的
    我使用的arduino IDE 是1.6.3
    加入library之後IDE 會出現
    WARNING: Spurious .github folder in ‘Adafruit NeoPixel’ library

    1. 請參閱12-20頁說明,至少採用1.6.4版的IDE,我目前使用的是1.6.13版。
      程式庫會伴隨ESP8266外掛下載,安裝路徑請參閱12-22頁說明。

      thanks,
      jeffrey

    2. 老師謝謝你
      換成1.6.13就可以了

      我有一個新問題是
      我是用arduino uno + esp8266
      來練習你的12.26的範例
      那我應該怎麼去接線呢?

  2. 老師我問錯了 抱歉
    我已經有先試過用12-16的AT 命令建立HTTP伺服器是成功的
    我是想問12-26範例你是使用NodeMCU來示範
    但如果我是想用arduino uno +esp8266 來實現要怎麼修改程式與接線
    謝謝老師

    1. 咦?你指的"arduino uno +esp8266″,不就是以Arduino Uno為主體(程式寫在Arduino Uno裡),ESP8266純粹當成Wi-Fi介面的意思嗎?

      thanks,
      jeffrey

  3. 老師我正在做你的6-18的MJPG 壓縮與串流視訊
    執行的時候出現
    MJPG Streamer Version.: 2.0
    i: fps………….: 5
    i: resolution……..: 640 x 480
    i: camera parameters…………..:
    Sharpness 0, Contrast 0, Brightness 50
    Saturation 0, ISO 0, Video Stabilisation No, Exposure compensation 0
    Exposure Mode ‘auto’, AWB Mode ‘auto’, Image Effect ‘none’
    Metering Mode ‘average’, Colour Effect Enabled No with U = 128, V = 128
    Rotation 0, hflip No, vflip No
    ROI x 0.000000, y 0.000000, w 1.000000 h 1.000000
    o: www-folder-path…: /usr/local/www/
    o: HTTP TCP port…..: 8080
    o: username:password.: disabled
    o: commands……….: enabled
    i: Starting Camera
    Encoder Buffer Size 81920
    連線到8080會出現
    404: Not Found!
    Could not open file

    請問哪邊有設定錯誤嗎?
    在樹莓派上使用

    1. 錯誤訊息:

      404: Not Found!
      Could not open file

      代表串流視訊伺服器無法在指定的路徑(/usr/local/www/)找到影像。請問你在執行6-22的mjpg-streamer指令時,影像輸出路徑正確嗎?

      thanks,
      jeffrey

    2. 我在安裝程式庫libjpeg8-dev 出現下方訊息
      pi@raspberrypi:~ $ sudo apt-get install libjpeg8-dev
      正在讀取套件清單… 完成
      正在重建相依關係
      正在讀取狀態資料… 完成
      Package libjpeg8-dev is not available, but is referred to by another package.
      This may mean that the package is missing, has been obsoleted, or
      is only available from another source
      However the following packages replace it:
      libjpeg9-dev libjpeg62-turbo-dev

      E: Package ‘libjpeg8-dev’ has no installation candidate

      所以我就改安裝 libjpeg62-turbo-dev
      這樣會有問題嗎?

    1. 老師不好意思一直煩你
      問題以解決
      只要把mjpg_streamer 裡面的www
      放到/usr/local
      裡面就可以成功了
      謝謝你

  4. 老師您好,我想要購買這一本書來學習,買書前我希望也一併購買套件來玩,是否可以完整介紹要買那一些硬體

  5. 老師您好:
    page2-26實作後, 點擊"temp_json.html",
    濕度值與溫度值卻一樣, 如溫度20度, 濕度20%
    我把thCmd()函式裡的buffer陣列元素改成6個試試看:
    char buffer[6] = “";
    還是一樣溫度和濕度值都一樣, 不知道如何處理?

    1. 從錯誤訊息 Failure [INSTALL_PARSE_FAILED_MANIFEST_MALFORMED] 以及你的 Package name: GF.hello 看來,在解析描述Android App資訊的設定檔"AndroidManifest.xml"的過程出現錯誤。

      請把套件名稱(package name)全部改成小寫,再重新編譯。

      thanks,
      jeffrey

發表迴響

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