Tutorial: 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
  }
}