ज़िंग ब्लॉग पर मेरे लेख से क्रॉस पोस्ट।

सुपाबेस एक खुला स्रोत फायरबेस विकल्प है। वे विभिन्न प्रकार की सेवाएँ प्रदान करते हैं, लेकिन इस लेख के प्रयोजनों के लिए, हम इस बात पर विचार करेंगे कि यह हमारे ग्रिड के लिए एक सरल बैकएंड के रूप में कैसे कार्य कर सकता है।

प्रारंभिक सेटअप

अपने ग्रिड को कॉन्फ़िगर करना शुरू करने से पहले हमें चीजों के सुपाबेस पक्ष पर कुछ कदम उठाने होंगे।

1. खाता निर्माण

हमें सबसे पहले सुपाबेस खाता बनाना होगा जिससे हम कनेक्ट होंगे। आप इस लिंक का उपयोग करके सुपाबेस के लिए साइन अप कर सकते हैं। एक बार जब आपका खाता बन जाए और ईमेल की पुष्टि हो जाए, तो अगले चरण पर आगे बढ़ें।

2. अपना पहला प्रोजेक्ट बनाएं

आगे बढ़ें और डैशबोर्ड पेज पर जाएं और एक नया प्रोजेक्ट बनाएं। प्रोजेक्ट का नाम और डेटाबेस पासवर्ड नोट करना सुनिश्चित करें।

3. परियोजना की जानकारी नोट करें

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

4. अपनी पहली तालिका बनाएं

साइड बार से टेबल एडिटर सेक्शन पर क्लिक करें। यहां से हम अपनी पहली तालिका बना सकते हैं

पहला कदम हमारी तालिका को एक नाम देना है, यहां मैं डेमोटेबल का उपयोग करूंगा

फिर हम कॉलम संपादित कर सकते हैं, इस उदाहरण के लिए मेरे पास दो कॉलम होंगे। एक प्रथम नाम के लिए और एक अंतिम नाम के लिए।

5. कुछ नमूना डेटा जोड़ें

6. सुरक्षा सेटिंग्स अपडेट करें

हम अस्थायी रूप से रो लेवल सिक्योरिटी को अक्षम कर देंगे ताकि हम इस डेमो के उद्देश्य से अपनी टेबल से आसानी से पढ़ और लिख सकें। उत्पादन में हम प्रमाणीकरण के साथ उचित भूमिकाएँ स्थापित करना चाहेंगे।

⚠️ नोट: यह सेटिंग्स परिवर्तन केवल इस डेमो के उद्देश्य के लिए है, यह उत्पादन के लिए नहीं है

सुपाबेस एडाप्टर - रेस्ट एपीआई

ZingGrid Supabase के साथ इंटरैक्ट करने के दोनों तरीकों का समर्थन करता है - REST API के माध्यम से और क्लाइंट स्क्रिप्ट के माध्यम से। हम सबसे पहले REST API का उपयोग करेंगे।

नीचे प्रारंभिक डेमो कोड का उपयोग करके, निम्नलिखित को प्रतिस्थापित करना सुनिश्चित करें:

• ***लिंक*** - प्रोजेक्ट यूआरएल जिसे आपने पहले नोट किया था
• ***टेबलनाम*** - आपके द्वारा अभी बनाई गई सुपाबेस तालिका का नाम
• ***apiKey*** - सुपाबेस एपीआई कुंजी जिसे आपने पहले नोट किया था

ब्राउज़र में उस पृष्ठ को देखते समय, आपको हमारे द्वारा भरा गया प्रारंभिक डेटा दिखना शुरू हो जाना चाहिए!

SupabaseJS एडाप्टर - क्लाइंट स्क्रिप्ट

यदि आपका ऐप सुपाबेस जावास्क्रिप्ट क्लाइंट लाइब्रेरी (जिसके बारे में आप उनकी डॉक्स साइट पर अधिक पढ़ सकते हैं) का उपयोग करता है, तो आप अपने सुपाबेस क्रेडेंशियल्स को अपने मार्कअप के बाहर संग्रहीत करने में सक्षम हैं जिससे यह अधिक लचीला हो जाता है।

पिछले उदाहरण में संशोधन करते हुए, हम पहले एक सुपरबेस क्लाइंट ऑब्जेक्ट बनाते हैं (उनके दस्तावेज़ों में इसके बारे में अधिक जानकारी)

const supabaseUrl = 'https://***link***.supabase.co/';
const supabaseKey = '***apiKey***';
const supabaseClient = supabase.createClient(supabaseUrl, supabaseKey);

और फिर उस क्लाइंट को ज़िंगग्रिड के साथ पंजीकृत करें

ZingGrid.registerClient(supabaseClient);

आखिरकार हमने zg-data पर एडाप्टर विशेषता को supabaseJS पर सेट किया और हमारे पास निम्नलिखित हैं

पहले की तरह ही काम कर रहा है