क्लाउड फायरस्टोर डेटाबेस में डेटा जोड़ना

लेख में, फायरबेस का परिचय, फायरबेस का एक सिंहावलोकन प्रदान किया गया था। आपको दिखाया गया था कि कैसे एक फायरबेस खाता सेट अप करें और एक फायरबेस प्रोजेक्ट कैसे बनाएं! इस लेख में, आप एक NoSQL क्लाउड-आधारित डेटाबेस की स्थापना करके और फिर उसमें आइटम जोड़ने के लिए एक बहुत ही सरल वेब पेज बनाकर आपने जो सीखा है, उस पर निर्माण करते हैं। डेटाबेस केवल एक श्रेणी और पहचानकर्ता के साथ वाक्यों को संग्रहीत करेगा। चित्र 1 उस वेब पेज को दिखाता है जिसका उपयोग आइटम जोड़ने के लिए किया जाएगा।

चित्र 1: Firestore NoSQL डेटाबेस को लिखने वाला वेब पेज।

Firebase में अपना Cloud Firestore डेटाबेस सेट करना

शुरू करने के लिए, फायरबेस पर वापस लौटें और एक नया प्रोजेक्ट बनाएं। आप https://console.firebase.google.com/ पर जाकर Firebase पर जा सकते हैं। यह पृष्ठ आपको एक नया प्रोजेक्ट जोड़ने का विकल्प देगा, जैसा कि चित्र 2 में दिखाया गया है। आप पिछले लेख में प्रोजेक्ट बनाने के बारे में अधिक जानकारी प्राप्त कर सकते हैं।

चित्र 2: एक नया Firebase प्रोजेक्ट जोड़ा जा रहा है।

मैंने अपने प्रोजेक्ट का नाम "द पुन प्रोजेक्ट" रखा है। एक बार जब आप एक नया प्रोजेक्ट बना लेते हैं, तो आपको फायरबेस कंसोल पर ले जाया जाएगा जैसा कि चित्र 3 में दिखाया गया है।

चित्र 3: फायरबेस कंसोल

कंसोल में, आप उस डेटाबेस को बनाने में सक्षम होंगे जिसका वेब पेज उपयोग करेगा। ऐसा करने के लिए पहला कदम बाएं नेविगेशन मेनू पर डेटाबेस विकल्प पर क्लिक करना है। यह एक स्क्रीन को ऊपर खींचेगा जैसा कि चित्र 4 में दिखाया गया है जो आपको क्लाउड फायरस्टोर बनाने की अनुमति देगा, जो आपका NoSQL डेटाबेस होगा।

चित्र 4: Cloud Firestore बनाने के लिए स्टार्ट स्क्रीन

डेटाबेस बनाएँ बटन पर क्लिक करने से डेटाबेस बनाने के चरणों के माध्यम से चलने की प्रक्रिया शुरू हो जाएगी। पहला निर्णय जिसे करने की आवश्यकता है, जैसा कि चित्र 5 में दिखाया गया है, यह है कि क्या डेटाबेस उत्पादन या परीक्षण मोड में शुरू किया जाएगा। इस लेख को सरल और डेटा जोड़ने पर केंद्रित रखने के लिए, परीक्षण मोड का चयन किया जाएगा। जब एक उत्पादन-तैयार डेटाबेस आधार बनाया जाता है, तो आप परीक्षण मोड में प्रदान की गई सुरक्षा से अधिक सुरक्षा जोड़ना चाहेंगे।

चित्र 5: अपने फायरस्टोर डेटाबेस के लिए मोड का चयन करना

चयनित मोड के साथ, अगला चरण उस स्थान को बताना है जहां आप डेटाबेस बनाना चाहते हैं। आप क्लाउड में अपना डेटाबेस बना रहे हैं, इसलिए आपके पास स्थान चुनने का विकल्प है कि आप किन सर्वरों का उपयोग करना चाहते हैं। चित्र 6 में दिखाए गए क्लाउड फायरस्टोर स्थान ड्रॉपडाउन पर क्लिक करके, आप एक बहु-क्षेत्रीय या क्षेत्रीय स्थान चुनने में सक्षम होंगे। मेरा सुझाव है कि यदि आप उत्तरी अमेरिका में हैं, तो आप nam5 (यूएस-सेंट्रल) स्थान का चयन करें। यदि आप कहीं और हैं, तो वह क्षेत्र चुनें जो आपके स्थान के सबसे निकट हो।

चित्र 6: अपने फायरस्टोर डेटाबेस के लिए एक क्षेत्र का चयन करना

अपने क्षेत्र के चयन के साथ, संपन्न बटन पर क्लिक करें और फायरबेस आपके क्लाउड फायरस्टोर डेटाबेस का प्रावधान करेगा। एक बार प्रावधान हो जाने के बाद, आप डेटाबेस कंसोल पेज पर जाने के लिए तैयार होंगे जैसा कि चित्र 7 में दिखाया गया है जहाँ आप अपने डेटाबेस का ऑनलाइन उपयोग शुरू कर सकते हैं।

चित्र 7: Firebase में डेटाबेस कंसोल

NoSQL में संग्रह और दस्तावेज़

यदि आपने अनुसरण किया है, तो इस बिंदु पर आपने फायरबेस के क्लाउड फायरस्टोर में एक NoSQL क्लाउड-आधारित डेटाबेस बनाया है। नोएसक्यूएल के विवरण में जाना इस लेख के दायरे से बाहर है, लेकिन मैं इस आलेख में वादा किए गए नमूना डेटा जोड़ को करने के लिए आपको जो कुछ जानने की जरूरत है उसका मुख्य आकर्षण प्रदान करूंगा।

NoSQL डेटाबेस संग्रह . से बना होता है जिसमें दस्तावेज़ . हों . एक दस्तावेज़ में मूल रूप से वे फ़ील्ड होते हैं जिन्हें आप स्टोर करने की योजना बनाते हैं। उदाहरण के लिए, इस लेख में, वाक्यों का एक संग्रह बनाया जा रहा है। पुन्स संग्रह में दस्तावेज होंगे। प्रत्येक दस्तावेज़ एक अलग वाक्य होगा।

फायरबेस में, आप चित्र 7 में दिखाए गए "+ प्रारंभ संग्रह" लिंक पर क्लिक करके एक संवाद खींच सकते हैं जो आपको पुन्स संग्रह बनाने देगा। संग्रह आईडी जोड़ने के लिए आपको चित्र 8 में दिखाए गए अनुसार संकेत दिया जाएगा। इस मामले में, हम संग्रह को "पुंस" कहेंगे।

चित्र 8: Cloud Firestore संग्रह बनाना

एक बार संग्रह बन जाने के बाद, आप संग्रह के भीतर दस्तावेज़ बनाने में सक्षम होंगे जैसा कि चित्र 9 में दिखाया गया है। फिर से, एक दस्तावेज़ मूल रूप से आपके NoSQL डेटाबेस के भीतर एक रिकॉर्ड है। क्योंकि यह नोएसक्यूएल है, ऐसे कोई सख्त नियम नहीं हैं जो आपको यह सुनिश्चित करने के लिए मजबूर करते हैं कि प्रत्येक फ़ील्ड प्रत्येक दस्तावेज़ (रिकॉर्ड) में है या संग्रह के भीतर प्रत्येक दस्तावेज़ भी मेल खाता है। यह आप पर छोड़ दिया गया है।

चित्र 9: संग्रह में दस्तावेज़ जोड़ना

आपके द्वारा बनाए गए प्रत्येक दस्तावेज़ के लिए एक दस्तावेज़ आईडी की आवश्यकता होगी। आप या तो इस आईडी को दर्ज कर सकते हैं, या आप इसे खाली छोड़ना चुन सकते हैं और एक आईडी अपने आप जेनरेट हो जाएगी। उदाहरण में वाक्यों का उपयोग करके चीजों को अधिक सुपाठ्य रखने के लिए, मैं पहले दस्तावेज़ को Pun0001 की एक आईडी दूंगा।

दस्तावेज़ जोड़ने के लिए कंसोल का उपयोग करते समय, प्रत्येक दस्तावेज़ के लिए, आपको न केवल डेटा मान, बल्कि फ़ील्ड और प्रकारों का नाम भी निर्दिष्ट करना होगा। ड्रॉपडाउन आपको उस डेटाटाइप को चुनने की अनुमति देता है जिसे आप जोड़ना चाहते हैं।

चित्र 10 में, दो स्ट्रिंग फ़ील्ड जोड़े गए हैं जिनका उपयोग पुन उदाहरण के लिए किया जाएगा। ये एक श्रेणी . हैं और वाक्य के लिए पाठ (PunText )।

चित्र 10: एक पन दस्तावेज़ सेट करना।

जब चित्र 10 में दिखाए गए डायलॉग पर सेव बटन पर क्लिक किया जाता है, तो दस्तावेज़ (जो मूल रूप से एक रिकॉर्ड है) बनाया जाएगा जैसा कि चित्र 11 में दिखाया गया है। इस बिंदु पर, क्लाउड पर एक क्लाउड फायरस्टोर डेटाबेस बनाया गया है और एक रिकॉर्ड ( दस्तावेज़) जोड़ा गया है! अधिक सटीक रूप से, "पुंस" नामक एक संग्रह बनाया गया है जिसमें "पुन0001" नामक एक दस्तावेज़ है जिसमें श्रेणी और पुन टेक्स्ट नामक फ़ील्ड शामिल हैं।

चित्र 11: एक दस्तावेज़ के साथ क्लाउड फायरस्टोर डेटाबेस जोड़ा गया!

ध्यान दें कि इस बिंदु पर, यदि आप कंसोल का उपयोग करके अतिरिक्त रिकॉर्ड जोड़ना चाहते हैं, तो आप चित्र 11 के मध्य में दिखाए गए "+ दस्तावेज़ जोड़ें" लिंक पर क्लिक करेंगे। फिर आप आईडी, श्रेणियों और पन टेक्स्ट के साथ अतिरिक्त वाक्य जोड़ सकते हैं। आप यह सुनिश्चित करने के लिए सावधान रहना चाहते हैं कि हर बार जब आप एक नया वाक्य जोड़ते हैं तो आप समान फ़ील्ड नामों का उपयोग करते हैं।

जबकि आप सोच सकते हैं कि फ़ील्ड नामों को फिर से दर्ज करना कठिन है, यह NoSQL के लचीलेपन के कारण है। इससे निजात पाने का एक तरीका एक वेब एप्लिकेशन बनाना है जो आपके काम के उस हिस्से को पूरा करेगा!

नोट:आप चित्र 11 में देखेंगे कि कुछ ऐसे स्थान हैं जहाँ आप नए संग्रह शुरू कर सकते हैं। NoSQL संग्रह और दस्तावेज़ों की संरचना में खुदाई करना इस लेख के दायरे से बाहर है।

क्लाउड फायरस्टोर तक पहुंचने के लिए वेब एप्लिकेशन बनाना

अपने Cloud Firestore सेट अप के साथ, अब आप Firebase साइट के बाहर से डेटा जोड़ सकते हैं। ऐसा करने के लिए, आपको सबसे पहले फायरबेस से कुछ जानकारी प्राप्त करनी होगी जो आपको अपने वेब ऐप को आपके द्वारा बनाए गए फायरबेस प्रोजेक्ट से जोड़ने देगी।

नेविगेशन मेनू के ऊपरी बाएँ भाग में प्रोजेक्ट अवलोकन लिंक पर क्लिक करके प्रारंभ करें। यह आपको आपके प्रोजेक्ट के अवलोकन पृष्ठ पर ले जाएगा जैसा कि चित्र 12 में दिखाया गया है।

चित्र 12: फायरबेस प्रोजेक्ट ओवरव्यू पेज

इस पृष्ठ पर, आप देखेंगे कि चार प्रोजेक्ट प्रकारों के लिए आइकन हैं जिन्हें चुना जा सकता है। ये आईओएस, एंड्रॉइड, वेब और यूनिटी के लिए हैं। एक वेब ऐप किया जा रहा है यह इंगित करने के लिए आइकन पर क्लिक करें। यह चित्र 13 में दिखाया गया संवाद प्रदर्शित करेगा जो आवेदन के लिए एक नाम पूछेगा। बनाए जा रहे नाम का उपयोग आपके द्वारा बनाए गए वेब ऐप को Firebase प्रोजेक्ट और Firebase प्रोजेक्ट की सुविधाओं के साथ समन्वयित करने के लिए किया जाता है। इस डेमो के लिए, मैं "माई पुनी वेब ऐप" नाम का उपयोग कर रहा हूं और रजिस्टर ऐप बटन पर क्लिक कर रहा हूं।

एक बार क्लिक करने के बाद, आपको एक स्क्रीन के साथ प्रस्तुत किया जाएगा जिसमें HTML कोड शामिल होगा जिसे आप अपने वेब एप्लिकेशन में जोड़ेंगे। यह HTML कोड ही आपके ऐप्लिकेशन से Firebase को जोड़ता है।

चित्र 13: वेब ऐप के लिए फायरबेस कोड।

आप इस कोड को HTML पेज में पेस्ट करने के लिए कॉपी करना चाहेंगे जिसे हम इस लेख के अगले चरणों में बाद में बनाएंगे। यदि आप चित्र 13 में दिखाए गए पृष्ठ को छोड़ देते हैं, तो आप हमेशा Firebase कंसोल से इस ऐप कोड पर वापस आ सकते हैं। बस ऊपरी दाएं कोने में प्रोजेक्ट ओवरव्यू लिंक के बगल में स्थित गियर पर क्लिक करें और प्रोजेक्ट सेटिंग्स का चयन करें। परिणामी पृष्ठ में आपके प्रोजेक्ट की जानकारी शामिल होगी

Firestore तक पहुंचने के लिए वेब पेज / ऐप बनाना

फायरबेस की तरफ सब कुछ सेट अप के साथ, यह वेब पेज बनाने का समय है जो डेटा को जोड़ने की अनुमति देगा। सूची 1 में पहले चित्र 1 में दिखाए गए पृष्ठ को प्रदर्शित करने के लिए मूल HTML शामिल है।

लिस्टिंग 1: पुनी पेज के लिए बेसिक HTML।

<html> 
<head> 
<title>Punny or Not</title> 
</head> 
  
<body> 
<div class="main-form"> 
 <h1 id="punTimes">Punny or Not!</h1> 
    Pun Number/ID: <input type="text" placeholder="Pun ID: " id="PunID"><br /><br /> 
    Pun Category: <input type="text" placeholder="Category: " id="Category"><br /><br /> 
    Pun Text: <input type="text" placeholder="Enter Text here..." id="PunText"> <br /><br /> 
  
<br /><br /> 
 <button id="saveButton" onclick="storeData()" >Submit</button> 
</div> 
  
<script src="./pun.js"></script> 
  
</body> 
</html> 

लिस्टिंग 1 मूल HTML है। उपयोगकर्ता को डेटा दर्ज करने की अनुमति देने के लिए तीन फ़ील्ड स्थापित किए जा रहे हैं। प्रत्येक को एक आईडी दी जाती है जिसे दर्ज किए गए डेटा को एक दस्तावेज़ में जोड़ने की आवश्यकता होगी जिसे फायरस्टोर में जोड़ा जाएगा। डेटा स्टोर करने के लिए एक ईवेंट के साथ एक बटन भी शामिल है। वर्तमान में, वह फ़ंक्शन लिखा नहीं गया है; यही इस लेख का लक्ष्य है! मैंने pun.js नामक बाहरी JavaScript फ़ाइल का लिंक भी शामिल किया है। प्रारंभ में, वह फ़ाइल खाली है, लेकिन उसे शीघ्र ही बदल दिया जाएगा!

यह लिस्टिंग 1 के भीतर है कि आप उस कोड को पेस्ट करना चाहेंगे जो पहले फायरबेस से कॉपी किया गया था। चित्र 13 में दिखाया गया कोड आपके बॉडी टैग के अंत में चिपकाया जाना चाहिए, इस मामले में puns.js स्क्रिप्ट को शामिल करने से ठीक पहले। मैंने अपने पन ऐप का कोड लिस्टिंग 2 में पेस्ट कर दिया है।

लिस्टिंग 2: फायरस्टोर कोड के साथ एचटीएमएल पेज जोड़ा गया।

<html> 
<head> 
    <title>Punny or Not</title> 
</head> 
  
<body> 
<div class="main-form"> 
 <h1 id="punTimes">Punny or Not!</h1> 
    Pun Number/ID: <input type="text" placeholder="Pun ID: " id="PunID"><br /><br /> 
    Pun Category: <input type="text" placeholder="Category: " id="Category"><br /><br /> 
    Pun Text: <input type="text" placeholder="Enter Text here..." id="PunText"> <br /><br /> 
  
<br /><br /> 
 <button id="saveButton" onclick="storeData()" >Submit</button> 
</div> 
  
<!-- The core Firebase JS SDK is always required and must be listed first --> 
<script src="https://www.gstatic.com/firebasejs/7.9.1/firebase-app.js"></script> 
  
<!-- TODO: Add SDKs for Firebase products that you want to use 
     https://firebase.google.com/docs/web/setup#available-libraries --> 
<script src="https://www.gstatic.com/firebasejs/7.9.1/firebase-analytics.js"></script> 
  
<script> 
  // Your web app's Firebase configuration 
  var firebaseConfig = { 
    apiKey: "AIzaSyAJUQUXm_oYXAo2M1yukGT8lnTKeuMd53o", 
    authDomain: "the-pun-project.firebaseapp.com", 
    databaseURL: "https://the-pun-project.firebaseio.com", 
    projectId: "the-pun-project", 
    storageBucket: "the-pun-project.appspot.com", 
    messagingSenderId: "354041199852", 
    appId: "1:354041199852:web:4f9a613485174688f0f9c9", 
    measurementId: "G-4672MVCRK2" 
  }; 
  // Initialize Firebase 
  firebase.initializeApp(firebaseConfig); 
  firebase.analytics(); 
</script> 
  
<script src="./pun.js"></script> 
  
</body> 
</html> 

अपने HTML में स्क्रिप्ट जोड़ने के साथ, आपने Firebase तक पहुंचने के लिए अपने एप्लिकेशन को तार-तार कर दिया है। हालाँकि, आपको कोड की एक और पंक्ति जोड़ने की आवश्यकता है। जबकि जनरेट किया गया कोड Firebase को कनेक्शन प्रदान करेगा, आपको कोड प्राप्त करने के लिए एक अतिरिक्त लिंक जोड़ने की आवश्यकता होगी जो Firebase के भीतर Cloud Firestore डेटाबेस तक पहुंच बनाएगा। आप लिस्टिंग में निम्न स्क्रिप्ट स्रोत पंक्ति जोड़ना चाहेंगे:

इसे कॉल के ठीक बाद इसमें जोड़ा जा सकता है:

अगला कदम उस तर्क को जोड़ना है जो उपयोगकर्ता से दर्ज किए गए फ़ील्ड को उन फ़ील्ड के साथ जोड़ देगा जिन्हें फायरस्टोर डेटाबेस में जोड़ा जाना है। यह कोड को साफ रखने के लिए puns.js फ़ाइल में किया जाएगा।

प्रक्रिया पहले एक डेटाबेस वैरिएबल बनाना है जो फायरबेस क्लाउड फायरस्टोर डेटाबेस से जुड़ा होगा। फिर वेरिएबल्स बनाने की आवश्यकता होगी जो उपयोगकर्ता द्वारा हमारे पेज पर दर्ज किए गए मानों से भरे जा सकते हैं। यह मानक document.getElementById() कॉल के साथ किया जाएगा। अंत में, वेब पेज से चमचमाते चर को पुन्स संग्रह के भीतर एक दस्तावेज़ के भीतर क्लाउड फायरस्टोर डेटाबेस में फ़ील्ड के रूप में जोड़ा जाना चाहिए। लिस्टिंग 3 जावास्क्रिप्ट को दिखाती है जो यह सब पूरा कर सकती है।

लिस्टिंग 3: pun.js JavaScript फ़ाइल

var db = firebase.firestore();
 
function storeData() {
 
  var inputPun = document.getElementById("PunID").value;
  var inputCategory = document.getElementById("Category").value;
  var inputText = document.getElementById("PunText").value;
 
     db.collection("Puns").doc(inputPun).set({
         Category: inputCategory,
         PunText: inputText
     })
     .then(function() {
         console.log("Doc successful");
     })
     .catch(function(error) {
        console.error("Error writing doc", error);
     });
}

ध्यान दें कि लिस्टिंग 3 में, डेटाबेस को db नामक वेरिएबल के साथ बनाया गया था। इस वेरिएबल का उपयोग तब संग्रह के नाम को निर्दिष्ट करके नया दस्तावेज़ (रिकॉर्ड) बनाने के लिए किया जाता है जिसे चित्र 8 में दिखाए गए प्रक्रिया में पुन्स कहा जाता है। इसके बाद दस्तावेज़ का नाम आता है, जो इस मामले में हमारी पन आईडी है। उपयोगकर्ता और चर में डाल दिया, inputPun. दस्तावेज़ के भीतर, दो फ़ील्ड जोड़े जा रहे हैं, जो सेट के भीतर किया जाता है। फ़ील्ड जोड़ने के लिए, फ़ील्ड का नाम सूचीबद्ध किया जाता है, फिर एक कोलन और अंतिम रूप से जोड़ा जाने वाला स्ट्रिंग मान। इस मामले में, इनपुट श्रेणी को श्रेणी फ़ील्ड में जोड़ा जा रहा है और इनपुट टेक्स्ट को पुनटेक्स्ट फ़ील्ड में जोड़ा जा रहा है।

लिस्टिंग में कंसोल पर संदेश लॉग करने के लिए कुछ परीक्षण और त्रुटि तर्क भी शामिल हैं। यदि आप अपने ब्राउज़र का डेवलपर कंसोल खोलते हैं, तो आपको एक "डॉक्टर सफल" संदेश दिखाई देगा, जब कोई दस्तावेज़ आपके क्लाउड फायरस्टोर में जोड़ा जाएगा जैसा कि चित्र 14 में दिखाया गया है।

चित्र 14: सफलतापूर्वक जोड़ा गया दस्तावेज़।

यह पुष्टि की जा सकती है कि फायरबेस कंसोल में प्रोजेक्ट पर वापस जाकर और डेटाबेस को देखकर दस्तावेज़ जोड़ा गया था (बाएं नेविगेशन मेनू पर डेटाबेस पर क्लिक करके किया गया)। चित्र 15 दिखाता है कि नया वाक्य जोड़ना सफल रहा।

चित्र 15: नए pun002 दस्तावेज़ के साथ पुन्स संग्रह

इसे लपेटना

इस लेख में Firebase Cloud Firestore NoSQL डेटाबेस में दस्तावेज़ जोड़ने पर बहुत कुछ शामिल किया गया था। आपने इसे कंसोल और एक साधारण वेब ऐप दोनों से सीखा है। यह दिखाने के लिए सिर्फ एक शुरुआत है कि जोड़ना कितना आसान हो सकता है। ऐसा कहकर, सीआरयूडी सिस्टम में केवल एक कदम जोड़ना। अभी और सीखना बाकी है! ओह, और अगर आपको वाक्य पसंद हैं, तो मेरी किताब, पुनी या नॉट बुक ऑफ पुंस देखें, जो अमेज़न पर उपलब्ध है!

# # #