构建实时，多平台移动应用程序：使用Ionic Framework和Firebase的示例

本文概述

Ionic框架简介
Firebase简介
一个简单的用例示例：费用跟踪
Ionic和Firebase入门
编码我们的多平台应用程序
钩在Firebase中
Firebase的帐户管理和安全性
创建用户帐户并启用登录
基于用户的过滤
本文总结

公司在制作智能手机应用程序时遇到的主要问题之一是在不同平台上构建本机应用程序的成倍成本。尽管精明的前端开发人员已着手开发有望帮助解决此问题的多种混合平台, 但Ionic Framework和Firebase是一个动态二人组, 它们的确为我们提供了惊人的灵活性, 使我们能够使用JavaScript和HTML5构建实时智能手机应用程序。

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

(注意：本文假定你对AngularJS框架的基本知识有所了解。这是有关AngularJS的入门文章, 适合那些没有该背景的人。)

Ionic框架简介

Ionic框架包含三个主要组件：

为移动用户界面设计和优化的基于SASS的UI框架。
AngularJS前端JavaScript框架, 用于快速构建可扩展和快速的应用程序。
使用CSS, HTML和JavaScript的本机移动应用程序的编译器(Cordova或PhoneGap)。

Ionic框架还包装了许多有用的CSS组件。

感谢Ionic提供大量文档, 示例和入门视频, 以帮助简化学习过程并让开发人员快速启动并运行。

Firebase简介

Firebase是一种后端即服务的无模式数据系统, 可提供实时数据同步, 而无需编写任何自定义代码。 Firebase使你的大部分后端开发过时, 从而大大减少了多平台开发时间。

主要功能和优点包括：

数据更改而无需代码更改。所有数据更改都会立即发布给客户端, 而无需修改任何后端代码。
很多适配器。对于所有流行的JavaScript框架和移动平台SDK, 都有带有良好支持和文档的适配器。 (在本文中, 我们使用了AngularFire, 它是Firebase的AngularJS绑定。)
易于认证。无论身份验证方法如何, Firebase中的身份验证都像单个方法调用一样简单。支持简单的电子邮件和密码, 基于Google, Facebook, Twitter或Github的登录名。
离线启用。所有Firebase数据均已启用脱机功能, 因此在断开连接模式下, 应用程序可以完全(或接近完全)运行。恢复连接后, 应用程序将自动同步。
配置仪表板。通过Firebase直观的仪表板界面, 可以轻松配置许多Firebase(例如, 安全规则)。
以JSON为中心。在Firebase中, 所有数据都以JSON对象的形式存储和检索。

Firebase还提供了用于托管前端代码的云服务, 这可以节省大量的部署和维护时间。

还值得注意的是, Firebase于去年10月被Google收购, 这使其获得了极大的关注和知名度。

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

室友经常分担费用, 并在需要时互相依靠。因此, 让我们帮助室友跟踪他们的费用, 并帮助他们在月底调和。

为了使事情变得更加有趣, 让我们构建一个多平台的移动应用程序, 该应用程序将提供实时更新, 以便它们可以在发生支出时监控它们。

现在, 我们已经确定了要构建的内容, 并且已经介绍了这些工具, 让我们开始吧！

Ionic和Firebase入门

我们需要做的第一件事是安装Ionic。请遵循Ionic入门页面上提供的安装说明。 (请注意, Ionic依赖于NodeJS, 因此, 如果你的计算机上尚未安装该指令, 则说明也将要求你也进行安装)。

AngularFire 5分钟教程是开始熟悉Firebase的好地方。而且, 如果你是像我这样的”修补匠”或触觉学习者, 那么你可能想从GitHub提取我的实现并开始使用代码。

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

在本教程中, 我们将使用Ionic安装过程中提供的示例标签应用作为我们应用的基础。 (你可以使用命令ionic start myApp选项卡运行示例应用程序。)

在你最喜欢的IDE(我正在使用Webstorm)中打开示例标签应用, 然后开始对其进行修改以构建我们的室友应用。

对于我们的示例Ionic和Firebase应用程序, 我们需要以下三个屏幕：

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

删除www / templates / friend-detail.html文件。
在www / js / app.js中, 删除(或注释掉)friend-detail.html的状态。
在www / js / controllers.js中, 删除以我们删除状态引用的FriendDetailCtrl控制器。

现在, 将屏幕底部的标签选择器的图标和文本更改为以下内容：

只需在www / templates / tabs.html中进行以下更改即可完成此操作：

<ion-tabs class="tabs-icon-top"> 
  <!-- My Tab -->
  <ion-tab title="My Expense" icon="icon ion-log-in" href="#/tab/dash"> 
    <ion-nav-view name="tab-dash"></ion-nav-view> 
  </ion-tab> 
  <!-- Friends Tab -->
  <ion-tab title="Roomie's" icon="icon ion-log-out" href="#/tab/friends">
    <ion-nav-view name="tab-friends"></ion-nav-view> 
  </ion-tab> 
  <!-- Account -->
  <ion-tab title="Account" icon="icon ion-ios7-gear" href="#/tab/account"> 
    <ion-nav-view name="tab-account"></ion-nav-view> 
  </ion-tab> 
</ion-tabs>

在将数据连接到Firebase之前, 让我们创建一个列表, 并将其绑定到一个名为”费用”的数组, 方法是将以下代码添加到www / templates / tab-dash.html：

<ion-view title="My Expenses">  
  <ion-content>
    <ion-list>               
      <ion-item ng-repeat="expense in expenses|filter:user.password.email"
                type="item-text-wrap"> {{expense.label}}
        <span class="badge badge-balanced">{{expense.cost}}</span>
      </ion-item>             
    </ion-list>            
    <div class="card assertive">                   
      <div class="item item-text-wrap">
        Total Spent <span class="badge badge-positive">{{getTotal()}}</span>
      </div>               
    </div>        
  </ion-content>     
  <ion-footer-bar>
    <input ng-model='label' type='text' id='labelInput'
           placeholder='Type a new expense...' />
    <input ng-model='cost' type="number" id="costInput" placeholder='$' />
    <button class="button icon-left ion-plus" ng-click="addExpense($event)">Add</button>
  </ion-footer-bar>   
</ion-view>

我们还需要扩展www / js / controllers.js中的DashCtrl, 以包括expenses数组以及addExpense方法和getTotal方法, 如下所示：

.controller('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;
    };
})

费用数组用于存储费用列表中的项目, addExpense()方法将新值添加到费用数组, 而getTotal()方法为我们提供数组中所有项目的总数。

现在需要对tab-friends.html进行一组类似的更改。尝试自己完成此操作, 但是如果遇到问题, 或者想验证自己是否已正确完成操作, 可以参考我在GitHub上的实现。

钩在Firebase中

你将需要一个Firebase帐户。你可以在此处注册以获得免费的Firebase”黑客计划”。

注册后, 你将收到你的根URL, 该URL类似于https：// <yourfirebase> .firebaseio.com。

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

首先, 我们需要在应用程序的www / index.html文件中包括Firebase脚本, 如下所示：

<script src='https://cdn.firebase.com/js/client/1.1.1/firebase.js'></script>
<script src='https://cdn.firebase.com/libs/angularfire/0.8.0/angularfire.min.js'></script>
<script src="js/app.js"></script>

接下来, 我们需要通过在AngularJS’starter’模块的列表中添加’firebase’将Firebase模块添加到我们的应用程序：

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'firebase'])

就像任何其他AngularJS模块一样, 现在已启用Firebase。

AngularFire 5分钟教程将教你如何在控制器中创建数据引用。但是, 对于我们的演示应用程序, 我决定将这些引用保留在单独的服务中(因为如果更改了根URL, 这将使维护和更新变得更加容易)。要创建此服务, 请将以下内容添加到www / js / services.js：

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

上面的代码添加了三个参考网址。一个是根, 另一个是集合, 我们将其命名为费用和室友。

只需在根URL的末尾添加名称, 即可向Firebase添加新集合。因此, 要创建我们需要的费用收集, 我们需要做的是：

https：// <yourfirebase> .firebaseio.com / expenses

这将创建费用收集, 然后我们可以开始向其中添加对象。

好的, 现在我们可以从Firebase挂起费用集合来替换我们之前创建的”虚拟”费用数组。这是通过如下修改www / js / controllers.js中的DashCtrl来完成的：

.controller('DashCtrl', function($scope, fireBaseData, $firebase) {
    $scope.expenses = $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进行一组类似的更改。我再次建议你尝试自己执行此操作, 但是如果遇到问题, 或者想验证自己是否已正确执行操作, 可以参考我在GitHub上的实现。

为在两个不同的客户端上运行该应用程序时验证其是否正常运行, 请添加新费用, 并在两个客户端的列表中显示该费用。如果行得通………！你现在已经成功地将Ionic应用程序与Firebase连接了！

你可以通过将设备连接到系统并运行ionic run android或ionic emulation ios, 在不同的设备上测试多平台应用程序。有关测试你的应用程序的更多信息, 请参阅Ionic文档。

Firebase的帐户管理和安全性

尽管基本功能现在可以使用, 但一个严重的问题是我们的应用程序当前完全不安全。全世界都可以看到你的费用, 而无需任何权限或登录。这显然需要解决。

Firebase使用”规则”提供了强大而简单的身份验证框架。使用Firebase的规则语言可以完成很多工作。 (有关更多详细信息, 请参阅Firebase安全文档。)

就我们而言, 我们将编写一个非常简单的规则来阻止未经授权的用户访问我们的数据。为此, 请打开你的根URL, 单击左侧操作栏中的”安全和规则”, 然后将以下代码粘贴到规则中, 然后单击”保存”。

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

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

创建用户帐户并启用登录

你可以通过允许用户创建自己的电子邮件/密码组合或使用他们现有的任何Google, Facebook, Twitter或Github登录凭据来对用户进行身份验证。对于电子邮件/密码身份验证, Firebase提供了用于更改密码, 重置等的全套API方法。有关使用Firebase进行身份验证的更多信息, 请参见Firebase指南。

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

单击左侧操作栏上的登录和身份验证。
选中复选框以启用电子邮件和密码身份验证。
向下滚动以找到”添加新帐户表格”
使用”添加新用户”添加你的帐户。

要为你的用户启用登录界面, 请首先将以下代码添加到www / templates / tab-account.html：

<ion-view title="Account">
  <ion-content>           
    <div class="list" ng-show="showLoginForm">
      <label class="item item-input">
        <span class="input-label">Email</span><input type="text" ng-model="em"/>
      </label>
      <label class="item item-input">
        <span class="input-label">Password</span><input type="password" ng-model="pwd"/>
      </label>
      <button class="button button-block button-positive" ng-click="login(em, pwd)">Login</button>
    </div>            
    <div class="card" ng-hide="showLoginForm">      
      <div class="item item-text-wrap">You are logged in as {{user.password.email}}</div>                
    </div>
    <button class="button button-stable" ng-click="logout()" ng-hide="showLoginForm">Logout</button>
  </ion-content>  
</ion-view>

然后将以下内容添加到www / controller.js中的AccountCtrl：

.controller('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
        }, function(error, 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("Error authenticating user:", error);
            }
        });
    };

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

从安全角度来看, 要注意的一件事是Firebase登录默认是持久的。因此, 如果你希望用户在每次启动应用程序时都需要登录, 则需要相应地修改Firebase配置。为此, 在成功登录后仅执行一次, 请执行以下代码：

var r = $firebase(fireBaseData.refRoomMates()).$asArray();
// NOTE: Substitute the email addresses of your two user accounts in the line below
r.$add(["[email protected]", "[email protected]"]);

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

基于用户的过滤

但是, 多平台移动应用程序仍然缺少一项重要功能。我们希望将你的费用与室友的费用区分开。现在我们已经创建了两个帐户, 我们只需要过滤视图中的数据即可。

我们首先需要修改www / js / controllers.js中的dashCtrl, 以便(a)将当前用户的数据获取到$ scope中, 以及(b)为当前用户节省任何额外费用：

.controller('DashCtrl', function($scope, fireBaseData, $firebase) {
    $scope.expenses = $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中添加一个过滤器, 以仅显示当前用户的支出：

<ion-item ng-repeat="expense in expenses|filter:user.password.email" type="item-text-wrap">

好的, 主屏幕现在很完美。用户只能看到并添加自己的费用。

最后也是最后一步是使室友之间共享完整的费用清单。为此, 请更改www / templates / tab-friends.html以添加此过滤器：

<ion-item ng-repeat="expense in expenses|filter:roomiesEmail" type="item-text-wrap">

然后按如下所示在www / controllers.js中修改FriendsCtrl：

.controller('FriendsCtrl', function($scope, fireBaseData, $firebase) {
    $scope.user = fireBaseData.ref().getAuth();
    $scope.expenses = $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 < array.length; i++) {
            if (array[i][0] === $scope.user.password.email) {
                $scope.roomiesEmail = array[i][1];
            } else if (array[i][1] === $scope.user.password.email) {
                $scope.roomiesEmail = array[i][0];
            }
        }
        $scope.$apply();
        // NOTE: For simplicity, this demo only supports the 2-roommate use case
    });
    $scope.addExpense = function(e) {
        $scope.expenses.$add({
            by: $scope.roomiesEmail, 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;
    };
})

而已！在你的设备和室友的设备上安装/更新该应用程序, 应该一切就绪！

本文总结

我们的简单示例只是开始使用Ionic和Firebase可以完成的任务以及实现的难易程度。它们确实是使用JavaScript和HTML5构建实时, 多平台智能手机应用程序的强大组合。

相关：Angular 6教程：具有新功能的新功能(包括Firebase后端的完整示例)

本文概述

Ionic框架简介

Firebase简介

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

Ionic和Firebase入门

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

钩在Firebase中

Firebase的帐户管理和安全性

创建用户帐户并启用登录

基于用户的过滤

本文总结

相关推荐

评论抢沙发

评论前必须登录！

猜你喜欢

热门标签

回顶部

本文概述

Ionic框架简介

Firebase简介

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

Ionic和Firebase入门

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

钩在Firebase中

Firebase的帐户管理和安全性

创建用户帐户并启用登录

基于用户的过滤

本文总结

相关推荐

评论 抢沙发

评论前必须登录！

猜你喜欢

热门标签

回顶部

评论抢沙发