= Φιλοξενήστε έναν δυναμικό ιστότοπο στο Google Firebase χρησιμοποιώντας το Node.js και το Cloud Firestore DB =
Tushar Kapoor: (httpswww.tusharck.com/)
URL Git επίδειξης: httpsgithub.com/tusharck/firebase-demo
= Γιατί το Firebase Hosting; =
Το Firebase είναι μια ολοκληρωμένη πλατφόρμα εφαρμογών που βασίζεται στην υποδομή της Google, επομένως παρέχει έναν ασφαλή, γρήγορο, δωρεάν (επιλογές επί πληρωμή διαθέσιμες και για πρόσθετους πόρους) και εύκολο τρόπο φιλοξενίας του περιεχομένου σας στο εφαρμογές ιστού ή κινητών
== Βασικά χαρακτηριστικά και πλεονεκτήματα του δωρεάν επιπέδου: ==
- Δίνει δωρεάν προσαρμοσμένο τομέα&
SSL(Το SSL παρέχει ένα τυπικό επίπεδο ασφαλείας για συνδέσεις https
- Cloud Firestore: Μια ευέλικτη και επεκτάσιμη βάση δεδομένων για συγχρονισμό δεδομένων σε πραγματικό χρόνο μεταξύ των εφαρμογών πελατών
- Άλλες λειτουργίες: Cloud Functions, Cloud Messaging (FCM), Crashlytics, Dynamic Links, Hosting, ML Kit, Storage, Performance Monitoring, Predictions and Test Lab (Η λειτουργικότητα και οι πόροι αυτών των προϊόντων μπορούν να αυξηθούν αγοράζοντας ένα πρόγραμμα επί πληρωμή, αλλά οι δωρεάν υπηρεσίες επιπέδου είναι πολύ καλές. Για να δείτε τα σχέδια, ελέγξτε την τιμή Firebase)
- Αυτόματη κλιμάκωση πόρων
= Βήματα για τη φιλοξενία του δυναμικού ιστότοπού σας στο Firebase =
== Απαιτήσεις ==
**1. Λογαριασμός Google**Εάν δεν έχετε Λογαριασμό Google, πρέπει να εγγραφείτε για έναν. Μπορείτε να το κάνετε μεταβαίνοντας στη διεύθυνση httpsaccounts.google.com/SignUp. **2. Node.js και npm** Mac/WindowsΜπορείτε να πραγματοποιήσετε λήψη του προγράμματος εγκατάστασης από τη διεύθυνση httpsnodejs.org/en/download/. Linux
Ακολουθήστε τα παρακάτω βήματα για να εγκαταστήσετε το Node.js:
1. Ανοίξτε ένα τερματικό
2. Εκτελέστε τις ακόλουθες εντολές:
sudo apt-get install curlcurl -sL httpsdeb.nodesource.com/
setup_13.x| sudo bash -sudo apt install nodejs **Έχω χρησιμοποιήσει Σημείωση: ** **
setup_13.xεπειδή την εποχή του σεμιναρίου ήταν η τελευταία έκδοση
**13**μπορείτε να ελέγξετε την τελευταία έκδοση μεταβαίνοντας στη διεύθυνση httpsnodejs.org/en/
Για να ελέγξετε εάν το Node.js και το npm έχουν εγκατασταθεί με επιτυχία, εκτελέστε τις ακόλουθες εντολές, οι οποίες θα εξάγουν την εγκατεστημένη έκδοση:
κόμβος -v
npm -v
**3. Firebase-CLI (Διασύνδεση γραμμής εντολών) Αυτά είναι τα εργαλεία για τη διαχείριση, την προβολή και την ανάπτυξη των έργων Firebase
npm install -g firebase-tools
= Βήμα 1: Δημιουργία έργου Firebase =
- Μεταβείτε στη διεύθυνση httpsfirebase.google.com και
Υπογραφή από την επάνω δεξιά γωνία
- Κάντε κλικ στο
Μεταβείτε στην κονσόλα, από την επάνω δεξιά γωνία
- Στη συνέχεια κάντε κλικ στο
Δημιουργήστε έργο, όπως φαίνεται παρακάτω
4. Το επόμενο πράγμα είναι να εισαγάγετε το όνομα του έργου σας και να πατήσετε συνέχεια
5. Πατήστε συνέχεια για να ενεργοποιήσετε το Google Analytics για το έργο σας Firebase (αν δεν το θέλετε, επιλέξτε για να το απενεργοποιήσετε)
6. Επιλέξτε την πλησιέστερη τοποθεσία για το Google Analytics
7. Κάντε κλικ στο
**Δημιουργήστε έργο και περιμένετε να φορτώσει. Τότε θα δείτε κάτι σαν παρακάτω
= Βήμα 2: Αρχικοποίηση σύνδεσης Firebase =
- Ανοίξτε μια γραμμή εντολών/τερματικό, δημιουργήστε και μεταβείτε σε έναν νέο κατάλογο
mkdir my-firebase-projectcd my-firebase-project
2. Για να φιλοξενήσετε έναν ιστότοπο στο Firebase, συνδεθείτε στο firebase χρησιμοποιώντας την ακόλουθη εντολή. Αφού εκτελέσετε την εντολή θα ανοίξει ένα παράθυρο του προγράμματος περιήγησης που σας ζητά να συνδεθείτε στο firebase χρησιμοποιώντας τα διαπιστευτήριά σας Google. Εισαγάγετε τα διαπιστευτήρια εκεί και το Firebase θα συνδεθεί στο σύστημά σας
σύνδεση στο firebase
= Βήμα 3: Εκκινήστε το έργο Firebase στο σύστημά σας =
- Τώρα πρέπει να αρχικοποιήσουμε το έργο που δημιουργήσαμε στην κονσόλα Firebase στο σύστημα. Για να το κάνετε εκτελέστε την παρακάτω εντολή
firebase init
2. Πατήστε το πλήκτρο κάτω και μετά επιλέξτε
**δύο πράγματα **πατώντας το πλήκτρο **διαστήματος
- Λειτουργίες
- Φιλοξενία
Επειτα
**πατήστε Enter** για να συνεχίσετε
3. Στη συνέχεια επιλέξτε
μετά πατήστε enter
**Χρησιμοποιήστε ένα υπάρχον έργο**
4. Πατήστε enter στο
**my-firebase-project** **ή το όνομα του έργου που χρησιμοποιήσατε ή το όνομα του έργου που χρησιμοποιήσατε
5. Επιλέξτε
**Javascript** και πατήστε enter
6. Μπορείτε να πείτε
**Όχι** έως Θέλετε να χρησιμοποιήσετε το ESLint για να εντοπίσετε πιθανά σφάλματα και να επιβάλετε το στυλ;
7. Τύπος
**Ναι** για εγκατάσταση των εξαρτήσεων με npm
8. Εδώ πρέπει να κάνουμε δύο εργασίες:
- Πρέπει να επιλέξετε τον κατάλογο στον οποίο θα βρίσκονται ο ιστότοπος και τα περιουσιακά σας στοιχεία. Από προεπιλογή είναι
pubicy μπορείτε να πατήσετε enter για να συνεχίσετε ή μπορείτε να αλλάξετε στο επιθυμητό όνομα καταλόγου
- Τύποι
Ναι για τη σελίδα μιας εφαρμογής, ώστε οι δυναμικές διευθύνσεις URL σας να μπορούν να ανακατευθυνθούν στον σωστό προορισμό τους
9. Δοκιμάστε την εφαρμογή firebase στο τοπικό σας σύστημα εκτελώντας την ακόλουθη εντολή. Μετά πηγαίνετε στο
**httplocalhost:5000** για να δείτε τη βασική ιστοσελίδα σας σε λειτουργία
firebase εξυπηρετεί --μόνο φιλοξενία,λειτουργίες
Θα πρέπει να δείτε κάτι σαν αυτό παρακάτω αφού ανοίξετε το
**httplocalhost:5000** URL
10. Κλείστε τον διακομιστή από το τερματικό
= Βήμα 4: Εγκατάσταση πακέτων και δημιουργία καταλόγου προβολών για δυναμικό ιστότοπο =
- Εδώ θα μεταβούμε μέσα στον κατάλογο συναρτήσεων για να το χρησιμοποιήσουμε
λειτουργίες cd
**2. Εγκαταστήστε το Express**Είναι ένα ελάχιστο και ευέλικτο πλαίσιο εφαρμογής web Node.js
npm εκφράζω -- αποθήκευση
**3. Εγκατάσταση Handle Bars**Είναι μια μηχανή προτύπων για το Node.js που χρησιμοποιείται για τη δυναμική πρόσοψη του ιστότοπου
npm i τιμόνι --save
**4. Εγκατάσταση ενοποίησης**
npm ενοποιώ --save
5. Δημιουργήστε ένα φάκελο με το όνομα
**προβολές** μέσα στο φάκελο **functions** στον οποίο θα αποθηκεύσουμε όλο τον κώδικα του frontend
mkdir
προβολές
6. Επιστρέψτε στον κύριο κατάλογο εκτελώντας την ακόλουθη εντολή:
cd .
= Βήμα 5: Ρύθμιση του Firestore (βάση δεδομένων Cloud) =
== Διαμόρφωση βάσης δεδομένων ==
- Μεταβείτε στη διεύθυνση httpsconsole.firebase.google.com/
- Επιλέξτε το έργο σας
- Επιλέξτε
Βάση δεδομένων από το παράθυρο στα αριστερά
4. Κάντε κλικ στο
**Δημιουργία βάσης δεδομένων**
5. Επιλέξτε Start in test mode γιατί διαφορετικά δεν θα έχετε πρόσβαση στη βάση δεδομένων από το σύστημά σας. Θα αλλάξουμε αυτήν τη ρύθμιση μόλις ολοκληρώσουμε την ανάπτυξη του ιστότοπου
Στη συνέχεια κάντε κλικ
**Επόμενο** αφού το κάνετε
6. Επιλέξτε τη θέση του Firestore DB σας
**Αφού ορίσετε αυτήν την τοποθεσία, δεν μπορείτε να την αλλάξετε αργότερα. Σημείωση: **
== Δημιουργία Δεδομένων ==
- Κάντε κλικ στην έναρξη συλλογής
2. Εισαγάγετε το
**Αναγνωριστικό συλλογής που μπορείτε να δοκιμάσετε προς το παρόν
3. Εισαγάγετε τα δείγματα δεδομένων. Εισαγω
**sample_doc **ως το **αναγνωριστικό εγγράφου. **Εισαγάγετε **Επικεφαλίδα** μέσα στο πεδίο **. Μου αρέσει το Cloud** μέσα στην **Τιμή και μετά κάντε κλικ στο **Αποθήκευση**
= Βήμα 6: Δημιουργία του δυναμικού περιεχομένου του ιστότοπου =
Θα χωρίσουμε το τμήμα σε δύο μέρη, στο πρώτο μέρος, θα δούμε πώς να ανακτήσουμε τα δεδομένα από το Firestore και να τα χρησιμοποιήσουμε στον ιστότοπο. Στο δεύτερο τμήμα, θα δούμε πώς να υποβάλουμε τα δεδομένα της φόρμας
**Πρώτα, θα κατεβάσουμε τα διαπιστευτήρια για πρόσβαση στο Firestore**
2. Κάντε κλικ στο
**Ρυθμίσεις** από το αριστερό παράθυρο και μεταβείτε στις **Ρυθμίσεις έργου**
3. Πηγαίνετε στο
**Λογαριασμοί υπηρεσίας** και κάντε κλικ στο **Δημιουργία νέου ιδιωτικού κλειδιού
4. Κάντε κλικ στο
**Δημιουργία κλειδιού Θα εμφανιστεί ένα αναδυόμενο παράθυρο για λήψη του κλειδιού. Αποθηκεύστε το κλειδί μέσα στο φάκελο **λειτουργίες** του ιστότοπού σας
== Ανάκτηση από το Firestore ==
- Ανοιξε
index.jsin μέσα στο φάκελο functions
2. Πρέπει να ορίσουμε μερικές από τις βιβλιοθήκες που θέλουμε να χρησιμοποιήσουμε στην εφαρμογή μας. Αυτές είναι οι ίδιες βιβλιοθήκες που εγκαταστήσαμε νωρίτερα
συναρτήσεις const = απαιτούν('firebase-functionsconst express = απαίτηση('μηχανές expressconst = απαιτούν('consolidatevar hbs = απαιτούν('handlebarsconst admin = απαιτούν('firebase-admin
3. Εδώ ορίζουμε μερικά πράγματα:
- Εκκινήστε την εφαρμογή χρησιμοποιώντας express
- Θα ρυθμίσουμε τον κινητήρα μας ως τιμόνι
- Στη συνέχεια θα πούμε στο express ότι ο κώδικας της διεπαφής μας θα βρίσκεται μέσα στο φάκελο προβολών
const app = expressapp.engine('hbs',engines.handlebars);app.set('viewsviewsapp.set('view enginehbs
4. Εξουσιοδοτήστε την αίτησή σας για πρόσβαση στο Firestore DB
*Σημείωση:*
1. Αλλαγή
**YOUR_SDK_NAMEjson με το αρχείο που κατεβάσατε για **διαπιστευτήρια πρόσβασης στο Firestore2. Αλλάξτε τη διεύθυνση URL της βάσης δεδομένων στη διεύθυνση URL της βάσης δεδομένων σας. Για να δείτε τη διεύθυνση URL μπορείτε να**Ρυθμίσεις >Λογαριασμός υπηρεσίας**
var serviceAccount = απαιτείται
YOUR_SDK_NAME.jsonadmin.initializeApp({credential: admin.credential.cert(serviceAccount), databaseURL: "httpsmyfirebaseproject-bx54dasx3.firebaseio.com
5. Λειτουργία ανάκτησης δεδομένων από το Firestore
- Το αναγνωριστικό συλλογής είναι
δείγμα
- Το αναγνωριστικό εγγράφου είναι
δείγμα_έγγραφο
Ορίσαμε τα παραπάνω κατά την εισαγωγή των δειγματοληπτικών δεδομένων
async συνάρτηση getFirestoreconst firestore_con = αναμονή admin.firestoreconst writeResult = firestore_con.collection('sampledoc('sample_docgetthen(doc =>{
if (!doc.exists) { console.log('Δεν υπάρχει τέτοιο έγγραφο }
else {return doc.data
.catch(err =>{ console.log('Σφάλμα λήψης εγγράφου', erreturn writeResult
}
**Χρησιμοποιούμε Σημείωση: ** **async**επειδή πρέπει να περιμένουμε να ολοκληρωθεί η λειτουργία υπόσχεσης μεταξύ της Βάσης Δεδομένων και του ιστότοπού μας
6. Δημιουργήστε τη διαδρομή και στείλτε το αποτέλεσμα στο μπροστινό μέρος
app.getasync (αίτημα, απάντηση) var db_result = αναμονή getFirestoreresponse.render('indexdb_resultexports.app = functions.https.onRequest(app);
7. Δημιουργία
**index.hbs** μέσα στο φάκελο **προβολές**. Το hbs είναι ένα αρχείο χειρολαβής Σημείωση: **
8. Γράψτε αυτόν τον βασικό κώδικα HTML μέσα
**index.hbs** για να δείτε το αποτέλεσμα που ανακτήθηκε
Tushar Chand Kapoor
