Δημιουργία εφαρμογών για κινητά σε πραγματικό χρόνο, πολλαπλών πλατφορμών: Παραδείγματα που χρησιμοποιούν το Ionic Framework και το Firebase

Ένα από τα σημαντικότερα προβλήματα που αντιμετωπίζουν οι εταιρείες όταν κάνουν μια εφαρμογή smartphone είναι το πολλαπλασιαστικό κόστος δημιουργία εγγενών εφαρμογών σε διαφορετικές πλατφόρμες . Ενώ έξυπνοι προγραμματιστές front-end έχουν συντονιστεί με την ανάπτυξη πολλών υβριδικών πλατφορμών που υπόσχονται να βοηθήσουν στην αντιμετώπιση αυτού του ζητήματος, Ιωνικό πλαίσιο και Firebase είναι ένα δυναμικό δίδυμο που από κοινού μας δίνει πραγματικά εκπληκτική ευελιξία στη δημιουργία εφαρμογών smartphone σε πραγματικό χρόνο χρησιμοποιώντας JavaScript και HTML5.

Αυτό το σεμινάριο παρουσιάζει τις δυνατότητες αυτών των εργαλείων ανάπτυξης πολλαπλών πλατφορμών για κινητά και παρέχει ακόμη μερικά παραδείγματα Ionic και Firebase.

(Σημείωση: Αυτό το άρθρο προϋποθέτει κάποια εξοικείωση με τα βασικά του πλαισίου AngularJS. Εδώ είναι ένα υπέροχη εισαγωγική θέση στο AngularJS για όσους δεν έχουν αυτό το υπόβαθρο.)

Παρουσιάζοντας το Ιωνικό Πλαίσιο

Το Ionic Framework αποτελείται από τρία βασικά στοιχεία:

passing score for aws solutions architect associate 2019

1. Ένα πλαίσιο UI βασισμένο σε SASS σχεδιασμένο και βελτιστοποιημένο για UI για κινητά.
2. Ενα Γωνιακό JS Πλαίσιο JavaScript front-end που χρησιμοποιείται για τη γρήγορη δημιουργία επεκτάσιμων και γρήγορων εφαρμογών.
3. Ένας μεταγλωττιστής ( Κόρδοβα ή PhoneGap ) για εγγενείς εφαρμογές για κινητά με CSS, HTML και JavaScript.

Το Ionic πλαίσιο είναι επίσης γεμάτο πολλά χρήσιμα στοιχεία CSS έξω από το κουτί.

Kudos to Ionic για την παροχή εκτεταμένης τεκμηρίωσης, παραδειγμάτων και βίντεο εκκίνησης για την απλοποίηση της καμπύλης εκμάθησης και για την ταχεία λειτουργία των προγραμματιστών.

Παρουσιάζουμε το Firebase

Το Firebase είναι ένα σύστημα δεδομένων χωρίς λειτουργικό σύστημα backend-as-a-service που παρέχει συγχρονισμό δεδομένων σε πραγματικό χρόνο χωρίς να απαιτείται η σύνταξη προσαρμοσμένου κώδικα. Το Firebase καθιστά το μεγαλύτερο μέρος της ανάπτυξης back-end σας ξεπερασμένο, μειώνοντας έτσι σημαντικά τον χρόνο ανάπτυξης πολλαπλών πλατφορμών.

Τα βασικά χαρακτηριστικά και τα οφέλη περιλαμβάνουν:

1. Τα δεδομένα αλλάζουν χωρίς αλλαγές κώδικα. Όλες οι αλλαγές δεδομένων δημοσιεύονται στους πελάτες αμέσως, χωρίς να απαιτείται τροποποίηση κώδικα backend.
2. Πολλοί προσαρμογείς. Υπάρχουν προσαρμογείς, με καλή υποστήριξη και τεκμηρίωση, για όλα τα δημοφιλή πλαίσια JavaScript και SDK πλατφόρμας για κινητά. (Συνηθίζαμε AngularFire , το οποίο είναι το AngularJS δεσμευτικό για το Firebase, σε αυτό το άρθρο.)
3. Ευκολία ελέγχου ταυτότητας. Ο έλεγχος ταυτότητας στο Firebase είναι τόσο απλός όσο μια κλήση μιας μεθόδου, ανεξάρτητα από τη μέθοδο ελέγχου ταυτότητας. Υποστηρίζει απλές συνδέσεις ηλεκτρονικού ταχυδρομείου και κωδικού πρόσβασης, Google, Facebook, Twitter ή Github.
4. Η λειτουργία εκτός σύνδεσης ενεργοποιήθηκε. Όλα τα δεδομένα του Firebase είναι ενεργοποιημένα εκτός σύνδεσης, επομένως μια εφαρμογή μπορεί να είναι πλήρως (ή κοντά σε πλήρως) λειτουργική σε αποσυνδεδεμένη λειτουργία. Οι εφαρμογές συγχρονίζονται αυτόματα όταν αποκατασταθεί η σύνδεση.
5. Πίνακας ελέγχου διαμόρφωσης. Μεγάλο μέρος του Firebase (για παράδειγμα κανόνες ασφαλείας) μπορεί να διαμορφωθεί εύκολα μέσω της έξυπνης διεπαφής του πίνακα ελέγχου του Firebase.
6. JSON-κεντρικό. Στο Firebase, όλα τα δεδομένα αποθηκεύονται και ανακτώνται με τη μορφή αντικειμένων JSON.

Το Firebase προσφέρει επίσης υπηρεσίες cloud για τη φιλοξενία του κώδικα front-end που μπορεί να εξοικονομήσει σημαντικό χρόνο στην ανάπτυξη και τη συντήρηση.

Αξίζει επίσης να σημειωθεί ότι Το Firebase αποκτήθηκε από την Google τον περασμένο Οκτώβριο που του έδωσε πολύ μεγαλύτερη προσοχή και προβολή.

Ένα παράδειγμα απλής χρήσης: Παρακολούθηση εξόδων

Οι συγκάτοικοι μοιράζονται συχνά τα έξοδα και βασίζονται ο ένας στον άλλο σε περιόδους ανάγκης. Ας βοηθήσουμε λοιπόν τους συγκάτοικους να παρακολουθούν τα έξοδά τους και να τους βοηθήσουμε να συμφιλιωθούν στο τέλος του μήνα.

Για να κάνουμε τα πράγματα ακόμη πιο ενδιαφέροντα, ας δημιουργήσουμε μια εφαρμογή για κινητά πολλαπλών πλατφορμών που θα παρέχει ενημερώσεις σε πραγματικό χρόνο, ώστε να μπορούν να παρακολουθούν τα έξοδα καθώς συμβαίνουν.

Τώρα που αποφασίσαμε τι θέλουμε να δημιουργήσουμε και έχουμε εισαχθεί στα εργαλεία, ας ξεκινήσουμε!

Ξεκινώντας με το Ionic και το Firebase

Το πρώτο πράγμα που πρέπει να κάνουμε είναι να εγκαταστήσουμε το Ionic. Ακολουθήστε τις οδηγίες εγκατάστασης που παρέχονται στο Ionic Ξεκινώντας σελίδα. (Σημειώστε ότι το Ionic έχει εξάρτηση NodeJS , οπότε οι οδηγίες θα σας ζητήσουν να το εγκαταστήσετε επίσης εάν δεν το έχετε ήδη στο μηχάνημά σας).

ο Εκμάθηση 5 λεπτών AngularFire είναι ένα εξαιρετικό μέρος για να εξοικειωθείτε με το Firebase. Και αν είσαι 'tinkerer' ή ένας απτικός μαθητής σαν εμένα, μπορεί να θέλεις να τραβήξεις η εφαρμογή μου από το GitHub και ξεκινήστε να παίζετε με τον κωδικό.

Κωδικοποίηση της εφαρμογής πολλαπλών πλατφορμών μας

Για αυτό το σεμινάριο, θα χρησιμοποιήσουμε το δείγμα tabs εφαρμογή που παρέχεται ως μέρος της ιονικής εγκατάστασης ως βάση για την εφαρμογή μας. (Μπορείτε να εκτελέσετε το δείγμα εφαρμογής με την εντολή ionic start myApp tabs.)

Ανοίξτε το δείγμα tabs εφαρμογή στο αγαπημένο σας IDE (χρησιμοποιώ Καταιγίδα Ιστού ) και ας αρχίσουμε να το τροποποιούμε για να δημιουργήσουμε την εφαρμογή συγκάτοικος μας.

Για το παράδειγμα εφαρμογής 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:

Προτού συνδέσουμε τα δεδομένα μας στο Firebase, ας δημιουργήσουμε μια λίστα και να τη συνδέσουμε με έναν πίνακα που ονομάζεται www/templates/tab-dash.html προσθέτοντας τον ακόλουθο κωδικό στο {{expense.label}} {{expense.cost}} Total Spent {{getTotal()}} Add :

Θα πρέπει επίσης να επεκτείνουμε το www/js/controllers.js σε expenses για να συμπεριλάβετε το addExpense πίνακα, καθώς και ένα getTotal μέθοδο και a .controller('DashCtrl', function($scope) { $scope.expenses = [{ by: ‘email’, label: ’test’, cost: 10 }]; $scope.addExpense = function(e) { $scope.expenses.push({ by: 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() Ο πίνακας είναι αυτό που αποθηκεύει τα στοιχεία στη λίστα εξόδων, το expenses Η μέθοδος προσθέτει μια νέα τιμή στο getTotal() πίνακα και το tab-friends.html Η μέθοδος μας δίνει το σύνολο όλων των στοιχείων στον πίνακα.

Ένα παρόμοιο σύνολο αλλαγών πρέπει τώρα να γίνει στο https://.firebaseio.com. Δοκιμάστε να το κάνετε μόνοι σας, αλλά εάν αντιμετωπίσετε προβλήματα ή θέλετε να επαληθεύσετε ότι το έχετε κάνει σωστά, μπορείτε να ανατρέξετε στο η εφαρμογή μου στο GitHub.

Σύνδεση στο Firebase

Θα χρειαστείτε έναν λογαριασμό Firebase. Μπορείτε να εγγραφείτε εδώ για ένα δωρεάν πρόγραμμα 'Hacker Plan' του Firebase.

Μόλις εγγραφείτε, θα λάβετε το δικό σας διεύθυνση URL ρίζας , που θα μοιάζει με www/index.html.

Η ενεργοποίηση του Firebase στην εφαρμογή μας απαιτεί δύο μικρές λειτουργίες στην εφαρμογή μας.

Αρχικά, πρέπει να συμπεριλάβουμε τα σενάρια Firebase στην εφαρμογή 'firebase' της εφαρμογής αρχείο ως εξής:

Στη συνέχεια, πρέπει να προσθέσουμε τη λειτουργική μονάδα Firebase στην εφαρμογή μας προσθέτοντας angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'firebase']) στη λίστα στο AngularJS μας www/js/services.js μονάδα μέτρησης:

Το Firebase είναι πλέον ενεργοποιημένο, όπως και κάθε άλλη μονάδα AngularJS.

ο Εκμάθηση 5 λεπτών AngularFire θα σας διδάξει να δημιουργήσετε αναφορές δεδομένων σε ελεγκτές. Ωστόσο, για την εφαρμογή επίδειξης, αποφάσισα να διατηρήσω αυτές τις αναφορές σε ξεχωριστή υπηρεσία (καθώς αυτό καθιστά πολύ πιο εύκολο να διατηρηθεί και να ενημερωθεί εάν αλλάξει το root URL). Για να δημιουργήσετε αυτήν την υπηρεσία, προσθέστε τα ακόλουθα στο expenses:

Ο παραπάνω κώδικας προσθέτει τρία URL αναφοράς. Ένα για τη ρίζα και δύο για συλλογές που έχουμε ονομάσει expenses και https://.firebaseio.com/expenses .

Η προσθήκη μιας νέας συλλογής στο Firebase γίνεται απλά προσθέτοντας το όνομά της στο τέλος του διεύθυνση URL ρίζας . Έτσι, για να δημιουργήσετε το expenses συλλογή που θα χρειαστούμε, το μόνο που χρειαζόμαστε είναι το εξής:

DashCtrl

Αυτό θα δημιουργήσει το www/js/controllers.js συλλογή, και στη συνέχεια μπορούμε να αρχίσουμε να προσθέτουμε αντικείμενα σε αυτήν.

Εντάξει, τώρα μπορούμε να συνδέσουμε την είσπραξη δαπανών από το Firebase για να αντικαταστήσουμε τη σειρά «εικονικών» εξόδων που δημιουργήσαμε νωρίτερα Αυτό γίνεται τροποποιώντας .controller('DashCtrl', function($scope, fireBaseData, $firebase) { $scope.expenses = $firebase(fireBaseData.refExpenses()).$asArray(); $scope.addExpense = function(e) { $scope.expenses.$add({ by: , 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 ως εξής:

Ένα παρόμοιο σύνολο αλλαγών πρέπει να γίνει στο ionic emulate ios. Σας συνιστώ και πάλι να προσπαθήσετε να το κάνετε μόνοι σας, αλλά εάν αντιμετωπίσετε προβλήματα ή θέλετε να επαληθεύσετε ότι το έχετε κάνει σωστά, μπορείτε να ανατρέξετε στο η εφαρμογή μου στο GitHub.

Για να επαληθεύσετε ότι λειτουργεί, ενώ εκτελείτε την εφαρμογή σε δύο διαφορετικούς πελάτες, προσθέστε ένα νέο κόστος και δείτε ότι εμφανίζεται στη λίστα και στους δύο πελάτες. Εάν λειτουργεί… woo-hoo! Συνδέσατε με επιτυχία την εφαρμογή Ionic με το Firebase!

Μπορείτε να δοκιμάσετε την εφαρμογή πολλαπλών πλατφορμών σε διαφορετικές συσκευές συνδέοντας μια συσκευή στο σύστημά σας και εκτελώντας { 'rules': { '.read': 'auth != null', '.write': 'auth != null' } } ή www/templates/tab-account.html. Ανατρέξτε στην ιωνική τεκμηρίωση για περισσότερες πληροφορίες σχετικά με δοκιμή της εφαρμογής σας .

Διαχείριση λογαριασμού και ασφάλεια με το Firebase

Παρόλο που η βασική λειτουργικότητα λειτουργεί τώρα, ένα σοβαρό πρόβλημα είναι ότι η εφαρμογή μας είναι επί του παρόντος εντελώς ανασφαλής. Όλος ο κόσμος μπορεί να δει τα έξοδά σας, χωρίς να απαιτείται άδεια ή σύνδεση. Αυτό προφανώς πρέπει να αντιμετωπιστεί.

Το Firebase παρέχει ένα ισχυρό αλλά απλό πλαίσιο ελέγχου ταυτότητας χρησιμοποιώντας τους 'κανόνες'. Υπάρχουν πολλά που μπορούν να γίνουν χρησιμοποιώντας τη γλώσσα κανόνων του Firebase. (Αναφέρομαι στο Τεκμηρίωση ασφαλείας του Firebase για περισσότερες λεπτομέρειες.)

Στην περίπτωσή μας, θα γράψουμε έναν πολύ απλό κανόνα για να αποκλείσουμε την πρόσβαση μη εξουσιοδοτημένων χρηστών στα δεδομένα μας. Για να το κάνετε αυτό, ανοίξτε το url root, κάντε κλικ στο 'Security & Rules' στην αριστερή γραμμή ενεργειών, επικολλήστε τον παρακάτω κώδικα στους κανόνες σας και κάντε κλικ στο Save.

Εάν εκτελέσετε την αίτησή σας τώρα, θα παρατηρήσετε ότι δεν υπάρχουν δεδομένα. Μπορείτε ακόμη να προσπαθήσετε να ελέγξετε το αίτημά σας χρησιμοποιώντας εργαλεία προγράμματος περιήγησης και θα πρέπει να δείτε ένα μήνυμα στην κονσόλα σας που να δηλώνει ότι δεν έχετε άδεια να προβάλλετε τα δεδομένα.

Δημιουργία λογαριασμών χρηστών και ενεργοποίηση σύνδεσης

Μπορείτε να κάνετε έλεγχο ταυτότητας των χρηστών σας επιτρέποντάς τους να δημιουργήσουν τον δικό τους συνδυασμό email / κωδικού πρόσβασης ή να χρησιμοποιήσετε οποιοδήποτε από τα υπάρχοντα διαπιστευτήρια σύνδεσης Google, Facebook, Twitter ή Github. Για έλεγχο ταυτότητας email / κωδικού πρόσβασης, το Firebase προσφέρει πλήρες σύνολο μεθόδων API για αλλαγή κωδικού πρόσβασης, επαναφορά κ.λπ. Περισσότερες πληροφορίες σχετικά με έλεγχος ταυτότητας χρησιμοποιώντας το Firebase μπορείτε να βρείτε στον οδηγό Firebase.

Για την εφαρμογή επίδειξης, θα δημιουργήσουμε δύο λογαριασμούς χρηστών μέσω της διεπαφής Firebase. Αυτό μπορεί να γίνει μεταβαίνοντας στη διεύθυνση URL του Firebase root και κάνοντας τα εξής:

1. Κάντε κλικ στο Login & Auth στην αριστερή γραμμή ενεργειών.
2. Επιλέξτε το πλαίσιο ελέγχου για Ενεργοποίηση ελέγχου ταυτότητας μέσω email και κωδικού πρόσβασης.
3. Κάντε κύλιση προς τα κάτω για να βρείτε τη 'Προσθήκη νέας φόρμας λογαριασμού'
4. Προσθέστε τους λογαριασμούς σας χρησιμοποιώντας 'Προσθήκη νέου χρήστη'.

Για να ενεργοποιήσετε τη διεπαφή σύνδεσης για τους χρήστες σας, προσθέστε πρώτα τον ακόλουθο κωδικό στο 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; }; }); σε 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] ']); :

Ένα σημαντικό πράγμα που πρέπει να γνωρίζετε από την άποψη της ασφάλειας είναι ότι Οι συνδέσεις Firebase είναι μόνιμες από προεπιλογή . Επομένως, εάν θέλετε ο χρήστης σας να συνδέεται κάθε φορά που ξεκινά η εφαρμογή, θα πρέπει να τροποποιήσετε ανάλογα τη διαμόρφωση του Firebase. Για να το κάνετε αυτό, απλά μια φορά μετά από μια επιτυχημένη σύνδεση, εκτελέστε τον ακόλουθο κωδικό:

Μπορείτε να το προσθέσετε στον ελεγκτή λογαριασμού μετά την επιτυχή σύνδεση ή να βάλετε ένα σημείο διακοπής μετά την επιτυχή σύνδεση και να το εκτελέσετε στον επιθεωρητή της κονσόλας σας.

Φιλτράρισμα με βάση το χρήστη

Ωστόσο, η εφαρμογή πολλαπλών πλατφορμών για κινητά δεν έχει ακόμη ένα σημαντικό χαρακτηριστικό. Θέλουμε να διακρίνουμε τα έξοδά σας από αυτά του συγκατοίκου σας. Τώρα που δημιουργήσαμε δύο λογαριασμούς, απλώς πρέπει να φιλτράρουμε τα δεδομένα στις προβολές μας.

Πρέπει πρώτα να τροποποιήσουμε το .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 προκειμένου να (α) εισέλθουν τα δεδομένα για τον τρέχοντα χρήστη στο εύρος $ και (β) να εξοικονομήσουν τυχόν πρόσθετα έξοδα για τον τρέχοντα χρήστη:

Στη συνέχεια πρέπει να προσθέσουμε ένα φίλτρο στο 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 για να προσθέσετε αυτό το φίλτρο:

Στη συνέχεια τροποποιήστε

|_+_|

|_+_|