構建實時、多平台的移動應用程序：使用 Ionic 框架和 Firebase 的示例

公司在製作智能手機應用程序時遇到的主要問題之一是跨不同平台構建本機應用程序的成倍成本。 雖然精明的前端開發人員已經開始開發幾個有望幫助解決此問題的混合平台，但 Ionic Framework 和 Firebase 是動態組合，它們共同確實為我們使用 JavaScript 和 HTML5 構建實時智能手機應用程序提供了驚人的靈活性.

本教程介紹了這些多平台移動開發工具的功能，甚至提供了一些 Ionic 和 Firebase 示例。

（注意：本文假設您熟悉 AngularJS 框架的基礎知識。對於沒有該背景的人來說，這是一篇關於 AngularJS 的精彩介紹性文章。）

介紹離子框架

Ionic 框架由三個主要組件組成：

1. 為移動 UI 設計和優化的基於 SASS 的 UI 框架。
2. AngularJS 前端 JavaScript 框架，用於快速構建可擴展且快速的應用程序。
3. 帶有 CSS、HTML 和 JavaScript 的原生移動應用程序的編譯器（Cordova 或 PhoneGap）。

Ionic 框架還包含許多開箱即用的有用 CSS 組件。

感謝 Ionic 提供了大量的文檔、示例和入門視頻，以幫助簡化學習曲線並讓開發人員快速啟動和運行。

介紹 Firebase

Firebase 是一種後端即服務的無模式數據系統，可提供實時數據同步，無需編寫任何自定義代碼。 Firebase 使您的大部分後端開髮變得過時，從而顯著減少了多平台開發時間。

主要特點和優勢包括：

1. 無需更改代碼即可更改數據。 所有數據更改都會立即發布給客戶端，無需任何後端代碼修改。
2. 很多適配器。 有適用於所有流行 JavaScript 框架和移動平台 SDK 的適配器，具有良好的支持和文檔。 （在本文中，我們使用了 AngularFire，它是 Firebase 的 AngularJS 綁定。）
3. 易於認證。 Firebase 中的身份驗證就像單個方法調用一樣簡單，而與身份驗證方法無關。 支持簡單的電子郵件和密碼、基於 Google、Facebook、Twitter 或 Github 的登錄。
4. 已啟用離線。 所有 Firebase 數據都已啟用離線功能，因此應用程序可以在斷開連接模式下完全（或接近完全）運行。 當連接恢復時，應用程序會自動同步。
5. 配置儀表板。 Firebase 的大部分內容（例如安全規則）都可以通過 Firebase 直觀的儀表板界面輕鬆配置。
6. 以 JSON 為中心。 在 Firebase 中，所有數據都以 JSON 對象的形式存儲和檢索。

Firebase 還提供用於託管前端代碼的雲服務，這可以節省大量部署和維護時間。

還值得注意的是，Firebase 在去年 10 月被谷歌收購，這給了它更多的關注和知名度。

一個簡單的用例示例：費用跟踪

室友經常分擔費用，並在需要時相互依賴。 所以，讓我們幫助室友跟踪他們的開支，並幫助他們在月底進行核對。

為了讓事情變得更有趣，讓我們構建一個多平台移動應用程序，該應用程序將提供實時更新，這樣他們就可以監控發生的費用。

現在我們已經決定要構建什麼並且我們已經了解了這些工具，讓我們開始吧！

Ionic 和 Firebase 入門

我們需要做的第一件事是安裝 Ionic。 按照 Ionic 入門頁面上提供的安裝說明進行操作。 （請注意，Ionic 依賴於 NodeJS，因此如果您的機器上還沒有它，說明將要求您也安裝它）。

AngularFire 5 分鐘教程是開始熟悉 Firebase 的好地方。 如果您像我一樣是“修補匠”或觸覺學習者，您可能希望從 GitHub 中提取我的實現並開始使用代碼。

編碼我們的多平台應用程序

對於本教程，我們將使用作為 Ionic 安裝的一部分提供的示例tabs應用程序作為我們應用程序的基礎。 （您可以使用命令ionic start myApp tabs運行示例應用程序。）

在您最喜歡的 IDE（我正在使用 Webstorm）中打開示例tabs應用程序，讓我們開始修改它以構建我們的室友應用程序。

對於我們的示例 Ionic 和 Firebase 應用程序，我們將需要以下三個屏幕：

在創建這些屏幕之前，讓我們刪除示例應用程序默認提供的“朋友詳細信息屏幕”，如下所示：

1. 刪除www/templates/friend-detail.html文件。
2. 在www/js/app.js中，刪除（或註釋掉） friend-detail.html的狀態。
3. 在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 expenses創建一個列表並將其綁定到一個名為 costs 的數組：

 <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' placeholder='Type a new expense...' /> <input ng-model='cost' type="number" 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; }; })

expenses數組存儲費用列表中的項目， addExpense()方法向expenses數組添加一個新值， getTotal()方法為我們提供數組中所有項目的總和。

現在需要對tab-friends.html進行一組類似的更改。 嘗試自己執行此操作，但如果遇到問題，或者想驗證您是否正確執行此操作，可以參考我在 GitHub 上的實現。

在 Firebase 中掛鉤

您將需要一個 Firebase 帳戶。 您可以在此處註冊免費的 Firebase“黑客計劃”。

註冊後，您將收到您的根 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>

接下來，我們需要通過將'firebase'添加到 AngularJS 'starter'模塊的列表中來將 Firebase 模塊添加到我們的應用程序中：

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

Firebase 現在已啟用，就像任何其他 AngularJS 模塊一樣。

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

上面的代碼添加了三個參考網址。 一個用於根目錄，兩個用於我們命名為expenses和room-mates的集合。

將新集合添加到 Firebase 只需將其名稱添加到根 url的末尾即可。 因此，要創建我們需要的expenses集合，我們只需要以下內容：

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

這將創建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 emulate 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 並執行以下操作來完成：

1. 單擊左側操作欄上的登錄和驗證。
2. 選中復選框以啟用電子郵件和密碼驗證。
3. 向下滾動以找到“添加新帳戶表單”
4. 使用“添加新用戶”添加您的帳戶。

要為您的用戶啟用登錄界面，首先將以下代碼添加到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 構建實時、多平台智能手機應用程序的強大組合。