SDK Guides
...
JavaScript
Tutorials in JavaScript

Task App: Node.js

To get started right away without having to build an app from scratch, explore with the Ditto ready-to-use demo task app.

This article provides a quickstart on building and interacting with a basic task app for managing and tracking task items.

Code Overview with Comments

Following is an overview of the installation, setup, and build process with comments. For a step-by-step walkthrough:

For the full source code, see getditto > samples > nodejs > index.ts repository in GitHub.

JS


Installing and Setting Up Ditto

Create a new directory, navigate to it, and then initialize npm:

1
Bash

2

Install the @dittolive/ditto and readline package:

Bash

3

Open the current directory in your IDE. For example, if using Visual Studio Code:

Bash

4

Import and initialize Ditto:

  1. Create an index.js file, and then import, initialize, instantiate, and start Ditto by adding the following to it.
  2. Replace 'YOUR_APP_ID' and 'YOUR_TOKEN' with your access credentials.

To get your access credentials, you must create an account and register an app in the portal. For instructions, see Onboarding.

JS


Setting Up the App

Once you've installed and set up your environment with Ditto, create a command-line interface (CLI) along with the various placeholder logic, or stubs, for the methods you'll use to perform various operations:

JS


Building and Running the App

Now that you have the app's CLI implemented, build and run the task app:

Bash - JS


The following output CLI indicates that the demo task app is running.

Output


Performing Reads

Now that the setup is complete, create a live query. A live query is a mechanism that allows you to track specific changes stored within the local environment, referred to as the Ditto store.

Relevant documents are stored in a local tasks object; as these documents change, the tasks object automatically updates to reflect their most current state that automatically updates to reflect the latest state. As data changes occur, the tasks object updates to reflect the latest state.

Once you've installed and set up the Ditto SDK, create a live query that will allow us to see when changes we care about happen to our local store. We store any relevant documents in a local tasks object and update the tasks object as changes happen using the live query.

We'll also implement our --list command to return known documents.

1

Implement live query logic and --list command

JS

2

Run the --list command in the console. The output should be an empty array.

Bash

Output


Creating New Task Documents

We'll now extend our application with the ability to create new task documents in the Ditto store using the Upsert method. We'll do this by implementing the --create command in our application.

1

Implement --create command logic

JS

2

Run the --create My First Task command.

3

Run the --list command.

By default, the document _id is automatically generated.

Output

4

You can now open the data browser in the Ditto Portal to see the changes in the Big Peer. (https://portal.ditto.live/data-browser/{APP-ID})

Editing Task Documents

We'll now extend our application to support editing documents. To do this we'll introduce:

  1. The ability to mark a file as deleted by setting the isDeleted field to true.
  2. The ability to chage the complteted state by being able to toggle the isComplete field
1

Add logic for --toggle and --deleted input.

JS

2

Run the --list command to get known documents. (Note: The _id is generated and will be different)

Output

3

Run the --toggle command with the _id of the document you want to change isCompleted state of. In our case it's document 64c9b6480049a0c400c95c51.

4

Run the --list command to see state update.

Output

5

Run the --delete command with the _id of the document you want to set to deleted. In our case it's document 64c9b6480049a0c400c95c51.

6

Run the --list command to see state update. We now have an empty list because our live query is only subscribing to documents that have "isDeleted == false"

Output


Replicating Data

Finally, we'll extend our application to replicate data from other locally connected peers. We'll do this by adding a subscription with a query that matches our live query.

1

Add a subscription with a query that looks for documents in the tasks collection with "isDeleted == false"

JS
TypeScript