धारणा डेटाबेस में डेटा को स्टोर करने के लिए प्रतिक्रिया के साथ धारणा के एपीआई का उपयोग कैसे करें

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

धारणा एक सुविधा संपन्न एपीआई प्रदान करती है जिसे आप किसी भी एप्लिकेशन में उसके डेटाबेस सिस्टम के साथ इंटरैक्ट करने के लिए आसानी से एकीकृत कर सकते हैं। इसके अलावा, आप अपने एप्लिकेशन की विशिष्ट आवश्यकताओं को पूरा करने के लिए प्रदान की गई कार्यक्षमता को अनुकूलित कर सकते हैं।

एक धारणा एकीकरण स्थापित करें

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

धारणा एकीकरण बनाने के लिए, इन चरणों का पालन करें।

1. वहां जाओ धारणा का एकीकरण वेबपेज, साइन अप करें और अपने खाते में लॉग इन करें। इंटीग्रेशन ओवरव्यू पेज पर क्लिक करें नया एकीकरण एक नया स्थापित करने के लिए।
2. अपने एकीकरण के लिए एक नाम प्रदान करें, यह सुनिश्चित करने के लिए जांचें कि आपके पास सही एकीकरण क्षमताओं की सेटिंग चयनित है, और क्लिक करें जमा करना. ये सेटिंग्स परिभाषित करती हैं कि आपका एप्लिकेशन धारणा के साथ कैसे इंटरैक्ट करता है।
3. प्रदान किए गए गुप्त आंतरिक एकीकरण टोकन की प्रतिलिपि बनाएँ और क्लिक करें परिवर्तनों को सुरक्षित करें.

एक धारणा डेटाबेस बनाएँ

अपने एकीकरण सेट अप के साथ, अपने में लॉग इन करें धारणा कार्यक्षेत्र अपने आवेदन के लिए एक डेटाबेस बनाने के लिए। फिर, इन चरणों का पालन करें:

1. क्लिक करें नया पृष्ठ आपके धारणा कार्यक्षेत्र के बाएँ मेनू फलक पर बटन।
2. पॉप-अप विंडो में, अपने डेटाबेस का नाम और धारणा द्वारा स्थापित तालिका प्रदान करें। अंत में, दबाकर अपनी तालिका में आवश्यक फ़ील्ड जोड़ें + आपकी टेबल के हेडर सेक्शन पर बटन।
3. फिर, क्लिक करें पूर्ण पृष्ठ के रूप में खोलें पृष्ठ भरने के लिए डेटाबेस पृष्ठ का विस्तार करने के लिए बटन, और URL पर डेटाबेस आईडी देखें।
4. अपने रिएक्ट एप्लिकेशन से डेटाबेस के साथ इंटरैक्ट करने के लिए आपको डेटाबेस आईडी की आवश्यकता होगी। डेटाबेस आईडी अंतिम फ़ॉरवर्ड स्लैश (/) और प्रश्न चिह्न (?) के बीच डेटाबेस URL में वर्णों की स्ट्रिंग है।
5. अंत में, डेटाबेस को अपने एकीकरण से कनेक्ट करें। यह प्रक्रिया डेटाबेस को एकीकरण पहुंच प्रदान करती है ताकि आप रिएक्ट एप्लिकेशन से अपने डेटाबेस पर डेटा को स्टोर और पुनः प्राप्त कर सकें।
6. अपने डेटाबेस पेज पर, क्लिक करें तीन बिंदु डेटाबेस सेटिंग्स मेनू खोलने के लिए ऊपरी दाएं कोने में। मेनू साइड पेन के नीचे, क्लिक करें कनेक्शन जोड़ें बटन पर क्लिक करें और अपने एकीकरण को खोजें और चुनें।

एक एक्सप्रेस सर्वर बनाएँ

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

आप इस प्रोजेक्ट का कोड इसमें पा सकते हैंगिटहब रिपॉजिटरी.

अगला, इन पैकेजों को स्थापित करें।

npm इंस्टाल @ notionhq/client cors body-parser dotenv

CORS पैकेज एक्सप्रेस बैकएंड और रिएक्ट क्लाइंट को एपीआई एंडपॉइंट्स के माध्यम से डेटा का आदान-प्रदान करने की अनुमति देता है। आने वाले HTTP अनुरोधों को संसाधित करने के लिए आप बॉडी-पार्सर पैकेज का उपयोग कर सकते हैं। आप क्लाइंट से JSON पेलोड पार्स करेंगे, विशिष्ट डेटा पुनर्प्राप्त करेंगे, और उस डेटा को req.body प्रॉपर्टी में ऑब्जेक्ट के रूप में उपलब्ध कराएंगे। अंत में, dotenv पैकेज पर्यावरण चर को एक से लोड करना संभव बनाता है .env अपने आवेदन में फाइल करें।

सर्वर फ़ोल्डर की रूट डायरेक्टरी में, एक .env फ़ाइल बनाएँ, और नीचे कोड जोड़ें:

NOTION_INTEGRATION_TOKEN = 'आपका एकीकरण गुप्त टोकन'
NOTION_DATABASE_ID = 'डेटाबेस आईडी'

एक्सप्रेस सर्वर सेट करें

खोलें index.js सर्वर प्रोजेक्ट फ़ोल्डर में फ़ाइल करें, और यह कोड जोड़ें:

कॉन्स्ट एक्सप्रेस = ज़रूरत होना('अभिव्यक्त करना');
कॉन्स्ट {ग्राहक} = ज़रूरत होना('@ धारणा/ग्राहक');
कॉन्स्ट कॉर्स = ज़रूरत होना('कॉर्स');
कॉन्स्ट बॉडीपार्सर = ज़रूरत होना('बॉडी-पार्सर');
कॉन्स्ट jsonParser = bodyParser.json ();
कॉन्स्ट बंदरगाह = प्रक्रिया.env। पोर्ट || 8000;
ज़रूरत होना('दोतेनव'.कॉन्फिग ();
कॉन्स्ट ऐप = एक्सप्रेस ();
app.use (cors ());
कॉन्स्ट authToken = process.env। NOTION_INTEGRATION_TOKEN;
कॉन्स्ट धारणा डीबीआईडी ​​= प्रक्रिया.env। NOTION_DATABASE_ID;
कॉन्स्ट धारणा = नया ग्राहक ({प्रमाणन: ऑथटोकन});
ऐप पोस्ट ('/नोशनएपीपोस्ट', जेसनपार्सर, async(अनुरोध, रेस) => {
कॉन्स्ट {Fullname, CompanyRole, Location} = req.body;
कोशिश { 
कॉन्स्ट प्रतिक्रिया = इंतजार धारणा। पृष्ठ। बनाएँ ({
 जनक: {
 डेटाबेस_आईडी: धारणा डीबीआईडी,
 },
 गुण: {
 पूरा नाम: {
 शीर्षक: [
 {
 मूलपाठ: {
 सामग्री: पूरा नाम
 },
 },
 ],
 },
 कंपनी भूमिका: {
 रिच पाठ: [
 {
 मूलपाठ: {
 सामग्री: CompanyRole
 },
 },
 ],
 },
 जगह: {
 रिच पाठ: [
 {
 मूलपाठ: {
 सामग्री: स्थान
 },
 },
 ],
 },
 },
 });
 res.send (प्रतिक्रिया);
सांत्वना देना।लकड़ी का लट्ठा("सफलता");
 } पकड़ना (गलती) {
सांत्वना देनालॉग (त्रुटि);
 }
});
ऐप.गेट ('/नोशनएपीगेट', async(अनुरोध, रेस) => {
कोशिश { 
कॉन्स्ट प्रतिक्रिया = इंतजार धारणा.डेटाबेस.क्वेरी ({
 डेटाबेस_आईडी: धारणा डीबीआईडी, 
 प्रकार: [
 {
 टाइमस्टैम्प: 'बनाया_समय',
 दिशा: 'अवरोही',
 },
 ]
 });
 res.send (प्रतिक्रिया);
कॉन्स्ट {परिणाम} = प्रतिक्रिया;
सांत्वना देना।लकड़ी का लट्ठा("सफलता");
 } पकड़ना (गलती) {
सांत्वना देनालॉग (त्रुटि);
 }
});
app.listen (बंदरगाह, () => {
सांत्वना देना।लकड़ी का लट्ठा('सर्वर पोर्ट 8000 पर सुन रहा है!');
});

यह कोड निम्न कार्य करता है:

• धारणा की क्लाइंट लाइब्रेरी धारणा के एपीआई के साथ बातचीत करने और विभिन्न कार्यों को करने का एक तरीका प्रदान करती है, जैसे आपके डेटाबेस में डेटा पढ़ना और लिखना।
• क्लाइंट विधि नोटियन ऑब्जेक्ट का एक नया उदाहरण बनाती है। इस ऑब्जेक्ट को ऑथ पैरामीटर के साथ प्रारंभ किया गया है जो प्रमाणीकरण टोकन, एकीकरण टोकन लेता है।
• दो एचटीटीपी विधियां—प्राप्त करें और पोस्ट करें—नोशन के एपीआई के लिए अनुरोध करें। पोस्ट मेथड अपने हेडर में एक डेटाबेस आईडी लेता है जो क्रिएट मेथड का उपयोग करके डेटा लिखने के लिए डेटाबेस को निर्दिष्ट करता है। अनुरोध के मुख्य भाग में नए पृष्ठ के गुण भी शामिल हैं: संग्रहीत करने के लिए उपयोगकर्ता डेटा।
• प्राप्त विधि डेटाबेस से उपयोगकर्ता डेटा को क्वेरी और पुनर्प्राप्त करती है, और उन्हें बनाए जाने के समय के अनुसार क्रमबद्ध करती है।

अंत में, विकास सर्वर का उपयोग करके स्पिन करें Nodemon, Node.js मॉनिटर:

एनपीएम प्रारंभ

एक रिएक्ट क्लाइंट सेट करें

आपके प्रोजेक्ट फ़ोल्डर की मूल निर्देशिका में, एक रिएक्ट एप्लिकेशन बनाएं, और Axios स्थापित करें। आप इस लाइब्रेरी का उपयोग ब्राउज़र से HTTP अनुरोध करने के लिए करेंगे।

एनपीएम अक्षीय स्थापित करें

POST और GET API तरीके लागू करें

खोलें src/App.js फ़ाइल, बॉयलरप्लेट प्रतिक्रिया कोड हटाएं, और इसे इस कोड से बदलें:

आयात प्रतिक्रिया, {useState} से'प्रतिक्रिया';
आयात Axios से'अक्षीय';
समारोहअनुप्रयोग() {
कॉन्स्ट [नाम, सेटनाम] = उपयोगस्टेट ("");
कॉन्स्ट [रोल, सेटरोल] = यूज़स्टेट ("");
कॉन्स्ट [स्थान, सेट स्थान] = उपयोगस्टेट ("");
कॉन्स्ट [APIData, setAPIData] = useState([]);
कॉन्स्ट हैंडल सबमिट करें = (इ) => {
 e.preventDefault ();
 Axios.post (' http://localhost: 8000/नोशनएपीआईपोस्ट', {
 पूरा नाम: नाम,
 कंपनी भूमिका: भूमिका,
 स्थान: स्थान
 })।पकड़ना(गलती => {
सांत्वना देनालॉग (त्रुटि);
 });
 Axios.get(' http://localhost: 8000/नोशनएपीआईगेट')
 ।तब(जवाब => {
 सेटएपीआईडेटा (प्रतिक्रिया.डेटा.परिणाम);
सांत्वना देना.लॉग (प्रतिक्रिया.डेटा.परिणाम);
 })।पकड़ना(गलती => { 
सांत्वना देनालॉग (त्रुटि);
 }); 
 };
वापस करना (

"अनुप्रयोग">
"ऐप-हेडर">
"प्रपत्र">


प्रथम नाम</p>
 टाइप ="मूलपाठ"
 प्लेसहोल्डर ="पहला नाम ..."
 onChange={(e) => {setName (e.target.value)}}
 />

कंपनी भूमिका</p>
 टाइप ="मूलपाठ"
 प्लेसहोल्डर = "कंपनी की भूमिका..."
 onChange={(e) => {setRole (e.target.value)}}
 />

 कंपनी भूमिका</p>
 टाइप ="मूलपाठ"
 प्लेसहोल्डर = "जगह..."
 onChange={(e) => {सेटलोकेशन (e.target.value)}}
 />
"जमा करना">जमा करें</button>
 </form>
 </div>

"आंकड़े">
एपीआई डेटा</p>
 {
 APIData.map ((आंकड़े) => {
वापस करना (



नाम: {डेटा.गुण। पूरा नाम शीर्षक [0].plain_text</p>

भूमिका: {data.properties. CompanyRole.rich_text[0].plain_text</p>

स्थान: {data.properties. स्थान.अमीर_पाठ [0].plain_text</p> 
 </div>
 )
 })
 }
 </div>
 </header>
 </div>
 );
}




निर्यातगलती करना अनुप्रयोग;

यह घटक एक फॉर्म प्रस्तुत करता है जो उपयोगकर्ता को अपना नाम, भूमिका और स्थान की जानकारी सबमिट करने की अनुमति देता है। यह स्टेट वेरिएबल्स में उपयोगकर्ता के इनपुट मानों को स्टोर करने के लिए यूजस्टेट हुक का उपयोग करता है और फिर सर्वर-साइड एपीआई के लिए एक POST अनुरोध करता है, जब वे सबमिट बटन दबाते हैं तो उपयोगकर्ता की जानकारी पास करते हैं।

सफल सबमिशन पर, यह कोड उसी सर्वर-साइड एपीआई के लिए एक GET अनुरोध करता है, जो अभी-अभी सबमिट किए गए डेटा को पुनः प्राप्त करता है। अंत में, यह पुनर्प्राप्त डेटा पर मैप करता है, राज्य में संग्रहीत होता है, और इसे में प्रस्तुत करता है एपीआई डेटा प्रपत्र के नीचे अनुभाग।

रिएक्ट के विकास सर्वर को स्पिन करें और आगे बढ़ें http://localhost: परिणाम देखने के लिए आपके ब्राउज़र पर 3000।

सामग्री प्रबंधन प्रणाली के रूप में धारणा का उपयोग करना

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