Πώς να δημιουργήσετε μια εφαρμογή Firebase Angular με auth και μια βάση δεδομένων σε πραγματικό χρόνο

Για πολύ καιρό, έψαχνα μια καλή εφαρμογή ιστού χαρτοφυλακίου που μπορεί να με βοηθήσει να παρακολουθώ εύκολα τα κέρδη / τις απώλειές μου στο Cryptocurrency έως ότου αποφασίσω να το αναπτύξω μόνος μου με τη βοήθεια του Firebase και του Angular ! Ναι, είναι τόσο εύκολο, επιτρέψτε μου να σας εξηγήσω γιατί.

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

Έχω καλύψει το bootstrapping της εφαρμογής Angular , χρησιμοποιώντας το Ignite UI CLI, σε άλλη ανάρτηση ιστολογίου.

Αυτό το άρθρο στοχεύει:

  • Περάστε από την εγκατάσταση και τη ρύθμιση του Firebase.
  • Ρύθμιση ελέγχου ταυτότητας Firebase.
  • Εφαρμογή αποθήκευσης και συγχρονισμού βάσης δεδομένων σε πραγματικό χρόνο.
  • Προσθήκη υπηρεσιών παρατηρήσιμων δεδομένων.
  • Οπτικοποιήστε τα δεδομένα σε μια γωνιακή εφαρμογή.

Διαμορφώστε έναν λογαριασμό Firebase

Θέλω να ακολουθήσω τα βήματα που κάναμε για τη δημιουργία του λογαριασμού Portfolio Firebase. Τα έργα δημιουργούνται από την κονσόλα Firebase επιλέγοντας Προσθήκη νέου έργου. Μόλις υποβληθεί η φόρμα Δημιουργίας έργου , θα δείτε την παρακάτω Επισκόπηση Έργου

Στην ενότητα Επισκόπηση έργου, μπορείτε να βρείτε όλα τα εργαλεία ανάπτυξης που χρησιμοποιούνται για έλεγχο ταυτότητας και αποθήκευση δεδομένων. Εδώ βρίσκεται επίσης η διαμόρφωση που χρησιμοποιείται στο Portfolio Web App. Αυτή η διαμόρφωση δημιουργείται πατώντας Προσθήκη Firebase στην εφαρμογή ιστού σας και αργότερα προστίθεται στο αρχείο app.module.ts της εφαρμογής .

Ας επιστρέψουμε στην πλευρική γραμμή στα αριστερά και επιλέξτε Έλεγχος ταυτότητας . Από εδώ έχουμε πρόσβαση στις μεθόδους σύνδεσης που χρειαζόμαστε στην εφαρμογή. Μεταβείτε στην καρτέλα Σύνδεση, εκεί μπορείτε να δείτε τους παρόχους που είναι ενεργοποιημένοι και χρησιμοποιούνται στην εφαρμογή Χαρτοφυλάκιο - πάροχος Google, Facebook και Email / Password .

Οι πάροχοι σύνδεσης επιτρέπουν στους χρήστες να κάνουν έλεγχο ταυτότητας με το Firebase χρησιμοποιώντας τους λογαριασμούς τους στο Facebook και στο Google ενσωματώνοντας τις συνδέσεις τους στην εφαρμογή. Όσον αφορά τον πάροχο email / κωδικού πρόσβασης, αντιπροσωπεύει έναν απλό μηχανισμό ελέγχου ταυτότητας χρησιμοποιώντας μόνο email και κωδικό πρόσβασης. Το Firebase Auth παρέχει ενσωματωμένους κανόνες επικύρωσης που επαληθεύουν τις καταχωρίσεις των χρηστών, επομένως δεν χρειάζεται να διαμορφώσουμε κάτι επιπλέον εδώ.

Το «πιο δύσκολο» μέρος εδώ ήταν η διαμόρφωση του παρόχου Facebook επειδή χρειαζόμασταν να έχουμε μια εφαρμογή Facebook για τον έλεγχο ταυτότητας της σύνδεσης. Δημιουργήσαμε μια εφαρμογή FB από το Facebook Developers που μας παρείχε το αναγνωριστικό εφαρμογής και το App Secret που ζητήθηκε από το Firebase.

Τόσο το αναγνωριστικό API όσο και το μυστικό πρέπει να συμπληρωθούν κατά την ενεργοποίηση του παρόχου Facebook. Όσο για το URI ανακατεύθυνσης Auth (από το παράθυρο του παροχέα) θα πρέπει να επικολληθεί κάτω Facebook/Facebook Login/Products section/Valid Auth Redirect URIs.

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

Σε αυτήν την προβολή, μπορούμε να βρούμε πληροφορίες σχετικά με τα στοιχεία δεδομένων της εφαρμογής και να γράψουμε / διαβάσουμε κανόνες ασφαλείας. Ακολουθούν οι κανόνες που χρησιμοποιούνται από την εφαρμογή Χαρτοφυλακίου:

{ "rules": { "items": { "$uid": { ".read": "$uid === auth.uid", ".write": "$uid === auth.uid" } } }}
Αυτή η διαμόρφωση του Κανόνα ασφαλείας θα επιτρέπει μόνο στους πιστοποιημένους χρήστες να μπορούν να διαβάζουν και να γράφουν στη βάση δεδομένων μας. Εάν θέλετε να μάθετε πώς να ορίζετε πιο σύνθετους κανόνες, σας συνιστούμε ανεπιφύλακτα να δείτε την ενότητα Επίσημη ασφάλεια και κανόνες.

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

Εάν δεν είχαμε δημιουργήσει ήδη ένα έργο, θα συνιστούσα να ξεκινήσω με την εγκατάσταση του firebase CLI, το οποίο παρέχει μια ποικιλία εργαλείων για τη διαχείριση και την ανάπτυξη έργων Firebase. ΑΛΛΑ έχουμε κάνει εκκίνηση του Portfolio Angular Project με το Ignite UI CLI, οπότε χρειαζόμασταν να εγκαταστήσουμε το AngularFire και το Firebase από τις npm . Χρειαζόμαστε και τα δύο πακέτα για να επικοινωνήσουμε με το Firebase. Το AngularFire είναι η επίσημη βιβλιοθήκη για την ανάπτυξη του Firebase και του Angular.

npm install firebase @angular/fire --save

Όλες οι μονάδες AngularFire που χρησιμοποιούνται στην εφαρμογή προστίθενται στο app.module.tsαρχείο:

  • Το FirestoreModule είναι απαραίτητο για λειτουργίες βάσης δεδομένων, όπως εργασία με συλλογές, ερωτήματα και υπηρεσίες για ροή δεδομένων και χειρισμό.
  • Το FireAuthModule είναιαπαιτείται για δυνατότητες ελέγχου ταυτότητας, όπως παρακολούθηση της κατάστασης ελέγχου ταυτότητας, παρόχων σύνδεσης και ασφάλειας.
  • Το FireDatabaseModule μας επιτρέπει να συνεργαζόμαστε με βάσεις δεδομένων Realtime. Είναι πολύ αποτελεσματικό για εφαρμογές για κινητά και ιστούς που απαιτούν συγχρονισμένες καταστάσεις σε πελάτες σε πραγματικό χρόνο.
Η μόνη κοινή λειτουργική μονάδα που δεν χρησιμοποιείται στην εφαρμογή Portfolio είναι το AngularFireStorageModule. Μπορείτε να χρησιμοποιήσετε αυτήν την ενότητα για να αποθηκεύσετε και να εξυπηρετήσετε γρήγορα και εύκολα περιεχόμενο που δημιουργείται από χρήστες, όπως φωτογραφίες και βίντεο, καθώς και παρακολούθηση μεταφορτώσεων και μεταδεδομένων που σχετίζονται με αρχεία.

Τώρα που γνωρίζουμε πώς διαμορφώθηκε αρχικά η εφαρμογή, μπορούμε να ρίξουμε μια ματιά στις άλλες λειτουργίες του Firebase που χρησιμοποιούνται.

Αυθεντικοποίηση

ΧρησιμοποιούμεAngularFireAuth υπηρεσίαγια παρακολούθηση της κατάστασης ελέγχου ταυτότητας της εφαρμογής. AngularFireAuth.authεπιστρέφει μια αρχικοποιημένη firebase.auth.Authπαρουσία, επιτρέποντάς μας να συνδέουμε και να αποσυνδέουμε τους χρήστες. Η εφαρμογή παρουσιάζει δυνατότητες σύνδεσης χρησιμοποιώντας τρεις παρόχους: Facebook, Google και Email.

Η παρουσία χρήστη του Firebase διατηρείται για κάθε πάροχο που είναι συνδεδεμένος με τον χρήστη και όταν ένας χρήστης είναι εγγεγραμμένος ή συνδέεται, αυτός ο χρήστης γίνεται ο τρέχων χρήστης της παρουσίας Auth. Η παρουσία παραμένει στην κατάσταση του χρήστη, έτσι ώστε η ανανέωση της σελίδας ή η επανεκκίνηση της εφαρμογής να μην χάνει τις πληροφορίες του χρήστη.

Χρησιμοποιούμε signInWithRedirectμέθοδο τόσο για παροχείς Facebook όσο και για Google, προκειμένου να συνδεθούμε μεταβαίνοντας στη σελίδα σύνδεσης. Η δημιουργία λογαριασμού βάσει κωδικού χρησιμοποιείται για τον πάροχο σύνδεσης μέσω ηλεκτρονικού ταχυδρομείου,createUserWithEmailAndPasswordκαι signInWithEmailAndPasswordείναι οι μέθοδοι που είναι υπεύθυνες για τη δημιουργία και τη σύνδεση λογαριασμού χρήστη.

Προτείνω τα επίσημα έγγραφα του Firebase για πιο λεπτομερείς πληροφορίες σχετικά με τον έλεγχο ταυτότητας και τον κύκλο ζωής των χρηστών.

Ενέργειες βάσης δεδομένων σε πραγματικό χρόνο

Το Firebase προσφέρει δύο λύσεις βάσης δεδομένων με βάση το cloud, προσβάσιμες από πελάτες, και χρησιμοποιούμε την αρχική βάση δεδομένων του Firebase - Realtime. Δείτε τις διαφορές μεταξύ Realtime και Cloud firestore στην επίσημη σελίδα τεκμηρίωσης.

AngularFireDatabaseκαι AngularFireListΟι υπηρεσίες χρησιμοποιούνται στην εφαρμογή Portfolio για ανάκτηση, αποθήκευση και αφαίρεση δεδομένων εύκολα.

AngularFireDatabaseμπορεί να εγχυθεί μέσω του κατασκευαστή ενός εξαρτήματος ή @Injectable()υπηρεσία. Στην περίπτωσή μας χρησιμοποιούμε τη δεύτερη προσέγγιση:

Τα δεδομένα ανακτώνται μέσω του AngularFireDatabaseυπηρεσία, η οποία συμπληρώνει Παρατηρήσιμη λίστα BlockItems.AngularFireπαρέχει μεθόδους όπως αυτές snapshotChanges()που επιστρέφουν Παρατηρήσιμα δεδομένα ως συγχρονισμένο πίνακα. Είναι πολύ βολικό εάν θέλετε να περιορίσετε τις ενέργειες συμβάντων, όπως προσθήκη , αλλαγή , κατάργηση και μετακίνηση . Από προεπιλογή, ακούει και τα τέσσερα, ωστόσο, μπορεί να σας ενδιαφέρει μόνο ένα από αυτά τα συμβάντα και μπορείτε να καθορίσετε ποια από αυτά θέλετε να χρησιμοποιήσετε. Στην εφαρμογή μας, έχουμε εγγραφεί σε όλα αυτά.

Προσθέτοντας ένα νέο στοιχείο, την ενημέρωση ενός υπάρχοντος, ή τη διαγραφή της από τον κατάλογο επιτυγχάνεται με τη χρήση push(), update()και remove()μεθόδους.

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

Παρατηρήσιμα

Υπηρεσία CoinItem

Η υπηρεσία Cryptocompare API διαχειρίζεται δεδομένα ασύγχρονου και εκπέμπει πολλές τιμές ταυτόχρονα με Observables. Χρησιμοποιούμε HttpClient get()μέθοδο για να ζητήσουμε τα δεδομένα από τον πόρο και να εγγραφούμε σε αυτόν, προκειμένου να τα μετατρέψουμε σε Observable Array ofCoinItemαντικείμενα, τα οποία θα χρησιμοποιηθούν αργότερα από μας igxGrid, igxListκαι igxCardτα συστατικά.

Το Rx.js μας επιτρέπει να αποθηκεύσουμε προσωρινά το αποτέλεσμα του αιτήματος HTTP. Ανακτούμε αρχικά αυτά τα δεδομένα, τα αποθηκεύουμε προσωρινά και χρησιμοποιούμε την προσωρινά αποθηκευμένη έκδοση κατά τη διάρκεια της εφαρμογής. Ο συνδυασμός publishReply(1, 300000)και refCount()κάνει τα εξής.

publishReply (1, 300000) λέει στο Rx να αποθηκεύσει προσωρινά την τελευταία εκπομπή και να παραμείνει έγκυρη για 5 λεπτά. Μετά από αυτό το χρονικό διάστημα, θα ακυρώσει την προσωρινή μνήμη. Το refCount () λέει στο Rx να κρατήσει το Observable ζωντανό όσο υπάρχουν συνδρομητές.

Τώρα, αφού εγγραφούμε στη λίστα νομισμάτων, το αποτέλεσμα θα αποθηκευτεί στην κρυφή μνήμη και δεν θα χρειαστεί να υποβάλουμε άλλο αίτημα HTTP

Υπηρεσία BlockItem

Τα δεδομένα χαρτοφυλακίου Crypto Coins διασφαλίζονται με getItemsList()μέθοδο που επιστρέφει παρατηρήσιμη BlockItemσυστοιχίαστο οποίο igxGridέχει εγγραφεί το στοιχείο. Μόνο πιστοποιημένοι χρήστες μπορούν να χρησιμοποιήσουν αυτήν την υπηρεσία λόγω του AngularFireListότι χειριζόμαστε που σχετίζεται με μοναδικά αναγνωριστικά χρήστη.

Οπτικοποιήστε τα δεδομένα

Για την οπτικοποίηση, χρησιμοποιούμε στοιχεία UI από το Ignite UI για Angularlibrary. Αυτά τα στοιχεία είναι υπεύθυνα για το χειρισμό δεδομένων, παρέχοντας παράλληλα πρόσβαση σε προσαρμοσμένα πρότυπα και ενημερώσεις σε πραγματικό χρόνο, με διαισθητικό API, χρησιμοποιώντας κωδικό ελάχιστου ποσού.

igxGrid

Η [data]δέσμευση ιδιοτήτων πλέγματος χρησιμοποιείται για να περάσει ο BlockItemπίνακας που επιστρέφεται . Καθε mn> represents a field of the object and it is used to define features like editing and sorting. The columns are templatable, and with the help of Angular pipes, we can declare display-value transformations in them easily. We use a decimal pipe to change the minimum number of integer digits before the decimal point.

The component provides straightforward event handlers and API for CRUD operations. Handlers like updateRow and deleteRow are implementing additional logic like AngularFireList manipulation and coin item restore logic with the igxSnackbar.

igxCard

Cards are used to provide general information of Crypto coins using CSS Flexbox layout. These Card components can be filtered with the igxFilter directive, which can be used to filter different data sources. igxFilter can be applied as a pipe or as a directive.

igxFinancialChart

The Chart offers multiple ways in which the data can be visualized and interpreted, once it is returned by the service. There are several display modes for price and volume, and in our case we use chartType=”candle”.

The financial chart component analyzes and selects data columns automatically:

- Date/Time column to use for x-axis

- Open, High, Low, Close, Volume columns or the first 5 numeric columns for y-axis

Theming

IgniteUI for Angular bases its component designs on the Material Design Principles and with just a few lines of code, we can easily change the colors, sizes, typography, and overall look and feel of our components.

Now that we’ve provided all base definitions needed for the igx-theme, and have configured the igx-dark-theme mixin, we need to only apply .light-theme and .dark-theme CSS classes somewhere at DOM element root level and toggle it on button click.

Result

Wrapping up

Everything is possible with the right tooling. We have created a Portfolio Web application using the full power of the Angular Framework, Firebase Authentication services, and Cloud Database store/synchronization.

You can find the GitHub repository and the actual portfolio application here.

Feel free to share in the comments below any questions that you have, suggestions as to what can be improved or changed in the app, or any problems that you’ve encountered while configuring your Firebase account or application.