การสร้างแอปพลิเคชันบนมือถือแบบเรียลไทม์และหลากหลายแพลตฟอร์ม: ตัวอย่างการใช้ Ionic Framework และ Firebase

ปัญหาสำคัญประการหนึ่งที่บริษัทต่างๆ เผชิญเมื่อสร้างแอปพลิเคชันบนสมาร์ทโฟนคือต้นทุนทวีคูณของการสร้างแอปพลิเคชันแบบเนทีฟบนแพลตฟอร์มต่างๆ ในขณะที่นักพัฒนา front-end ที่เชี่ยวชาญได้ปรับให้เข้ากับการพัฒนาแพลตฟอร์มไฮบริดหลายตัวที่สัญญาว่าจะช่วยแก้ไขปัญหานี้ Ionic Framework และ Firebase เป็นคู่หูแบบไดนามิกที่ร่วมกันทำให้เรามีความยืดหยุ่นที่น่าทึ่งในการสร้างแอปพลิเคชันสมาร์ทโฟนแบบเรียลไทม์โดยใช้ JavaScript และ HTML5 .

บทช่วยสอนนี้จะแนะนำความสามารถของเครื่องมือพัฒนาอุปกรณ์พกพาแบบหลายแพลตฟอร์มเหล่านี้ และยังให้ตัวอย่าง Ionic และ Firebase อีกด้วย

(หมายเหตุ: บทความนี้ถือว่ามีความคุ้นเคยกับพื้นฐานของกรอบงาน AngularJS นี่เป็นบทความแนะนำที่ดีเกี่ยวกับ AngularJS สำหรับผู้ที่ไม่มีพื้นหลังนั้น)

แนะนำ Ionic Framework

Ionic Framework ประกอบด้วยสามองค์ประกอบหลัก:

1. เฟรมเวิร์ก UI แบบ SASS ที่ออกแบบและปรับให้เหมาะสมสำหรับ UI บนมือถือ
2. กรอบงาน JavaScript ส่วนหน้าของ AngularJS ใช้เพื่อสร้างแอปพลิเคชันที่ปรับขนาดได้และรวดเร็วอย่างรวดเร็ว
3. คอมไพเลอร์ (Cordova หรือ PhoneGap) สำหรับแอปพลิเคชันมือถือดั้งเดิมที่มี CSS, HTML และ JavaScript

กรอบงาน Ionic ยังเต็มไปด้วยองค์ประกอบ CSS ที่มีประโยชน์มากมายที่พร้อมใช้งานทันที

ความรุ่งโรจน์ของ Ionic ในการจัดเตรียมเอกสาร ตัวอย่าง และวิดีโอสำหรับผู้เริ่มต้นอย่างละเอียด เพื่อช่วยให้ช่วงการเรียนรู้ง่ายขึ้นและทำให้นักพัฒนาเริ่มทำงานได้อย่างรวดเร็ว

ขอแนะนำ Firebase

Firebase เป็นระบบข้อมูลที่ไม่มีสคีมาของแบ็กเอนด์ที่ให้บริการการซิงค์ข้อมูลแบบเรียลไทม์โดยไม่ต้องเขียนโค้ดที่กำหนดเองใดๆ Firebase ทำให้การพัฒนาแบ็กเอนด์ของคุณล้าสมัย ซึ่งช่วยลดเวลาในการพัฒนาหลายแพลตฟอร์มได้อย่างมาก

คุณสมบัติและประโยชน์ที่สำคัญ ได้แก่ :

1. ข้อมูลเปลี่ยนแปลงโดยไม่มีการเปลี่ยนแปลงรหัส การเปลี่ยนแปลงข้อมูลทั้งหมดจะเผยแพร่ไปยังไคลเอ็นต์ทันที โดยไม่ต้องแก้ไขโค้ดส่วนหลังใดๆ
2. อแดปเตอร์มากมาย มีอะแดปเตอร์พร้อมการสนับสนุนและเอกสารประกอบที่ดีสำหรับเฟรมเวิร์ก JavaScript ยอดนิยมทั้งหมดและ SDK แพลตฟอร์มมือถือ (เราใช้ AngularFire ซึ่งเป็นการผูก AngularJS สำหรับ Firebase ในบทความนี้)
3. ง่ายต่อการรับรองความถูกต้อง การตรวจสอบสิทธิ์ใน Firebase นั้นง่ายพอๆ กับการเรียกใช้เมธอดเดียว โดยไม่คำนึงถึงวิธีการตรวจสอบสิทธิ์ รองรับอีเมลและรหัสผ่านอย่างง่าย การเข้าสู่ระบบโดยใช้ Google, Facebook, Twitter หรือ Github
4. เปิดใช้งานออฟไลน์ ข้อมูล Firebase ทั้งหมดเปิดใช้งานแบบออฟไลน์ ดังนั้นแอปพลิเคชันสามารถทำงานได้อย่างสมบูรณ์ (หรือใกล้เคียงจนเต็ม) ในโหมดตัดการเชื่อมต่อ แอปพลิเคชันจะซิงโครไนซ์โดยอัตโนมัติเมื่อเชื่อมต่อกลับคืนมา
5. แดชบอร์ดการกำหนดค่า Firebase ส่วนใหญ่ (เช่น กฎความปลอดภัย) สามารถกำหนดค่าได้อย่างง่ายดายผ่านอินเทอร์เฟซแดชบอร์ดที่ใช้งานง่ายของ Firebase
6. JSON เป็นศูนย์กลาง ใน Firebase ข้อมูลทั้งหมดจะถูกจัดเก็บและดึงออกมาในรูปแบบของวัตถุ JSON

Firebase ยังให้บริการระบบคลาวด์สำหรับการโฮสต์โค้ดส่วนหน้าซึ่งช่วยลดเวลาสำคัญในการปรับใช้และบำรุงรักษา

นอกจากนี้ยังเป็นที่น่าสังเกตว่า Firebase ถูกซื้อกิจการโดย Google เมื่อเดือนตุลาคมที่ผ่านมา ซึ่งได้รับความสนใจและทัศนวิสัยเพิ่มขึ้นอย่างมาก

ตัวอย่างกรณีการใช้งานอย่างง่าย: การติดตามค่าใช้จ่าย

เพื่อนร่วมห้องมักจะแบ่งปันค่าใช้จ่ายและพึ่งพาอาศัยกันในยามจำเป็น มาช่วยกันติดตามค่าใช้จ่ายของเพื่อนร่วมห้อง และช่วยให้พวกเขาประนีประนอมกันสิ้นเดือน

เพื่อให้สิ่งต่าง ๆ น่าสนใจยิ่งขึ้น ให้สร้างแอปพลิเคชันมือถือแบบหลายแพลตฟอร์มที่จะให้การอัปเดตตามเวลาจริง เพื่อให้แต่ละรายการสามารถตรวจสอบค่าใช้จ่ายที่เกิดขึ้นได้

ตอนนี้เราได้ตัดสินใจแล้วว่าเราต้องการสร้างอะไร และเราได้แนะนำเครื่องมือแล้ว มาเริ่มกันเลย!

เริ่มต้นใช้งาน Ionic และ Firebase

สิ่งแรกที่เราต้องทำคือติดตั้ง Ionic ปฏิบัติตามคำแนะนำในการติดตั้งที่ให้ไว้ในหน้า Ionic Getting Started (โปรดทราบว่า Ionic มีการพึ่งพา NodeJS ดังนั้นคุณจะต้องติดตั้งในคำแนะนำดังกล่าวด้วย หากคุณยังไม่มีในเครื่องของคุณ)

บทแนะนำ AngularFire 5 นาทีเป็นที่ที่ดีในการเริ่มทำความคุ้นเคยกับ Firebase และถ้าคุณเป็น "คนจรจัด" หรือผู้เรียนที่สัมผัสได้เช่นฉัน คุณอาจต้องการดึงการใช้งานของฉันจาก GitHub และเริ่มเล่นกับโค้ด

การเข้ารหัสแอปหลายแพลตฟอร์มของเรา

สำหรับบทช่วยสอนนี้ เราจะใช้แอป tabs ตัวอย่างที่มีให้โดยเป็นส่วนหนึ่งของการติดตั้ง Ionic เป็นพื้นฐานสำหรับแอปของเรา (คุณสามารถเรียกใช้แอปตัวอย่างด้วยคำสั่ง ionic start myApp tabs )

เปิดแอป tabs ตัวอย่างใน IDE ที่คุณชื่นชอบ (ฉันใช้ Webstorm) แล้วมาเริ่มแก้ไขเพื่อสร้างแอปเพื่อนร่วมห้องของเรา

สำหรับตัวอย่างแอป 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 ให้สร้างรายการและผูกเข้ากับอาร์เรย์ที่เรียกว่า expenses โดยเพิ่มโค้ดต่อไปนี้ใน 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' 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>

นอกจากนี้เรายังต้องขยาย DashCtrl ใน www/js/controllers.js เพื่อรวมอาร์เรย์ 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 "แผนแฮ็กเกอร์" ฟรีได้ที่นี่

เมื่อคุณสมัครใช้งาน คุณจะได้รับ root url ซึ่งจะมีลักษณะ https://<yourfirebase>.firebaseio.com

การเปิดใช้งาน Firebase ในแอพของเราต้องการตัวดัดแปลงเล็ก ๆ สองตัวสำหรับแอพของเรา

อันดับแรก เราต้องรวมสคริปต์ Firebase ไว้ในไฟล์ www/index.html ของแอปดังนี้:

 <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 ในแอปพลิเคชันของเราโดยเพิ่ม 'firebase' ลงในรายการในโมดูล 'starter' ของ AngularJS:

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

โค้ดด้านบนเพิ่ม URL อ้างอิงสามรายการ หนึ่งรายการสำหรับรูทและอีกสองรายการสำหรับคอลเล็กชันที่เราตั้งชื่อว่า expenses และ room-mates ห้อง

การเพิ่มคอลเล็กชันใหม่ใน Firebase ทำได้โดยการเพิ่มชื่อต่อท้าย URL รู ทของคุณ ดังนั้นเพื่อสร้างการรวบรวม expenses ที่เราต้องการ สิ่งที่เราต้องการมีดังต่อไปนี้:

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

สิ่งนี้จะสร้างการรวบรวม expenses จากนั้นเราสามารถเริ่มเพิ่มออบเจ็กต์เข้าไปได้

ตกลง ตอนนี้เราสามารถขอรวบรวมค่าใช้จ่ายจาก Firebase เพื่อแทนที่อาร์เรย์ค่าใช้จ่าย "จำลอง" ที่เราสร้างไว้ก่อนหน้านี้ ทำได้โดยแก้ไข DashCtrl ใน www/js/controllers.js ดังนี้:

 .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 หรือ 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 สามารถทำได้โดยไปที่ URL รูทของ Firebase และทำสิ่งต่อไปนี้:

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>

จากนั้นเพิ่มสิ่งต่อไปนี้ใน AccountCtrl ใน www/controller.js :

 .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]"]);

คุณสามารถเพิ่มสิ่งนี้ในตัวควบคุมบัญชีหลังจากเข้าสู่ระบบสำเร็จ หรือวางจุดพักหลังจากเข้าสู่ระบบสำเร็จแล้วเรียกใช้ในตัวตรวจสอบคอนโซลของคุณ

การกรองตามผู้ใช้

แอพมือถือหลายแพลตฟอร์มยังคงขาดคุณสมบัติที่สำคัญอย่างหนึ่ง เราต้องการแยกค่าใช้จ่ายของคุณออกจากค่าใช้จ่ายของเพื่อนร่วมห้องของคุณ ตอนนี้เราได้สร้างสองบัญชีแล้ว เราเพียงแค่ต้องกรองข้อมูลในมุมมองของเรา

ก่อนอื่นเราต้องแก้ไข dashCtrl ใน www/js/controllers.js เพื่อ (a) รับข้อมูลสำหรับผู้ใช้ปัจจุบันในขอบเขต $ และ (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">

จากนั้นแก้ไข FriendsCtrl ใน www/controllers.js ดังนี้:

 .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