Under the Hood: Creating Multi-User Activities with Firebase

In educational technology research, we increasingly see the value of connecting users to collaborate on a difficult problem or to compete against each other in a game. Our Teaching Teamwork project, funded by the Advanced Technological Education program at the National Science Foundation, is investigating the use of online collaborative activities for evaluating the contribution of individual team members as they work together to solve simulated real-world electronics problems on separate computers linked by the Internet.

Since we already had an existing standalone online circuit simulator from a previous project, our goal was to add real-time collaboration capabilities to connect users’ breadboards as part of a team activity. We looked for the fastest, easiest way to connect users together and found the perfect tool in Firebase, a realtime, NoSQL cloud database. Firebase stores data as JSON documents, which can be jointly edited by multiple users. With just a few lines of JavaScript, our browser-based activities connect to the database and create or modify data.

Now we can represent the entire state of the shared application as a single shared document. As each user’s version of the application modifies parts of the JSON, the whole document is updated in real time for each user’s screen, much like several people editing a Google Doc.

Teaching Teamwork players must each modify their own part of a larger shared circuit in order to generate the correct output. Because one user’s actions on his or her breadboard affect another part of the circuit for a teammate, team members must communicate to share goals and strategies. By simply placing the entire circuit state in the shared JSON file, and allowing users to modify only their own portions, each user’s representation of the complete circuit gets updated any time one of their collaborators changes a component or interacts with his or her breadboard (by changing a resistor or lifting a lead to break the circuit, for example).

Take a look at the code. We have a (trivial!) circuit with two resistors, which we represent in JSON. Each user can only modify the value of their own resistor, but each time their partner makes a change, their own representation of the circuit is updated. Both users’ applications agree on the new state of the circuit, and any calculations made, such as voltmeter readings, are updated in real time.

{
  "battery": {
    "voltage": 9,
    "connections": "1, 2"
  },
  "resistor-a": {
    "resistance": 100,
    "connections": "2, 3"
  },
  "resistor-b": {
    "resistance": 100,
    "connections": "3, 1"
  }
}

var firebaseRef = new Firebase("YOUR-APP-URL"), 
  myResistor: "resistor-a";

// this is called once to 
// initialize the circuit, and
// again any time a change is made.
firebaseRef.on("value",
  function(circuitState) {
    setCurrentCircuitState(circuitState)
  });

// call this any time the user 
// updates their own resistor,
// to update the shared circuit
function updateResistor(newValue) {
  firebaseRef.child(myResistor).set({
    "resistance": newValue
  });
}

The ease with which we can set up multi-user interactions has let us add this quickly in places where we might not have chosen to invest time building server applications. For example, we created a shared High Score Board in one day for our Genigames project in which users breed dragons to learn about inheritance patterns and developed a multi-user electrical grid management game for our Learning Everywhere initiative. Even in projects that eventually move to their own custom server-side applications, being able to create multi-user apps in a matter of hours allows us to iterate rapidly on new ideas to foster collaboration in student learning.

Sam Fentress (sfentress@concord.org) is a software engineer.

This material is based upon work supported by the National Science Foundation under grant DUE-1400545. Any opinions, findings, and conclusions or recommendations expressed in this material are those of the author(s) and do not necessarily reflect the views of the National Science Foundation.