= Hos tapak web dinamik di Google Firebase menggunakan Node.js dan Cloud Firestore DB =
Tushar Kapoor: (httpswww.tusharck.com/)
URL Git Demo: httpsgithub.com/tusharck/firebase-demo
= Mengapa Firebase Hosting? =
Firebase ialah platform apl komprehensif yang dibina di atas infrastruktur Google, oleh itu ia menyediakan cara yang selamat, pantas, percuma (pilihan berbayar juga tersedia untuk sumber tambahan) dan cara mudah untuk mengehoskan kandungan anda di web atau aplikasi mudah alih
== Ciri Utama dan Faedah peringkat percuma: ==
- Ia memberikan domain Tersuai percuma&
SSL(SSL menyediakan lapisan keselamatan standard untuk sambungan https
- Cloud Firestore: Pangkalan data yang fleksibel dan berskala untuk penyegerakan data masa nyata merentas apl pelanggan
- Ciri Lain: Fungsi Awan, Pemesejan Awan (FCM), Crashlytics, Pautan Dinamik, Pengehosan, Kit ML, Storan, Pemantauan Prestasi, Ramalan dan Makmal Ujian (Kefungsian dan sumber produk ini boleh ditingkatkan dengan membeli pelan berbayar, tetapi perkhidmatan peringkat percuma sangat bagus. Untuk melihat rancangan, semak Harga Firebase)
- Skala sumber automatik
= Langkah untuk mengehos tapak web dinamik anda di Firebase =
== Keperluan ==
**1. Akaun Google**Jika anda tidak mempunyai akaun Google, anda perlu mendaftar untuk mendapatkannya. Anda boleh berbuat demikian dengan pergi ke httpsaccounts.google.com/SignUp. **2. Node.js dan npm** Mac/WindowsAnda boleh memuat turun pemasang daripada httpsnodejs.org/en/download/. Linux
Ikuti langkah di bawah untuk memasang Node.js:
1. Buka terminal
2. Jalankan arahan berikut:
sudo apt-get install curlcurl -sL httpsdeb.nodesource.com/
setup_13.x| sudo bash -sudo apt install nodejs **Saya telah menggunakan Nota: ** **
setup_13.xkerana pada masa tutorial versi terkini adalah
**13**anda boleh menyemak keluaran terkini dengan pergi ke httpsnodejs.org/en/
Untuk menyemak sama ada Node.js dan npm berjaya dipasang, jalankan arahan berikut, yang akan mengeluarkan versi yang dipasang:
nod -v
npm -v
**3. Firebase-CLI (Antaramuka Talian PerintahIni ialah alatan untuk mengurus, melihat dan menggunakan projek Firebase
npm install -g firebase-tools
= Langkah 1: Buat projek Firebase =
- Pergi ke httpsfirebase.google.com dan
Log Masuk Dari sudut kanan atas
- Klik pada
Pergi ke konsol, dari penjuru kanan sebelah atas
- Kemudian klik pada
Buat projek, seperti yang ditunjukkan di bawah
4. Perkara seterusnya ialah masukkan nama projek anda, dan tekan teruskan
5. Tekan teruskan untuk mendayakan Google Analitis untuk projek Firebase anda (jika anda tidak mahukannya, semak untuk melumpuhkan)
6. Pilih lokasi terdekat untuk Google Analitis
7. Klik pada
**Buat Projek dan tunggu ia dimuatkan. Kemudian anda akan melihat sesuatu seperti di bawah
= Langkah 2: Mulakan log masuk Firebase =
- Buka baris perintah/terminal kemudian buat dan pergi ke direktori baharu
mkdir my-firebase-projectcd my-firebase-project
2. Untuk mengehoskan tapak web di Firebase log masuk ke firebase menggunakan arahan berikut. Selepas anda menjalankan arahan tetingkap penyemak imbas akan dibuka meminta anda log masuk ke firebase menggunakan bukti kelayakan Google anda. Masukkan bukti kelayakan di sana dan Firebase akan log masuk ke sistem anda
log masuk firebase
= Langkah 3: Mulakan projek Firebase ke dalam sistem anda =
- Sekarang kita perlu memulakan projek yang kita buat pada konsol Firebase ke dalam sistem. Untuk melakukan jalankan arahan di bawah
firebase init
2. Tekan kekunci bawah kemudian pilih
**dua perkara **dengan menekan **kekunci bar ruang
- Fungsi
- Pengehosan
Kemudian
**tekan Enter** untuk meneruskan
3. Kemudian pilih
kemudian tekan enter
**Gunakan projek sedia ada**
4. Tekan enter pada
**my-firebase-project** **atau nama projek yang anda gunakanatau nama projek yang anda gunakan
5. Pilih
**Javascript** dan tekan enter
6. Anda boleh katakan
**Tidak** untuk Adakah anda mahu menggunakan ESLint untuk menangkap kemungkinan pepijat dan menguatkuasakan gaya?
7. Jenis
**Ya** untuk memasang kebergantungan dengan npm
8. Di sini kita perlu melakukan dua tugas:
- Anda perlu memilih direktori di mana tapak web dan aset anda akan berada. Secara lalai ia adalah
pubicanda boleh menekan enter untuk meneruskan atau anda boleh menukar kepada nama direktori yang anda inginkan
- Jenis
Ya untuk halaman apl tunggal supaya URL dinamik anda boleh diubah hala ke destinasi yang betul
9. Uji apl firebase pada sistem setempat anda dengan menjalankan arahan berikut. Kemudian pergi ke
**httplocalhost:5000** untuk melihat tapak web asas anda berjalan
firebase serve --hanya pengehosan,fungsi
Anda sepatutnya melihat sesuatu seperti ini di bawah selepas membuka
**httplocalhost:5000** URL
10. Tutup pelayan dari terminal
= Langkah 4: Memasang pakej dan mencipta direktori paparan untuk tapak web dinamik =
- Di sini kita akan bertukar di dalam direktori fungsi untuk menggunakannya
fungsi cd
**2. Pasang Express**Ia ialah rangka kerja aplikasi web Node.js yang minimum dan fleksibel
npm i express --save
**3. Pasang Bar Pemegang**Ia ialah enjin templat untuk Node.js yang digunakan untuk bahagian hadapan dinamik tapak web
npm i hendal --save
**4. Pasang consolidated**
npm saya menyatukan --save
5. Buat folder bernama
**pandangan** di dalam folder **fungsi** di mana kami akan menyimpan semua kod bahagian hadapan
mkdir
pandangan
6. Tukar kembali ke direktori utama dengan menjalankan arahan berikut:
cd .
= Langkah 5: Menyediakan Firestore (Pangkalan Data Awan) =
== Konfigurasi Pangkalan Data ==
- Pergi ke httpsconsole.firebase.google.com/
- Pilih projek anda
- Pilih
Pangkalan datadari anak tetingkap di sebelah kiri
4. Klik pada
**Buat Pangkalan Data**
5. Pilih Mula dalam mod ujian kerana jika tidak, anda tidak akan dapat mengakses pangkalan data daripada sistem anda. Kami akan menukar tetapan ini sebaik sahaja kami selesai dengan pembangunan tapak web
Kemudian klik
**Seterusnya** selepas berbuat demikian
6. Pilih lokasi DB Firestore anda
**Selepas anda menetapkan lokasi ini, anda tidak boleh mengubahnya kemudian. Catatan: **
== CreateData ==
- Klik pada mulakan koleksi
2. Masukkan
** ID Koleksi yang anda boleh sampel buat masa ini
3. Masukkan data sampel. Masuk
**sample_doc **sebagai **ID Dokumen. **Masukkan **Tajuk** di dalam ** Medan. Saya suka Cloud** di dalam **Value Kemudian klik **Simpan**
= Langkah 6: Membina kandungan dinamik tapak web =
Kami akan membahagikan bahagian tersebut kepada dua bahagian, pada bahagian pertama, kami akan melihat cara untuk mengambil data daripada Firestore dan digunakan dalam tapak web. Dalam bahagian kedua, kita akan melihat cara menghantar data borang
**Pertama, kami akan memuat turun bukti kelayakan untuk mengakses Firestore**
2. Klik pada
**tetapan** dari anak tetingkap kiri dan pergi ke **Tetapan projek**
3. Pergi ke
**Akaun perkhidmatan** dan klik pada **Jana kunci peribadi baharu
4. Klik pada
**Jana Kunci Ia akan memberikan pop timbul untuk memuat turun kunci. Simpan kunci di dalam folder **functions** anda di tapak web anda
== Mengambil daripada Firestore ==
- Buka
index.jsinside folder fungsi
2. Kita perlu mentakrifkan beberapa perpustakaan yang ingin kita gunakan dalam aplikasi kita. Ini adalah perpustakaan yang sama yang kami pasang sebelum ini
const functions = require('firebase-functionsconst express = require('expressconst engines = require('consolidatevar hbs = require('handlebarsconst admin = require('firebase-admin
3. Di sini kami menetapkan beberapa perkara:
- Mulakan aplikasi menggunakan ekspres
- Kami akan menetapkan enjin kami sebagai hendal
- Kemudian kami akan memberitahu ekspres bahawa kod hujung hadapan kami akan berada di dalam folder pandangan
aplikasi const = expressapp.engine('hbs',engines.handlebars);app.set('viewsviewsapp.set('lihat enjinhbs
4. Benarkan aplikasi anda untuk mengakses DB Firestore anda
*Catatan:*
1. Berubah
**YOUR_SDK_NAMEjson dengan fail yang anda muat turun untuk **kelayakan untuk mengakses Firestore2. Tukar URL pangkalan data kepada URL pangkalan data anda. Untuk melihat URL yang anda boleh ke**Tetapan >Akaun Perkhidmatan**
var serviceAccount = memerlukan
YOUR_SDK_NAME.jsonadmin.initializeApp({credential: admin.credential.cert(serviceAccount), databaseURL: "httpsmyfirebaseproject-bx54dasx3.firebaseio.com
5. Berfungsi untuk mengambil data daripada Firestore
- ID Koleksi ialah
sampel
- ID Dokumen ialah
sampel_doc
Kami menentukan perkara di atas semasa memasukkan data sampel
fungsi async getFirestoreconst firestore_con = menunggu pentadbir.firestoreconst writeResult = firestore_con.collection('sampledoc('sample_docgetthen(doc =>{
if (!doc.exists) { console.log('Tiada dokumen sedemikian }
lain {kembali doc.data
.catch(err =>{ console.log('Ralat mendapatkan dokumen', errreturn writeResult
}
**Kami menggunakan Nota: ** **async**kerana kami perlu menunggu operasi janji selesai antara Pangkalan Data dan tapak web kami
6. Cipta laluan dan hantar hasilnya ke bahagian hadapan
app.getasync (permintaan, respons) var db_result = menunggu getFirestoreresponse.render('indexdb_resultexports.app = functions.https.onRequest(app);
7. Buat
**index.hbs** dalam folder **views**. hbs ialah fail bar tangan Nota: **
8. Tulis kod HTML asas ini di dalam
**index.hbs** untuk melihat hasil yang diambil
Tushar Chand Kapoor
