Your SlideShare is downloading. ×
  • Like
  • Save
How to create a 3.2 billion dollar business in 20 minutes: combining AngularJS and the Arduino for ngConf
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

How to create a 3.2 billion dollar business in 20 minutes: combining AngularJS and the Arduino for ngConf

  • 20,596 views
Published

My talk from the very first ngConf, dedicated to the Angular community. This talk details how to build a NEST clone with Angular and an Arduino in 20 minutes.

My talk from the very first ngConf, dedicated to the Angular community. This talk details how to build a NEST clone with Angular and an Arduino in 20 minutes.

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
20,596
On SlideShare
0
From Embeds
0
Number of Embeds
20

Actions

Shares
Downloads
2
Comments
0
Likes
6

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. POWERING HUMAN INTERACTION POWERING THE ARDUINO WITH ANGULAR
  • 2. ARI LERNER, FULLSTACK.IO Author of ng-book and ng-newsletter Author of a few others (D3 on Angular, Riding Rails with AngularJS) Teacher at HackReactor Cofounder of Fullstack.io Background in distributed computing and infrastructure
  • 3. WHAT Let's prototype a temperature control system in less than 20 minutes using the Arduino, an open-source hardware platform and Angular
  • 4. ARDUINO? Embedded systems Wearable computing Low-power systems
  • 5. OVERVIEW Running an HTTP server on the arduino Requesting the HTML from the arduino Loading angular app Communicating to Angular from the Arduino Communicating to the Arduino from Angular
  • 6. RUNNING AN HTTP SERVER An HTTP server written in C... it's hard...
  • 7. vi lo( { od op) / lse fricmn cins / itn o noig let EhreCin cin =sre.vial(; tentlet let evraalbe) i (let { f cin) wie(letcnetd) { hl cin.once() i (letaalbe) { f cin.vial() ca c=cin.ed) hr letra(; i ( = 'n & cretiesln){ f c = ' & urnLnIBak cin.rnl(HT/. 20O"; letpitn"TP11 0 K) cin.rnl(CnetTp:tx/tl) letpitn"otn-ye ethm"; cin.rnl(Cneto:coe) letpitn"oncin ls"; cin.rnl(; letpitn) cin.rnl(<1H fo teAdio/1"; letpitn"h>i rm h run<h>) bek ra; } i ( = 'n){cretiesln =tu;} f c = ' urnLnIBak re es i ( ! 'r){cretiesln =fle } le f c = ' urnLnIBak as; } } dly1; ea() cin.tp) letso(; } }
  • 8. ENTER TINYWEBSERVER Enables simplification of the c HTTP server code
  • 9. #nld <iyeSre.> icue TnWbevrh / Idxhnlr / ne ade boenidxhnlrTnWbevr wbsre){ ola ne_ade(iyeSre& e_evr wbsre.rn((<tl<ed<il>e sre<tte<ha>); e_evrpitF"hm>ha>tteWb evr/il>/ed") wbsre.rn((<oy<bd>/tl") e_evrpitF"bd>/oy<hm>); rtr tu; eun re } / Hnlr / ades TnWbevr:ahade hnlr[ ={ iyeSre:PtHnlr ades] {/isdgtl,TnWbevr:OT &iia_i_ade} "pn/iia" iyeSre:PS, dgtlpnhnlr, {/is,TnWbevr:E,&ishnlr, "pn" iyeSre:GT pn_ade} {/,TnWbevr:E,&ne_ade } "" iyeSre:GT idxhnlr , {UL, NL} } ; cntca*haes]={ os hr edr[ "otn-egh,"-cinLn,NL CnetLnt" XAto-e" UL } ; TnWbevrwb=TnWbevrhnlr,haes; iyeSre e iyeSre(ades edr) / .. / . vi lo( { od op) wbpoes) e.rcs(; } ;
  • 10. CONNECTING TO THE NET Ethernet shield Wifi shield #nld <tenth icue Ehre.> bt i[ ={12 18 0 6 } ye p] 9, 6, , 7 ; / .. / . Ehre.ei(a,i) tentbgnmc p; DHCP is also supported
  • 11. BUT WHERE'S THE HTML
  • 12. OPTIONS EMBED HTML IN ARDUINO READ/SEND FROM SD CARD LOAD FROM REMOTE SERVER
  • 13. cntca *OT="rdv90" os hr HS aie:00; / .. / . boenidxhnlrTnWbevr wbsre){ ola ne_ade(iyeSre& e_evr / .. / . wbsre.rn((<citi="psrp scht:/); e_evrpitF"srp dapcit" r="tp/") wbsre.rn(OT; e_evrpitHS) wbsre.rn((/cit/cit.s"<srp>); e_evrpitF"srpssrpsj>/cit") / .. / . } ;
  • 14. BUT WHERE'S THE ANGULAR
  • 15. (ucin){ fnto( vrsrpTg=dcmn.eEeetBTgae'cit)0; a cita ouetgtlmnsyaNm(srp'[] / .. / . cetLnTg'tlsmi.s'; raeika(sye/ancs) vrar=[ a r 'cit/oue/run.s, srpsmdlsadioj' 'cit/p.s srpsapj' / .. / . ] ; cetSrpTg'oe_opnnsaglraglrj'; raecita(bwrcmoet/nua/nua.s) cetSrpTg'oe_opnnsaglrrueaglrruej'; raecita(bwrcmoet/nua-ot/nua-ot.s) arfrahfnto(r){cetSrpTgsc;}; r.oEc(ucinsc raecita(r) ) / Bosrp / otta bd.eAtiue'gap,'yp'; oysttrbt(n-p' mAp) vrap =dcmn.raelmn(dv) a p ouetcetEeet'i'; vrmi =dcmn.raelmn(dv) a an ouetcetEeet'i'; mi.eAtiue'anve' ') ansttrbt(mi-iw, '; apapnCidmi) p.pedhl(an; bd.pedhl(p) oyapnCidap; }(; ))
  • 16. COMMAND AND CONTROL Arduino -> Angular (√) Angular -> Arduino (...)
  • 17. EXPOSE THE LOCAL IP TO THE BROWSER boenidxhnlrTnWbevr wbsre){ ola ne_ade(iyeSre& e_evr / .. / . wbsre.rn((<citwno.p") e_evrpitF"srp>idwi="); wbsre.rn(pt_t(p) e_evrpiti_osri); wbsre.rn((<srp>); e_evrpitF""/cit") / .. / . } ;
  • 18. aglrmdl(fAdio,[) nua.oue'srun' ] .rvdr'run' fnto( { poie(Adio, ucin) ti.eRoUl=fnto(){ hsstotr ucinu roUl=u| roUl otr | otr; } ; ti.gt=fnto(ht){ hs$e ucin$tp rtr { eun gtis fnto( {, ePn: ucin) } stis fnto( { ePn: ucin) } } ; } }; ) aglrmdl(mAp,[ nua.oue'yp' 'srun' fAdio ] ) .ofgfnto(runPoie){ cni(ucinAdiorvdr Adiorvdrstotr(idwi) runPoie.eRoUlwno.p; }; )
  • 19. SUMMARY OF HARDWARE HACKING Turning pins on/HIGH Turning pins off/LOW Measuring pin voltage
  • 20. GETTING PIN STATUS / .. / . gtis fnto( { ePn: ucin) rtr $tp{ eun ht( mto:'E' ehd GT, ul roUl+'pn' r: otr /is }.hnfnto(aa { )te(ucindt) rtr dt.aa eun aadt; }; ) } , / .. / .
  • 21. SERVING PIN STATUS / GT/is / E pn boenpn_ade(iyeSre&wbsre){ ola ishnlrTnWbevr e_evr wbsre.ederrcd(0) e_evrsn_ro_oe20; wbsre.edcnettp(apiainjvsrp"; e_evrsn_otn_ye"plcto/aacit) wbsre.n_edr(; e_evredhaes) pnTSrn(e_evr; isotigwbsre) rtr tu; eun re } / .. / . bo pnTSrn(iyeSre&wbsre){ ol isotigTnWbevr e_evr wbsre < F"pn:"; e_evr < ({"is"[) itln=nmis n e uPn; friti0 iln i+{ o(n =; <e; +) wbsre < F"pn""; e_evr < ({"i:) wbsre < pn[]gti(; e_evr < isi.ePn) wbsre < F"vle""; e_evr < (,"au:) wbsre < pn[]gttt(; e_evr < isi.eSae) wbsre < F""; e_evr < (}) i (i1 <ln wbsre < F""; f (+) e) e_evr < (,) } wbsre < F"}) e_evr < (]"; rtr tu; eun re }
  • 22. MODIFYING PIN STATES Angular works with JSON by default (just javascript), but the Arduino does not... However, parsing a schemaless data structure in a strictly typed language is... difficult.
  • 23. CREATE OUR OWN PROTOCOL Turn JSON from: {pn 7 ato:'eTm'}(4bts i: , cin gtep 2 ye) to pa ( bts 70 4 ye)
  • 24. ACTIONS / i mive drcie / n aniw ietv Adiostis[ run.ePn( {pn tm,ato:'eTm'} i: ep cin gtep ]; ) / i Adiopoie / n run rvdr vratos={ a cin 'eTm' 0 gtep: } ; vratoiyis=fnto(is { a cinfPn ucinpn) vrsr='; a t ' fr(a i=0 i<pn.egh i+ { o vr ; islnt; +) vrp=pn[] a isi; sr+ ''+ppn t = p .i; i (yefpmd)!='neie' {t + ''+pmd; f tpo(.oe = udfnd) sr = m .oe} i (yefpvle !='neie' {t + ''+pvle} f tpo(.au) = udfnd) sr = v .au; i (yefpato)!='neie' {t + ''+atospato]} f tpo(.cin = udfnd) sr = a cin[.cin; } rtr sr eun t; } ;
  • 25. {pn 7 ato:'eTm'}(4bts i: , cin gtep 2 ye) to pa ( bts 70 4 ye)
  • 26. USING IT SERVICE stis fnto(is { ePn: ucinpn) vrsrcin=atoiyispn) a tAto cinfPn(is; rtr $tp{ eun ht( mto:'OT, ehd PS' ul roUl+'pn/iia' r: otr /isdgtl, dt:srcin aa tAto, haes {XAto-e' srcinlnt} edr: '-cinLn: tAto.egh }.hnfnto(aa { )te(ucindt) rtr dt.aa eun aadt; }; ) }
  • 27. PARSING IN C eu AtoTps{ nm cinye GTEP ETM } ; / PS /isdgtl / OT pn/iia boendgtlpnhnlrTnWbevr wbsre){ ola iia_i_ade(iyeSre& e_evr / Gtteato lnt / e h cin egh cntca*ato_t_e =wbsre.e_edrvle"-cinLn) os hr cinsrln e_evrgthae_au(XAto-e"; itln=ao(cinsrln; n e tiato_t_e) / Gtterqetdt bsdo telnt / e h eus aa ae n h egh ca*dt =(hr)alcln; hr aa ca*mlo(e) i (aa mme(aa 0 ln; f dt) estdt, , e) gtrqetdt(e_evr ln dt) e_eus_aawbsre, e, aa; / .. / . } ;
  • 28. CONTINUED itse =sre(aa; n Ln tlndt) iti=0 n ; wiei<se){ hl( Ln i (aai = '' { f dt[] = p) / W aepriganwpn / e r asn e i pnn =(n)dt[+]-''; iIt it(aa+i 0) Pn* =slc_i(iIt; i p eetpnpnn) wiedt[+]! ''& i<se){ hl(aai+ = p & Ln / W'ei apnojc / er n i bet sic (aai){ wth dt[] cs '' ae a: i+ +; atoIt=(n)dt[]-''; cinn it(aai 0) atoT=(cinye)atoIt; cin AtoTps(cinn) sic (cin){ wth atoT cs GTEP ae ETM: crTm =gtepd) urep eTm(s; p>eCretau(urep; -sturnVlecrTm) bek ra; / .. / .
  • 29. fotgtepOeiesno) la eTm(nWr esr{ /rtrstetmeauefo oeD1S0i DGClis /eun h eprtr rm n S82 n E esu bt dt[2,ad[] ye aa1] dr8; fotclis fhehi; la esu, arnet sno.erhad) esrsac(dr; sno.ee(; esrrst) sno.eetad) esrslc(dr; sno.rt(x41; esrwie04,) dly10) ea(00; bt peet=sno.ee(; ye rsn esrrst) sno.eetad) esrslc(dr; sno.rt(xE; esrwie0B) fr(n i=0 i<9 i+ {dt[]=sno.ed) } o it ; ; +) aai esrra(; sno.ee_erh) esrrstsac(; bt MB=dt[] ye S aa1; bt LB=dt[] ye S aa0; it6trw=(aa1 < 8 |dt[] rw=rw< 3 n1_ a dt[] < ) aa0; a a < ; i (aa7 = 01){rw=(a &0FF)+1 -dt[] } f dt[] = x0 a rw xF0 2 aa6; clis=(la)a /1.; esu fotrw 60 fhehi =clis*18+3.; arnet esu . 20 rtr fhehi; eun arnet }
  • 30. INTERFACE Finally, we want to show the data in a meaningful, sexy way...
  • 31. DEMO
  • 32. D3
  • 33. aglrmdl(mAp) nua.oue'yp' .evc(D' fnto D( {rtr wno.3 } srie'3, ucin 3) eun idwd; ) .ietv(tmeaueag' fnto(3 { drcie'eprtrGue, ucinD) rtr { eun tmlt:'dvcas"hroee"<v>/v>/i>, epae <i ls=temmtr>sg<sg<dv' soe {'goe' ''} cp: nMdl: = , rsrc:'A, etit E' ln:fnto (cp,eeet ats { ik ucin soe lmn, tr) vre =D.eet'temmtr) a l 3slc(.hroee', w=atswdh| e.oe)cinWdh tr.it | lnd(.letit, h=atshih | e.oe)cinHih, tr.egt | lnd(.letegt r=Mt.i(,h /2 ahmnw ) , p =Mt.I i ahP; vrsg=e.eet'v' a v lslc(sg) .tr'it' w at(wdh, ) .tr'egt,h at(hih' ) .ped'' apn(g) .tr'rnfr' 'rnlt( +w2+''+h2+''; at(tasom, tasae' / , / )) / .. / . } } ; }; )
  • 34. LEARN MORE
  • 35. THANKS ARI LERNER, FULLSTACK.IO