用 Reactjs 和 WoT 標準來降低大眾進入硬體門檻

Transcript

1. 如何⽤用 ReactJS + WoT 降低⼤大眾進⼊入硬體⾨門檻
2. Blue @聯發科技
3. 微型電腦 Powerful 處理單元 豐富多媒體介⾯面，可外接螢幕 具有完整的  OS  系統(  Linux  ) 需多針腳可以做訊號接收輸出
4. 微型控制器 低效能的處理單元（省電⾄至上）   KB  等級的  RAM 需多針腳可以做訊號接收輸出
5. 組合式開發版 低效能的處理單元（省電⾄至上） 需多針腳可以做訊號接收輸出 Powerful 處理單元 ( ⽤用來 處理 wifi )
6. 關鍵在使⽤用的晶⽚片 對  javascript  開發者⽽而⾔言如何去區分？
7. Embedded board 晶⽚片上的規格區分 MPU  (  Microproccess  Unit) MCU  (MIcrocontroller  Unit) 1.  ⼯工作時脈幾百Hz   2.  MB  等級的  RAM   3.  可以跑完整的  Linux   1.  ⼯工作時脈  100Hz  以下   2.  KB  等級的  RAM     3.  輕量級的  OS  :  freeRTOS  …etc  
9. MPU
11. MCU
13. MPU MCU
14. MPU MCU 業界⾓角度來看雙晶⽚片的趨勢明顯
15. 我在嘗試各種  POC  過程所傳達給⼤大家的不是⼀一個⽅方法   ⽽而是想⼤大家能夠藉由  JS  開發者所遇到的挑戰做⼀一個省思   
 要知道『為何⽽而做』
16. 降低⼤大眾進⼊入硬體⾨門檻會遇到很多挑戰
17. 挑戰⼀一 硬體上的難題- 我要如何去選適合 JS 的開發板？
18. 先從⼀一般基本跑得動 javascript 情境來談 OS   Linux,  openWRT,  freeRTOS…etc 想像⼀一下各位現有的  server  如何跑  javascript  ?  
19. 先從⼀一般基本跑得動 javascript 情境來談 Nodejs OS   Linux,  openWRT,  freeRTOS…etc 硬碟⾄至少要  1X  mb,  RAM  建議⾄至少要  128  mb 想像⼀一下各位現有的  server  如何跑  javascript  ?  
20. 先從⼀一般基本跑得動 javascript 情境來談 Nodejs OS   Applicaton Linux,  openWRT,  freeRTOS…etc 硬碟⾄至少要  1X  mb,  RAM  建議⾄至少要  128  mb 想像⼀一下各位現有的  server  如何跑  javascript  ?  
21. 先從⼀一般基本跑得動 javascript 情境來談 Nodejs OS   Applicaton 硬碟⾄至少要  1X  mb,  RAM  建議⾄至少要  128  mb 想像⼀一下各位現有的  server  如何跑  javascript  ?   規格 架構 Linux,  openWRT,  freeRTOS…etc
22. 先從⼀一般基本跑得動 javascript 情境來談 Nodejs OS   Applicaton 硬碟⾄至少要  1X  mb,  RAM  建議⾄至少要  128  mb 想像⼀一下各位現有的  server  如何跑  javascript  ?   規格 架構 MPU Linux,  openWRT,  freeRTOS…etc
24. 具有很多現成的  Arduino  模組
25. MPU MCU
26. 挑戰⼆二 軟體上的難題-如何讓兩個晶⽚片溝通
27. MPU MCU Linux (js 跑在這) Digital  0 Digital  13 i2C uart Arduino  sensor
28. MPU MCU 硬體上就有線路連接
29. MPU MCU Firmata  把每個通道都打通 Digital  0 Digital  13 i2C uart
30. MPU MCU Serial  port  接收對話 Digital  0 Digital  13 i2C uart 相同的  burnrate下 Firmata  把每個通道都打通
31. 挑戰三 軟體上的難題-如何讓 js 去控制 sensor
32. MPU MCU Serial  port  接收對話 firmata  把每個通道都打通 Digital  0 Digital  13 i2C uart
33. MPU MCU Serial  port  接收對話 Digital  0 Digital  13 i2C uart firmata  把每個通道都打通 MPU 101010000000
34. MPU MCU Serial  port  接收對話 Digital  0 Digital  13 i2C uart firmata  把每個通道都打通 MPU 101010000000 node-­‐serialport
35. MPU MCU Serial  port  接收對話 Digital  0 Digital  13 i2C uart firmata  把每個通道都打通 MPU 101010000000 node-­‐serialport framework
36. MPU MCU Serial  port  接收對話 Digital  0 Digital  13 i2C uart firmata  把每個通道都打通 MPU Application 101010000000 node-­‐serialport framework
37. Framework 的選擇
38. 挑戰四 軟體上的難題-如何做到裝置讓外界溝通
39. 現今物聯『網』標準幾個重要關注重點： 1.安全性   2.每個『物』都能彼此定義⾃自⼰己   3.能  leverage  現成既定  protocol  
40. 現今的 protocol 很多 1.websocket   2.CoAP   3.WAMP   4.HTTP/HTTPS   5.MQTT  …
41. WoT  按照  wiki  講的有4個層⾯面:          1.  Programing  web  (  programing  spec  )      2.  Seman]c  web  (  JSON-­‐LD  )    3.  Real-­‐]me  web  (  web  socket    or  other  protocol  )    4.  Social  web  (  安全機制  ) https://github.com/w3c/web-­‐of-­‐things-­‐framework W3C    今年對於  Web  of  things    這個議題做了很積極的改變
42. https://github.com/w3c/web-­‐of-­‐things-­‐framework 定義  (schema)   ⼿手機的屬性   可能的⾏行為
 誰可以授權⽤用它   ⾨門 ⼿手機 定義  (schema)   ⾨門的屬性   可能的⾏行為   誰可以授權⽤用它    1.  Programing  web  (  programing  spec  )      2.  Seman]c  web  (  JSON-­‐LD  )      3.  Real-­‐]me  web  (  web  socket    or  other  protocol  )      4.  Social  web  (  安全機制  )   2 2
43. https://github.com/w3c/web-­‐of-­‐things-­‐framework 定義  (schema)   ⼿手機的屬性   可能的⾏行為
 誰可以授權⽤用它   ⾨門 ⼿手機 定義  (schema)   ⾨門的屬性   可能的⾏行為   誰可以授權⽤用它   websocket  1.  Programing  web  (  programing  spec  )      2.  Seman]c  web  (  JSON-­‐LD  )      3.  Real-­‐]me  web  (  web  socket    or  other  protocol  )      4.  Social  web  (  安全機制  )   2 3 2
44. https://github.com/w3c/web-­‐of-­‐things-­‐framework 定義  (schema)   ⼿手機的屬性   可能的⾏行為
 誰可以授權⽤用它   (security) ⾨門 ⼿手機 定義  (schema)   ⾨門的屬性   可能的⾏行為   誰可以授權⽤用它   (security) websocket security  1.  Programing  web  (  programing  spec  )      2.  Seman]c  web  (  JSON-­‐LD  )      3.  Real-­‐]me  web  (  web  socket    or  other  protocol  )      4.  Social  web  (  安全機制  )   2 3 4 4 2 4
45. 使⽤用 ReactJS 1. 封裝  component   2. 設計機制把  code  丟進  device
46. 搭配 ReactJS 可以 Run 在 server side 的特性
47. Web  端 Arduino  Yun  端 （寫好  React  component）
48. Cylon.js NodeJS OpenWRT  framework Firmata Sensor Arduino   MCU Web  端 Arduino  Yun  端 （寫好  React  component）
49. Cylon.js Code NodeJS OpenWRT  framework Firmata Sensor Web  透過  WoT  framework  跟  device  端對話（丟code） 1 1 MPU Arduino   MCU Web  端 WoT(JSON-­‐LD) Arduino  Yun  端 （寫好  React  component）
50. Cylon.js Code NodeJS OpenWRT  framework Firmata Sensor Web  透過  WoT  framework  跟  device  端對話 1 Framework  透過垂直整合接收  /  控制sensor 2 2 1 MPU Arduino   MCU Web  端 WoT(JSON-­‐LD) Arduino  Yun  端 （寫好  React  component）
51. ⽤用 ReactJS + WoT 初步達成什麼願景? 讓⼤大眾進⼊入硬體的⾨門檻降低 ! JS  是全世界最容易上⼿手的語⾔言，搭配   ReactJS  套件化組裝，可以輕易把套件跟封 裝成跑在各平台上 降低開發⾨門檻 ◎ 把每個 firmware 想像是⼀一個app, maker 可以分享⾃自⼰己設計的 firmware 創造出獨特 app store ⽣生 態系，讓⼤大眾直接⽤用安裝 app 的⽅方 式快速部署到 device 上 易上⼿手 firmware 更新機制 # 只要在任何⾏行動機器上開啟  web， 隨時都可以對任何  device  控制  or  看 其現在狀態 Control / Display $ 所有的開發跟debug模式都可以在 web上執⾏行，不需考量windows/mac 作業環境 開發/ debug ⼿手機/  電腦/  平板端 z
52. Demo
53. 但是... ⺫⽬目前 js 做法離業界和市場有很⼤大⼀一段遙遠的距離。
54. ็≳၂
    ೂޅ⇢≢၂ἠϱሰ
    Ĥ
    NQV
    NDV
    ᄸḰ
    
    
    ็≳ؽ
    ೂޅ⃸‥ἠࣖோἦ๙
    
    GJSNBUB
    
    ็≳೘
    ೂޅ⃸
    KT
    ಀ॥ᇅ
    TFOTPS
    
    DZMPOKT
    
    ็≳ඹ
    ೂޅቓ֞⊬ᇂ⃸ຓࢸἦ๙
    
    8P5KT
    以業界⾓角度來看的話，問題出在哪？
55. 挑戰⼀一如何選擇⼀一個版⼦子? mpu, mcu怎辦? Nodejs OS   Applicaton Linux(  Ubuntu,  openwrt…) 硬碟⾄至少要  1X  mb,  RAM  建議⾄至少要  128  mb 規格 架構
56. Nodejs 很重要的三個部分 JIT  (動態編譯),     靜態編譯的程式在執⾏行前全部被翻譯為機器碼，⽽而直譯執⾏行的則是⼀一句⼀一句邊執⾏行邊翻譯   即時編譯器則混合了這⼆二者，⼀一句⼀一句編譯原始碼，但是會將翻譯過的代碼快取起來以降低效能損耗。   Inline-­‐cache  造成  Memory  ⾮非常吃重 libuv   ! Compile  engie   (v8)   node-­‐gyp  
57. ! Compile  engie   (v8)   node-­‐gyp   Async,  Event  driven,  OS  operator libuv   Nodejs 很重要的三個部分
58. addon ! Compile  engie   (v8)   libuv   node-­‐gyp   Nodejs 很重要的三個部分
59. Smart Things- v7 (靜態編譯)
60. Samsung IoT.js
61. AllJoyn.js
62. ReactJS 的組件化有很⼤大關連
63. 挑戰⼆二如何讓兩個晶⽚片溝通 ? firmata ? Firmata  is  not  a  good  pattern MPU MCU Serial  port  接收對話 firmata  把每個通道都打通 Digital  0 Digital  13 i2C uart
64. 挑戰⼆二.三如何讓兩個晶⽚片溝通 ? firmata ? Firmata  is  not  a  good  pattern MPU MCU Serial  port  接收對話 firmata  把每個通道都打通 Digital  0 Digital  13 i2C uart 且所有運算都在  MPU  端 1 很多  sensor  只有  C  不提供  JS  parser 2
65. 挑戰⼆二如何讓兩個晶⽚片溝通 ? 其實原來的  Arduino  就可以了! MPU MCU Serial  port  接收對話 Gesture  sensor
66. 挑戰⼆二如何讓兩個晶⽚片溝通 ? 其實原來的  Arduino  就可以了! MPU MCU Serial  port  接收對話 Gesture  sensor 運算好結果再丟回MPU Serial.print(‘靠北’) Serial.print(‘靠北’)
67. 挑戰四如何做到裝置讓外界溝通 ? WoT? 實際上  OIC  ,  Alljoyn  聯盟本來就有針對不同  protocol  整合計畫   使⽤用層級並⾮非在應⽤用層，⽽而在更低⼀一層的網路層 整合 ⽅方式 安全 Bluetooth   wifi   zigbee   NFC p2p   wifi  infrastructor credential  management
68. 挑戰四如何做到裝置讓外界溝通 ? WoT? 實際上  OIC  ,  Alljoyn  聯盟本來就有針對不同  protocol  整合計畫   使⽤用層級並⾮非在應⽤用層，⽽而在更低⼀一層的網路層 整合 ⽅方式 安全 Bluetooth   wifi   zigbee   NFC p2p   wifi  infrastructor credential  management 時間可能是:  3~5年後
69. Learn once use everywhere 這件事真的很難
70. 但是市場趨勢值得期待
71. One more thing…
72. 聯發科 Linkit 平台 ? Linkit connect 7681 LinkitOne 
    ᆞൔỚຓ܄҃
73. 第⼀一個 針對⾼高階語⾔言族群設計開發版 48)8
    ປಆῘჷ
    -FWFSBHF
    BMM
    "SEVJOP
    TFOTPS
    䌉ࡄ֥≐ڛ↩ⅴ⇼
    ൲ᾁӑьၒ
    ಸၞΆೆਈ㸗ᾲ؍ ?