= Tuan rumah situs web dinamis ing Google Firebase nggunakake Node.js lan Cloud Firestore DB =
Tushar Kapoor: (httpswww.tusharck.com/)
Demo Git URL: httpsgithub.com/tusharck/firebase-demo
= Napa Firebase Hosting? =
Firebase minangka platform aplikasi lengkap sing dibangun ing infrastruktur Google, mula nyedhiyakake cara sing aman, cepet, gratis (opsi mbayar uga kasedhiya kanggo sumber daya tambahan) lan gampang kanggo dadi host konten sampeyan ing aplikasi web utawa seluler
== Fitur Utama lan Keuntungan saka undakan gratis: ==
- Iku menehi free Custom domain&
SSL(SSL nyedhiyakake lapisan keamanan standar kanggo sambungan https
- Cloud Firestore: Database sing fleksibel lan bisa diukur kanggo sinkronisasi data wektu nyata ing aplikasi klien
- Fitur Liyane: Fungsi Cloud, Cloud Messaging (FCM), Crashlytics, Dynamic Links, Hosting, ML Kit, Storage, Performance Monitoring, Predictions and Test Lab (Fungsi lan sumber daya produk kasebut bisa ditambah kanthi tuku rencana sing dibayar, nanging layanan tingkat gratis apik banget. Kanggo ndeleng rencana, priksa Reregan Firebase)
- Skala sumber daya otomatis
= Langkah-langkah kanggo hosting situs web dinamis ing Firebase =
== Syarat ==
**1. Akun Google**Yen sampeyan ora duwe akun Google, sampeyan kudu ndaftar. Sampeyan bisa nindakake kanthi pindhah menyang httpsaccounts.google.com/SignUp. **2. Node.js lan npm** Mac/WindowsSampeyan bisa ndownload installer saka httpsnodejs.org/en/download/. Linux
Tindakake langkah-langkah ing ngisor iki kanggo nginstal Node.js:
1. Bukak terminal
2. Jalanake printah ing ngisor iki:
sudo apt-get nginstal curlcurl -sL httpsdeb.nodesource.com/
setup_13.x| sudo bash -sudo apt install nodejs **Aku wis nggunakake Cathetan: ** **
setup_13.xbecause ing wektu tutorial versi paling anyar ana
**13**sampeyan bisa mriksa rilis paling anyar kanthi mbukak httpsnodejs.org/en/
Kanggo mriksa yen Node.js lan npm wis kasil diinstal, jalanake perintah ing ngisor iki, sing bakal ngasilake versi sing diinstal:
simpul -v
npm -v
**3. Firebase-CLI (Command-Line InterfaceIki minangka alat kanggo ngatur, ndeleng, lan nyebarake proyek Firebase
npm nginstal -g firebase-tools
= Langkah 1: Nggawe proyek Firebase =
- Bukak httpsfirebase.google.com lan
Mlebu Saka pojok tengen ndhuwur
- Klik ing
Pindhah menyang console, saka pojok tengen ndhuwur
- Banjur klik ing
Gawe proyek, kaya sing ditampilake ing ngisor iki
4. Ing bab sabanjure ketik jeneng project, lan penet terus
5. Pencet terus kanggo ngaktifake Google Analytics kanggo proyek Firebase sampeyan (yen sampeyan ora pengin banjur priksa kanggo mateni)
6. Pilih lokasi paling cedhak kanggo Google Analytics
7. Klik ing
** Gawe Proyek lan ngenteni mbukak. Banjur sampeyan bakal weruh kaya ing ngisor iki
= Langkah 2: Miwiti login Firebase =
- Bukak baris perintah / terminal banjur gawe lan pindhah menyang direktori anyar
mkdir my-firebase-projectcd my-firebase-project
2. Kanggo tuan rumah situs web ing Firebase login menyang firebase nggunakake printah ing ngisor iki. Sawise sampeyan mbukak printah, jendhela browser bakal mbukak njaluk sampeyan mlebu menyang firebase nggunakake kredensial Google sampeyan. Ketik kredensial ing kana lan Firebase bakal mlebu menyang sistem sampeyan
mlebu firebase
= Langkah 3: Miwiti proyek Firebase menyang sistem sampeyan =
- Saiki kita kudu miwiti proyek sing digawe ing Firebase console menyang sistem. Kanggo nindakake printah ing ngisor iki
firebase init
2. Pencet mudhun tombol banjur pilih
**loro bab ** kanthi mencet ** tombol spasi
- Fungsi
- Hosting
Banjur
** penet Enter ** kanggo nerusake
3. Banjur pilih
banjur pencet enter
**Gunakake proyek sing wis ana**
4. Pencet enter ing
**my-firebase-project** **utawa jeneng proyek sing sampeyan gunakake utawa jeneng proyek sing sampeyan gunakake
5. Pilih
**Javascript** banjur pencet enter
6. Sampeyan bisa ngomong
** Ora ** kanggo Apa sampeyan pengin nggunakake ESLint kanggo nyekel kemungkinan kewan omo lan ngetrapake gaya?
7. Jinis
** Ya ** kanggo nginstal dependensi karo npm
8. Ing kene kita kudu nindakake rong tugas:
- Sampeyan kudu milih direktori ing ngendi situs web lan aset sampeyan bakal manggon. Kanthi gawan iku
pubic sampeyan bisa menet enter kanggo nerusake utawa sampeyan bisa ngganti jeneng direktori sing dikarepake
- Jinis
Ya kanggo kaca aplikasi siji supaya URL dinamis sampeyan bisa dialihake menyang tujuan sing cocog
9. Tes aplikasi firebase ing sistem lokal kanthi nglakokake printah ing ngisor iki. Banjur pindhah menyang
**httplocalhost:5000** kanggo ndeleng situs web dhasar sampeyan mlaku
firebase serve --mung hosting,fungsi
Sampeyan kudu ndeleng kaya ing ngisor iki sawise mbukak
**httplocalhost:5000** URL
10. Nutup server saka terminal
= Langkah 4: Nginstal paket lan nggawe direktori tampilan kanggo situs web dinamis =
- Ing kene kita bakal ngalih ing direktori fungsi kanggo nggunakake
fungsi cd
**2. Instal Express** Iki minangka kerangka aplikasi web Node.js sing minimal lan fleksibel
npm i express --save
**3. Instal Handle Bars** Iku mesin template kanggo Node.js digunakake kanggo mburi ngarep dinamis situs web
npm aku setang --save
**4. Pasang konsolidasi**
npm aku nggabungake --save
5. Nggawe folder jenenge
** views ** nang ** fungsi ** folder kang kita bakal nyimpen kabeh kode frontend
mkdir
views
6. Ganti maneh menyang direktori utama kanthi nglakokake printah ing ngisor iki:
cd.
= Langkah 5: Nggawe Firestore (Cloud Database) =
== Konfigurasi Database ==
- Bukak httpsconsole.firebase.google.com/
- Pilih proyek sampeyan
- Pilih
Database saka panel ing sisih kiwa
4. Klik ing
**Gawe Database**
5. Pilih Mulai ing mode test amarga yen ora, sampeyan ora bakal bisa ngakses database saka sistem. Kita bakal ngganti setelan iki yen wis rampung karo pangembangan website
Banjur klik
**Sabanjure** sawise nglakoni
6. Pilih lokasi Firestore DB
** Sawise sampeyan nyetel lokasi iki, sampeyan ora bisa ngganti mengko. Cathetan: **
== NggaweData ==
- Klik ing miwiti koleksi
2. Ketik ing
** ID Koleksi sampeyan bisa sampel kanggo saiki
3. Ketik data sampel. Ketik
**sample_doc **minangka **ID Dokumen. **Ketik **Heading** nang ** Field. Aku seneng Cloud** ing **Value Banjur klik **Simpen**
= Langkah 6: Nggawe konten dinamis situs web =
Kita bakal dibagi dadi rong bagean, ing bagean pisanan, kita bakal weruh carane njupuk data saka Firestore lan digunakake ing situs web. Ing bagean kapindho, kita bakal weruh carane ngirim data formulir
** Pisanan, kita bakal ngundhuh kredensial kanggo ngakses Firestore **
2. Klik ing
**setelan** saka panel kiwa banjur menyang **Setelan proyek**
3. Menyang
**Akun layanan** banjur klik **Generate kunci pribadi anyar
4. Klik ing
** Generate Key Iku bakal menehi pop munggah kanggo download tombol. Simpen tombol ing folder **fungsi** situs web sampeyan
== Njupuk saka Firestore ==
- Bukak
index.jsinside functionsfolder
2. Kita kudu nemtokake sawetara perpustakaan sing arep digunakake ing aplikasi kita. Iki minangka perpustakaan sing padha sing diinstal sadurunge
const functions = require('firebase-functionsconst express = require('expressconst engines = require('consolidatevar hbs = require('handlebarsconst admin = require('firebase-admin
3. Ing kene kita nyetel sawetara perkara:
- Initialize app nggunakake express
- Kita bakal nyetel mesin kita minangka stang
- Banjur kita bakal ngandhani ekspres yen kode ngarep ngarep bakal ana ing folder tampilan
const app = expressapp.engine('hbs',engines.handlebars);app.set('viewsviewsapp.set('view enginehbs
4. Wewenang aplikasi sampeyan kanggo ngakses DB Firestore
*Cathetan:*
1. Ganti
**YOUR_SDK_NAMEjson karo file sing diundhuh kanggo **kredensial kanggo ngakses Firestore2. Ganti URL database menyang URL database sampeyan. Kanggo ndeleng URL sampeyan bisa **Setelan >Akun Layanan**
var serviceAccount = mbutuhake
YOUR_SDK_NAME.jsonadmin.initializeApp({credential: admin.credential.cert(serviceAccount), databaseURL: "httpsmyfirebaseproject-bx54dasx3.firebaseio.com
5. Fungsi kanggo njupuk data saka Firestore
- ID Koleksi punika
sampel
- ID Dokumen punika
sampel_doc
Kita nemtokake ing ndhuwur nalika ngetik data sampel
fungsi async getFirestoreconst firestore_con = ngenteni admin.firestoreconst writeResult = firestore_con.collection('sampledoc('sample_docgetthen(doc =>{
yen (!doc.exists) { console.log('Ora ana dokumen kuwi }
liya {bali doc.data
.catch(err =>{ console.log('Kesalahan njupuk dokumen', errreturn writeResult
}
**Kita nggunakake Cathetan: ** **async**amarga kita kudu ngenteni operasi janji rampung antarane Database lan situs web kita
6. Nggawe rute lan ngirim asil kanggo mburi ngarep
app.getasync (panyuwunan, respon) var db_result = ngenteni getFirestoreresponse.render('indexdb_resultexports.app = functions.https.onRequest(app);
7. Nggawe
**index.hbs** nang folder **views**. hbs minangka file handelbars Cathetan: **
8. Tulis kode HTML dhasar iki nang
**index.hbs** kanggo ndeleng asil sing dijupuk
Tushar Chand Kapoor
