Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

How to Use the Backendless Real-Time Database in Your Angular App

DZone's Guide to

How to Use the Backendless Real-Time Database in Your Angular App

In this article, we will talk about how to integrate the Backendless Real-Time Database into your Angular-based web application.

· Web Dev Zone ·
Free Resource

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

Great news, guys! Backendless 5 is now released and it's time to show you some new features we've been working on. In this article, we will talk about how to integrate the Backendless Real-Time Database into your Angular application. Meanwhile, you can check out the previous version of our Angular app in this post. In case you haven't read the post and don't have that app yet, please review the previous article, because we will use that application as a starting point for this tutorial. Or, if you just want to start working with it right away, just download the source code from this GitHub commit.

The first thing we would need to do is to update the Backendless JS-SDK to the latest version. Run the following command inside of your project's directory:

npm i backendless@latest -S

At the end of the response, you should see something like this:

MacBook-Pro:backendless-angular MacBook$ npm i backendless@latest -S

+ backendless@5.0.0

Alright, now, once the package is updated, we need to make sure our application is still working as before. Run your app and make sure everything works fine.

What Is a Real-Time Database?

In most cases, you want your application to display up-to-date data without any additional requests to the server. There are three events, which, once occurred, get your client's app synced with the server data:

  • create - this event is delivered to the client app when a new object is created on the server.
  • update - this event is delivered to the client app when an existing object is changed on the server.
  • delete - this event is delivered to the client app when an existing object is deleted on the server.

All our SDKs (JS, Android, and iOS) have been updated with the logic responsible for establishing a connection to our Real-Time servers and provide you with the ability to subscribe to the events shown above.

Check out the Real-Time Database API documentation for more information.

Integrate Real-Time Updates

Let’s modify our persons.service.ts, just replace your existing content with the following sample code:

import { Injectable } from '@angular/core';
import Backendless from 'backendless';

export class Person {
public objectId?: string;
public name: string;
public address: string;
}

const PersonsStore = Backendless.Data.of(Person);

@Injectable({
providedIn: 'root'
})
export class PersonsService {

public persons: Person[] = [];

loadAll(): void {
  PersonsStore.find<Person>().then((persons: Person[]) => {
    this.persons = persons;

    this.addRealTimeListeners();
  });
}

add(newPerson: Person): Promise<Person> {
  return PersonsStore.save<Person>(newPerson);
}

addRealTimeListeners(): void {
  const rtHandlers: Backendless.EventHandler = PersonsStore.rt();

  rtHandlers.addCreateListener<Person>(this.onPersonAdd.bind(this));
  rtHandlers.addUpdateListener<Person>(this.onPersonChange.bind(this));
  rtHandlers.addDeleteListener<Person>(this.onPersonRemove.bind(this));
}

onPersonAdd(newPerson: Person): void {
  this.persons.push(newPerson);
}

onPersonChange(updatedPerson: Person): void {
  this.persons = this.persons.map(person => {
    return updatedPerson.objectId === person.objectId
      ? updatedPerson
      : person;
  });
}

onPersonRemove(oldPerson: Person): void {
  this.persons = this.persons.filter(person => {
    return oldPerson.objectId !== person.objectId;
  });
}
}

Now let's review some of the changes that we have actually made:

  • Added a new property, objectIdto the Person class.
  • Changed the add method, where we don't need to pull the created object into the list of persons. Instead, an event listener was created to do it for us automatically.
  • Added event listeners for the create update delete  events; this will keep our client data up to date with the server data.

Now let's test it. Just open a browser page with our application in one window and the Backendless Console in another window:

Add a new object in Data Browser and you will see that a new Person immediately appears in our app, in some cases, it might be even faster than in the Backendless Console.

Now you can play with it, try to add, change, and remove Persons in the Data Browser or Rest Console or use the Data Service APIs, and you will always have the synced data in your app.

Summary

As you can see, it was really easy to integrate Real-Time Database into our app. All the changes we made today can be found in this GitHub commit. The demo app has been updated, and you can take a look at it by following this link.

In the next post, we will show you how to easily add UserService into the app and how to use Business Logic for our application and will touch on many other things.

Thank you for reading this post, hope you enjoyed it!

Take a look at the Indigo.Design sample applications to learn more about how apps are created with design to code software.

Topics:
angular ,real time database ,web dev ,typescript

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}