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