• 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
×
 

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

on

  • 16,689 views

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.

Statistics

Views

Total Views
16,689
Views on SlideShare
1,460
Embed Views
15,229

Actions

Likes
3
Downloads
2
Comments
0

14 Embeds 15,229

http://www.ng-newsletter.com 15032
http://plus.url.google.com 85
http://localhost 66
http://feedly.com 15
http://www.google.co.il 8
http://www.ng-newsletter.com.s3-website-us-east-1.amazonaws.com 8
https://www.google.it 3
https://www.google.com 3
http://www.google.ie 2
http://webcache.googleusercontent.com 2
http://www.newsblur.com 2
http://xianguo.com 1
http://www.google.com 1
http://www.inoreader.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • POWERING HUMAN INTERACTION POWERING THE ARDUINO WITH ANGULAR
  • 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
  • WHAT Let's prototype a temperature control system in less than 20 minutes using the Arduino, an open-source hardware platform and Angular
  • ARDUINO? Embedded systems Wearable computing Low-power systems
  • 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
  • RUNNING AN HTTP SERVER An HTTP server written in C... it's hard...
  • 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(; } }
  • ENTER TINYWEBSERVER Enables simplification of the c HTTP server code
  • #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(; } ;
  • 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
  • BUT WHERE'S THE HTML
  • OPTIONS EMBED HTML IN ARDUINO READ/SEND FROM SD CARD LOAD FROM REMOTE SERVER
  • 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") / .. / . } ;
  • BUT WHERE'S THE ANGULAR
  • (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; }(; ))
  • COMMAND AND CONTROL Arduino -> Angular (√) Angular -> Arduino (...)
  • 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") / .. / . } ;
  • 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; }; )
  • SUMMARY OF HARDWARE HACKING Turning pins on/HIGH Turning pins off/LOW Measuring pin voltage
  • 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; }; ) } , / .. / .
  • 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 }
  • 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.
  • CREATE OUR OWN PROTOCOL Turn JSON from: {pn 7 ato:'eTm'}(4bts i: , cin gtep 2 ye) to pa ( bts 70 4 ye)
  • 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; } ;
  • {pn 7 ato:'eTm'}(4bts i: , cin gtep 2 ye) to pa ( bts 70 4 ye)
  • 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; }; ) }
  • 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; / .. / . } ;
  • 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; / .. / .
  • 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 }
  • INTERFACE Finally, we want to show the data in a meaningful, sexy way...
  • DEMO
  • D3
  • 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' / , / )) / .. / . } } ; }; )
  • LEARN MORE
  • THANKS ARI LERNER, FULLSTACK.IO