Trong vài tháng qua, tôi đã nghiên cứu API Web Bluetooth mới sắp xuất hiện trong Chrome 56 vào tháng 2 năm 2017. Và để tôi nói cho bạn biết, tính năng mới này vừa mở ra nhiều khả năng mới cho Web.

Với tư cách là Người ủng hộ Web, tôi rất hào hứng và nóng lòng muốn xây dựng một ứng dụng cho thấy việc kết hợp Angular và API Web Bluetooth dễ dàng như thế nào (thậm chí còn hơn thế nữa, với bất kỳ API Web nào sắp ra mắt, sẽ sớm có thêm thông tin về điều đó, hãy chú ý theo dõi ).

Hãy cùng gặp gỡ Mô-đun Bluetooth Web bị thiếu cho ứng dụng góc

Sau đó, tôi bắt đầu làm việc với người bạn của mình là François Beaufort (rất khen ngợi anh ấy!) để xây dựng một ứng dụng demo , một loại bằng chứng về khái niệm minh họa cách tích hợp Web Bluetooth với Angular.

Sau khi triển khai một số trường hợp sử dụng, tôi đã nghĩ ra một mô-đun Angular tóm tắt tất cả các bản soạn sẵn cần thiết để định cấu hình API Web Bluetooth.

Một vài tuyên bố từ chối trách nhiệm

API Bluetooth trên web

Tôi giả định rằng bạn đã quen thuộc với API Web Bluetooth: máy chủ GATT, Dịch vụ, Đặc điểm…v.v. Hãy thoải mái với chủ đề này trước khi đọc các phần tiếp theo. Dưới đây là một số tài nguyên:

1. https://developers.google.com/web/updates/2015/07/interact-with-ble-devices-on-the-web
2. https://medium.com/@urish/start-building-with-web-bluetooth-and-progressive-web-apps-6534835959a6

Tôi cũng giả định rằng bạn có một số kiến ​​thức cơ bản về Observables , Observers và chủ đề .

Ký hiệu Phần Lan

Bạn sẽ nhận thấy rằng một số phương thức kết thúc bằng ký hiệu $. Đây là một số loại quy ước trong thế giới Quan sát mà chúng tôi đã sử dụng được một thời gian. Chúng tôi có thể bỏ biểu tượng $ này trong tương lai vì bài đăng trên blog này .

Cài đặt mô-đun

Bạn có thể lấy mô-đun này bằng cách sử dụng Yarn hoặc NPM :

$ yarn add @manekinekko/angular-web-bluetooth
$ npm i -S @manekinekko/angular-web-bluetooth

Mô-đun này rất đơn giản để sử dụng. Đầu tiên, nhập biểu mẫu mô-đun WebBluetoothModule @manekinekko/angular-web-bluetooth :

Việc gọi phương thức WebBluetoothModule.forRoot() sẽ cung cấp dịch vụ BluetoothCore mà bạn sẽ cần sử dụng bên trong các dịch vụ/thành phần của riêng mình, giống như trong Battery-level.comComponent.ts :

WebBluetoothModule.forRoot () cũng cung cấp triển khai BrowserWebBluetooth sử dụng navigator.bluetooth dưới mui xe. Việc triển khai ServerWebBluetooth cho Angular Universal sẽ ra mắt sau. Tất nhiên, bằng cách sử dụng DI của Angular, bạn có thể tự do cung cấp cách triển khai tùy chỉnh của mình nếu muốn.

Dịch vụ BatteryLevelService ( Battery-level.service.ts ) là nơi bạn sẽ (nên) triển khai logic của thiết bị/cảm biến của mình. Trong ví dụ sau, chúng tôi đang triển khai dịch vụ đo mức pin để đọc mức pin của thiết bị được kết nối:

Hãy cho tôi một số lời giải thích

Được rồi! Hãy giải thích điều gì đang xảy ra bên trong phương thức getBatteryLevel() …

Về cơ bản, để đọc giá trị từ thiết bị, bạn cần thực hiện quy trình tương tự (đối với các trường hợp sử dụng phổ biến):

1. Gọi phương thức Discover$() để chạy quá trình khám phá

3. Sau đó, bạn sẽ nhận được dịch vụ chính của máy chủ GATT đó

4. Tiếp theo, lấy một đặc điểm cụ thể

5. Đọc lần cuối giá trị được trích xuất từ ​​đặc tính đó (dưới dạng DataView)

6. Bước cuối cùng sẽ cung cấp cho bạn các giá trị dưới dạng kiểu DataView. Bạn sẽ phải đọc đúng giá trị dành riêng cho thiết bị/cảm biến của mình. Chẳng hạn, đối với các giá trị đơn giản như mức pin , gọi value.getUint8(0) là đủ:

.map( (value: DataView) => value.getUint8(0) );

.map( (data: DataView) => {
    let value = data.getUint16(0, true /* little endian */);
    let mantissa = value & 0x0FFF;
    let exponent = value >> 12;
    let magnitude = Math.pow(2, exponent);
    let output = (mantissa * magnitude);
    let lux = output / 100.0;
    return +lux.toFixed(2);
 });

Cần một sự khởi đầu?

Đây là một kho lưu trữ cơ bản sẽ giúp bạn bắt đầu…

Bạn có phản hồi?

Mọi đóng góp đều được chào đón. Vui lòng mở một vấn đề trên github và cung cấp cho chúng tôi phản hồi của bạn…

Đi xa hơn

Nếu bạn cần tiến xa hơn nữa và triển khai nhiều ứng dụng thú vị hơn bằng cách sử dụng nhiều thiết bị và cảm biến hơn, bạn có thể xem API Web Bluetooth .

Theo dõi tôi trên Twitter @manekinekko để tìm hiểu thêm về nền tảng web.