Ionic 2 和 Firebase

2019-01-10 08:00:00 · 飞浪

在此免费教程中学习如何使用 Ionic 2 和 Firebase 创建数据服务！按照步骤一步步操作，创建、构建和设置应用。

在本指南中，我将引导您使用 Ionic 2 和 Google 的 Firebase 实时数据库创建数据服务。

创建项目

首先确保 Ionic CLI（命令行实用程序）已安装并且是最新的。

      $ npm install -g ionic@beta 
$ npm install -g cordova
    

接下来，让我们生成项目。我们将制作一个简单的待办事项列表。

      $ ionic start todoer blank --v2 --ts

让我们仔细看看我们刚刚使用的命令：

离子启动
创建新的 Ionic 项目
做事者
命名我们的项目
空白的
标识我们要使用的模板。在本例中，我们将启动一个空白项目。
--v2
标识我们正在使用 ionic 2。由于 ionic 2 仍处于测试阶段，因此除非指定其他版本，否则启动默认为版本 1
--ts
使用 TypeScript。Angular 2 和 Ionic 2 都是用 TypeScript 编写的，它似乎将成为未来的默认语言。因此，我们也将使用它。

      $ cd todoer

构建应用程序

让我们来看看这个应用程序的主要功能。

创建任务（或待办事项）
将任务标记为已选中或未选中
过滤已选中/未选中的任务
删除任务

设置 Firebase

登录或创建您的 Google Firebase 帐户。Firebase 是 Google 的实时数据库。

准备好帐户后，创建一个名为“todoer”的新项目。之后，点击“将 Firebase 添加到您的 Web 应用”。这将为您提供连接到 Firebase 的所有 API 信息。它应该看起来像这样：

      <script src="https://www.gstatic.com/firebasejs/3.1.0/firebase.js"></script>
<script>
  // Initialize Firebase
  var config = {
    apiKey: "AIzaSyBBiOO44HzgIdsnzWG8JCic3MmEgsdfJ",
    authDomain: "todoer.firebaseapp.com",
    databaseURL: "https://todoer.firebaseio.com",
    storageBucket: "",
  };
  firebase.initializeApp(config);
</script>
    

复制并保存以供日后使用。

现在转到数据库并选择规则。默认情况下，Firebase 要求您进行身份验证。我们将更改这一点，以便任何人都可以访问我们的应用程序，稍后我们会添加身份验证。这样，我们就可以完成核心功能，而不必每次运行时都输入用户名和密码。请记住，这将在稍后更改。

使用以下命令发布调整后的规则：

      {
  "rules": {
    ".read": true,
    ".write": true
  }
}
    

选择数据并将键“todos”和值“”添加到树中。

Firebase 配置

打开您的www/index.html文件，并将 Firebase 的配置信息粘贴到<ion-app></ion-app>标签之后和其他脚本标签之前。

      <!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <title>Ionic</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">

  <link ios-href="build/css/app.ios.css" rel="stylesheet">
  <link md-href="build/css/app.md.css" rel="stylesheet">
  <link wp-href="build/css/app.wp.css" rel="stylesheet">
</head>


<body>
  <ion-app></ion-app>
  <!-- Start Add -->
  <script src="https://www.gstatic.com/firebasejs/3.1.0/firebase.js"></script>
  <script>
    // Initialize Firebase
    var config = {
      apiKey: "AIzaSyBBiOO44HzgIdsnzWG8JCic3MmEgsdfJ",
      authDomain: "todoer.firebaseapp.com",
      databaseURL: "https://todoer.firebaseio.com",
      storageBucket: "",
    };
    firebase.initializeApp(config);
  </script>
  <!-- End Add -->
  <!-- cordova.js required for cordova apps -->
  <script src="cordova.js"></script>
  <!-- Polyfill needed for platforms without Promise and Collection support -->
  <script src="build/js/es6-shim.min.js"></script>
  <!-- Zone.js and Reflect-metadata  -->
  <script src="build/js/Reflect.js"></script>
  <script src="build/js/zone.js"></script>
  <!-- the bundle which is built from the app's source code -->
  <script src="build/js/app.bundle.js"></script>
</body>

</html>
    

Firebase 现已准备就绪。

创建数据服务

为了充当 Firebase 和我们的应用之间的中介，我们将构建一个数据服务。为了本指南的目的，我们将把所有数据放在一个服务中。对于较大的应用程序，您可能希望将其拆分为多个服务。

首先让我们创建一个提供程序。

      $ ionic g provider data

这将创建一个 @injectable 组件，我们将把它注入到我们应用程序的根目录中。你会问为什么是根目录？我们希望这项服务在我们的应用程序的整个生命周期内都存在，而不是每次我们加载页面时都存在。每个组件上注入的提供程序是在注入时创建的。所以，如果我们希望我们的数据持久化，我们必须将其注入到主应用程序组件中。

打开 app.ts 文件并在顶部添加：

      import {Data} from './providers/data/data';

然后在组件中将数据添加到提供者；

      @component({
    providers: [Data]
});
    

Firebase 参考

Firebase 是一个实时的 nosql 数据库。我们通过查询路径访问其中的数据。例如，如果我们的数据如下所示。

      {
  todos: {
    $todoId: {
      title: 'todo1',
      complete: false
    },
    $todoId: {
      title: 'todo2',
      complete: true
    }
  }
}
    

我们可以使用firebase.database().ref('/todos') 来访问待办事项列表；如果我们想要获取特定的待办事项，可以使用firebase.database().ref('/todos/$todoId');其中$todoId是待办事项的唯一 ID。firebase 中的所有数据都存储为对象。

因此，让我们将 Firebase 添加到数据提供程序

      import {Injectable] from '@angular/core';

@Injectable()
export class Data {
    private _db: any;
    private _todosRef: any;
    
    constructor() {
      this._db = firebase.database().ref('/'); // Get a firebase reference to the root
      this._todosRef = firebase.database().ref('todos'); // Get a firebase reference to the todos
      
    }
    

现在我们有了对数据库的引用，我们如何获取数据？

Firebase 查询

Firebase 有一个事件库查询系统，可让您为某些事件设置侦听器。对于我们的用例，我们将侦听child_added事件。有关事件的完整列表，请参阅 Firebase 的 API 文档。

让我们将查询添加到数据服务类的构造函数中。

      import {Injectable] from '@angular/core';

@Injectable()
export class Data {
    private _db: any;
    private _todosRef: any;
    
    constructor() {
      this._db = firebase.database().ref('/'); // Get a firebase reference to the root
      this._todosRef = firebase.database().ref('todos'); // Get a firebase reference to the todos
      this._todosRef.on('child_added', this.handleData, this); // ***ADD THIS LINE***
      
    }
    handleData(snap)
    {
        //Do something with the data
    }
}
    

我们在构造函数中添加的行设置了一个侦听器，用于侦听子项添加到todos路径的情况。传入this.handleData来处理从 Firebase 发回的数据快照。最后，我们将其作为处理程序函数的上下文传递。

观察者和可观察对象

为了使我们的应用程序尽可能接近实时，我们将使用观察者模式。观察者内置于 Angular 2 中，并且（在撰写本文时）使用 RxJS（JavaScript 的 ReactiveX 库）。但是，该库将被 Angular 自己的库实现取代。

该模式的概念非常简单。观察者可以订阅并“观察”可观察对象。当数据被推送到可观察对象时，观察者会接收数据，直到可观察对象结束。简单地说，观察者-可观察对象关系是一种发布-订阅模式。

现在我们了解了观察者，让我们继续开发我们的应用。在您的 Data 类中，创建一个 ReplaySubject。什么是 ReplaySubject？Subject 既是观察者又是可观察者。通常，可观察者只会将最后一个事件发送给新订阅者。然而，ReplaySubject 会按照发送顺序将每条消息发送给新订阅者。效率稍低，但这样我们就不会错过任何旧的待办事项。

      import {Injectable] from '@angular/core';
import {ReplaySubject} from 'rxjs/ReplaySubject';

@Injectable()
export class Data {
    private _todos$: any;
    private _db: any;
    private _todosRef: any;
    
    constructor() {
      this._db = firebase.database().ref('/');
      this._todosRef = firebase.database().ref('todos');
      this._todosRef.on('child_added', this.handleData, this);
      this._todos$ = new ReplaySubject();
    }
    get todos()
    {
        return this._todos$;
    }
    
    handleData(snap)
    {
        try {
            // Tell our observer we have new data
            this._todos$.next(snap.val());
        }
        catch (error) {
            console.log('catching', error);
        }
    }
}
    

在我们的handleData()函数中，我们将获取数据库中数据的快照（因此称为snap ）。通过调用.val()函数，我们可以获取与该快照关联的值，并将其传递给我们的观察者。this._todos $.next(data)将新数据发送给设置为监听它的每个人。

创建任务

每次创建待办事项时，我们都希望我们的应用程序更新 Firebase。因此，让我们向数据提供程序添加一个保存待办事项的函数。

在您的data.ts文件中，添加以下方法：

      save(todo)
{
   return this._todosRef.push(todo).key;
}
    

推送功能将向 Firebase 添加新的待办事项，为其生成一个密钥，并通过.key属性返回该密钥。

现在，使用此 Ionic shell 命令生成一个新页面。$ ionic g page new-todo

您应该有三个新文件：new-todo.ts，new-todo.html和new-todo.scss。首先打开new-todo.ts文件，然后添加我们的数据服务。

<div class="code-block -hljs-dark aem-GridColumn--tablet--12 aem-GridColumn--phone--12

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

阅读全文

Ionic 2 和 Firebase

杭州电子商务研究院

5年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

<script src="https://www.gstatic.com/firebasejs/3.1.0/firebase.js"></script> <script> // Initialize Firebase var config = { apiKey: "AIzaSyBBiOO44HzgIdsnzWG8JCic3MmEgsdfJ", authDomain: "todoer.firebaseapp.com", databaseURL: "https://todoer.firebaseio.com", storageBucket: "", }; firebase.initializeApp(config); </script>

<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <title>Ionic</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no"> <meta name="msapplication-tap-highlight" content="no"> <link ios-href="build/css/app.ios.css" rel="stylesheet"> <link md-href="build/css/app.md.css" rel="stylesheet"> <link wp-href="build/css/app.wp.css" rel="stylesheet"> </head> <body> <ion-app></ion-app>  <script src="https://www.gstatic.com/firebasejs/3.1.0/firebase.js"></script> <script> // Initialize Firebase var config = { apiKey: "AIzaSyBBiOO44HzgIdsnzWG8JCic3MmEgsdfJ", authDomain: "todoer.firebaseapp.com", databaseURL: "https://todoer.firebaseio.com", storageBucket: "", }; firebase.initializeApp(config); </script>   <script src="cordova.js"></script>  <script src="build/js/es6-shim.min.js"></script>  <script src="build/js/Reflect.js"></script> <script src="build/js/zone.js"></script>  <script src="build/js/app.bundle.js"></script> </body> </html>

import {Injectable] from '@angular/core'; @Injectable() export class Data { private _db: any; private _todosRef: any; constructor() { this._db = firebase.database().ref('/'); // Get a firebase reference to the root this._todosRef = firebase.database().ref('todos'); // Get a firebase reference to the todos }

import {Injectable] from '@angular/core'; import {ReplaySubject} from 'rxjs/ReplaySubject'; @Injectable() export class Data { private _todos$: any; private _db: any; private _todosRef: any; constructor() { this._db = firebase.database().ref('/'); this._todosRef = firebase.database().ref('todos'); this._todosRef.on('child_added', this.handleData, this); this._todos$ = new ReplaySubject(); } get todos() { return this._todos$; } handleData(snap) { try { // Tell our observer we have new data this._todos$.next(snap.val()); } catch (error) { console.log('catching', error); } } }