如何2分鐘快速開發跨平台IoT

如何2分鐘快速開發跨平台IoT

Transcript

1. 如何2分鐘快速開發跨平台 IoT John Chang
2. JavaScript
3. 今天要談的是!
4. 來源: https://www.google.com.tw/imgres?imgurl=http%3A%2F%2Fwww.teepr.com%2Fwp- content%2Fuploads%2F2016%2F12%2Fda2.jpg&imgrefurl=http%3A%2F%2Fwww.teepr.com%2F607489%2Fjonhsieh%2F%25E5% 25A4%25A7%25E5%25B9%25B3%25E5%258F%25B0%25E8%25AA%25AA%25E8%25A9%259E%25E5%258E%259F%25E7%25A8% 25BF%25E6%259B%259D%25E5%2585%2589%2F&docid=67ZSQBXHH0KycM&tbnid=AFN8yLCPJ0DqVM%3A&vet=10ahUKEwiC08 3j4YfTAhWFoJQKHQNHAOsQMwgbKAEwAQ..i&w=800&h=417&client=safari&bih=713&biw=1023&q=大平台 &ved=0ahUKEwiC083j4YfTAhWFoJQKHQNHAOsQMwgbKAEwAQ&iact=mrc&uact=8#h=417&imgrc=AFN8yLCPJ0DqVM:&vet=10ah UKEwiC083j4YfTAhWFoJQKHQNHAOsQMwgbKAEwAQ..i&w=800
5. 同時支援10個平台
6. 我選用 javascript的原因 • 入門快 • 最容易跨平台 • 資料豐富 • 開源 • 因為我是FED XDDD
7. 現場調查 JavaScript • FED? • Backend? • iOT? • Mobile? • Desktop app?
8. 是的，沒錯今天要介紹的 • FED? Jquery, Vue • Backend? Node JS • Desktop app? Electron • iOT? Webduino • Mobile? React Native
9. webduino
10. Webduino Smart ( 雲端開發板 )
12. 引入你需要的js • <script src="https://webduino.io/components/webduino-js/dist/webduino- all.min.js"></script> • <script src="https://blockly.webduino.io/webduino-blockly.js"></script> • <script src="https://blockly.webduino.io/lib/firebase.js"></script> • <script src="https://blockly.webduino.io/lib/runtime.min.js"></script> • http://bin.webduino.io/kuwun/edit?html,js,output
14. 迅速拖拉 • http://blockly.webduino.io/#-KbJXCjhMYgmr6Pm7Gud
15. 選用Weduino的原因 • 便宜 • Web Technologies • 有相關企業持續維護
16. DEMO • http://bin.webduino.io/?html,css,js,output
18. Electron
19. • Electron 是 Github 推出的 Atom 編輯器的底層，也是 Github 的一 個開源項目。
21. 選用Electron的原因 • Web Technologies • Electron uses Chromiumand Node.js so you can build your app with HTML, CSS, and JavaScript. • Open Source • Electron is an open source project maintained by GitHub and an active community of contributors. • Cross Platform • Compatible with Mac, Windows, and Linux, Electron apps build and run on three platforms.
22. 引用出處:https://speakerdeck.com/dannvix/electron-x-react-qian-duan-kai-fa-zhe-gao-su-kua-jie-zhuo-mian-kai-fa
23. 引用出處:https://speakerdeck.com/dannvix/electron-x-react-qian-duan-kai-fa-zhe-gao-su-kua-jie-zhuo-mian-kai-fa
24. 引用出處:https://speakerdeck.com/dannvix/electron-x-react-qian-duan-kai-fa-zhe-gao-su-kua-jie-zhuo-mian-kai-fa
25. 環境設定 • 安裝Node JS • 安裝npm • install 套件 cmd : npm i electron-prebuilt --save-dev install 包成安裝檔套件 cmd : npm i electron-packager --save-dev
26. index.js
27. index.html
28. DEMO • https://github.com/JOHNBASS/ElectronTest
29. 5+3
30. React Native
31. 環境設定 • Homebrew • Nodejs 4.0以後的版本 • brew install watchman • npm install -g react-native-cli
32. Create Project • react-native init AwesomeProject • cd AwesomeProject • react-native run-ios or react-native run-Android
33. 小訣竅 • 透過react叫起webview 就不用將html 轉成jsx ，才能快速使用
35. DEMO • https://github.com/JOHNBASS/react_native_webduino/tree/demo
36. 5+3+2