$30 off During Our Annual Pro Sale. View Details »

BLE on React Native

januswel
February 08, 2018

BLE on React Native

some tips to use BLE on React Native

januswel

February 08, 2018
Tweet

More Decks by januswel

Other Decks in Programming

Transcript

  1. BLE ON REACT NATIVE REACT NATIVE MEETUP #7 2018/01/22 BY

    JANUSWEL
  2. About speaker KBOVTXFM TPGUXBSFFOHJOFFS !$VSF"QQ

  3. CO checker

  4. What is CO checker? "EFWJDFUPNFBTVSFDPODFOUSBUJPOTPG$0JOUIF CSFBUI 5IFNFBTVSFEWBMVFTBSFJNQPSUBOUJOEFYUPDVSF OJDPUJOFBEEJDUJPO #VUFYJTUJOHQSPEVDUTBSFWFSZFYQFOTJWF TPEFWJDFT

    BSFFRVJQQFEJOPOMZIPTQJUBMTDMJOJDT 8FEFDJEFEUPQSPEVDFBOEEJTUSJCVUFEFWJDFTUP QBUJFOUT
  5. Layout 3FBE8SJUF $0WBMVFT 4VCNJU $0WBMVFT

  6. Layout 3FBE8SJUF $0WBMVFT 4VCNJU $0WBMVFT 5PEBZ`TUPQJD

  7. In CureApp… 8FXPSLFEXJUIIBSEXBSFWFOEPS IBSEXBSFEFTJHO pSNXBSFEFWFMPQNFOU $VSF"QQJTSFTQPOTJCMFGPSUIFTPGUXBSFPG TNBSUQIPOFEFWFMPQNFOU

  8. BLE chips $IPPTFPOFGSPNGPMMPXJOHDBUBMPH IUUQTGBCLVSBHJUCPPLTJPCMFEPDT DPOUFOUNPEVMFIUNM 6TFDIJQTIBWFDFSUJpDBUJPOPGDPNQMJBODF XJUIUFDIOJDBMTUBOEBSET l&WBMVBUJPOCPBSEzTBSFUIFCFTUDIPJDFUPHFU TUBSUFE

  9. BLE scanners "OESPJE#-&4DBOOFS IUUQTQMBZHPPHMFDPNTUPSFBQQTEFUBJMT JEDPNNBDEPNCMFCMFTDBOOFSIMKB J04#-&YQMS IUUQTJUVOFTBQQMFDPNKQBQQCMFYQMS JE NU

  10. Module to use BLE SFBDUOBUJWFCMFNBOBHFS IUUQTHJUIVCDPNJOOPWFJUSFBDUOBUJWF CMFNBOBHFS SFBDUOBUJWFCMFJTOPUNBJOUBJOFEOPMPOHFS

  11. Words $FOUSBM %FWJDFTUPVTFTFSWJDFT 4FFBTDMJFOUTJODMJFOUTFSWFSNPEFM 1FSJQIFSBM %FWJDFTUPQSPWJEFTFSWJDFT 4FFBTTFSWFSTJODMJFOUTFSWFSNPEFM

  12. Words $IBSBDUFSJTUJD 4UPSFUP3FBE8SJUFWBMVFT #POEJOH 'FBUVSFTGPSTFDVSJUZ "WBJMBCMF&ODSZQUJPO"VUIFOUJDBUJPO "MTPDBMMFEBTl1BJSJOHz

  13. Read Peripheral Central

  14. Write Peripheral Central

  15. Notify Peripheral Central

  16. Indicate Peripheral Central

  17. Steps to communicate 4FFEPDVNFOUTPGSFBDUOBUJWFCMFNBOBHFS 4DBOQFSJQIFSBM T  $POOFDUUPBEJTDPWFSFEQFSJQIFSBM 3FBE8SJUF/PUJGZ*OEJDBUF

  18. CureApp Use Case 3FBE $0DIBSBDUFSJTUJD XJUIFODSZQUJPO Peripheral Central

  19. React Integration 8FVTF&WFOU&NJUUFS IUUQTHJUIVCDPNBTZODMZ&WFOU&NJUUFS &NJUUJOHFWFOUTXIFO 4DBOOJOHQFSJQIFSBMTJTEPOF 3FBEJTEPOFGSPNQFSJQIFSBMT FUDʜ

  20. React Integration 4FUFWFOUIBOEMFSTJO3FBDUDPNQPOFOU DPNQPOFOU%JE.PVOU $POTVNFFWFOUTXJUITFU4UBUF3FEVYBDUJPOT JOFWFOUIBOEMFST

  21. 1 class BleManager extends EventEmitter2 { 2 startScanning() { /*

    snip */ } 3 connectToPeripheral() { /* snip */ } 4 async readCharacteristic() { /* snip */ } 5 async startMeasuring() { 6 const value = await this.readCharacteristic() 7 this.emit('READ', value) 8 } 9 } 1 class SomeComponent extends React.Component { 2 handleRead(value) { 3 this.props.actions.storeValues(value) 4 } 5 componentDidMount() { 6 this.props.bleManager.on( 7 'READ', 8 this.handleRead.bind(this) 9 ) 10 } 11 render() { 12 /* render buttons to 13 * - startScanning 14 * - connectToPeripheral, 15 * - startMeasuring */ 16 } 17 }
  22. Problems 4PNF"OESPJEEFWJDFTBSFUPPTMPXUP DPOTVNFFWFOUT "EEXBJUT +VTUBGUFSEFWJDFTBSFCPPUFE DIBSBDUFSJTUJD WBMVFTBSFOPUJOJUJBMJ[FEZFU 8SJUFJOJUJBMWBMVFTUPFBDIDIBSBDUFSJTUJDT CFGPSF3FBE

  23. Problems %POPUGPSHFUlEJTDPOOFDUzGPSFSSPSGSFF EFWFMPQNFOU 5IFSFBSFGFXEFTDSJQUJPOTBCPVUCPOEJOH 5SZBOEFSSPS IUUQXXXTJMFYKQCMPHXJSFMFTT CMVFUPPUIIUNM

  24. Summary 6TJOH#-&JTFBTZPO3FBDU/BUJWF 8FDBOVTFJ04"OESPJEBTQFSJQIFSBMT OPCMFJTBWBJMBCMFUPP IUUQTHJUIVCDPNTBOEFFQNJTUSZOPCMF -FU`THFUTUBSUFE

  25. References IUUQTGBCLVSBHJUCPPLTJPCMFEPDTDPOUFOU NPEVMFIUNM IUUQTHJUIVCDPNJOOPWFJUSFBDUOBUJWFCMF NBOBHFS IUUQXXXTJMFYKQCMPHXJSFMFTT CMVFUPPUIIUNM