🕵🏽 🤷🏾 ▫️ 8base, GraphQL और React का उपयोग करके स्टिकी नोट्स एप्लिकेशन बनाना 👦🏻 ♾ ✊🏾

कार्यक्रम का डेमो संस्करण यहां देखें ।

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

नोटबंदी के आवेदन को बनाने के लिए, हमें एक साधारण स्टैक की आवश्यकता है जो व्यावहारिक रूप से एक विकास बैकएंड की आवश्यकता नहीं है, और एक एप्लिकेशन जिसे आसानी से उपयोग किया जा सकता है। इन आवश्यकताओं के आधार पर, हम आवेदन के लिए स्टैक का चयन करेंगे। यह इस तरह दिखता है:
-React - फ्रंट-एंड डेवलपमेंट के लिए। यह उपयोगकर्ता इंटरफेस बनाने के लिए एक लोकप्रिय पुस्तकालय है, इसे आसानी से कई प्लेटफार्मों पर तैनात किया जा सकता है, जैसे कि अब और नेटलाइज़।
-8base GraphQL - हमारे आवेदन के लिए डेटाबेस परत। यहां हम अपने आवेदन में अनुरोधों को संग्रहीत और पढ़ेंगे। 8base के साथ, आपको एप्लिकेशन के लिए बैकएंड बनाने और बनाए रखने की आवश्यकता नहीं है।

मैंने इन उपकरणों का उपयोग करके एक सरल अनुप्रयोग सफलतापूर्वक बनाया है। इस लेख में, हम इस एप्लिकेशन को बनाने और 8base प्लेटफ़ॉर्म पर चलने वाले बैकएंड को सेट करने की प्रक्रिया को देखेंगे।

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

निर्देशों के बाद प्रतिक्रिया और Node.js. की बुनियादी समझ की आवश्यकता होती है शुरू करने से पहले, कृपया सुनिश्चित करें कि आपके पास Node और npm / यार्न स्थापित है ।

हम प्रोजेक्ट में ग्राफकॉल प्रश्नों का भी उपयोग करेंगे, इसलिए इस तकनीक के साथ कुछ परिचित उपयोगी होंगे।

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

अपने डेटा स्कीमा को परिभाषित करें: टेबल / टेबल संबंध बनाएं।
फाइलें अपलोड करें।
अभिगम अधिकारों और प्राधिकरण भूमिकाओं को परिभाषित करें।
कार्यशालाओं का उपयोग करके विभिन्न परियोजनाओं का प्रबंधन करें।
एपीआई एक्सप्लोरर (ग्राफकॉल पर आधारित) का उपयोग करके डिजाइन क्वेरी।

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

8base का उपयोग शुरू करने के लिए, इन चरणों का पालन करें:

1. 8base पर एक अकाउंट बनाएं । यह मुफ़्त है।

2. पंजीकरण पूरा होने के बाद, डेटा पेज पर जाने के लिए डेटा बिल्डर बटन पर क्लिक करें और बैकएंड को कॉन्फ़िगर करना शुरू करने के लिए नई तालिका पर क्लिक करें।

3. एक नई तालिका लोड करने के बाद, आपको योजना में ले जाया जाएगा और आप खेतों को परिभाषित करना शुरू कर पाएंगे। आइए कुछ बातों पर ध्यान दें। बाईं ओर आपको System Tables और Your Tables दिखाई देंगे।

प्रत्येक नया 8base कार्यक्षेत्र स्वचालित रूप से कई अंतर्निहित तालिकाओं के साथ आता है। इन तालिकाओं का उपयोग फ़ाइलें, सेटिंग्स और अनुमतियाँ जैसी चीजों के लिए किया जाता है, और ये सभी 8base GraphQL API के माध्यम से सुलभ हैं।

4. आगे बढ़ें और नोट्स तालिका बनाएं , जिसमें निम्नलिखित फ़ील्ड शामिल हैं:

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

5. फिर एंडपॉइंट एपीआई URL (बाईं ओर नीचे उपलब्ध) की प्रतिलिपि बनाएं - यह आपके एप्लिकेशन के क्लाइंट और सर्वर भागों के बीच संचार की मुख्य लाइन है।

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

अब जब हमने 8base का उपयोग करके बैकएंड को कॉन्फ़िगर करना समाप्त कर दिया है, तो हम एप्लिकेशन के फ्रंट-एंड पर काम शुरू करेंगे।

शुरुआत हो रही है

मैंने आसानी से ओवरहेड को कॉन्फ़िगर करने और कम करने के लिए एक स्टार्टर प्रोजेक्ट बनाया, ताकि लेख मूल रूप से 8base और GraphQL के साथ आरंभ करने का तरीका बताए। एप्लिकेशन का कंकाल पहले से ही कॉन्फ़िगर किया गया है, जिसमें परियोजना की शैली और संरचना शामिल है। निम्नलिखित विकल्प स्टार्टर शाखा में उपलब्ध हैं:

नोट बनाने के लिए नोट फॉर्म का एक घटक।
नोट का एक घटक जो एकल नोट का विवरण प्रदर्शित करता है।
एक नोट सूची घटक जो उपलब्ध नोटों की सूची प्रदर्शित करता है।

भंडार को क्लोन करने के लिए निम्नलिखित कमांड चलाएँ:

git clone -b starter https://github.com/HackAfro/note-app.git

निम्नलिखित कमांड चलाकर फ़ोल्डर खोलें और प्रोजेक्ट निर्भरताएँ स्थापित करें:

 npm install

अपने प्रोजेक्ट के रूट फ़ोल्डर में टर्मिनल में npm शुरू करके रिएक्ट एप्लिकेशन सर्वर शुरू करें।

GraphQL का उपयोग कर 8base बैकएंड से कनेक्ट करें

अब जब हमारा प्रारंभिक फ्रंटएंड ऊपर और चल रहा है, तो अगला कदम क्लाइंट को कॉन्फ़िगर करने के लिए 8base बैकएंड के साथ GraphQL का उपयोग करके बातचीत करने के लिए है। अपोलो-बूस्ट को जोड़ने में आपकी मदद करने के लिए एक उपयोगी पुस्तकालय; यह URI का उपयोग करके एक ग्राहक को ग्राफकॉल बैकएंड से कनेक्ट करने के लिए प्रदान करता है। URI एक समापन बिंदु है जो 8base द्वारा प्रदान किया गया है। ApolloClient को कॉन्फ़िगर करने के लिए index.js फ़ाइल को अपडेट करते हैं।

 import React from "react"; import ReactDOM from "react-dom"; import { ApolloProvider } from "react-apollo"; import ApolloClient from "apollo-boost"; import * as serviceWorker from "./serviceWorker"; import "./index.css"; import App from "./App"; const client = new ApolloClient({ uri: "<YOUR_8BASE_ENDPOINT>" }); ReactDOM.render( <ApolloProvider client={client}> <App /> </ApolloProvider>, document.getElementById("root") ); serviceWorker.unregister();

ApolloClient एक तर्क के रूप में uri संपत्ति के साथ एक वस्तु लेता है; उसी समय, क्लाइंट हमें दिए गए यूरी का उपयोग करके डेटा प्राप्त करने, अपडेट करने और हटाने के लिए एक्सेस देता है। वास्तविक समापन बिंदु के साथ <your_8BASE_ENDPOINT> के मूल्य को बदलना सुनिश्चित करें।

फिर हम अपोलोप्रोइडर में एप्लिकेशन को लपेटते हैं, जो प्रोप क्लाइंट को स्वीकार करता है। ApolloProvider 8base टेबल स्कीमा को लोड करता है, जो आपको आपके फ्रंट-एंड कोड में सभी डेटा मॉडल गुणों तक पहुँच प्रदान करता है।

नोट प्राप्त और प्रदर्शित करें

बैकएंड से नोट्स प्राप्त करने के लिए, हम 8base में स्टोर किए गए नोट्स प्राप्त करने के लिए एक ग्राफक्यूएल क्वेरी लिखेंगे। चलिए App.js फ़ाइल को अपडेट करके शुरू करते हैं।

TODO को खोजने के लिए निम्नलिखित आयात जोड़ें - 1 टिप्पणी:

 import gql from "graphql-tag"; import { graphql } from "react-apollo";

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

 const NOTE_LIST_QUERY = gql` query { notesList { items { id title text } } } `;

यदि आप अपने अनुरोधों के बारे में सुनिश्चित नहीं हैं, तो आप हमेशा 8base API एक्सप्लोरर में उनका परीक्षण कर सकते हैं। उपरोक्त क्वेरी की जांच करते हैं।

यदि आप इस क्वेरी को अपने एक्सप्लोरर में निष्पादित करते हैं, तो सबसे अधिक संभावना है कि आप एक खाली सरणी लौटाएंगे, क्योंकि आपने कोई नोट नहीं बनाया था। हम 8base टूलबार का उपयोग करके आसानी से नोट्स बना सकते हैं। साइडबार में डेटा लिंक का पालन करें और नीचे स्क्रीनशॉट में दिए निर्देशों का पालन करें:

हमें नोट्स, एलिस्ट तत्वों से आईडी , शीर्षक और पाठ मिलेगा। अगला, हम अनुरोध से प्राप्त नोट्स का उपयोग करने के लिए ऐप घटक तैयार करेंगे। अंत में, हम ऐप घटक के साथ क्वेरी को जोड़ने के लिए ग्राफकल एचओसी (उच्चतर आदेश घटक) का उपयोग करेंगे। फ़ंक्शन क्वेरी स्ट्रिंग और कॉन्फ़िगरेशन पैरामीटर स्वीकार करता है।
// TODO - 3

  export default graphql(NOTE_LIST_QUERY, { props: (result) => { const { data } = result; const { loading, refetch } = data; let notes = []; if (data && data.notesList) notes = data.notesList.items; return { loading, notes, refetch, }; }, })(App);

TODO के तहत मौजूदा निर्यात लाइन को बदलें - 3 टिप्पणी ऊपर।

ग्रैफ्लक फ़ंक्शन एक "एन्हांसर" फ़ंक्शन देता है, जो कि ग्राफ़िकल क्षमताओं के साथ इसे पारित किसी भी घटक का विस्तार करेगा। यह उच्च-क्रम के घटक पैटर्न से मेल खाती है जो प्रतिक्रिया-रिडक्स में कनेक्ट फ़ंक्शन द्वारा भी उपयोग किया जाता है।

graphql() फ़ंक्शन का उपयोग करते हुए, हम ग्राफक्लाइन एंडपॉइंट तक पहुंच सकते हैं। पहले पैरामीटर के रूप में, यह अनुरोध (NOTE_LIST_QUERY) को स्वीकार करता है, दूसरा - कॉन्फ़िगरेशन, रिटर्न मान HOC है, जिसे एक तर्क के रूप में आवश्यक घटक के साथ निष्पादित किया जाना चाहिए। टुकड़े में, हम नए वैरिएबल नोटों में data.noteList प्रॉपर्टी का मान पास करते हैं। इस मान को वापस करके, हम इसे घटक के रूप में props.notes , और डाउनलोड स्थिति को props.loading रूप में props.loading ।

रीफैच विधि बहुत उपयोगी होगी ताकि हम वास्तविक समय अपडेट के करीब कुछ हासिल कर सकें। हम प्रत्येक म्यूटेशन के बाद फ़ंक्शन को यह सुनिश्चित करने के लिए कहेंगे कि एप्लिकेशन में डेटा हमेशा 8base बैकएंड के साथ सिंक्रनाइज़ किया जाता है।
यदि आप लोकलहोस्ट: 3000 पर स्विच करते हैं, तो आपको नोट सिर्फ बना हुआ दिखाई देगा। हमें 8base टूलबार पर आए बिना नोट्स बनाने में सक्षम होने का मतलब है, इसका मतलब है कि ग्राफकॉल के अगले स्तर पर जाना ...। उत्परिवर्तन!

नोट्स बनाएं

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

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

आइए देखें कि एपीआई एक्सप्लोरर में नोट्स बनाने के लिए म्यूटेशन कैसा दिखता है। 8base टूलबार पर जाएं और साइडबार में API एक्सप्लोरर पर क्लिक करें।

एपीआई एक्सप्लोरर में, म्यूटेशन लिंक पर क्लिक करें, जैसा कि ऊपर दिखाया गया है। यह सभी उपलब्ध म्यूटेशनों को दिखाएगा। नोट बनाने के लिए क्या जिम्मेदार है:

स्क्रीनशॉट से पता चलता है कि उत्परिवर्तन नाम नोटक्रिएट है , और यह नोटक्रीटइनपुट का एक तर्क लेता है। NoteCreateInput - एक नोट बनाने के लिए आवश्यक अनुरोध निकाय के प्रकार को परिभाषित करता है।

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

Open src / Components / note-form / index.js , निम्न आयात जोड़ें जहां आपको TODO 1 टिप्पणी है:

 import gql from "graphql-tag"; import { graphql } from "react-apollo";

इसके बाद, हम म्यूटेशन की घोषणा करेंगे, NOTE_MUTATION वैरिएबल को अपडेट करेंगे और इसे एक नए मान के रूप में असाइन करेंगे, जैसे कि नीचे का टुकड़ा:

 const NOTE_MUTATION = gql` mutation NoteCreate($data: NoteCreateInput!) { noteCreate(data: $data) { id } } `;

अगला, हम ग्राफिकल फ़ंक्शन का उपयोग करके घटक के साथ उत्परिवर्तन को जोड़ते हैं। नीचे दिए गए स्निपेट के साथ फ़ाइल में निर्यात लाइन बदलें:

 export default graphql(NOTE_MUTATION, { name: "noteCreate" })(NoteForm);

इस प्रकार, ग्राफिकल फ़ंक्शन नामित फ़ंक्शन नोटक्रिट पास करता है, जिसका उपयोग क्रिएट म्यूटेशन करने के लिए किया जाएगा। एक फॉर्म सबमिट करते समय नोट बनाने के लिए नोटक्रीट फ़ंक्शन का उपयोग करते हैं।

TODO 4 टिप्पणी पर जाएं और नीचे दिए गए स्निपेट की तरह दिखने के लिए सबमिट फ़ंक्शन को अपडेट करें:
// TODO - 4

  const submit = async note => { const res = await noteCreate({ variables: { data: note } }); if (res.data.noteCreate.id) { setNote({ title: "", text: "" }); refetch() } };

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

हम अनुरोध पूरा होने तक प्रतीक्षा करते हैं, फिर प्रतिक्रिया निकाय में आईडी ढूंढकर इसकी सफलता की जांच करते हैं। फिर हम नोट की स्थिति को रीसेट करते हैं और रीफैच करते हैं। मैंने इस लेख में पहले रिफैच फ़ंक्शन का उल्लेख किया है, लेकिन मुझे आपकी मेमोरी को अपडेट करने दें। Refetch आपके घटक को graphql() फ़ंक्शन में परिभाषित क्वेरी को दोहराने के लिए graphql() करता है।

अब सब कुछ परीक्षण के लिए तैयार है। लोकलहोस्ट पर जाएं: 3000, फॉर्म भरें और परिणाम का आनंद लें।

नोट हटाएं

यदि आप अपने सभी नोटों को हटा नहीं सकते हैं और दिखावा नहीं कर सकते हैं कि वे कितने अच्छे हैं नोट हटाने की प्रक्रिया:

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

नोट हटाने की सेटिंग src / note-card / delete-button.js फ़ाइल में है। फ़ाइल खोलें और फ़ाइल के शीर्ष पर निम्न आयात जोड़ें। विशेष रूप से, जहां नीचे TODO 1 स्थित है:

 import gql from 'graphql-tag'; import { graphql } from 'react-apollo';

फिर डिलीटेशन म्यूटेशन लिखें और इसे DELETE_MUTATION वैरिएबल पर असाइन करें। यह कुछ इस तरह दिखना चाहिए:

 const DELETE_MUTATION = gql` mutation DeleteNote($data: NoteDeleteInput!) { noteDelete(data: $data) { success } } `;

अगला, हम ग्राफिकल फ़ंक्शन का उपयोग करके घटक के साथ उत्परिवर्तन को जोड़ते हैं। नीचे के टुकड़े के साथ फ़ाइल में निर्यात लाइन बदलें:

 export default graphql(DELETE_MUTATION, { name: 'deleteNote', })(DeleteButton);

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

घटक में onDeleteClick फ़ंक्शन पर जाएं, फ़ंक्शन के अंदर निम्न टुकड़ा रखें:

 const onDeleteClick = async () => { const data = { id: noteId, }; const remove = window.confirm('Are you sure you want to delete this note?'); if (remove) { await deleteNote({ variables: { data } }); refetch(); } };

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

यहाँ है कि यह कैसे दिखना चाहिए। लोकलहोस्ट पर जाएं: 3000 और नोट को हटाने की कोशिश करें:

आप इस एप्लिकेशन का डेमो यहां पा सकते हैं।

निष्कर्ष

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