How LEGO® Education uses the Web Bluetooth and the Web Serial APIs

The LEGO® Education SPIKE™ Prime Set is a STEAM (science, technology, engineering, arts and mathematics) learning tool for students in grades six through eight (about 11 to 13 years). Combining colorful LEGO building elements, easy-to-use hardware, and an intuitive drag-and-drop coding language based on Scratch and Python, SPIKE Prime continuously engages students through playful learning activities to think critically and solve complex problems, regardless of their learning level… while having fun!

# Programming experience

Students use either icon blocks, word blocks (default), or Python code to program their models. The programming environment is adapted from the Scratch editor, familiar to many students already from early STEAM education in school. In the two visual modes, students connect blocks by dragging and dropping them onto the programming canvas, and hook up the various blocks by connecting them.

More advanced students can opt to use real Python code directly, which comes with an integrated Knowledge Base to support students while they code.

Having created a program in the LEGO Education SPIKE app, the students send the program to the LEGO Education Spike Prime hub over a Bluetooth or USB connection. The hub executes the program and controls the LEGO model.

# Included hardware

The brain of the SPIKE Education kit is the hub, which serves to control the various other pieces of hardware like the sensors and the motors. The kit includes a color sensor, distance sensor, and force sensor. There are also two motors: one large, one medium. The hub connects to the computer via Bluetooth or USB.

# Supported applications

Apart from platform-specific apps, LEGO also offers the SPIKE web app, which is accessible at spike.legoeducation.com. The app is currently not cached in the browser in any way; hence users always need to be connected to the Internet for the web app to work. LEGO officially supports Chrome browsers on Windows 10 and 11, MacBooks, and Chromebooks. Caching improvements and making the app installable are planned features for the future.

# Connecting the SPIKE Hub

The SPIKE Prime hub and the SPIKE Essential hub can be connected to the computer using Bluetooth or USB. By default, the web app uses Bluetooth via the Web Bluetooth API.

Alternatively, the web app uses the Web Serial API when connected via USB. In both cases, apart from the USB cable, the connection flow is almost identical.

Once connected, students upload their programs to one of the 20 storage slots of the large hub.

For communicating with the hub, the Web Bluetooth and the Web Serial API need a BluetoothDevice or a SerialPort respectively. These are obtained as in the code snippets below taken from the live app.

# Web Bluetooth API connection

(X.next = 4),
  navigator.bluetooth.requestDevice({
filters: ,
optionalServices: ,
});

# Web Serial API connection

const v = yield navigator.serial.requestPort({
filters: 
});
yield v.open({
baudRate: 115200
});

# Reasons for going web-first and using web hardware APIs

Currently, LEGO maintains independent versions of their app for Android, macOS/iPadOS, and Windows; plus legacy versions of the platform-specific apps on top, in addition to the web app. By pushing the web app on platforms that support the underlying web hardware APIs in Chrome, namely macOS, Windows, and ChromeOS, LEGO developers can reduce their app maintenance burden significantly.

Another reason is download size. The web app downloads less than 20 MB in total, whereas the macOS and iPadOS app weighs 115 MB, the Android app 178 MB, and the Windows app clocks in at 292 MB. The initial install however, does not include the lesson material needed in classrooms. After downloading this material, the size increases by almost 1 GB. On the web app, the lesson content is streamed, which enables the user to always have the latest version and only download the exact lesson they are looking at.

# Tinkering with LEGO on the web

LEGO was always about creatively assembling bricks, and with LEGO Education SPIKE being accessible from web browsers, this kit is no exception from the rule. The developer community has already begun to create code that talks to SPIKE. One example is PyREPL-JS started by Tufts University’s Gabriel Sessions that provides a MicroPython REPL (read–eval–print loop) for web pages to talk to the SPIKE hub. Ethan Danahy, likewise from Tufts, then uses this REPL for a number of Web-Interfaces for SPIKE Prime, one of which being the breakdancer synced to an audio file. The university even hosted a workshop on doing Machine Learning with SPIKE and hosts a Robotics Playground with instructions and code samples. A good start also is Hello SPIKE.

By allowing students to communicate with physical LEGO models from within the browser, the Web Serial and Web Bluetooth APIs open up a world of possibilities for educational, creative, and entertainment applications. Students will always have the latest version of the app without needing to update it. LEGO developers in the long run will have fewer apps to maintain, which means reduced cost and less development effort, leaving more time for doing what LEGO is best known for: unlocking creativity.