前端工程師的告白: 親愛的,開源的物聯網好好玩呀!

41

Upload: web-arduino

Post on 15-Apr-2017

255 views

Category:

Education


3 download

TRANSCRIPT

Page 1: 前端工程師的告白: 親愛的,開源的物聯網好好玩呀!
Page 2: 前端工程師的告白: 親愛的,開源的物聯網好好玩呀!

前端工程師的告白:親愛的,開源的物聯網好好玩呀!

Page 3: 前端工程師的告白: 親愛的,開源的物聯網好好玩呀!

張宗彥 ( 張小彥、 oxxo.studio )Webduino / 設計雜工

中冠資訊 ( 中鋼 )、鴻海精密工業、中研院 台灣藝術大學多媒體動畫研究所 ( MFA )

中央大學物理學系視覺設計、網頁前端、攝影、創作OXXO.STUDIO 部落格作者

Page 4: 前端工程師的告白: 親愛的,開源的物聯網好好玩呀!

Facebook 粉絲團與社團( 搜尋 Webduino 就會看到 )

粉絲團https://www.facebook.com/webduino/

技術討論社團https://www.facebook.com/groups/webduino.group

Page 5: 前端工程師的告白: 親愛的,開源的物聯網好好玩呀!

開始之前,先來看一下「物聯網」都在玩些什麼?

Page 6: 前端工程師的告白: 親愛的,開源的物聯網好好玩呀!
Page 7: 前端工程師的告白: 親愛的,開源的物聯網好好玩呀!
Page 8: 前端工程師的告白: 親愛的,開源的物聯網好好玩呀!

硬體大廠紛紛投入開源

Page 9: 前端工程師的告白: 親愛的,開源的物聯網好好玩呀!

ArduinoOpen-source hardware

Page 10: 前端工程師的告白: 親愛的,開源的物聯網好好玩呀!

LinkIt™ Smart 7688The open source Wi-Fi platform for a more connected world.

Page 11: 前端工程師的告白: 親愛的,開源的物聯網好好玩呀!

NodeMCUAn open-source firmware and development kit that helps you to

prototype your IOT product within a few Lua script lines

Page 12: 前端工程師的告白: 親愛的,開源的物聯網好好玩呀!

隨著網頁技術的逐漸成熟 純文字 > GIF 動畫 > JavaScript > Flash > HTML5,CSS3 > WebGL

Page 13: 前端工程師的告白: 親愛的,開源的物聯網好好玩呀!

以前這些有趣的互動,網頁技術很難辦到

Page 14: 前端工程師的告白: 親愛的,開源的物聯網好好玩呀!

以前這些領域,網頁技術無法跨足

Page 15: 前端工程師的告白: 親愛的,開源的物聯網好好玩呀!

網頁技術已經可以辦到很多事情

聲控 影像辨識 控制傳感器 物聯網

聲光效果 裝置藝術 互動藝術

Page 16: 前端工程師的告白: 親愛的,開源的物聯網好好玩呀!

FacebookTwitterE-mailSearchInstant Messaging ( IM )AlbumAcross localization………...

OpenSoure 之後還可以做得更多!

Page 17: 前端工程師的告白: 親愛的,開源的物聯網好好玩呀!
Page 18: 前端工程師的告白: 親愛的,開源的物聯網好好玩呀!

Webduino = Web + Arduino

Page 19: 前端工程師的告白: 親愛的,開源的物聯網好好玩呀!

Server

Webduino 上網,連上雲端 Server

Page 20: 前端工程師的告白: 親愛的,開源的物聯網好好玩呀!

欲操控 Webduino 的網頁 載入對應的 JavaScript

Page 21: 前端工程師的告白: 親愛的,開源的物聯網好好玩呀!

Server

就可以一對多,多對一的互相溝通

Page 22: 前端工程師的告白: 親愛的,開源的物聯網好好玩呀!

換言之你可以這樣做

Page 23: 前端工程師的告白: 親愛的,開源的物聯網好好玩呀!

透過 Arduino 端燒錄 OpenSource 韌體

Page 24: 前端工程師的告白: 親愛的,開源的物聯網好好玩呀!

還有 Webduino 的 OpenSource 熱血專案https://github.com/webduinoio

Page 25: 前端工程師的告白: 親愛的,開源的物聯網好好玩呀!

加上 Webduino 使用到的 OpenSource

Page 26: 前端工程師的告白: 親愛的,開源的物聯網好好玩呀!

搭配自己使用的 OpenSoure 框架或程式

Page 27: 前端工程師的告白: 親愛的,開源的物聯網好好玩呀!
Page 28: 前端工程師的告白: 親愛的,開源的物聯網好好玩呀!

口說無憑,那就口說一下

https://blockly.webduino.io/#-KI3JONM8rrOf6njDJ5j

Page 29: 前端工程師的告白: 親愛的,開源的物聯網好好玩呀!

不想出聲音,露臉也可以

https://blockly.webduino.io/#-KIcVcxAi0Maalr5Ib_o

Page 30: 前端工程師的告白: 親愛的,開源的物聯網好好玩呀!

http://www.oxxostudio.tw/firebase-webduino-im/

https://blockly.webduino.io/#-KI3JH5nk3RfzuJ8lVp_

試試看和燈泡聊天

Page 31: 前端工程師的告白: 親愛的,開源的物聯網好好玩呀!
Page 32: 前端工程師的告白: 親愛的,開源的物聯網好好玩呀!

KONAMI CODE

https://blockly.webduino.io/#-KNAIGz0IDIBFhlD96V5

Page 33: 前端工程師的告白: 親愛的,開源的物聯網好好玩呀!

http://example.oxxostudio.tw/no-face-man/

你可以再靠近一點呀!

Page 34: 前端工程師的告白: 親愛的,開源的物聯網好好玩呀!

和江西男互動吧!

https://blockly.webduino.io/#-KJJcl_SX4UNEG6QiYrU

Page 35: 前端工程師的告白: 親愛的,開源的物聯網好好玩呀!

https://blockly.webduino.io/#-KJJft5VQMjZUFPCYqHa

手機操控自走車

Page 36: 前端工程師的告白: 親愛的,開源的物聯網好好玩呀!

機器人大亂鬥

Page 37: 前端工程師的告白: 親愛的,開源的物聯網好好玩呀!

覺得空氣不好嗎?

http://marty5499.github.io/air-schools/index.html

Page 38: 前端工程師的告白: 親愛的,開源的物聯網好好玩呀!

想換便宜日幣嗎

Page 39: 前端工程師的告白: 親愛的,開源的物聯網好好玩呀!

Facebook 粉絲團與社團( 搜尋 Webduino 就會看到 )

粉絲團https://www.facebook.com/webduino/

技術討論社團https://www.facebook.com/groups/webduino.group

Page 40: 前端工程師的告白: 親愛的,開源的物聯網好好玩呀!

Webduino 的 Githubhttps://github.com/webduinoio

Page 41: 前端工程師的告白: 親愛的,開源的物聯網好好玩呀!

謝謝聆聽