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 a Webcom application on the Webcom developer console

2. Add the Webcom javascript library to your HTML page

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

First install the Webcom package

npm install webcom@3.3.0

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';

3. In your javascript code

3.a Create an instance of your Webcom application
const app = Webcom.App('<your-app>');

Warning: this instance must be shared all across your application. If you create another one, then unexpected effects may occur!

3.b Read data from your data tree
const rootNode = app.serverlessDb.rootNode;
rootNode.get()
    .then(snapshot => console.info(`data in my app is: ${snapshot.val()}`));

You can also read anywhere in your data tree

const subPathNode = rootNode.relativeNode("subPath");
subPathNode.relativeNode("subPath").get()
    .then(snapshot => console.info(`data at "subPath" is: ${snapshot.val()}`));
3.c Listen to data within your data tree
rootNode.subscribe(
    Webcom.Event.ValueChange,
    Webcom.Callback(
        snapshot => console.info("data in my app is now:", snapShot.val()) // called each time the data in your app are updated
    )
);

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

subPathNode.subscribe(
    Webcom.Event.ValueChange,
    Webcom.Callback(
        snapshot => console.info("data at subPath is now:", snapShot.val()) // called each time the data under the "subPath" path are updated
    )
);
3.d Write data into your data tree
rootNode.set({foo: 'bar'});

You can also write anywhere in your data tree

subPathNode.relativeNode("subSubPath").set(42);

The whole data tree of your application is now

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