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

2. Select the right library

Several flavors of the javascript SDK are available within the Webcom package. You must select the right one depending on the services you need, among:

• webcom-auth-sldb.js with Authentication and full Serverless Database services,
• webcom-auth-sldblite.js with Authentication and Lite Serverless Database services,
• webcom-auth.js with Authentication service only,
• webcom.js with all services, and including all deprecated APIs.

Each new version of the JavaScript SDK preserves a backward compatibility with previous versions, but some deprecated APIs may be available only within the webcom.js variant.

webcom-auth-sldblite.js is a lite version of the Serverless Database service, which does not provide "offline" features (no local data cache, and no real-time connectivity management) but results in a more lightweight package (about 60% smaller).

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@3.4.0/webcom.js'></script>

3.b. Or using npm

First install the Webcom package

npm install webcom@3.4.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';

4. In your javascript code

4.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!

4.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()}`));

4.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
    )
);

4.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
  }
}