micro:bit BLE Vue

A Vue.JS web app that communicates with a micro:bit using Bluetooth Low Energy (BLE) and the Web Bluetooth API.

Requirements

• Node v14 (Current LTS)
• A device that supports Bluetooth Low Energy (BLE)
• A Chromium-based browser is required for Web Bluetooth support see (here)

Development

Clone the repository from GitHub.

Install dependencies:

npm install

Run development server:

npm run serve

This will expose a development server on your local network (usually on port 8080). The web app should be accessible at http://localhost:8080/.

Windows-specific Issues

If you encounter an error relating to node-gyp on Windows, you may needs to install some additional dependencies (see here). One of the easiest ways to do this is to install windows-build-tools with NPM (administrator privileges may be required).

npm install -g windows-build-tools

Note: This will install Python 2 along with some Visual Studio C++ build tools on your system.

Running

There are multiple ways that this app can be run, the three options described below will expose a server on port 8080 over plain HTTP. Remember that HTTPS is required to use Web Bluetooth (see ngrok section).

Option 1 - NPM

If you have the code cloned locally, you can run the development server by running:

npm run serve

Option 2 - Docker

The web app can alternatively be run using Docker. To do this run:

docker run -it --rm -d -p 8080:80 --name microbit-ble-vue ghcr.io/wit-iot-apps-2021/microbit-ble-vue:latest

Option 3 - Docker Compose

version: '3.8'

services:
  microbit-ble-vue:
    image: ghcr.io/wit-iot-apps-2021/microbit-ble-vue:latest
    container_name: microbit-ble-vue
    restart: unless-stopped
    network_mode: bridge
    ports:
      - 8080:80
    security_opt:
      - no-new-privileges:true
    volumes:
      - /etc/timezone:/etc/timezone:ro
      - /etc/localtime:/etc/localtime:ro

To run using docker-compose, save the above as docker-compose.yml and run docker-compose up -d to bring up the container and docker-compose down to bring the container down when it is no longer needed

Ngrok

A trusted HTTPS certificate is required to use Web Bluetooth. One of the easiest ways to do this is to use something like ngrok.

ngrok can be downloaded as an executable or installed using NPM (this may require administrator privileges.)

npm install --global ngrok

to run ngrok, run:

ngrok http -region=eu 8080

Note: If you are using a port other than 8080, don't forget to update it here.

This will provide you with a HTTP and HTTPS URL that you can use to access you're development server over HTTPS and/or outside of your network.

micro:bit

Don't forget to flash the micro:bit with firmware that enables the required Bluetooth services. See the microbit folder for more details.

Connecting the micro:bit to a desktop/laptop

You may have to enable a flag in the browser to allow Web Bluetooth connections on desktop. To do this go to the flags page, enable the Experimental Web Platform Features flag and re-launch the browser.

Browser Flags (Experiments) Page Locations

Enter the URL below in the address bar of your preferred browser to access the flags (Experiments) page

• Google Chrome/Chromium: chrome://flags/#enable-experimental-web-platform-features
• Microsoft Edge: edge://flags/#enable-experimental-web-platform-features

Useful Tools

Some tools that you may find useful

scrcpy

scrcpy is a utility that provides display and control of Android devices over a USB/Wireless ADB connection.

Chrome Remote Debugging

Chrome Remote Debugging allows you to connect the Chrome browser on your phone to Chrome DevTools on your PC. One of the main benefits of this is the ability to view the console of the page that is running on the phone.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Dylan Gore 💻 🤔	Jack Power 🤔	Adam Cotter 🤔	Max Larkin 🤔	Robert Solomon 🤔	Jun-Shuo Ng 🤔	Ashraf Mustafa 🤔
Ewan Hills 🤔

This project follows the all-contributors specification.

Thanks

Based on code from https://github.com/ngammarano/microbit-web-bluetooth and https://github.com/thegecko/microbit-web-bluetooth.