Firebaseで作るIoTバックエンド

キノコがIoTについて勉強する会の発表資料です。

Transcript

1. Firebaseͽ֢ΡIoTϝϐμεЀϖ ͠΄͜͞ (@_likr) κϛπ͢IoT΁ͺ͚ͼۣ䔶ͯΡտ
2. ᛔ૩奧Օ • ͠΄͜͞ (@_likr) • Ղ᮷य़਍ ਍檭ᣟݳᣟݳරᙙᎸᑪവ昲ψЀόЄ
 ඲ᒽ΄͵Η΄ᑀ਍ϳϘϐϕ ᇙਧۗර • ૡ਍Ꮈᑪᑀ΄櫮䶲ૡ਍䌑ධ͹ͼ
 ;ͩΣΨץԧͭ͵䶲ͯ͢Ρ • ng-kyoto̵GDGᐟ䜜̵KFUG • ݢ憙۸΄Ꮈᑪ;͡Κ͹ͼΡ • ͺͥ͹͵ https://egrid.jp/
3. 扖ٖͯ਻ • JavaScript + IoTΨᘍ͞Ρ • ฌՔ΄JavaScript&WebϢϺЀϕεЀϖԪఘΨ承Ρ • JavaScript + RaspberryPI ͽ֢͹͵Θ΄Ψ奧ՕͯΡ
4. JavaScript;IoT
5. JavaScript • Ԇ΁ϣ϶γσӤͽ㵕֢ͯΡ敽ᰁϤϺν϶ϬЀν᥺承 • 㵕ጱࣳ՞ͧ • ϤϺόαϤϦЄφ΄ηϣυδμϕ೰ݻ • ๋ᬪͷΝ͹;Δ;Θ΁΀͹͵(ES2015뺶) • arrow function • class • Promise • ϣ϶γσզक़ͽΘڥአ͢䓈͢͹ͼ͚Ρ
6. ϣ϶γσզक़΄厏ह • πϫЀϖ϶αЀϑЄϸ̵ςЄϝςαϖ • Node.js • ϔφμϕϐϤίϤϷ • Electron̵NW.js • ϜαϣϷϐϖίϤϷ • Ionic̵Onsen UI̵React Native̵…
7. JavaScript;IoT • Node.js䌏䖕 • Arduino (Johnny-Five) • RaspberryPI • Intel Edison • Tessel • https://tessel.io/ • Firefox OS • ᜉ͚ΚͺͶ͹͵΄΁…
8. JavaScriptͶͧͽᜋ̸ͽͣΡ
9. JavaScriptͽIoTϢϸφόϐμ IoTϔϝαφ IoTϝϐμεЀϖ ϢϺЀϕεЀϖ Web / ίϤϷ
 ςЄϝ Webϣ϶γσ φϫЄϕϢζЀ ϔφμϕϐϤ
 ίϤϷ DB ᥴຉ ψЀςЄ ϷϯπЀ … ͩͩ΄扖 ͩͩΨ͚͡΁䮭ͯΡ͡Ҙ
10. Firebase • Google΄൉׀ͯΡBaaS (Backend as a Service) • Ԇ΀䱛ᚆ • 扯戣 • ϮЄϸ扯戣̵OAuth (Twitter̵Facebook̵…) • ϷίϸόαϭDB • Ϸίϸόαϭݶ๗ݢᚆ΀φκЄϫϹφDB • ϨφϓΰЀν • ᇿᛔϖϮαЀ̵HTTPS̵HTTP/2䌏䖕 • 僻ාϤ϶Ѐ͘Π
11. αϮЄυ Webϣ϶γσ φϫЄϕϢζЀ ϔφμϕϐϤ
 ίϤϷ ᥴຉ ψЀςЄ
12. ฌՔ΄JavaScriptԪఘ
13. JavaScriptϤϺν϶ϬЀν΄ᝒ䘁 • 揞୧΀᥺承䱛ᚆ
 ꔄ ϕ϶ЀφϞα϶ • ϯυϲЄϸτφϓϭ΄ӧࣁ
 ꔄ ϯυϲЄϸϝЀϖ϶ • WebϢϺЀϕεЀϖྲ᯿΄䃀ے
 ꔄ WebϢϺЀϕεЀϖϢϹЄϭϼЄμ
14. ϕ϶ЀφϞα϶;ϯυϲЄϸϝЀϖ϶ • ϕ϶ЀφϞα϶ • JS΄䱛ᚆΨ䝭䔴̵ݘ͚ϣ϶γσΎ΄䌏䖕 • Babel̵TypeScript • ϯυϲЄϸϝЀϖ϶ • 愢හ΄JSϢήαϸᒵΨ㶨Ӟ΄Ϣήαϸ΁Δ;ΗΡ • Node.jsφόαϸ΄ϤϺν϶ϬЀν(CommonJS) • Webpack • loaderͽϕ϶ЀφϞαϸΘݢᚆ
15. Webpack • https://webpack.js.org/ • ϺЄύЄ̵Ϥ϶ναЀ΁ΞΡ䝭䔴 • Webpack 2 • Tree Shaking • webpack-dev-server • ϺЄθϸ樄咲አςЄϝ • ϶αϣϷϺЄϖ • BrowserHistoryΎ΄ϢζЄϸϝϐμ
16. Babel • https://babeljs.io/ • ๋ෛ΄ES΄՛䯭ᒵΨES5΁䄜䟵 • ES(ECMA Script) • JavaScript΄䰤伛憒໒ • https://kangax.github.io/compat-table/es6/ • plugin̵preset΁ΞΠ䝭䔴 • babel-preset-es2017̵babel-preset-react
17. WebϢϺЀϕεЀϖϢϹЄϭϼЄμ • SPA(Single Page Application)΄ฦ݊ • JavaScript΁ΞΡUI䯤塈΄ྲ᯿͢䃀ے • DOM඙̵֢ϔЄόϢϺЄ΄愢櫏۸Ύ΄䌏䖕 • Angular̵ReactJS̵… ϒϥ΢β HTMLΨኞ౮ ίϤϷξЄτϴЀ
 ςЄϝ 8FCαʔό ϒϥ΢β ᶉጱϢήαϸΨᯈמ "1*αʔό JSONᒵΨኞ౮ ϚαϓΰϣίϤϷ 䕪๶΄WebίϤϷ SPA
18. ReactJS • https://facebook.github.io/react/ • Facebook͢樄咲ͯΡηЄϤЀϊЄφ΄
 WebϢϺЀϕεЀϖView϶αϣ϶Ϸ • 㫪మDOM • DOM (Document Object Model) • ஠ᥝ΀᮱ړͶͧΨๅෛͯΡͩ;ͽ㵁ሲጱ΁ൈኮ • JSX • HTML϶αμ΀෈ဩͽViewΨਧ嬝ͯΡ
19. FirebaseͽIoTϝϐμεЀϖΨ֢Ρ
20. ፓጱ • ψЀςЄᒵ΄ϔЄόΨᵞ坌ͯΡ • Webϣ϶γσӤͽݢ憙۸ͯΡ • ค֢͹͵ΚͺΨςЄϠφ͹ΓͥͯΡ • https://vizlab-thermometer.firebaseapp.com/ • AngularFire + D3.js
21. 䯤౮ • RaspberryPI 1 TypeB • Firebase • 扯戣̵ϷίϸόαϭDB̵ϨφϓΰЀν • WebϢϺЀϕεЀϖ • ReactJS̵D3.js • webpack 2̵babel • https://github.com/likr/thermoviz
23. ϔϯ • https://thermoviz.firebaseapp.com/ • ϔϯίθγЀϕ • demo@example.com / kinoko_iot • ෛ憒ίθγЀϕ֢౮΅ګᴴӾ • Θֵ͚ͭ͵͚Ո΅्͠䟑ͧͥͶ͚ͫ…
24. Δ;Η • JavaScript͢ͷΝ͹;ͶͧΔ;Θ΁΀͹ͼ̵
 ᜋ̸΀;ͩΣͽֵΥ΢ΡΞ͜΁΀͹ͼͣ͵ • JavaScriptΨ憝͞΢Άϔϝαφ΄ګக̵ςЄϝ̵
 μ϶αίЀϕᒵIoT΁஠ᥝ΀Θ΄͢䟦͞Ο΢Ρҁ͡Θ҂ • FirebaseΨֵ͞ΆψЀςЄϔЄό΄ᵞ坌Κݢ憙۸͢䮭 • ᇙ΁᪁ޱ̵抅ਹꁿϹϦϸͽ͚͢͡Ҙ
25. FRONTEND CONFERENCE 2017