公司在制作智能手机应用程序时遇到的主要问题之一是成本倍增 构建跨不同平台的本机应用程序. While savvy front-end developers 已经开始着手开发几个混合平台，这些平台有望帮助解决这个问题， Ionic Framework and Firebase 是一个充满活力的二人组，共同为我们使用JavaScript和HTML5构建实时智能手机应用程序提供了惊人的灵活性.

本教程介绍了这些多平台移动开发工具的功能，甚至提供了一些Ionic和Firebase示例.

(注意:本文假设您对AngularJS框架的基础知识有一定的了解. Here’s a 很棒的AngularJS入门文章 对于那些没有这方面背景的人.)

Ionic框架介绍

Ionic框架由三个主要部分组成:

1. 一个基于sass的UI框架，专为移动UI设计和优化.
2. An AngularJS 前端JavaScript框架，用于快速构建可伸缩和快速的应用程序.
3. A compiler (Cordova or PhoneGap)，用于使用CSS、HTML和JavaScript的本地移动应用程序.

Ionic框架也包含了 很多有用的CSS组件 out-of-the-box.

Ionic提供了丰富的文档，值得称赞, examples, 初学者视频可以帮助简化学习曲线，让开发人员快速上手和运行.

Introducing Firebase

Firebase是一个无模式的后端即服务数据系统，它提供实时数据同步，而不需要编写任何自定义代码. Firebase使许多后端开发过时, 从而大大减少了多平台开发时间.

主要功能和优点包括:

1. 数据更改而不更改代码. 所有数据更改都会立即发布到客户端，而不需要修改任何后端代码.
2. Lots of adapters. There are adapters, 有良好的支持和文档, 所有流行的JavaScript框架和移动平台sdk. (We used AngularFire，这是本文中针对Firebase的AngularJS绑定.)
3. Ease of authentication. Firebase中的身份验证就像单个方法调用一样简单, 无论身份验证方法如何. 支持简单的电子邮件和密码，谷歌，Facebook, Twitter，或GitHub基于登录.
4. Offline enabled. 所有Firebase数据都已离线启用, 因此，应用程序可以在断开连接模式下完全(或接近完全)运行. 当连接恢复时，应用程序将自动同步.
5. Configuration dashboard. Firebase的许多安全规则, 例如)可以通过Firebase直观的仪表板界面轻松配置.
6. JSON-centric. 在Firebase中，所有数据都以JSON对象的形式存储和检索.

Firebase还提供云服务来托管前端代码, 哪种方法可以节省部署和维护的大量时间.

同样值得注意的是 Firebase被谷歌收购 去年10月，它获得了更多的关注和知名度.

一个简单的用例示例:费用跟踪

室友经常分担费用，在需要的时候互相依靠. 所以，让我们来帮助室友们记录他们的开支，并帮助他们在月底结账.

让事情变得更有趣, 让我们构建一个提供实时更新的多平台移动应用程序, 这样他们每个人都可以监控开支.

现在我们已经决定了我们想要构建什么，并且已经介绍了工具, let’s get started!

开始使用Ionic和Firebase

我们需要做的第一件事是安装Ionic. 按照Ionic上提供的安装说明进行操作 Getting Started page. (注意Ionic依赖于 NodeJS, 所以如果你的机器上没有安装的话，说明也会要求你安装它).

The AngularFire 5分钟教程 是开始熟悉Firebase的好地方吗. 如果你是一个“修补匠”或像我一样的触觉学习者，你可能想要拉 my implementation 从GitHub开始玩代码.

编写我们的多平台应用程序

在本教程中，我们将使用示例 tabs 作为Ionic安装的一部分提供的应用程序，作为我们应用程序的基础. (你可以用下面的命令运行样例应用 ionic start myApp tabs.)

Open the sample tabs 应用程序在您最喜欢的IDE(我使用 Webstorm)，让我们开始修改它来构建我们的室友应用程序.

对于我们的Ionic和Firebase应用，我们需要以下三个屏幕:

在创建这些屏幕之前, 让我们移除示例应用默认提供的“好友详细信息屏幕”，如下所示:

1. Delete the www /模板/ friend-detail.html file.
2. In www/js/app.js，删除(或注释掉)的状态 friend-detail.html.
3. In www/js/controllers.js, remove the FriendDetailCtrl 在我们删除的状态中引用的控制器.

Now let’s change the icons 屏幕底部TAB选择器的文本如下:

中进行以下更改即可实现 www/templates/tabs.html:

在将数据连接到Firebase之前，让我们创建一个列表并将其绑定到一个名为 expenses 中添加以下代码 www/templates/tab-dash.html:

  
  
                   
      
{{expense.label}}
        {{expense.cost}}
                   
                
    
                   
      

        Total Spent {{getTotal()}}
      
               
    
        
       
  
    
    
    Add
     

我们还需要延长 DashCtrl in www/js/controllers.js to include the expenses array, as well as an addExpense method and a getTotal method, as follows:

.控制器('DashCtrl'， function($scope) {
    $scope.expenses = [{
        by: ‘email’,
        label: ’test’,
        cost: 10
    }];
    $scope.addExpense = function(e) {
        $scope.expenses.push({
            by: < some email > label: $scope.label,
            cost: $scope.cost
        });
        $scope.label = "";
        $scope.cost = 0;
    };
    $scope.getTotal = function() {
        var rtnTotal = 0;
        for (var i = 0; i < $scope.expenses.length; i++) {
            rtnTotal += $scope.expenses[i].cost;
        }
        return rtnTotal;
    };
})

The expenses 数组用于存储费用列表中的项目 addExpense() 方法将新值添加到 expenses array, and the getTotal() 方法给出数组中所有项的总和.

现在需要进行一组类似的更改 tab-friends.html. Try doing this on your own, 但是如果你遇到问题或者想要验证你做的是正确的, you can refer to my implementation on GitHub.

Hooking in Firebase

您将需要一个Firebase帐户. You can sign up here 免费的Firebase“黑客计划”.

一旦你注册，你会收到你的 root URL，它看起来像 http://.firebaseio.com.

在我们的应用中启用Firebase需要对我们的应用进行两个小的修改.

首先，我们需要在应用程序中包含Firebase脚本 www/index.html file as follows:

接下来，我们需要将Firebase模块添加到应用程序中 'firebase' 到AngularJS的列表中 'starter' module:

angular.模块('starter'， 'ionic'， 'starter . '.controllers', 'starter.services', 'firebase'])

Firebase现在被启用了，就像任何其他AngularJS模块一样.

The AngularFire 5分钟教程 会教你在控制器中创建数据引用吗. For our demo app, though, 我决定将这些引用保存在一个单独的服务中(因为如果根URL改变了，这样维护和更新就容易得多)。. 要创建此服务，请将以下内容添加到 www/js/services.js:

.factory('fireBaseData'， function($firebase) {
    var ref = new Firebase("http://luminous-fire-3429 . net ".firebaseio.com/"),
        refExpenses = new Firebase("http://luminous-fire-3429 . net ").firebaseio.com/expenses"),
        refRoomMates = new Firebase("http://luminous-fire-3429.firebaseio.com/room-mates");
    return {
        ref: function() {
            return ref;
        },
        refExpenses: function() {
            return refExpenses;
        },
        refRoomMates: function() {
            return refRoomMates;
        }
    }
});

上面的代码添加了三个引用url. 一个用于根，两个用于已命名的集合 expenses and room-mates.

向Firebase添加新集合只需将其名称添加到您的 root URL. So to create the expenses 我们需要的集合，我们只需要以下内容:

http://.firebaseio.com/expenses

This will create the expenses 集合，然后我们可以开始向其中添加对象.

OK, 现在我们可以从Firebase中钩入费用集合来替换我们之前创建的“虚拟”费用数组. This is done by modifying DashCtrl in www/js/controllers.js as follows:

.控制器('DashCtrl'， function($scope, fireBaseData， $firebase) {
    $scope.费用= $firebase(fireBaseData.refExpenses()).$asArray();
    $scope.addExpense = function(e) {
        $scope.expenses.$add({
            by: < someemail > ,
            label: $scope.label,
            cost: $scope.cost
        });
        $scope.label = "";
        $scope.cost = 0;
    };

    $scope.getTotal = function() {
        var rtnTotal = 0;
        for (var i = 0; i < $scope.expenses.length; i++) {
            rtnTotal += $scope.expenses[i].cost;
        }
        return rtnTotal;
    };
})

需要进行一组类似的更改 FriendsCtrl. 我再次建议你尝试自己做这件事, 但是如果你遇到问题, 或者想验证一下你是否做对了, you can refer to my implementation on GitHub.

来验证它是否有效, 同时在两个不同的客户端上运行应用程序, add a new expense, 并确保它出现在两个客户端的列表中. If it works… woo-hoo! 现在，您已经成功地将Ionic应用程序与Firebase连接起来了!

你可以在不同的设备上测试你的多平台应用，方法是将设备连接到你的系统并运行 ionic run android or ionic emulate ios. 有关的更多信息，请参阅Ionic文档 testing your app.

帐户管理和安全与Firebase

虽然基本的功能现在正在工作, 一个严重的问题是，我们的应用程序目前完全不安全. 全世界的人都可以看到你的开支，而不需要任何许可或登录. 这显然需要解决.

Firebase使用“规则”提供了一个强大而简单的身份验证框架。. 使用Firebase的规则语言可以做很多事情. (Refer to the Firebase安全文档 for more detail.)

在我们的示例中，我们将编写一个非常简单的规则来阻止未经授权的用户访问我们的数据. 要做到这一点，打开你的根URL，点击“安全” & 在左侧操作栏中，将下面的代码粘贴到规则中，然后单击Save.

{
    "rules": {
        ".read": "auth != null",
        ".write": "auth != null"
    }
}

如果现在运行应用程序，您将注意到没有数据. 您甚至可以尝试使用浏览器工具检查您的请求, 您应该在控制台中看到一条消息，指出您没有被授权查看数据.

创建用户帐号并启用登录功能

您可以通过让用户创建自己的电子邮件/密码组合或使用任何现有的Google来验证用户, Facebook, Twitter, 或Github登录凭据. 用于电子邮件/密码认证, Firebase提供了一套完整的API方法来修改密码, reset, etc. More information about 使用Firebase进行身份验证 可以在Firebase指南中找到.

对于我们的演示应用程序，我们将通过Firebase界面创建两个用户帐户. 这可以通过转到您的Firebase根URL并执行以下操作来完成:

1. Click the Login & Auth在左侧的操作栏.
2. 选中“启用电子邮件”复选框 & Password Authentication.
3. 向下滚动找到“添加新帐户表单”
4. 使用“添加新用户”添加您的帐户.

要为用户启用登录界面，首先将以下代码添加到 www/templates/tab-account.html:

             
    

      
        Email
      
      
        Password
      
      Login
    
            
    
      
      
You are logged in as {{user.password.email}}
                
    
    Logout
    

Then add the following to AccountCtrl in www/controller.js:

.控制器('AccountCtrl'， function($scope, fireBaseData) {
    $scope.showLoginForm = false; //Checking if user is logged in
    $scope.user = fireBaseData.ref().getAuth();
    if (!$scope.user) {
        $scope.showLoginForm = true;
    }
    //Login method
    $scope.Login = function (em, pwd) {
        fireBaseData.ref().authWithPassword({
            email    : em,
            password : pwd
        }，函数(错误，authData) {
            if (error === null) {
                console.log("User ID: " + authData.uid +
                            ", Provider: " + authData.provider);
                $scope.user = fireBaseData.ref().getAuth();
                $scope.showLoginForm = false;
                $scope.$apply();
            } else {
                console.log("验证用户错误:"，错误);
            }
        });
    };

    // Logout method
    $scope.logout = function () {
        fireBaseData.ref().unauth();
        $scope.showLoginForm = true;
    };
});

从安全的角度来看，需要注意的一件重要的事情是 默认情况下，Firebase登录是持久的. Therefore, 如果您希望用户在每次启动应用程序时都需要登录, 您需要相应地修改Firebase配置. To do this, just one time 登录成功后，执行以下代码:

var r = $firebase(fireBaseData . conf.refRoomMates()).$asArray();
//注意:在下面的行中替换两个用户帐户的电子邮件地址
r.$add(["user1@mail.com","user2@mail.com"]);

您可以在成功登录后将其添加到帐户控制器中，或者在成功登录后设置一个断点并在控制台检查器中运行它.

Filtering Based on User

不过，这款多平台移动应用仍缺少一个重要功能. 我们想把你的费用和你室友的费用区分开来. 现在我们已经创建了两个帐户，我们只需要过滤视图上的数据.

我们首先需要修改 dashCtrl in www/js/controllers.js 为了(a)将当前用户的数据放入$范围，(b)为当前用户节省任何额外的费用:

.控制器('DashCtrl'， function($scope, fireBaseData， $firebase) {
    $scope.费用= $firebase(fireBaseData.refExpenses()).$asArray();
    $scope.user = fireBaseData.ref().getAuth();
    // ADD MESSAGE METHOD
    $scope.addExpense = function(e) {
        $scope.expenses.$add({
            by: $scope.user.password.email,
            label: $scope.label,
            cost: $scope.cost
        });
        $scope.label = "";
        $scope.cost = 0;
    };
    $scope.getTotal = function () {
        var rtnTotal = 0;
        for (var i = 0; i < $scope.expenses.length; i++) {
            rtnTotal += $scope.expenses[i].cost;
        }
        return rtnTotal;
    };
})

接下来，我们需要添加一个过滤器 www/templates/tab-dash.html 只显示当前用户的费用:

好了，主屏幕现在完美了. 用户只能查看和添加自己的费用.

最后一步是在室友之间共享完整的费用清单. To do so, change the www/templates/tab-friends.html to add this filter:

Then modify FriendsCtrl in www/controllers.js as follows:

.控制器('FriendsCtrl'， function($scope, fireBaseData， $firebase) {
    $scope.user = fireBaseData.ref().getAuth();
    $scope.费用= $firebase(fireBaseData.refExpenses()).$asArray();
    $scope.roomies = $firebase(fireBaseData.refRoomMates()).$asArray();
    $scope.roomies.$loaded().then(function(array) {
        //array = [[set1_rm1_email, set1_rm2_email]， [set2_rm1_email, set2_rm2_email] ...]
        for (var i = 0; i 

That’s it! 在你的设备和你室友的设备上安装/更新应用程序，你应该都设置好了!

Wrap Up

我们的简单示例只是开始触及使用Ionic和Firebase可以完成的事情的表面，以及它可以多么容易地完成. 他们确实是构建实时内容的强大组合, 使用JavaScript和HTML5的多平台智能手机应用程序.

Related: Angular 6教程:新功能 (一个包含Firebase后端的全栈示例)