सुपरबेस क्लाउड स्टोरेज के साथ CRUD रिएक्ट एप्लिकेशन कैसे बनाएं

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

एक रिएक्ट डेवलपर के रूप में, CRUD (क्रिएट, रीड, अपडेट, डिलीट) ऑपरेशंस को लागू करने में महारत हासिल करना मजबूत और कुशल वेब समाधान बनाने की दिशा में एक महत्वपूर्ण पहला कदम है।

अपने बैकएंड समाधान के रूप में सुपरबेस क्लाउड स्टोरेज का उपयोग करते हुए एक सरल रिएक्ट सीआरयूडी एप्लिकेशन बनाना सीखें।

सुपरबेस बैकएंड-एज-ए-सर्विस सॉल्यूशन

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

BaaS के साथ, आप इन सेवाओं को स्वतंत्र रूप से विकसित और बनाए रखने की आवश्यकता के बिना डेटा स्टोरेज, ऑथेंटिकेशन सिस्टम, रीयल-टाइम सब्सक्रिप्शन आदि जैसी सुविधाओं का उपयोग कर सकते हैं।

अपने प्रोजेक्ट में Supabase जैसे BaaS समाधानों को एकीकृत करके, आप मजबूत बैकएंड सेवाओं का लाभ उठाते हुए भी विकास और शिपिंग समय को काफी कम कर सकते हैं।

एक सुपरबेस क्लाउड स्टोरेज प्रोजेक्ट सेट करें

आरंभ करने के लिए, पर जाएँ सुपाबेस की वेबसाइट, और एक खाते के लिए साइन अप करें।

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

   बनाएंमेज उत्पाद (
    आईडी बिगिंट डिफ़ॉल्ट रूप से पहचान प्राथमिक कुंजी के रूप में उत्पन्न होता है,
    नाम पाठ,
    विवरण पाठ
   );

रिएक्ट सीआरयूडी एप्लिकेशन सेट करें

एक रिएक्ट एप्लिकेशन बनाएं, रूट डायरेक्टरी में नेविगेट करें, और एक नई फाइल बनाएं, .env, कुछ पर्यावरण चर सेट करने के लिए। अपने सुपरबेस पर जाएं समायोजन पेज, खोलें एपीआई अनुभाग, और के लिए मानों की प्रतिलिपि बनाएँ प्रोजेक्ट यूआरएल और सार्वजनिक एनोन कुंजी. इन्हें अपनी env फ़ाइल में पेस्ट करें:

REACT_APP_SUPABASE_URL = प्रोजेक्ट URL
REACT_APP_SUPABASE_ANON_KEY = सार्वजनिक कुंजी

इसके बाद, अपने रिएक्ट प्रोजेक्ट में सुपरबेस की जावास्क्रिप्ट लाइब्रेरी को स्थापित करने के लिए इस कमांड को चलाएँ:

एनपीएम @ सुपरबेस / सुपरबेस-जेएस स्थापित करें

सुपरबेस क्लाइंट को कॉन्फ़िगर करें

में स्रोत निर्देशिका, एक नया बनाएँ utils/SupabaseClient.js फ़ाइल और नीचे कोड:

आयात {क्रिएट क्लाइंट} से'@सुपाबेस/सुपबेस-जेएस'; 
कॉन्स्ट supabaseURL = process.env। REACT_APP_SUPABASE_URL;
कॉन्स्ट supabaseAnonKey = process.env। REACT_APP_SUPABASE_ANON_KEY;
निर्यातकॉन्स्ट supabase = createClient (supabaseURL, supabaseAnonKey);

यह कोड Supabase URL और एक सार्वजनिक एनोन कुंजी प्रदान करके एक Supabase क्लाइंट उदाहरण बनाता है, जिससे रिएक्ट एप्लिकेशन को Supabase API के साथ संवाद करने और CRUD संचालन करने की अनुमति मिलती है।

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

CRUD संचालन को लागू करें

अब जब आपने Supabase के क्लाउड स्टोरेज और अपने रिएक्ट प्रोजेक्ट को सफलतापूर्वक सेट कर लिया है, तो अपने रिएक्ट एप्लिकेशन में CRUD ऑपरेशंस को लागू करें।

1. डेटाबेस में डेटा जोड़ें

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

आयात {यूज़स्टेट, यूज़ इफेक्ट} से'प्रतिक्रिया';
आयात उत्पाद कार्ड से'./components/ProductCard';
आयात {सुपरबेस} से'./utils/SupabaseClient';
आयात'./App.css';
निर्यातगलती करनासमारोहअनुप्रयोग() {
कॉन्स्ट [नाम, सेटनाम] = उपयोगस्टेट ('');
कॉन्स्ट [विवरण, सेट डिस्क्रिप्शन] = यूज़स्टेट ('');
asyncसमारोहaddProduct() {
कोशिश {
कॉन्स्ट {डेटा, त्रुटि} = इंतजार co
 ।से('उत्पाद')
 ।डालना({
 नाम नाम,
 विवरण: विवरण
 })
 ।अकेला();
अगर (गलती) फेंकना गलती;
खिड़की.स्थान। पुनः लोड ();
 } पकड़ना (गलती) {
 चेतावनी (त्रुटि संदेश);
 }
 }

यह कोड एक परिभाषित करता है addProduct हैंडलर फ़ंक्शन जो एसिंक्रोनस रूप से एक नया रिकॉर्ड सम्मिलित करता है उत्पादों क्लाउड डेटाबेस में तालिका। यदि इन्सर्ट ऑपरेशन सफल होता है तो अपडेटेड उत्पाद सूची को दर्शाने के लिए पेज फिर से लोड होगा।

2. क्लाउड डेटाबेस से डेटा पढ़ें

डेटाबेस से संग्रहीत डेटा लाने के लिए हैंडलर फ़ंक्शन को परिभाषित करें।

कॉन्स्ट [उत्पाद, सेटप्रोडक्ट्स] = यूज़स्टेट ([]);
asyncसमारोहgetProducts() {
कोशिश {
कॉन्स्ट {डेटा, त्रुटि} = इंतजार co
 ।से('उत्पाद')
 ।चुनना('*')
 सीमा (10);
अगर (गलती) फेंकना गलती;
अगर (डेटा! = व्यर्थ) {
 सेटप्रोडक्ट्स (डेटा);
 }
 } पकड़ना (गलती) {
 चेतावनी (त्रुटि संदेश);
 }
 }
 उपयोग प्रभाव (() => {
 उत्पाद प्राप्त करें ();
 }, []);

यह कोड अतुल्यकालिक रूप से डेटाबेस से डेटा प्राप्त करता है। फ़ेच क्वेरी उत्पाद तालिका से सभी डेटा पुनर्प्राप्त करती है, परिणामों को अधिकतम 10 रिकॉर्ड तक सीमित करती है, और अद्यतन करती है उत्पाद' पुनर्प्राप्त डेटा के साथ स्थिति।

useEffectप्रतिक्रिया हुक चलाता है getProducts घटक माउंट होने पर कार्य करता है। यह सुनिश्चित करता है कि जब घटक प्रारंभ में प्रस्तुत किया जाता है तो उत्पादों का डेटा प्राप्त और प्रस्तुत किया जाता है। अंत में, उस कोड को जोड़ें जो ब्राउज़र पर इनपुट JSX तत्वों को प्रस्तुत करता है ताकि उपयोगकर्ताओं को एक सुपरबेस डेटाबेस में उत्पादों को जोड़ने और डेटाबेस से प्राप्त मौजूदा उत्पादों को प्रदर्शित करने की अनुमति मिल सके।

वापस करना (
 <>

"हैडर-कंटेनर">
स्टोर उत्पाद</h3>
 </div>
 </header>


उत्पाद डेटा को सुपरबेस डेटाबेस में जोड़ें </h3>


"निर्माण-उत्पाद-कंटेनर">


उत्पाद का नाम</label>
 टाइप ="मूलपाठ"
 आईडी ="नाम"
 onChange={(e) => setName (e.target.value)}
 />
उत्पाद विवरण</label>
 टाइप ="मूलपाठ"
 आईडी ="विवरण"
 ऑन चेंज = {(ई) => सेटडिस्क्रिप्शन (ई.टारगेट.वैल्यू)}
 />


 ऐडप्रोडक्ट ()}>
 उत्पाद जोड़ें
 </button>
 </div>
 </div>




वर्तमान उत्पाद में डेटाबेस</h3>

"उत्पाद-सूची-कंटेनर">
 {उत्पाद.नक्शा((उत्पाद) => (



 </div>
 ))}
 </div>
 </>
 );
}

में प्राप्त डेटा उत्पाद सरणी सहारा के रूप में पारित किया जाता है और गतिशील रूप से प्रस्तुत किया जाता है उत्पाद कार्ड घटक का उपयोग करना नक्शा समारोह।

3. डेटाबेस में मौजूदा डेटा को अपडेट और डिलीट करें

कोई नया बनाएं अवयव/ProductCard.js फ़ाइल में /src निर्देशिका। हैंडलर कार्यों को परिभाषित करने से पहले, आइए उन राज्यों और JSX तत्वों को देखें जिन्हें आप इस घटक में लागू करेंगे।

आयात {यूज़स्टेट} से'प्रतिक्रिया';
आयात {सुपरबेस} से'../utils/SupabaseClient';
आयात'./productcard.styles.css';
निर्यातगलती करनासमारोहउत्पाद कार्ड(रंगमंच की सामग्री) {
कॉन्स्ट उत्पाद = सहारा उत्पाद;
कॉन्स्ट [संपादन, सेट एडिटिंग] = यूज़स्टेट (असत्य);
कॉन्स्ट [नाम, सेटनाम] = यूज़स्टेट (उत्पाद नाम);
कॉन्स्ट [विवरण, सेट डिस्क्रिप्शन] = यूज़स्टेट (उत्पाद विवरण);
वापस करना (
"उत्पाद-कार्ड">


 {संपादन असत्य? (


{उत्पाद का नाम</h5>


{उत्पाद.विवरण}</p>
"डिलीट-बटन" ऑनक्लिक = {() => उत्पाद हटाएं ()}> उत्पाद हटाएं </button>
"एडिट-बटन" ऑनक्लिक = {() => सेट एडिटिंग (सत्य)}>उत्पाद संपादित करें</button>
 </div>
 ): (


संपादन उत्पाद</h4>
"गो-बैक-बटन" ऑनक्लिक = {() => सेट एडिटिंग (असत्य)}>वापस जाओ</button>


"नाम"> उत्पाद का नाम</label>
 टाइप ="मूलपाठ"
 आईडी ="नाम"
 डिफ़ॉल्ट वैल्यू = {उत्पाद नाम}
 onChange={(e) => setName (e.target.value)}/>
"विवरण"> उत्पाद विवरण </label>
 टाइप ="मूलपाठ"
 आईडी ="विवरण"
 defaultValue={product.description}
 ऑन चेंज = {(ई) => सेटडिस्क्रिप्शन (e.target.value)} />


"अपडेट-बटन" onClick={() => updateProduct()}>Update Product में सुपरबेस डीबी</button>
 </div>)}
 </div>
 </div>
 );
}

asyncसमारोहअद्यतन उत्पाद() {
कोशिश {
कॉन्स्ट {डेटा, त्रुटि} = इंतजार co
 ।से('उत्पाद')
 ।अद्यतन({
 नाम नाम,
 विवरण: विवरण
 })
 .eq('पहचान', उत्पाद आयडी);
अगर (गलती) फेंकना गलती;
खिड़की.स्थान। पुनः लोड ();
 } पकड़ना (गलती) {
 चेतावनी (त्रुटि संदेश);
 }
}

asyncसमारोहउत्पाद हटाएं() {
कोशिश {
कॉन्स्ट {डेटा, त्रुटि} = इंतजार co
 ।से('उत्पाद')
 ।मिटाना()
 .eq('पहचान', उत्पाद आयडी);
अगर (गलती) फेंकना गलती;
खिड़की.स्थान। पुनः लोड ();
 } पकड़ना (गलती) {
 चेतावनी (त्रुटि संदेश);
 }
}