= Node.js और Cloud Firestore DB = का उपयोग करके Google Firebase पर गतिशील वेबसाइट होस्ट करें
तुषार कपूर: (httpswww.tusharck.com/)
डेमो गिट यूआरएल: httpsgithub.com/tusharck/firebase-demo
= फायरबेस होस्टिंग क्यों? =
फायरबेस Google के बुनियादी ढांचे पर बनाया गया एक व्यापक ऐप प्लेटफॉर्म है, इसलिए यह एक सुरक्षित, तेज, मुफ्त (अतिरिक्त संसाधनों के लिए भुगतान विकल्प भी उपलब्ध है) और आपकी सामग्री को होस्ट करने का आसान तरीका प्रदान करता है। वेब या मोबाइल एप्लिकेशन
== फ्री टियर की मुख्य विशेषताएं और लाभ: ==
- यह मुफ्त कस्टम डोमेन देता है&
एसएसएल (एसएसएल https कनेक्शन के लिए एक मानक सुरक्षा परत प्रदान करता है
- क्लाउड फायरस्टोर: क्लाइंट ऐप्स में रीयलटाइम डेटा सिंक के लिए एक लचीला और स्केलेबल डेटाबेस
- अन्य विशेषताएं: क्लाउड फ़ंक्शंस, क्लाउड मैसेजिंग (FCM), क्रैशलिटिक्स, डायनेमिक लिंक्स, होस्टिंग, ML किट, स्टोरेज, परफॉर्मेंस मॉनिटरिंग, प्रेडिक्शन और टेस्ट लैब (इन उत्पादों की कार्यक्षमता और संसाधनों को एक पेड प्लान खरीदकर बढ़ाया जा सकता है, लेकिन फ्री टियर सेवाएं बहुत अच्छी हैं। योजनाओं को देखने के लिए फायरबेस मूल्य निर्धारण की जांच करें)
- संसाधनों का स्वचालित स्केलिंग
= Firebase पर अपनी डायनामिक वेबसाइट को होस्ट करने के चरण =
== आवश्यकताएँ ==
**1. Google खाता ** यदि आपके पास Google खाता नहीं है, तो आपको एक के लिए साइन अप करना होगा। आप httpsaccounts.google.com/SignUp पर जाकर ऐसा कर सकते हैं। **2. Node.js और npm** Mac/Windows आप httpsnodejs.org/en/download/ से इंस्टॉलर डाउनलोड कर सकते हैं। लिनक्स
Node.js को स्थापित करने के लिए नीचे दिए गए चरणों का पालन करें:
1. एक टर्मिनल खोलें
2. निम्नलिखित कमांड चलाएँ:
sudo apt-get install curlcurl -sL httpsdeb.nodesource.com/
सेटअप_13.x| sudo bash -sudo apt install nodejs **मैंने नोट का उपयोग किया है: ** **
setup_13.xक्योंकि ट्यूटोरियल के समय नवीनतम संस्करण था
**13** आप httpsnodejs.org/en/ पर जाकर नवीनतम रिलीज़ देख सकते हैं
यह जाँचने के लिए कि क्या Node.js और npm सफलतापूर्वक स्थापित हैं, निम्नलिखित कमांड चलाएँ, जो स्थापित संस्करण को आउटपुट करेगा:
नोड -वी
एनपीएम -वी
**3. Firebase-CLI (कमांड-लाइन इंटरफ़ेसये Firebase प्रोजेक्ट्स को प्रबंधित करने, देखने और परिनियोजित करने के टूल हैं
एनपीएम इंस्टॉल -जी फायरबेस-टूल्स
= चरण 1: फायरबेस प्रोजेक्ट बनाएं =
- httpsfirebase.google.com पर जाएं और
ऊपरी दाएं कोने से साइन इन करें
- पर क्लिक करें
शीर्ष दाएं कोने से कंसोल पर जाएं
- इसके बाद क्लिक करें
प्रोजेक्ट बनाएं, जैसा कि नीचे दिखाया गया है
4. अगली बात यह है कि आप अपने प्रोजेक्ट का नाम दर्ज करें और जारी रखें दबाएं
5. अपने फायरबेस प्रोजेक्ट के लिए Google Analytics को सक्षम करने के लिए जारी रखें दबाएं (यदि आप इसे नहीं चाहते हैं तो अक्षम करने के लिए जांचें)
6. Google Analytics के लिए निकटतम स्थान का चयन करें
7. पर क्लिक करें
**प्रोजेक्ट बनाएं और इसके लोड होने की प्रतीक्षा करें। तो आपको नीचे जैसा कुछ दिखाई देगा
= चरण 2: फायरबेस लॉगिन प्रारंभ करें =
- एक कमांड-लाइन/टर्मिनल खोलें फिर एक नई निर्देशिका बनाएं और उस पर जाएं
mkdir my-firebase-projectcd my-firebase-project
2. फायरबेस पर एक वेबसाइट होस्ट करने के लिए निम्नलिखित कमांड का उपयोग करके फायरबेस में लॉगिन करें। आपके द्वारा आदेश चलाने के बाद एक ब्राउज़र विंडो खुलेगी जो आपसे आपके Google क्रेडेंशियल्स का उपयोग करके फायरबेस में लॉग इन करने के लिए कहेगी। वहां क्रेडेंशियल दर्ज करें और फायरबेस आपके सिस्टम में साइन इन हो जाएगा
फायरबेस लॉगिन
= चरण 3: फायरबेस प्रोजेक्ट को अपने सिस्टम में प्रारंभ करें =
- अब हमें सिस्टम में फायरबेस कंसोल पर बनाए गए प्रोजेक्ट को इनिशियलाइज़ करना होगा। करने के लिए नीचे दिए गए कमांड को रन करें
फायरबेस init
2. नीचे कुंजी दबाएं और फिर चयन करें
** दो चीजें ** स्पेस बार कुंजी दबाकर
- कार्य
- मेजबानी
तब
जारी रखने के लिए **एंटर दबाएं**
3. फिर सेलेक्ट करें
फिर एंटर दबाएं
**मौजूदा प्रोजेक्ट का उपयोग करें**
4. पर एंटर दबाएं
**माय-फायरबेस-प्रोजेक्ट** **या आपके द्वारा उपयोग किए गए प्रोजेक्ट का नाम या आपके द्वारा उपयोग किए गए प्रोजेक्ट का नाम
5. चयन करें
**जावास्क्रिप्ट** और एंटर दबाएं
6. आप कह सकते हैं
**नहीं** क्या आप संभावित बगों को पकड़ने और शैली को लागू करने के लिए ESLint का उपयोग करना चाहते हैं?
7. टाइप करें
**हाँ** एनपीएम के साथ निर्भरताओं को स्थापित करने के लिए
8. यहाँ हमें दो कार्य करने हैं:
- आपको उस निर्देशिका का चयन करना होगा जिसमें आपकी वेबसाइट और संपत्तियां होंगी। डिफ़ॉल्ट रूप से यह है
pubicआप जारी रखने के लिए एंटर दबा सकते हैं या आप अपने वांछित निर्देशिका नाम में बदल सकते हैं
- प्रकार
हां, एकल-ऐप्लिकेशन पृष्ठ के लिए ताकि आपके डायनामिक URL को उनके उचित गंतव्य पर रीडायरेक्ट किया जा सके
9. निम्न कमांड चलाकर अपने स्थानीय सिस्टम पर फायरबेस ऐप का परीक्षण करें। फिर जाएं
**httplocalhost:5000** अपनी मूल वेबसाइट को चालू देखने के लिए
फायरबेस सर्व - केवल होस्टिंग, फ़ंक्शंस
ओपन करने के बाद आपको नीचे कुछ ऐसा दिखना चाहिए
**httplocalhost:5000** यूआरएल
10. टर्मिनल से सर्वर बंद करें
= चरण 4: डायनेमिक वेबसाइट के लिए संकुल अधिष्ठापित करना और दृश्य निर्देशिका बनाना =
- यहां हम ऐसा करने के लिए फ़ंक्शन निर्देशिका के अंदर स्विच करेंगे
सीडी कार्य करता है
**2. एक्सप्रेस स्थापित करें ** यह एक न्यूनतम और लचीला Node.js वेब एप्लिकेशन फ्रेमवर्क है
एनपीएम आई एक्सप्रेस --सेव
**3. हैंडल बार्स स्थापित करें ** यह वेबसाइट के गतिशील फ्रंट एंड के लिए उपयोग किए जाने वाले Node.js के लिए एक टेम्प्लेटिंग इंजन है
एनपीएम आई हैंडलबार्स --सेव
**4. समेकित स्थापित करें**
npm मैं समेकित --save
5. नाम का फोल्डर बनाएं
**विचार** **फ़ंक्शंस** फ़ोल्डर के अंदर जिसमें हम सभी फ्रंटएंड कोड संग्रहीत करेंगे
mkdir
दृश्य
6. निम्न आदेश चलाकर मुख्य निर्देशिका पर वापस जाएँ:
सीडी।
= चरण 5: फायरस्टोर (क्लाउड डेटाबेस) की स्थापना =
== डेटाबेस कॉन्फ़िगरेशन ==
- httpsconsole.firebase.google.com/ पर जाएं।
- अपना प्रोजेक्ट चुनें
- चुनना
डेटाबेसबाएं फलक से
4. पर क्लिक करें
**डेटाबेस बनाएं**
5. परीक्षण मोड में प्रारंभ करें का चयन करें क्योंकि अन्यथा आप अपने सिस्टम से डेटाबेस तक नहीं पहुंच पाएंगे। वेबसाइट के विकास के साथ काम करने के बाद हम इस सेटिंग को बदल देंगे
तब दबायें
**अगला** ऐसा करने के बाद
6. अपने फायरस्टार डीबी के स्थान का चयन करें
**इस स्थान को सेट करने के बाद, आप इसे बाद में नहीं बदल सकते। टिप्पणी: **
== क्रिएटडेटा ==
- स्टार्ट कलेक्शन पर क्लिक करें
2. दर्ज करें
**संग्रह आईडी जिसका आप अभी नमूना ले सकते हैं
3. नमूना डेटा दर्ज करें। प्रवेश करना
**sample_doc ** **दस्तावेज़ आईडी के रूप में। **फ़ील्ड के अंदर **शीर्षक** दर्ज करें। मुझे **वैल्यू के अंदर क्लाउड** पसंद है फिर **सेव करें** पर क्लिक करें
= चरण 6: वेबसाइट की गतिशील सामग्री का निर्माण =
हम भाग को दो भागों में विभाजित करेंगे, पहले भाग में, हम देखेंगे कि फायरस्टोर से डेटा कैसे लाया जाए और वेबसाइट में कैसे उपयोग किया जाए। दूसरे भाग में, हम देखेंगे कि फॉर्म डेटा कैसे सबमिट करें
**सबसे पहले, हम फायरस्टोर तक पहुंचने के लिए क्रेडेंशियल्स डाउनलोड करेंगे**
2. पर क्लिक करें
**सेटिंग्स** बाएँ फलक से और **प्रोजेक्ट सेटिंग** पर जाएँ
3. पर जाएं
**सेवा खाते** और **नई निजी कुंजी जनरेट करें पर क्लिक करें
4. पर क्लिक करें
** कुंजी उत्पन्न करें यह कुंजी डाउनलोड करने के लिए एक पॉप अप देगा। कुंजी को अपनी वेबसाइट के **फ़ंक्शंस** फ़ोल्डर में संग्रहीत करें
== फायरस्टोर से लाया जा रहा है ==
- खुला
index.jsinside functionfolder
2. हमें कुछ ऐसे पुस्तकालयों को परिभाषित करने की आवश्यकता है जिन्हें हम अपने आवेदन में उपयोग करना चाहते हैं। ये वही लाइब्रेरी हैं जिन्हें हमने पहले स्थापित किया था
const फ़ंक्शंस = आवश्यकताएँ ('फायरबेस-फ़ंक्शंसकॉन्स्ट एक्सप्रेस = आवश्यकताएँ ('एक्सप्रेसकॉन्स इंजन = आवश्यकताएँ ('समेकित hbs = आवश्यकताएँ ('हैंडलबार्सकॉन्स्ट एडमिन = आवश्यकताएँ ('फ़ायरबेस-एडमिन)
3. यहां हम कुछ चीजें निर्धारित करते हैं:
- एक्सप्रेस का उपयोग करके ऐप को इनिशियलाइज़ करें
- हम अपने इंजन को हैंडलबार्स के रूप में सेट करेंगे
- फिर हम एक्सप्रेस को बताएंगे कि हमारा फ्रंट एंड कोड व्यूज फोल्डर के अंदर होने वाला है
const ऐप = एक्सप्रेसऐप.इंजिन ('एचबीएस', इंजन.हैंडलबार्स); ऐप.सेट ('व्यूव्यूएप.सेट ('इंजनएचबीएस देखें)
4. अपने फायरस्टोर डीबी तक पहुंचने के लिए अपने आवेदन को अधिकृत करें
*टिप्पणी:*
1. बदलें
**YOUR_SDK_NAMEjson उस फ़ाइल के साथ जिसे आपने ** क्रेडेंशियल्स के लिए Firestore2 एक्सेस करने के लिए डाउनलोड किया है। डेटाबेस URL को अपने डेटाबेस URL में बदलें। URL देखने के लिए आप ** सेटिंग >सेवा खाता** पर जा सकते हैं
var serviceAccount = आवश्यकता है
Your_SDK_NAME.jsonadmin.initializeApp({क्रेडेंशियल: admin.credential.cert(serviceAccount), डेटाबेसURL: "httpsmyfirebaseproject-bx54dasx3.firebaseio.com
5. फायरस्टोर से डेटा लाने का कार्य
- संग्रह आईडी है
नमूना
- दस्तावेज़ आईडी है
नमूना दस्तावेज़
हमने नमूना डेटा दर्ज करते समय उपरोक्त को परिभाषित किया
async समारोह getFirestoreconst firestore_con = प्रतीक्षा admin.firestoreconst writeResult = firestore_con.collection ('सैंपलडॉक ('नमूना_डॉकगेटेन (डॉक्टर =>{
if (!doc.exists) { कंसोल.लॉग ('ऐसा कोई दस्तावेज़ नहीं है})
वरना {वापसी doc.data
.कैच (त्रुटि =>{ कंसोल.लॉग ('दस्तावेज़ प्राप्त करने में त्रुटि', त्रुटिपूर्ण लेखन परिणाम
}
** हम नोट का उपयोग करते हैं: ** **async** क्योंकि हमें डेटाबेस और हमारी वेबसाइट के बीच प्रॉमिस ऑपरेशन के पूरा होने का इंतजार करना होगा
6. मार्ग बनाएं और परिणाम को फ्रंट एंड पर भेजें
app.getasync (अनुरोध, प्रतिक्रिया) var db_result = getFirestoreresponse.render का इंतजार करें ('indexdb_resultexports.app = functions.https.onRequest (ऐप);
7. बनाएँ
**index.hbs** **views** फोल्डर के अंदर। hbs एक हैंडलबार फ़ाइल है नोट: **
8. इस बेसिक HTML कोड को अंदर लिखें
प्राप्त परिणाम देखने के लिए **index.hbs**
तुषार चंद कपूर
