หน้านี้ได้รับการแปลโดย Cloud Translation API

ควบคุมแท่งเทียน PLAYBULB ด้วยบลูทูธเว็บ

1. เกี่ยวกับอะไร

IMG_19700101_023537~2~2.jpg

ใน Codelab ความรู้นี้ คุณจะได้เรียนรู้วิธีควบคุมเทียนไร้ไฟ LED ของ PLAYBULB ที่ไม่ต้องใช้ JavaScript ด้วย Web Bluetooth API ระหว่างการเรียนรู้ คุณจะยังใช้ฟีเจอร์ JavaScript ES2015 ได้ด้วย เช่น ชั้นเรียน ฟังก์ชันลูกศร แผนที่ และคำสัญญา

สิ่งที่คุณจะได้เรียนรู้

วิธีโต้ตอบกับอุปกรณ์บลูทูธที่อยู่ใกล้เคียงใน JavaScript
วิธีใช้ชั้นเรียน ฟังก์ชันลูกศร แผนที่ และคำสัญญา ES2015

สิ่งที่คุณต้องมี

ความเข้าใจขั้นพื้นฐานเกี่ยวกับการพัฒนาเว็บ
ความรู้พื้นฐานเกี่ยวกับบลูทูธพลังงานต่ำ (BLE) และโปรไฟล์แอตทริบิวต์ทั่วไป (GATT)
เครื่องมือแก้ไขข้อความที่คุณเลือก
Mac, Chromebook หรืออุปกรณ์ Android M ที่มีแอปเบราว์เซอร์ Chrome และสายเชื่อม USB กับไมโคร USB

2. เล่นก่อน

เราขอแนะนำให้คุณลองใช้แอปเวอร์ชันสุดท้ายที่คุณจะสร้างที่ https://googlecodelabs.github.io/candle-bluetooth แล้วลองใช้อุปกรณ์บลูทูธ PLAYBULB Candle ที่คุณมีอยู่แล้วก่อนจะเริ่มเข้าสู่ Codelab นี้จริงๆ

นอกจากนี้ คุณยังสามารถดูการเปลี่ยนสีของฉันได้ที่ https://www.youtube.com/watch?v=fBCPA9gIxlU

3. ตั้งค่า

ดาวน์โหลดโค้ดตัวอย่าง

คุณรับโค้ดตัวอย่างสำหรับโค้ดนี้ได้โดยดาวน์โหลดรหัสไปรษณีย์ที่นี่

หรือโดยการโคลนที่เก็บ Git นี้

git clone https://github.com/googlecodelabs/candle-bluetooth.git

หากคุณดาวน์โหลดแหล่งที่มาเป็นไฟล์ ZIP การคลายการบีบอัดไฟล์ควรมีโฟลเดอร์รูท candle-bluetooth-master

ติดตั้งและยืนยันเว็บเซิร์ฟเวอร์

แม้ว่าคุณจะใช้เว็บเซิร์ฟเวอร์ของคุณเองได้อย่างอิสระ แต่ Codelab นี้ได้รับการออกแบบมาให้ทำงานกับเว็บเซิร์ฟเวอร์ของ Chrome ได้ดี หากยังไม่ได้ติดตั้งแอปดังกล่าว คุณสามารถติดตั้งได้จาก Chrome เว็บสโตร์

หลังจากติดตั้งเว็บเซิร์ฟเวอร์สำหรับแอป Chrome ให้คลิกทางลัด Apps บนแถบบุ๊กมาร์ก

Screen Shot 16-11-2016 เวลา 16.10.42 น.

ในหน้าต่างถัดไป ให้คลิกไอคอนเว็บเซิร์ฟเวอร์:

จากนั้นคุณจะเห็นกล่องโต้ตอบนี้ ซึ่งจะช่วยให้คุณสามารถกำหนดค่าเว็บเซิร์ฟเวอร์ภายใน

Screen Shot 16-11-2016 เวลา 15:40.47 PM.png

คลิกปุ่มเลือกโฟลเดอร์ แล้วเลือกรูทของที่เก็บที่โคลน (หรือยกเลิกการเก็บ) การดำเนินการนี้จะช่วยให้คุณสามารถแสดงงานที่กำลังดำเนินการผ่าน URL ที่ไฮไลต์อยู่ในกล่องโต้ตอบของเว็บเซิร์ฟเวอร์ (ในส่วน URL ของเว็บเซิร์ฟเวอร์)

ในส่วนตัวเลือก ให้เลือกช่องถัดจาก "แสดงindex.htmlโดยอัตโนมัติ" ตามที่แสดงด้านล่าง

Screen Shot 16-11-2016 เวลา 15.40.56 น..png

ในตอนนี้ให้ไปที่เว็บไซต์ของคุณในเว็บเบราว์เซอร์ (โดยคลิก URL ของเว็บเซิร์ฟเวอร์ที่ไฮไลต์ไว้) จากนั้นคุณควรจะเห็นหน้าเว็บลักษณะนี้:

Screen Shot 16-11-2016 เวลา 15:20.22 PM.png

หากต้องการดูว่าแอปนี้มีลักษณะอย่างไรในโทรศัพท์ Android คุณจะต้องเปิดใช้การแก้ไขข้อบกพร่องระยะไกลใน Android และตั้งค่าการส่งต่อพอร์ต (หมายเลขพอร์ตตามค่าเริ่มต้นคือ 8887) หลังจากนั้น คุณก็เปิดแท็บใหม่ Chrome ไปยัง http://localhost:8887 บนโทรศัพท์ Android ได้เลย

ในจุดนี้เว็บแอปนี้ไม่ได้ทำงานอะไรมากนัก มาเริ่มเพิ่มการรองรับบลูทูธกันเลย

4. สำรวจเทียน

เราจะเริ่มจากการเขียนไลบรารีที่ใช้คลาส JavaScript ES2015 สำหรับอุปกรณ์บลูทูธ PLAYBULB Candle

ใจเย็นๆ ไวยากรณ์คลาสไม่ได้นำโมเดลการสืบทอดออบเจ็กต์แบบใหม่มาใช้กับ JavaScript เพียงแต่ให้ไวยากรณ์ที่ชัดเจนยิ่งขึ้นในการสร้างออบเจ็กต์และจัดการกับการสืบทอดค่า ดังที่คุณสามารถอ่านด้านล่างนี้

ก่อนอื่น ให้กำหนดคลาส PlaybulbCandle ใน playbulbCandle.js แล้วสร้างอินสแตนซ์ playbulbCandle ที่จะพร้อมใช้งานในไฟล์ app.js ในภายหลัง

playbulbCandle.js

(function() {
  'use strict';

  class PlaybulbCandle {
    constructor() {
      this.device = null;
    }
  }

  window.playbulbCandle = new PlaybulbCandle();

})();

หากต้องการขอสิทธิ์เข้าถึงอุปกรณ์บลูทูธที่อยู่ใกล้เคียง เราจะต้องโทรหา navigator.bluetooth.requestDevice เนื่องจากอุปกรณ์ PLAYBULB Candle โฆษณาได้อย่างต่อเนื่อง (หากยังไม่ได้จับคู่) UUID บริการ Bluetooth GATT คงที่ที่รู้จักในแบบสั้นว่า 0xFF02 เราจึงสามารถกำหนดค่าคงที่และเพิ่มค่าลงในพารามิเตอร์บริการตัวกรองในเมธอด connect สาธารณะใหม่ของคลาส PlaybulbCandle ได้

เราจะติดตามออบเจ็กต์ BluetoothDevice ภายในด้วยเพื่อให้เข้าถึงได้ในภายหลังหากจำเป็น เนื่องจาก navigator.bluetooth.requestDevice แสดงผล JavaScript ES2015 Promise เราจึงจะดำเนินการในเมธอด then

playbulbCandle.js

(function() {
  'use strict';

  const CANDLE_SERVICE_UUID = 0xFF02;

  class PlaybulbCandle {
    constructor() {
      this.device = null;
    }
    connect() {
      let options = {filters:[{services:[ CANDLE_SERVICE_UUID ]}]};
      return navigator.bluetooth.requestDevice(options)
      .then(function(device) {
        this.device = device;
      }.bind(this)); 
    }
  }

  window.playbulbCandle = new PlaybulbCandle();

})();

Promise คืออะไร

คำสัญญาหมายถึงพร็อกซีสำหรับค่าที่ไม่จำเป็นต้องทราบเมื่อมีการสร้างสัญญา ซึ่งช่วยให้คุณเชื่อมโยงเครื่องจัดการกับค่าความสำเร็จสุดท้ายหรือเหตุผลความล้มเหลวของการดำเนินการแบบไม่พร้อมกัน วิธีนี้ทำให้เมธอดแบบอะซิงโครนัสแสดงผลค่าต่างๆ เช่น เมธอดแบบซิงโครนัส: แทนที่จะเป็นค่าสุดท้าย เมธอดแบบอะซิงโครนัสจะส่งคืนสัญญาว่าจะมีค่า ณ จุดใดเวลาหนึ่งในอนาคต

ฟีเจอร์ความปลอดภัยทำให้การค้นหาอุปกรณ์บลูทูธที่อยู่ใกล้เคียงด้วย navigator.bluetooth.requestDevice ต้องเรียกใช้ผ่านท่าทางสัมผัสของผู้ใช้ เช่น การแตะหรือการคลิกเมาส์ นี่คือเหตุผลที่เราจะเรียกเมธอด connect เมื่อผู้ใช้คลิกปุ่ม "เชื่อมต่อ" ในไฟล์ app.js:

app.js

document.querySelector('#connect').addEventListener('click', function(event) {
  document.querySelector('#state').classList.add('connecting');
  playbulbCandle.connect()
  .then(function() {
    console.log(playbulbCandle.device);
    document.querySelector('#state').classList.remove('connecting');
    document.querySelector('#state').classList.add('connected');
  })
  .catch(function(error) {
    console.error('Argh!', error);
  });
});

เรียกใช้แอป

เมื่อถึงขั้นตอนนี้ ให้ไปที่เว็บไซต์ของคุณในเว็บเบราว์เซอร์ (โดยคลิก URL ของเว็บเซิร์ฟเวอร์ที่ไฮไลต์ไว้ในแอปเว็บเซิร์ฟเวอร์) หรือรีเฟรชหน้าเว็บที่มีอยู่ คลิกไอคอน "เชื่อมต่อ" สีเขียว เลือกอุปกรณ์ในตัวเลือกและเปิดคอนโซลเครื่องมือสำหรับนักพัฒนาเว็บที่คุณชื่นชอบด้วยแป้นพิมพ์ลัด Ctrl + Shift + J แล้วสังเกตออบเจ็กต์ BluetoothDevice ที่บันทึกไว้

Screen Shot 16-11-2016 เวลา 15:27.12 PM.png

คุณอาจได้รับข้อผิดพลาดหากบลูทูธปิดอยู่ และ/หรืออุปกรณ์บลูทูธ PLAYBULB Candle ปิดอยู่ ในกรณีนี้ ให้เปิดเครื่องแล้วดำเนินการต่ออีกครั้ง

โบนัสภาคบังคับ

ฉันไม่ทราบเกี่ยวกับคุณ แต่ฉันเห็น function() {} ในโค้ดนี้มากเกินไปแล้ว มาเปลี่ยนไปใช้ฟังก์ชันลูกศรแบบ () => {} JavaScript ES2015 แทน มันคือตัวช่วยชีวิตจริง: ความน่ารักของฟังก์ชันนิรนาม ปราศจากความเศร้าจากการเชื่อมโยง

playbulbCandle.js

(function() {
  'use strict';

  const CANDLE_SERVICE_UUID = 0xFF02;

  class PlaybulbCandle {
    constructor() {
      this.device = null;
    }
    connect() {
      let options = {filters:[{services:[ CANDLE_SERVICE_UUID ]}]};
      return navigator.bluetooth.requestDevice(options)
      .then(device => {
        this.device = device;
      }); 
    }
  }

  window.playbulbCandle = new PlaybulbCandle();

})();

app.js

document.querySelector('#connect').addEventListener('click', event => {
  playbulbCandle.connect()
  .then(() => {
    console.log(playbulbCandle.device);
    document.querySelector('#state').classList.remove('connecting');
    document.querySelector('#state').classList.add('connected');
  })
  .catch(error => {
    console.error('Argh!', error);
  });
});

- ตกลง... ฉันขอคุยกับเทียนเล่มนี้ได้ไหมหรือเรื่องอะไร

- ได้เลย... ข้ามไปยังขั้นตอนถัดไป

คำถามที่พบบ่อย

5. อ่านอะไรก็ได้

แล้วคุณจะทำอย่างไรเพื่อให้ได้ BluetoothDevice คืนจากสัญญาของ navigator.bluetooth.requestDevice ขอเชื่อมต่อกับเซิร์ฟเวอร์ GATT แบบบลูทูธระยะไกลที่มีบริการบลูทูธและการกำหนดลักษณะโดยเรียกใช้ device.gatt.connect():

playbulbCandle.js

  class PlaybulbCandle {
    constructor() {
      this.device = null;
    }
    connect() {
      let options = {filters:[{services:[ CANDLE_SERVICE_UUID ]}]};
      return navigator.bluetooth.requestDevice(options)
      .then(device => {
        this.device = device;
        return device.gatt.connect();
      });
    }
  }

อ่านชื่ออุปกรณ์

ที่นี่เราเชื่อมต่อกับเซิร์ฟเวอร์ GATT ของอุปกรณ์บลูทูธ PLAYBULB Candle ตอนนี้เราต้องการรับบริการ GATT หลัก (เดิมใช้ชื่อว่า 0xFF02) และอ่านลักษณะของชื่ออุปกรณ์ (0xFFFF) ที่เป็นของบริการนี้ ซึ่งดูได้ง่ายๆ ด้วยการเพิ่มเมธอด getDeviceName ใหม่ลงในคลาส PlaybulbCandle และใช้ device.gatt.getPrimaryService และ service.getCharacteristic เมธอด characteristic.readValue จะแสดง DataView โดยเราจะถอดรหัสด้วย TextDecoder

playbulbCandle.js

  const CANDLE_DEVICE_NAME_UUID = 0xFFFF;

  ...

    getDeviceName() {
      return this.device.gatt.getPrimaryService(CANDLE_SERVICE_UUID)
      .then(service => service.getCharacteristic(CANDLE_DEVICE_NAME_UUID))
      .then(characteristic => characteristic.readValue())
      .then(data => {
        let decoder = new TextDecoder('utf-8');
        return decoder.decode(data);
      });
    }

เพิ่มอุปกรณ์นี้ใน app.js โดยโทรหา playbulbCandle.getDeviceName เมื่อเราเชื่อมต่อแล้วและแสดงชื่ออุปกรณ์

app.js

document.querySelector('#connect').addEventListener('click', event => {
  playbulbCandle.connect()
  .then(() => {
    console.log(playbulbCandle.device);
    document.querySelector('#state').classList.remove('connecting');
    document.querySelector('#state').classList.add('connected');
    return playbulbCandle.getDeviceName().then(handleDeviceName);
  })
  .catch(error => {
    console.error('Argh!', error);
  });
});

function handleDeviceName(deviceName) {
  document.querySelector('#deviceName').value = deviceName;
}

เมื่อถึงขั้นตอนนี้ ให้ไปที่เว็บไซต์ของคุณในเว็บเบราว์เซอร์ (โดยคลิก URL ของเว็บเซิร์ฟเวอร์ที่ไฮไลต์ไว้ในแอปเว็บเซิร์ฟเวอร์) หรือรีเฟรชหน้าเว็บที่มีอยู่ ตรวจสอบว่า PLAYBULB Candle เปิดอยู่ จากนั้นคลิก "เชื่อมต่อ" บนหน้าเว็บ คุณควรเห็นชื่ออุปกรณ์อยู่ด้านล่างตัวเลือกสี

Screen Shot 16-11-2016 เวลา 15:29.21 PM.png

อ่านระดับแบตเตอรี่

นอกจากนี้ ยังมีลักษณะของบลูทูธระดับแบตเตอรี่มาตรฐานในอุปกรณ์บลูทูธ PLAYBULB Candle ที่มีระดับแบตเตอรี่ของอุปกรณ์ ซึ่งหมายความว่าเราจะใช้ชื่อมาตรฐาน เช่น battery_service สำหรับ UUID ของบริการ Bluetooth GATT และ battery_level สำหรับ UUID ลักษณะบลูทูธ GATT ได้

เพิ่มเมธอด getBatteryLevel ใหม่ไปยังคลาส PlaybulbCandle และอ่านระดับแบตเตอรี่เป็นเปอร์เซ็นต์

playbulbCandle.js

    getBatteryLevel() {
      return this.device.gatt.getPrimaryService('battery_service')
      .then(service => service.getCharacteristic('battery_level'))
      .then(characteristic => characteristic.readValue())
      .then(data => data.getUint8(0));
    }

นอกจากนี้ เรายังต้องอัปเดตออบเจ็กต์ JavaScript options เพื่อรวมบริการแบตเตอรี่เข้ากับคีย์ optionalServices เนื่องจากอุปกรณ์บลูทูธ PLAYBULB Candle ไม่ได้โฆษณาบริการ แต่ยังคงจำเป็นต้องเข้าถึงออบเจ็กต์ดังกล่าว

playbulbCandle.js

      let options = {filters:[{services:[ CANDLE_SERVICE_UUID ]}],
                     optionalServices: ['battery_service']};
      return navigator.bluetooth.requestDevice(options)

ก่อนหน้านี้ เรามาต่อสายเข้ากับ app.js โดยโทรหา playbulbCandle.getBatteryLevel เมื่อเรามีชื่ออุปกรณ์และแสดงระดับแบตเตอรี่แล้ว

app.js

document.querySelector('#connect').addEventListener('click', event => {
  playbulbCandle.connect()
  .then(() => {
    console.log(playbulbCandle.device);
    document.querySelector('#state').classList.remove('connecting');
    document.querySelector('#state').classList.add('connected');
    return playbulbCandle.getDeviceName().then(handleDeviceName)
    .then(() => playbulbCandle.getBatteryLevel().then(handleBatteryLevel));
  })
  .catch(error => {
    console.error('Argh!', error);
  });
});

function handleDeviceName(deviceName) {
  document.querySelector('#deviceName').value = deviceName;
}

function handleBatteryLevel(batteryLevel) {
  document.querySelector('#batteryLevel').textContent = batteryLevel + '%';
}

ณ จุดนี้ ให้ไปที่เว็บไซต์ของคุณในเว็บเบราว์เซอร์ (โดยคลิก URL ของเว็บเซิร์ฟเวอร์ที่ไฮไลต์ไว้ในแอปเว็บเซิร์ฟเวอร์) หรือรีเฟรชหน้าเว็บที่มีอยู่.. คลิกปุ่ม "เชื่อมต่อ" ในหน้านี้ คุณจะเห็นทั้งชื่ออุปกรณ์และระดับแบตเตอรี่

- ฉันจะเปลี่ยนสีของหลอดไฟนี้ได้อย่างไร ฉันมาตรงนี้เอง

- ใกล้เสร็จแล้ว ฉันสัญญาว่า...

คำถามที่พบบ่อย

6. เปลี่ยนสี

การเปลี่ยนสีทำได้ง่ายพอๆ กับการเขียนชุดคำสั่งลงในลักษณะของบลูทูธ (0xFFFC) ในบริการ GATT หลักที่โฆษณาชื่อ 0xFF02 ตัวอย่างเช่น การเปลี่ยนแท่งเทียน PLAYBULB ให้เป็นสีแดงจะเขียนอาร์เรย์ของจำนวนเต็ม 8 บิตที่ไม่มีเครื่องหมายซึ่งเท่ากับ [0x00, 255, 0, 0] โดยที่ 0x00 คือความอิ่มตัวสีขาว และ 255, 0, 0 คือค่าสีแดง เขียว และน้ำเงินตามลำดับ

เราจะใช้ characteristic.writeValue ในการเขียนข้อมูลบางอย่างในลักษณะของบลูทูธในเมธอดสาธารณะ setColor แบบใหม่ของคลาส PlaybulbCandle นอกจากนี้เรายังแสดงผลค่าสีแดง เขียว และน้ำเงินจริงเมื่อทำตามสัญญาแล้วด้วยเพื่อให้เราใช้ใน app.js ภายหลังได้

playbulbCandle.js

  const CANDLE_COLOR_UUID = 0xFFFC;

  ...

    setColor(r, g, b) {
      let data = new Uint8Array([0x00, r, g, b]);
      return this.device.gatt.getPrimaryService(CANDLE_SERVICE_UUID)
      .then(service => service.getCharacteristic(CANDLE_COLOR_UUID))
      .then(characteristic => characteristic.writeValue(data))
      .then(() => [r,g,b]);
    }

ลองอัปเดตฟังก์ชัน changeColor ใน app.js ให้เรียกใช้ playbulbCandle.setColor เมื่อคำสั่ง "No Effect" ปุ่มตัวเลือกไว้ ระบบตั้งค่าตัวแปรสี r, g, b ร่วมไว้แล้วเมื่อผู้ใช้คลิกบนผืนผ้าใบตัวเลือกสี

app.js

function changeColor() {
  var effect = document.querySelector('[name="effectSwitch"]:checked').id;
  if (effect === 'noEffect') {
    playbulbCandle.setColor(r, g, b).then(onColorChanged);
  }
}

เมื่อถึงขั้นตอนนี้ ให้ไปที่เว็บไซต์ของคุณในเว็บเบราว์เซอร์ (โดยคลิก URL ของเว็บเซิร์ฟเวอร์ที่ไฮไลต์ไว้ในแอปเว็บเซิร์ฟเวอร์) หรือรีเฟรชหน้าเว็บที่มีอยู่ คลิกปุ่ม "เชื่อมต่อ" บนหน้าเว็บและคลิกตัวเลือกสีเพื่อเปลี่ยนสีเทียน PLAYBULB ได้บ่อยเท่าที่ต้องการ

เอฟเฟกต์เทียนมัวร์

หากเคยจุดเทียนมาก่อนแล้ว คุณจะรู้ว่าแสงไม่คงที่ แต่โชคดีสำหรับเรา มีคุณลักษณะบลูทูธอีกอย่างหนึ่ง (0xFFFB) ในบริการ GATT หลักที่โฆษณาว่า 0xFF02 ซึ่งช่วยให้ผู้ใช้ตั้งค่าเอฟเฟกต์เทียนได้

การตั้งค่า "เอฟเฟกต์เทียน" เช่น จะทำได้โดยเขียนว่า [0x00, r, g, b, 0x04, 0x00, 0x01, 0x00] และยังสามารถตั้งค่า "เอฟเฟ็กต์กะพริบ" ด้วย [0x00, r, g, b, 0x00, 0x00, 0x1F, 0x00]

มาเพิ่มเมธอด setCandleEffectColor และ setFlashingColor ลงในคลาส PlaybulbCandle กัน

playbulbCandle.js

  const CANDLE_EFFECT_UUID = 0xFFFB;

  ...

    setCandleEffectColor(r, g, b) {
      let data = new Uint8Array([0x00, r, g, b, 0x04, 0x00, 0x01, 0x00]);
      return this.device.gatt.getPrimaryService(CANDLE_SERVICE_UUID)
      .then(service => service.getCharacteristic(CANDLE_EFFECT_UUID))
      .then(characteristic => characteristic.writeValue(data))
      .then(() => [r,g,b]);
    }
    setFlashingColor(r, g, b) {
      let data = new Uint8Array([0x00, r, g, b, 0x00, 0x00, 0x1F, 0x00]);
      return this.device.gatt.getPrimaryService(CANDLE_SERVICE_UUID)
      .then(service => service.getCharacteristic(CANDLE_EFFECT_UUID))
      .then(characteristic => characteristic.writeValue(data))
      .then(() => [r,g,b]);
    }

มาอัปเดตฟังก์ชัน changeColor ใน app.js ให้เรียกใช้ playbulbCandle.setCandleEffectColor เมื่อ "Candle Effect" กัน มีการเลือกปุ่มตัวเลือกและplaybulbCandle.setFlashingColorเมื่อปุ่ม "กะพริบ" ปุ่มตัวเลือกไว้ แต่ครั้งนี้เราจะใช้ switch หากคุณสะดวก

app.js

function changeColor() {
  var effect = document.querySelector('[name="effectSwitch"]:checked').id;
  switch(effect) {
    case 'noEffect':
      playbulbCandle.setColor(r, g, b).then(onColorChanged);
      break;
    case 'candleEffect':
      playbulbCandle.setCandleEffectColor(r, g, b).then(onColorChanged);
      break;
    case 'flashing':
      playbulbCandle.setFlashingColor(r, g, b).then(onColorChanged);
      break;
  }
}

- เท่านี้ก็เรียบร้อย เอฟเฟกต์เทียน 3 อันที่ไม่ดี นี่คือเหตุผลที่ฉันอยู่ที่นี่ใช่ไหม

- มีมากกว่านี้ แต่คราวนี้คุณจะเข้าไปเองก็ได้

7. ไปให้ไกลกว่าเดิม

นี่ไง! คุณอาจคิดว่าใกล้จบแล้ว แต่แอปยังไม่จบ มาดูกันว่าคุณเข้าใจสิ่งที่คุณคัดลอกและวางระหว่าง Codelab นี้จริงๆ หรือไม่ ต่อไปนี้คือสิ่งที่คุณต้องทำด้วยตนเองในตอนนี้เพื่อทำให้แอปนี้โดดเด่น

เพิ่มเอฟเฟกต์ที่ขาดหายไป

ข้อมูลเกี่ยวกับผลกระทบที่ขาดหายไปมีดังนี้

สว่างวาบ: [0x00, r, g, b, 0x01, 0x00, 0x09, 0x00] (คุณอาจต้องปรับค่า r, g, b ที่นั่น)
สายรุ้ง: [0x01, 0x00, 0x00, 0x00, 0x02, 0x00, 0x01, 0x00] (ผู้ที่เป็นโรคลมชักอาจต้องการหลีกเลี่ยงเรื่องนี้)
จางสีรุ้ง: [0x01, 0x00, 0x00, 0x00, 0x03, 0x00, 0x26, 0x00]

ซึ่งหมายถึงการเพิ่มเมธอด setPulseColor, setRainbow และ setRainbowFade ใหม่ไปยังชั้นเรียน PlaybulbCandle และเรียกข้อมูลใน changeColor

แก้ไข "ไม่มีเอฟเฟกต์"

คุณอาจสังเกตเห็นแล้วว่า "ไม่มีผล" จะไม่รีเซ็ตผลกระทบใดๆ ที่กำลังดำเนินการอยู่ นี่เป็นการดำเนินการเล็กน้อยแต่ยังคงอยู่ มาแก้ปัญหานี้กัน ในเมธอด setColor คุณจะต้องตรวจสอบก่อนว่าเอฟเฟกต์กำลังดำเนินการผ่านตัวแปรคลาสใหม่ _isEffectSet หรือไม่ และหาก true ให้ปิดเอฟเฟกต์นั้นก่อนตั้งค่าสีใหม่ด้วยข้อมูลต่อไปนี้ [0x00, r, g, b, 0x05, 0x00, 0x01, 0x00]

เขียนชื่ออุปกรณ์

ข้อนี้ง่ายมาก การเขียนชื่ออุปกรณ์ที่กำหนดเองนั้นง่ายดายพอๆ กับการเขียนถึงลักษณะของชื่ออุปกรณ์บลูทูธก่อนหน้านี้ เราขอแนะนำให้ใช้เมธอด TextEncoder encode เพื่อรับ Uint8Array ที่มีชื่ออุปกรณ์

จากนั้นเพิ่ม "อินพุต" eventListener ไปยัง document.querySelector('#deviceName') และโทรหา playbulbCandle.setDeviceName เพื่อลดความยุ่งยาก

ฉันตั้งชื่อตัวเองว่า PLAY💡 CANDLE

8. เท่านี้ก็เรียบร้อย

สิ่งที่ได้เรียนรู้

วิธีโต้ตอบกับอุปกรณ์บลูทูธที่อยู่ใกล้เคียงใน JavaScript
วิธีใช้ชั้นเรียน ฟังก์ชันลูกศร แผนที่ และคำสัญญา ES2015

ขั้นตอนถัดไป

ดูข้อมูลเพิ่มเติมเกี่ยวกับ Web Bluetooth API
เรียกดูตัวอย่างบลูทูธเว็บและการสาธิตอย่างเป็นทางการ
ดูแมวหน้าบึ้งบิน