使用 NativeScript 和 Firebase 点燃您的应用开发

对一个新的 NativeScript 插件进行测试总是令人兴奋的，而 Plugin Master Eddy Verbruggen 的全新 Firebase 插件 也不例外。如果您不熟悉 Firebase，那么您值得 一看。Firebase 已与 Google 联合，是一个 BAAS 解决方案，提供一种简单快捷的方式来创建后端数据库并开始将数据发送到集合。Firebase 不仅支持数据存储，还支持用户身份验证和静态托管。Firebase 以其响应能力而闻名，并且 这个示例聊天应用 是见证其速度的好方法。

Firebase 有什么大不了的吗？

Firebase 允许您使用 NoSQL 云数据库存储和同步数据。数据存储为 JSON，实时同步到所有连接的客户端，并在您的应用程序离线时可用。它真正令人敬畏的是其实时功能，为您的应用程序提供了一个非常响应的后端。

让我们了解如何通过将一个基本应用程序转换为使用 Firebase 作为其后端来利用这个很棒的工具。我假设您熟悉使用 NativeScript CLI，如 入门指南 中所述。在本教程中，我将演示如何创建新用户、使用这些凭据登录以及管理购物清单，从 Firebase 创建和删除数据。您可以通过分叉 NativeScript 入门指南的 Groceries 应用程序的“end”分支 来参与学习，或者查看已完成的项目 这里。

这是 Groceries 应用程序的操作情况，我的 iPhone 向我的模拟器提供数据，反之亦然

步骤 1：创建一个 免费 Firebase 帐户，登录并创建一个新应用程序。我将其命名为“firegroceries”，但您可以随意命名。请记下 Firebase 存储数据的 URL，它类似于 https://incandescent-fire-8097.firebaseio.com”。创建您的应用程序后，点击“管理应用程序”以访问仪表板，您可以在其中管理您的用户和数据。

 

步骤 2：准备您的代码库以连接到您的 Firebase 应用程序

Groceries 应用程序已设置好，您只需使用后端解决方案即可快速启动和运行。目前，它假定您使用 Telerik 后端服务。要改为使用 Firebase，我们首先需要通过在应用程序文件夹的根目录中执行以下命令来安装 firebase 插件

tns plugin add nativescript-plugin-firebase

您会注意到，在根文件夹中的 package.json 文件中添加了一行

"nativescript-plugin-firebase": "^1.2.0"

您可以通过编辑 package.json 并根据需要在项目的根目录中运行 npm install 来更新插件版本，以使插件安装与新功能保持最新。

现在，您可以将 Firebase URL 添加为配置文件中的 apiURL。在 /app/shared/config.js 中，编辑 apiUrl

module.exports = {
    apiUrl: "https://incandescent-fire-8397.firebaseio.com/"
};

接下来，添加一个方法来初始化 Firebase。在 app/views/login/login.js 中，添加一行以在 load() 函数的末尾调用 user.init()，然后通过在 login() 函数上方添加以下代码在 app/shared/view-models/user-view-model.js 中创建 init() 函数

 

由于 Firebase 将取代从其他数据源手动获取数据的需要，您可以覆盖顶部的 require 语句；用 var firebase = require("nativescript-plugin-firebase"); 替换 var fetchModule = require("fetch");

现在，您已将 Firebase 初始化为应用程序的后端。如果您运行应用程序，您应该会看到控制台语句，告诉您初始化成功。下一步是设置您的用户。

步骤 3：添加注册和登录

Firebase 插件目前支持使用用户名和密码注册以及使用相同技术登录，以及“匿名登录”。我们将使用前者，因此通过在 Firebase 仪表板的登录和身份验证选项卡中选中相应的框来启用电子邮件和密码身份验证

用以下函数替换 app/shared/view-models/user-view-model.js 中的 login() 和 register() 函数

viewModel.login = function() {
        return firebase.login({
            type: firebase.loginType.PASSWORD,
            email: viewModel.get("email"),
            password: viewModel.get("password")
          }).then(
            function (response) {
                config.uid = response.uid
                return response;
            });
    };
 
    viewModel.register = function() {
        return firebase.createUser({
            email: viewModel.get("email"),
            password: viewModel.get("password")
          }).then(
              function (response) {
                console.log(response);
                return response;
              }
          )
    };

  

注意：您可以从代码中删除函数 handleErrors()，因为 Firebase 会冒泡显示有用的错误消息，例如电子邮件地址已存在或密码不正确。此外，您可以删除检查有效电子邮件地址的代码，因为 Firebase 也会为您执行此操作。如果您确实删除了电子邮件检查代码（通常由 npm 模块处理），那么 app/views/register/register.js 中的 register() 函数可以简化为以下内容

 

您可以完全删除 completeRegistration() 函数。Firebase 使这些基本身份验证任务变得轻松快捷！继续注册您的应用程序，此过程将引导您从注册到登录，然后进入此代码库中的购物清单。

检查您的 Firebase 应用程序以在 Firebase 仪表板的登录和身份验证选项卡的已注册用户部分查看您的注册信息

 

注意，当您登录时，您会保存用户的 ID（由 Firebase 生成）。您将使用它在 Groceries 集合中创建特定于用户的內容，我们将在下一步中进行操作。

步骤 4：添加添加和删除购物清单的能力

现在，我们需要为 Firebase 设置一个监听器，以检查来自应用程序的新数据，并开始创建个人购物清单。用以下代码替换 app/shared/view-models/grocery-list-view-model.js 中的 load() 函数

//to get the index of an item to be deleted and handle the deletion on the frontend
 
function indexOf(item) {
    var match = -1;
    this.forEach(function(loopItem, index) {
        if (loopItem.id === item.key) {
            match = index;
        }
    });
    return match;
}
 
function GroceryListViewModel(items) {
 
    var viewModel = new observableArrayModule.ObservableArray(items);
    viewModel.indexOf = indexOf;
 
    viewModel.load = function () {
         
        var onChildEvent = function(result) {
        var matches = [];
 
            if (result.type === "ChildAdded") {            
                if(result.value.UID === config.uid){
                  viewModel.push({
                    name: result.value.Name,
                    id: result.key
                  });
                }
            }
 
            else if (result.type === "ChildRemoved") {
                matches.push(result);
                matches.forEach(function(match) {
                    var index = viewModel.indexOf(match);
                    viewModel.splice(index, 1);                           
                });
            }
        };
        return firebase.addChildEventListener(onChildEvent, "/Groceries").then(
            function () {
              console.log("firebase.addChildEventListener added");
            },
            function (error) {
              console.log("firebase.addChildEventListener error: " + error);
            }
        )   
      };

 

此函数设置一个“子事件监听器”，以检查来自 Firebase 中的 /Groceries 集合的数据。如果不存在此类集合，则默认情况下会创建它。当应用程序检测到“子事件”（例如，在应用程序加载时将数据添加到列表时），应用程序将检查 config.uid 和数据的 UID（例如，它属于谁）是否匹配，然后允许数据填充列表。

注意：Firebase 插件公开了一个子事件监听器和一个值事件监听器。使用值事件监听器来测试是否覆盖了数据，使用子事件监听器来检查给定集合的添加和删除操作。

将数据添加到此列表非常简单。覆盖 app/shared/view-models/grocery-list-view-model.js 中的 add() 函数

viewModel.add = function(grocery) {
  return firebase.push(
    '/Groceries',
      {'Name': grocery,
        'UID': config.uid
        }
      );
    };

用同样简单的代码替换 delete() 函数

 

添加和删除函数会推送或删除项目，并使用用户的 uid（用于添加）进行标记，并通过项目的 id（用于删除）进行区分，提供了一种快速的方法来管理 Firebase 中固有的快速集合管理。当加载页面时设置的监听器在检测到子事件时处理客户端数据的重新洗牌。这真的很酷！

接下来是什么？

允许文件上传以及更多社交登录方式（例如 Twitter、Facebook 和 Google 身份验证）由该插件处理将是一个不错的增强功能。此外，如果在前端利用值监听器并检查编辑后的项目，则可以向该应用添加编辑功能。由于最近几个版本都是我自己的圣诞礼物，我希望 Eddy 会继续扮演圣诞老人的角色。

 

祝您节日快乐！为了让您在成功地将 NativeScript 应用与 Firebase 集成时更加放松，我送给大家一个温暖的壁炉作为背景噪音，让您在点燃您的应用程序时感到温暖舒适。