= Mag-host ng isang dynamic na website sa Google Firebase gamit ang Node.js at Cloud Firestore DB =
Tushar Kapoor: (httpswww.tusharck.com/)
Demo Git URL: httpsgithub.com/tusharck/firebase-demo
= Bakit Firebase Hosting? =
Ang Firebase ay isang komprehensibong platform ng app na binuo sa imprastraktura ng Google, samakatuwid, nagbibigay ito ng secure, mabilis, libre (may bayad na mga opsyon na available din para sa mga karagdagang mapagkukunan) at madaling paraan upang i-host ang iyong content sa web o mobile application
== Mga Pangunahing Tampok at Mga Benepisyo ng libreng tier: ==
- Nagbibigay ito ng libreng Custom na domain&
SSL(SSL ay nagbibigay ng karaniwang layer ng seguridad para sa https na mga koneksyon
- Cloud Firestore: Isang flexible at scalable na database para sa realtime na pag-sync ng data sa mga client app
- Iba Pang Mga Tampok: Cloud Functions, Cloud Messaging (FCM), Crashlytics, Dynamic Links, Hosting, ML Kit, Storage, Performance Monitoring, Predictions at Test Lab (Maaaring madagdagan ang functionality at resources ng mga produktong ito sa pamamagitan ng pagbili ng bayad na plano, ngunit napakahusay ng mga libreng tier na serbisyo. Upang tingnan ang mga plano, tingnan ang Pagpepresyo ng Firebase)
- Awtomatikong pag-scale ng mga mapagkukunan
= Mga hakbang para sa pagho-host ng iyong dynamic na website sa Firebase =
== Mga Kinakailangan ==
**1. Google Account**Kung wala kang Google account, kailangan mong mag-sign up para sa isa. Magagawa mo ito sa pamamagitan ng pagpunta sa httpsaccounts.google.com/SignUp. **2. Node.js at npm** Mac/WindowsMaaari mong i-download ang installer mula sa httpsnodejs.org/en/download/. Linux
Sundin ang mga hakbang sa ibaba upang i-install ang Node.js:
1. Magbukas ng terminal
2. Patakbuhin ang mga sumusunod na command:
sudo apt-get install curlcurl -sL httpsdeb.nodesource.com/
setup_13.x| sudo bash -sudo apt install nodejs **Ginamit ko ang Tandaan: ** **
setup_13.xdahil sa panahon ng tutorial ang pinakabagong bersyon ay
**13**maaari mong tingnan ang pinakabagong release sa pamamagitan ng pagpunta sa httpsnodejs.org/en/
Upang suriin kung matagumpay na na-install ang Node.js at npm, patakbuhin ang mga sumusunod na command, na maglalabas ng bersyon na naka-install:
node -v
npm -v
**3. Firebase-CLI (Command-Line InterfaceIto ang mga tool para sa pamamahala, pagtingin, at pag-deploy ng mga proyekto ng Firebase
npm install -g firebase-tools
= Hakbang 1: Gumawa ng proyekto sa Firebase =
- Pumunta sa httpsfirebase.google.com at
Mag-sign In Mula sa kanang sulok sa itaas
- Mag-click sa
Pumunta sa console, mula sa kanang sulok sa itaas
- Pagkatapos ay mag-click sa
Lumikha ng proyekto, tulad ng ipinapakita sa ibaba
4. Ang susunod na bagay ay ipasok ang pangalan ng iyong proyekto, at pindutin ang magpatuloy
5. Pindutin ang magpatuloy upang paganahin ang Google Analytics para sa iyong proyekto sa Firebase (kung ayaw mo ito pagkatapos ay suriin upang i-disable)
6. Piliin ang pinakamalapit na lokasyon para sa Google Analytics
7. Mag-click sa
**Gumawa ng Proyekto at hintayin itong mag-load. Pagkatapos ay makikita mo ang isang bagay tulad ng sa ibaba
= Hakbang 2: Simulan ang Firebase login =
- Magbukas ng command-line/terminal pagkatapos ay lumikha at pumunta sa isang bagong direktoryo
mkdir my-firebase-projectcd my-firebase-project
2. Upang mag-host ng website sa Firebase login sa firebase gamit ang sumusunod na command. Pagkatapos mong patakbuhin ang command may bubukas na window ng browser na humihiling sa iyong mag-log in sa firebase gamit ang iyong mga kredensyal sa Google. Ilagay ang mga kredensyal doon at magsa-sign in ang Firebase sa iyong system
pag-login sa firebase
= Hakbang 3: Simulan ang proyekto ng Firebase sa iyong system =
- Ngayon, kailangan nating simulan ang proyektong ginawa natin sa Firebase console sa system. Para sa paggawa patakbuhin ang utos sa ibaba
firebase init
2. Pindutin ang down key pagkatapos ay piliin
**dalawang bagay **sa pamamagitan ng pagpindot sa **space bar key
- Mga Pag-andar
- Pagho-host
Pagkatapos
**pindutin ang Enter** para magpatuloy
3. Pagkatapos ay piliin
pagkatapos ay pindutin ang enter
**Gumamit ng kasalukuyang proyekto**
4. Pindutin ang enter sa
**my-firebase-project** **o ang pangalan ng proyekto na iyong ginamit o ang pangalan ng proyekto na iyong ginamit
5. Piliin
**Javascript** at pindutin ang enter
6. Masasabi mong
**No** to Gusto mo bang gumamit ng ESLint para mahuli ang mga posibleng bug at ipatupad ang istilo?
7. Uri
**Oo** para sa pag-install ng mga dependency na may npm
8. Dito kailangan nating gawin ang dalawang gawain:
- Kailangan mong piliin ang direktoryo kung saan titira ang iyong website at mga asset. Bilang default ito ay
pubic maaari mong pindutin ang enter upang magpatuloy o maaari mong baguhin sa iyong nais na pangalan ng direktoryo
- Mga uri
Oo para sa single-app na page upang ang iyong mga dynamic na URL ay ma-redirect sa kanilang tamang destinasyon
9. Subukan ang firebase app sa iyong lokal na system sa pamamagitan ng pagpapatakbo ng sumusunod na command. Pagkatapos ay pumunta sa
**httplocalhost:5000** upang makitang tumatakbo ang iyong pangunahing website
firebase serve --only hosting, functions
Dapat mong makita ang isang bagay na tulad nito sa ibaba pagkatapos buksan ang
**httplocalhost:5000** URL
10. Isara ang server mula sa terminal
= Hakbang 4: Pag-install ng mga pakete at paggawa ng direktoryo ng mga view para sa dynamic na website =
- Dito ay lilipat tayo sa loob ng direktoryo ng mga function upang magawa ito
mga function ng cd
**2. I-install ang Express**Ito ay isang minimal at flexible na framework ng web application ng Node.js
npm i express --save
**3. I-install ang Mga Handle Bar**Ito ay isang templating engine para sa Node.js na ginagamit para sa dynamic na front end ng website
npm i handlebars --save
**4. Pagsama-samahin ang pag-install**
npm ko pinagsama-sama --save
5. Gumawa ng folder na pinangalanan
**views** sa loob ng **functions** folder kung saan iimbak namin ang lahat ng frontend code
mkdir
mga pananaw
6. Bumalik sa pangunahing direktoryo sa pamamagitan ng pagpapatakbo ng sumusunod na command:
cd .
= Hakbang 5: Pagse-set up ng Firestore (Cloud Database) =
== Database Configuration ==
- Pumunta sa httpsconsole.firebase.google.com/
- Piliin ang iyong proyekto
- Pumili
Databasemula sa pane sa kaliwa
4. Mag-click sa
**Gumawa ng Database**
5. Piliin ang Start in test mode dahil kung hindi ay hindi mo maa-access ang database mula sa iyong system. Babaguhin namin ang setting na ito kapag tapos na kami sa pagbuo ng website
Pagkatapos ay i-click
**Susunod** pagkatapos gawin ito
6. Piliin ang lokasyon ng iyong Firestore DB
**Pagkatapos mong itakda ang lokasyong ito, hindi mo na ito mababago sa ibang pagkakataon. Tandaan: **
== CreateData ==
- Mag-click sa simulan ang koleksyon
2. Ipasok ang
**Collection ID na maaari mong sample sa ngayon
3. Ipasok ang sample na data. Pumasok
**sample_doc **bilang **Document ID. **Ipasok ang **Heading** sa loob ng ** Field. Gusto ko ang Cloud** sa loob ng **Value Pagkatapos ay i-click ang **Save**
= Hakbang 6: Pagbuo ng dynamic na nilalaman ng website =
Hahatiin natin ang bahagi sa dalawang bahagi, sa unang bahagi, makikita natin kung paano kunin ang data mula sa Firestore at gamitin sa website. Sa pangalawang bahagi, makikita natin kung paano isumite ang data ng form
**Una, ida-download namin ang mga kredensyal para ma-access ang Firestore**
2. Mag-click sa
**mga setting** mula sa kaliwang pane at pumunta sa **Mga setting ng proyekto**
3. Pumunta sa
**Mga account sa serbisyo** at mag-click sa **Bumuo ng bagong pribadong key
4. Mag-click sa
**Bumuo ng Key Magbibigay ito ng pop up para i-download ang key. Itago ang susi sa loob ng iyong **functions** na folder ng iyong website
== Kinukuha mula sa Firestore ==
- Bukas
index.jsinside ng functionsfolder
2. Kailangan nating tukuyin ang ilan sa mga aklatan na gusto nating gamitin sa ating aplikasyon. Ito ang parehong mga aklatan na na-install namin kanina
const functions = require('firebase-functionsconst express = require('expressconst engines = require('consolidatevar hbs = require('handlebarsconst admin = require('firebase-admin
3. Dito nagtakda kami ng ilang bagay:
- Simulan ang app gamit ang express
- Itatakda namin ang aming makina bilang mga manibela
- Pagkatapos ay sasabihin namin sa express na ang aming front end code ay mapupunta sa loob ng view folder
const app = expressapp.engine('hbs',engines.handlebars);app.set('viewsviewsapp.set('view enginehbs
4. Pahintulutan ang iyong aplikasyon na i-access ang iyong Firestore DB
*Tandaan:*
1. Pagbabago
**YOUR_SDK_NAMEjson kasama ang file na na-download mo para sa **mga kredensyal upang ma-access ang Firestore2. Baguhin ang URL ng database sa iyong URL ng database. Upang makita ang URL na maaari mong **Mga Setting >Account ng Serbisyo**
var serviceAccount = nangangailangan
YOUR_SDK_NAME.jsonadmin.initializeApp({credential: admin.credential.cert(serviceAccount), databaseURL: "httpsmyfirebaseproject-bx54dasx3.firebaseio.com
5. Function na kumuha ng data mula sa Firestore
- Collection ID ay
sample
- Document ID ay
sample_doc
Tinukoy namin ang nasa itaas habang ipinapasok ang sample na data
async function getFirestoreconst firestore_con = hintayin ang admin.firestoreconst writeResult = firestore_con.collection('sampledoc('sample_docgetthen(doc =>{
kung (!doc.exists) { console.log('Walang ganoong dokumento }
else {ibalik ang doc.data
.catch(err =>{ console.log('Error sa pagkuha ng dokumento', errreturn writeResult
}
**Gumagamit kami ng Tandaan: ** **async**dahil kailangan naming maghintay para makumpleto ang pangakong operasyon sa pagitan ng Database at ng aming website
6. Lumikha ng ruta at ipadala ang resulta sa front end
app.getasync (kahilingan,tugon) var db_result = hintayin getFirestoreresponse.render('indexdb_resultexports.app = functions.https.onRequest(app);
7. Lumikha
**index.hbs** sa loob ng **views** folder. Ang hbs ay isang handelbars file Tandaan: **
8. Isulat ang pangunahing HTML code na ito sa loob
**index.hbs** para makita ang nakuhang resulta
Tushar Chand Kapoor
