Tutorial: Quickstart

JavaScript Quickstart

This quickstart guide is for the JavaScript SDK (to be run in web browsers).
If you work rather in a Node.js environment, please refer to this article instead.

1. Create your own developer account on the Webcom developer console

2. Create a Webcom application on the Webcom developer console

3. Add the Webcom javascript library to your HTML page

3.a Either directly
<script type='text/javascript' src='https://cdn.jsdelivr.net/npm/webcom@2.8/webcom.js'></script>
3.b Or using npm

First install the Webcom package

npm install webcom@2.8

And then reference the installed javascript library in your web application:

  • either with a script tag
<script type='text/javascript' src='<YOUR_LIBRARY_PATH>/webcom.js'></script>
  • or with a javascript import directive
import 'webcom/webcom.js';

4. In your javascript code

4.a Create a reference to your Webcom application
const myRef = new Webcom('<your-app>');
4.b Listen to data within your data tree
myRef.on('value', function(snapShot) {
    // this callback is called each time the data in your app is updated
	console.info("data in my app is now:", snapShot.val());
});

You can also listen to a sub-path of your data tree

myRef.child("subPath").on("value", function(snapShot) {
    // this callback is called each time the data is updated under the "subPath" path
	console.info("data in subPath is now:", snapShot.val());
});
4.c Write data into your data tree
myRef.set({foo: 'bar'});

You can also write anywhere in your data tree

myRef.child("subPath/subSubPath").set(42);

The whole data tree of your application is now

{
  "foo": "bar",
  "subPath": {
    "subSubPath": 42
  }
}