本系列會先用模擬車，以一個小小的實作為範例，展示如何快速用IBM Bluemix做到車連網 (V2I)、車連路 (V2R)和車連人 (V2H)，最後再改用你自己的手機模擬真車，連到自己剛剛實作的應用程式。

1. IBM Bluemix
www.bluemix.net
Bluemix 與 車聯網應用實作
Y O U C A N D O I T B E T T E R , F A S T E R A N D M O R E C O S T – E F F I C I E N T
教材: http://goo.gl/oNWOS4

2. • 實作前準備
• 車連網(V2I)、車連路(V2R)
• 車連人(V2H)
 建立IOT微服務
 建立車子模擬器
 安裝Node-RED
 Node-RED app小練習第一彈：
建立http網站!
 Node-RED app小練習第二彈：
和iot接上線！
 讓模擬車在google map走路
 建立Geospecial Analytics微服務
 使用Android實機取代模擬車
 建立Push Notification微服務
目錄

3. 實作前準備
1.點選 人像圖示
2. 確認您的Region,
本次練習請用US
South 或United
Kingdom, 勿用
Sydney
3. 點選 Management
Organizations
4. 點選 Create a
Space
5. 輸入 Space 名
稱, 然後按
CREATE
歡迎使用IBM Bluemix
如果您是初次使用,或尚未建立第一個
space, 請執行以下動作。

4. 建立IOT微服務
IOT
IOT GatewayIOT Device

5. 建立IOT微服務

6. 建立IOT微服務

7. 建立IOT微服務

8. 建立IOT微服務
出現剛剛新創的類
別vehicle
一直按下一步，直到建立 繼續往下拉!
按下一步

9. 建立IOT微服務
一直按下一步，最後按新增
複製組織ID、裝置類型、裝置ID和鑑別
記號，貼到自己的記事本記錄下來，在
本應用中會不斷被使用到。
複製完後關掉
視窗

10. 建立IOT微服務
為應用程式建立api key和
鑑別記號
(像應用程式的帳號密碼)

11. 建立IOT微服務
複製後
存放於筆記本
內
這個應用程式
帳密，是特別留
給車子模擬器
使用的

12. 建立車子模擬器
MQTT
IOT
模擬器

13. 建立車子模擬器
1. 進入專案
vehicle-
simulation
2.按Fork project
將project複製到
自己的空間
3.

14. 建立車子模擬器
1.點選
BUILD & DEPLOY
2.
新增暫置
3.
設定Build建置
4.
新增暫置工作
5.
確定儲存

15. 建立車子模擬器
1.再一次新增建
置，命名為
Deploy
2. 輸入設定不用
變更，直接
切入”工作”標籤
3. 新增工作
“部署”
4. 按儲存

16. 建立車子模擬器
1. 切換到線上
編輯
EDIT CODE
2.
有兩個設定檔
必須修改

17. 建立車子模擬器
1.
點擊config資
料夾下的
setting.js
2.
填入剛剛複製的:
1) DeviceID 帳密
2) 應用程式 帳密
應用程式 帳密
DeviceID 帳密

18. 建立車子模擬器
1.
到root下的
manifest.yml
更改host和name
讓其與部署的
project一致
2.
點擊最左邊
Git按鈕

19. 建立車子模擬器
1.
留下變更的
信息記錄
2.
按確定
儲存變更
3.
將變更push到
遠端
切到Build&Deploy
酷! 發現建置與
部署
已經自動執行
了…

20. 建立車子模擬器
1.
點選已佈署完
成的網址
2.
發現車子模擬器已
經成功啟動了!

21. 建立車子模擬器
1.
替deviceID建
立client
3.
用此device的名義,
使用Topic:
telemetryTopic發送
event
2.
要發送給iot
server的Topic
問題: 這個車子模擬器是如何模擬device?
我們之後就能從iot server接收到此device發佈的telemetryTopic!

22. 安裝Node-RED
我能監控
服務的一舉一動
藉由我撰寫
程式的邏輯
Node-RED

23. 安裝Node-RED

24. 安裝Node-RED
1.
自定Node-RED名稱
(主機和名稱同)
2.
Node-RED編譯完成
後，點擊概觀

25. 安裝Node-RED
1.
新增GIT
2.
打勾
並繼續
3.
點選編輯程式
碼

26. 安裝Node-RED
將教材中，external-plugin資料夾內的資源，拉入線上編輯器的public資料夾內
方便我們實作時，引用js和image。

27. 安裝Node-RED
1.
點擊GIT按鈕
2.
留下變更記錄
3.
按確定
儲存變更

28. 安裝Node-RED
1.
點擊儀表板
2.
點擊Node-RED
網址
3.
點擊Go to your
Node-RED flow
editor

29. 安裝Node-RED
歡迎進入Node-RED的世界!! NodeRED的編輯
界面分成四個部分

30. Node-RED app小練習第一彈: 建立http網站!
目標:
傳送url並夾帶x和y參數給Node-RED app，Node-RED app要回傳x+y的結果。

31. 建立http網站!
1.
在input區塊拉
出http request
2. 在function區塊拉
出function
3.
在output區塊拉
出http response
4.
雙擊http request
設定path為/text
5.
雙擊function
在這裡作參數相加

32. 建立http網站!
1.
添加debug node
監控function output
2.
Deploy部署
3. 呼叫
http://{your_nodered_name}.mybluemix.ne
t/text?x=1&y=2
試試看剛剛建的小網站
1+2=3

33. Node-RED app小練習第二彈: 和iot接上線！
Device狀態
Node-RED
IOT
我來監控
模擬車的
狀態
MQTT

34. 和iot接上線！
1.
選擇Node-RED應用
程式的概觀
2.
點選連結服務或API
3.
點選之前建立的IOT
服務
4.
按新增

35. 和iot接上線！
1.
拉出IBM IoT
node
2.
拉出Debug
node
3.
雙擊IBM IoT
做設定

36. 和iot接上線！
1.
拉出debug開關
2.
看到訊息區
的Debug~
監控到源源不絕的
IOT訊息

37. 讓模擬車在google map走路

38. 讓模擬車在google map走路
請至教材json code資料夾主網站.txt
1.
點選右上方收納
盒內的import，
選Clipbroad
2.
將主網站.txt的
所有東西都複製
進去

39. 讓模擬車在google map走路
有Map
和
button
1.
匯入的node
flows
Main.js
放置主要
Javascript邏輯

40. 讓模擬車在google map走路
快來用此網址:
http://{your_nodered_name}.
mybluemix.net/cartrack
試試看這個google map應用
目前還只是個普
通的google地圖

41. 讓模擬車在google map走路
1.
點擊Clipboard
2.
複製
websocket.txt
到自己的Node-
RED
請至教材json code資料夾websocket.txt

42. 讓模擬車在google map走路
這個node flows會接收ibmiot的資訊，經過解析後以websocket輸出。
主網站會一直保持和此websocket的連線，讓其能隨時接收到ibmiot的經緯度變化。

43. 讓模擬車在google map走路
1.
雙擊
Check device
2.
改成模擬車的
deviceID
3.
雙擊
/ws/position2
4.
新增new websocket-listener
“/ws/position2”

44. 讓模擬車在google map走路
1.
Main.js內
由javascript請
求websocket
連線
2.
連線成功
並保持連線
3.
追蹤模擬車
並
更新模擬車在
地圖的位置

45. 讓模擬車在google map走路
Deploy後，快看一下主網站：http://{your_bluemix_name}.mybluemix.net/cartrack
我們發現車車已經在我們的地圖動起來了!

46. 建立Geospecial Analytics微服務
Node-RED
IOT
Geospatial
Analytics
Call API
自定監控區域
Device狀態
Geospatial
Alert
Geospatial
Alert
Device狀態
MQTT

47. 建立Geospecial Analytics微服務
Geospatial Analytics Service
功能:
監控正在地理區域移動中的IOT裝置，何時
進入或離開我們自定的監控區域。
應用:
船舶監控-掌握海洋運輸船隻的行蹤:
車隊監控-用多個監控區域的劃分，取代對講機通訊:

48. 建立Geospecial Analytics微服務
1.
回到Node-RED應
用程式概觀，按
新增服務或API
2.
搜尋Geo
找到Geospecial
Analytics並點擊
3.
自定服務名稱
後按建立

49. 建立Geospecial Analytics微服務
1.
點選重新
編譯打包
2.
3.
此為之後認證所
需的所有資訊~
請複製到記事本

50. 建立Geospecial Analytics微服務
1.
請翻開教材
進入json code資料夾
打開geo_call.txt
複製全部
2.
將複製的code貼
到Clipboard
4.
點擊
Edit flow
3.
點擊
此node
5. 準備
設定Geospecial
Analytics api call
出現

51. 建立Geospecial Analytics微服務
目標1:
啟動Geospecial，讓它和iot微服務產生連結
IOT
Geospatial
Analytics
Geospatial
Alert
Device狀態

52. 建立Geospecial Analytics微服務
1.
點擊IOT服務
2.
點選存取
3.
產生API金鑰
給應用程式

53. 建立Geospecial Analytics微服務
1.
雙擊Start geo
2.
填入IOT認證

54. 建立Geospecial Analytics微服務
1.
打開剛剛複製到剪
貼簿的環境變數
2.
雙擊
Call Srart
3.
更換URL
和
帳密
( URL只要改path)
URL=https://streams-broker.ng.bluemix.net:443+ start_path

55. 建立Geospecial Analytics微服務
1.
Deploy後，回到主
畫布點選Start前面
的小突起
2.
等1~2分鐘
直到debug區
回傳OK OK
我們開啟
Geospecial服
務了!

56. 建立Geospecial Analytics微服務
目標2:
使用Node-RED建立 Geospatial Analytics RESTful API給main.js調用
Node-RED
Geospatial
Analytics
Call API
自定監控區域

57. 建立Geospecial Analytics微服務
1.
雙擊
Add region
2.
更換URL
和
帳密
( URL只要改path)
URL=https://streams-broker.ng.bluemix.net:443+ add_region_path

58. 建立Geospecial Analytics微服務
1.
雙擊
Remove region
2.
更換URL
和
帳密
( URL只要改path)
URL=https://streams-broker.ng.bluemix.net:443+ remove_region_path

59. 建立Geospecial Analytics微服務
1.
雙擊
Get fence Status
2.
更換URL
和
帳密
( URL只要改path)
URL=https://streams-broker.ng.bluemix.net:443+ status_path

60. 建立Geospecial Analytics微服務
1.
雙擊
Stop geo
2.
更換URL
和
帳密
( URL只要改path)
URL=https://streams-broker.ng.bluemix.net:443+ stop_path

61. 建立Geospecial Analytics微服務
1.
雙擊
get fence Status
2.
更換URL
和
帳密
( URL只要改path)
URL=https://streams-broker.ng.bluemix.net:443+ status_path

62. 建立Geospecial Analytics微服務
Deploy後，快看一下主網站：
http://{your_bluemix_name}.mybluemix.net/cartrack
我們可以在地圖上面增加/刪除監控區域了!

63. 建立Geospecial Analytics微服務
Node-RED
IOT
Geospatial
Analytics
Geospatial
Alert
目標3:
在Node-RED解析iot服務
傳來的Geospatial Alert~
並將它呈現於主網站上
Geospatial
Alert

64. 建立Geospecial Analytics微服務
1.
請翻開教材
進入json code資料夾
打開geoAlert.txt
複製全部
2.
將複製的code貼
到Clipboard
4.
點擊
Edit flow
3.
點擊
此node
5. 準備
測試geoAlert
出現

65. 建立Geospecial Analytics微服務
1.
拉一個debug
node
連結geoAlert
2.
看到訊息欄
的Debug區監控到
模擬車的進出狀態

66. 建立Geospecial Analytics微服務
1.
拉2條線到
Check device
把alert直接導到主
網站的websocket
2. Deploy後，快看一下主網站：
http://{your_bluemix_name}.myblue
mix.net/cartrack
我們發現 geospecial服務 會幫我們
監控進出區域的時間差
進出區域時間差: 12sec

67. 使用Android實機取代模擬車
IOT
實體手機 模擬車

68. 使用Android實機取代模擬車

69. 使用Android實機取代模擬車
一直按下一步，最後按新增
myPhone
myPhone
類型一樣選擇
vehicle
複製組織ID、裝置類型、裝置ID和鑑別
記號，貼到自己的記事本記錄下來，等
一下登入iot-App會用到。
複製完後關掉
視窗

70. 使用Android實機取代模擬車
1.
開啟simulation or real device
更改判斷為
自定的手機deviceID
2.
更新第一個判斷為
自定的手機
deviceID
3.
Add new web-
socket-listener…
新增path
/ws/position1
4.
最後別忘記
Deploy

71. 使用Android實機取代模擬車
1.
請翻開教材
進入app資料夾
安裝APK檔
iot.apk
2.
將剛剛在iot申請的
DeviceID, Auth
Token, Orgnization
填入
3.
手機不斷的在發送
MQTT event
給IOT服務

72. 使用Android實機取代模擬車
Iot-starter源碼
的架構
撰寫的
容易擴充
又
清楚
主要引用來
源為
Iot資料夾

73. 使用Android實機取代模擬車
我當時人在
基隆XD
模擬車

74. 建立Push Notification微服務
message

75. 建立Push Notification微服務
1.
請翻開教材
進入app資料夾
打開IBM push.apk
並下載至手機
2.
開啟App
App會自動開啟推播
記住Device Id
等一下Node-RED
推播要用!

76. 建立Push Notification微服務
1.
請翻開教材
進入json code資料夾
打開IBM_push.txt
複製全部
2.
將複製的json
code貼到
Clipboard
3.
將ibm push node
和geoAlert第一個
output相連
出現

77. 建立Push Notification微服務
URL:
https://mobile.ng.bluemix.net:443/push/v1/apps/{DeviceID}/messages
1.
點擊
此node
3.
雙擊IBM Push
Service
出現
2.
點擊
Edit flow
4.
更新URL
5.
剛剛APP收到
的DeviceID

78. 建立Push Notification微服務
車子在出區域時會
收到推播!
顯示所待時間
和區域名稱

79. 建立Push Notification微服務
在IBM_push app
內 (1) 啟動IBM
Bluemix service
(2)開起推播!
(3)註冊推播!
只需數行!!
處理收到推播後的
事件邏輯

80. Node-RED
IOT
Geospatial
Analytics
Node-RED
讓寫程式更美好~
Call API
自定監控區域
Device狀態
Geospatial
Alert
Geospatial
Alert
Device狀態
MQTT
IBM push
謝謝大家~