如何在您的角度应用程序中使用后台实时数据库


好消息,伙计们!back end 5现已发布,是时候向您展示我们正在开发的一些新功能了。在本文中,我们将讨论如何将后台实时数据库集成到您的角度应用程序中。与此同时,您可以在中查看我们以前版本的Angular应用this post。如果你还没有读过这篇文章,并且还没有那个应用程序,请回顾前面的文章,因为我们将把那个应用程序作为本教程的起点。或者,如果你想马上开始使用它,就从这里下载源代码GitHub commit

我们需要做的第一件事是将后台无限的JS-SDK更新到最新版本。在项目目录中运行以下命令:

npm i backendless@latest -S

在回答的最后,您应该会看到这样的内容:

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

+ backendless@5.0.0

好了,现在,一旦包被更新,我们需要确保我们的应用程序仍然像以前一样工作。运行你的应用程序,确保一切正常。

什么是实时数据库?

在大多数情况下,您希望您的应用程序显示最新的数据,而不需要向服务器发出任何额外的请求。有三个事件,一旦发生,就会使您的客户端应用程序与服务器数据同步:

  • create -当在服务器上创建新对象时,此事件会传递到客户端应用程序。
  • update -当服务器上的现有对象发生更改时,此事件会传递到客户端应用程序。
  • delete -当服务器上的现有对象被删除时,此事件会传递到客户端应用程序。

我们所有的软件开发工具包(JS、Android和iOS)都已经更新了负责与我们的实时服务器建立连接的逻辑,并为您提供了订阅上述事件的能力。

查看Real-Time Database API documentation了解更多信息。

集成实时更新

让我们修改我们的persons.service.ts,只需用以下示例代码替换现有内容:

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

现在,让我们回顾一下我们实际做的一些改变:

  • 添加了一个新属性,objectId,Person 班级。
  • 改变了add 方法,我们不需要将创建的对象拉入人员列表。相反,我们创建了一个事件监听器来自动为我们做这件事。
  • 为添加了事件侦听器create |update |delete 事件;这将使我们的客户端数据与服务器数据保持同步。

现在让我们来测试一下。只需在一个窗口中打开我们的应用程序的浏览器页面,在另一个窗口中打开后台控制台:

在数据浏览器中添加一个新对象,您将看到一个新的Person立即出现在我们的应用程序中,在某些情况下,它甚至可能比后台控制台更快。

现在,您可以使用它,尝试在数据浏览器或休息控制台中添加、更改和删除人员,或者使用数据服务应用编程接口,您的应用程序中始终会有同步的数据。

摘要

如您所见,将实时数据库集成到我们的应用程序中非常容易。我们今天所做的所有改变都可以在这里找到GitHub commit。演示应用程序已经更新,您可以通过以下方式查看它link

在下一篇文章中,我们将向您展示如何轻松地将用户服务添加到应用程序中,以及如何将业务逻辑用于我们的应用程序,并将涉及许多其他事情。

谢谢你阅读这篇文章,希望你喜欢!