REST API कैसे बनाएं? स्टेप-बाय-स्टेप गाइड

यह लेख APIs का परिचय प्रदान करता है, विशेष रूप से RESTful APIs। हम उनके लाभ, सीमाओं, और विकल्पों पर नजर डालेंगे। इसके अतिरिक्त, हम यह प्रदर्शित करेंगे कि कैसे Back4app का उपयोग करके REST API बनाया जा सकता है — जो सबसे अच्छे BaaS प्रदाताओं में से एक है।

API क्या है?

एक एप्लिकेशन प्रोग्रामिंग इंटरफ़ेस (API) नियमों का एक सेट है जो परिभाषित करता है कि दो उपकरण या सिस्टम एक-दूसरे के साथ कैसे संवाद कर सकते हैं। APIs को डेवलपर्स द्वारा बनाया जाता है और यह अन्य डेवलपर्स या सिस्टम द्वारा उपयोग के लिए होता है, सीधे अंतिम उपयोगकर्ताओं द्वारा नहीं। अंतिम उपयोगकर्ता आमतौर पर इन्हें अप्रत्यक्ष रूप से तथाकथित फ्रंटएंड या क्लाइंट के माध्यम से उपयोग करते हैं।

आप एक API को क्लाइंट और एक संसाधन या वेब सेवा के बीच एक मध्यस्थ के रूप में सोच सकते हैं। क्लाइंट एक अनुरोध भेजता है, अनुरोध को संसाधित किया जाता है और अंततः, एक संसाधन या प्रतिक्रिया वापस की जाती है।

आजकल APIs लगभग हर जगह उपयोग किए जाते हैं। अधिकांश व्यवसायों के पास कई आंतरिक और सार्वजनिक रूप से सुलभ APIs होते हैं। शायद आज ही आपने सौ से अधिक APIs के साथ बातचीत की है। उदाहरण के लिए, जब आपने समय जांचा, मौसम देखा, Facebook पर स्क्रॉल किया, या YouTube वीडियो देखा।

API और SDK के बीच अंतर क्या हैं?

जैसा कि ऊपर उल्लेख किया गया है, एक API नियमों का एक सेट है जो परिभाषित करता है कि दो उपकरण या सिस्टम कैसे संवाद कर सकते हैं। दूसरी ओर, एक Software Development Kit (SDK) उपकरणों, पुस्तकालयों और दस्तावेजों का एक संग्रह है जो डेवलपर्स को एक विशिष्ट प्लेटफ़ॉर्म (जैसे कि Windows, Web, Android, iOS) के लिए सॉफ़्टवेयर बनाने में मदद करता है।

SDKs अक्सर पर्दे के पीछे विभिन्न APIs का उपयोग करते हैं। हम लेख के दूसरे भाग में एक व्यावहारिक उदाहरण देखेंगे।

REST क्या है?

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

REST HTTP प्रोटोकॉल पर आधारित है और संसाधनों को संशोधित करने के लिए GET, POST, PUT, और DELETE जैसे विभिन्न HTTP विधियों का उपयोग करता है। इन संचालन को अक्सर CRUD (Create Retrieve Update Delete) कहा जाता है। REST JSON, HTML, XLT, Python, JavaScript, आदि सहित कई डेटा प्रारूपों का समर्थन करता है। सबसे अधिक उपयोग किया जाने वाला डेटा प्रारूप JSON है।

एक API को RESTful माना जाने के लिए इसे निम्नलिखित छह बाधाओं के साथ संरेखित होना चाहिए:

1. क्लाइंट और सर्वर वास्तुकला — क्लाइंट और सर्वर घटकों को अलग होना चाहिए।
2. बिना राज्य के होना — सर्वर अनुप्रयोगों को अनुरोधों के बीच कोई क्लाइंट डेटा संग्रहीत करने की अनुमति नहीं है।
3. कैशेबिलिटी — जब संभव हो, संसाधनों को क्लाइंट या सर्वर पक्ष पर कैश किया जाना चाहिए।
4. परतदार प्रणाली — APIs को मध्यस्थों की अनुमति देनी चाहिए, फिर भी इससे क्लाइंट प्रभावित नहीं होना चाहिए।
5. यूनिफ़ॉर्म इंटरफ़ेस — सर्वर और क्लाइंट के बीच इंटरफ़ेस एकसमान होना चाहिए।
6. मांग पर कोड (वैकल्पिक) — सर्वर को क्लाइंट को निष्पादनीय कोड भेजने की अनुमति देता है।

REST और RESTful में अंतर यह है कि REST बाधाओं के सेट को संदर्भित करता है, जबकि RESTful उन बाधाओं के अनुरूप एक API को संदर्भित करता है।

RESTful APIs कैसे काम करते हैं?

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

एक सामान्य RESTful API कॉल इन चरणों का पालन करती है:

1. क्लाइंट सर्वर को एक अनुरोध भेजता है।
2. सर्वर क्लाइंट की प्रमाणीकरण करता है और जांचता है कि क्या इसके पास अनुरोध के लिए पर्याप्त अनुमति है।
3. सर्वर अनुरोध को संसाधित करता है, जैसे कि गणनाएँ करता है, और डेटाबेस से डेटा प्राप्त करता है।
4. सर्वर क्लाइंट को एक प्रतिक्रिया वापस करता है।
5. क्लाइंट प्रतिक्रिया को संसाधित करता है।

चरण API कार्यान्वयन पर निर्भर करते हुए भिन्न हो सकते हैं। एक API का उपयोग कैसे करना है, इसके निर्देश API संदर्भ (या API दस्तावेज़ीकरण) में परिभाषित किए गए हैं।

अनुरोध संरचना

एक अनुरोध में निम्नलिखित शामिल हैं:

एक नमूना अनुरोध इस प्रकार दिखता है:

प्रतिक्रिया संरचना

एक प्रतिक्रिया में निम्नलिखित शामिल हैं:

एक नमूना प्रतिक्रिया इस प्रकार दिखती है:

RESTful APIs के लाभ क्या हैं?

स्केलेबिलिटी

RESTful APIs अत्यधिक स्केलेबल होते हैं और ऊर्ध्वाधर और क्षैतिज दोनों तरह से स्केल कर सकते हैं। नए एंडपॉइंट्स या संसाधनों का जोड़ API के प्रदर्शन पर न्यूनतम प्रभाव डालता है, जिससे आवश्यकतानुसार स्केल करना आसान हो जाता है।

कई डेटा प्रारूप

RESTful APIs क्लाइंट के अनुरोध हेडर्स के आधार पर विभिन्न प्रारूपों में डेटा लौट सकते हैं। इससे ये अत्यंत लचीले और मौजूदा सिस्टम में एकीकृत करना आसान हो जाते हैं। डेटा JSON, XLT, Python, HTML, JavaScript, आदि के रूप में लौटाया जा सकता है।

कुशलता

RESTful APIs हल्के होते हैं और SOAP (Simple Object Access Protocol) की तुलना में उनका ओवरहेड कम होता है। इससे वे अनुरोधों को तेजी से और कुशलता से संभाल सकते हैं। एक सामान्य RESTful API प्रति सेकंड 10,000 से 15,000 अनुरोधों को संभाल सकता है।

प्लेटफ़ॉर्म स्वतंत्रता

RESTful APIs का एक और बड़ा लाभ यह है कि सर्वर और क्लाइंट पूरी तरह से स्वतंत्र होते हैं। इससे डेवलपर्स को कई प्रोग्रामिंग भाषाओं जैसे कि Java, JavaScript, Python, आदि में RESTful APIs और क्लाइंट्स को लागू करने की अनुमति मिलती है!

समझने में आसान

चूंकि REST HTTP पर आधारित है, यह समझने में अत्यंत आसान है। अधिकांश डेवलपर्स ने कम से कम एक बार RESTful API के साथ काम किया होगा या उसे लागू किया होगा।

RESTful APIs की सीमाएँ क्या हैं?

डेटा कम लाना और अधिक लाना

RESTful APIs की सबसे बड़ी समस्याओं में से एक डेटा कम लाना और अधिक लाना है। अधिक लाना तब होता है जब आवश्यक से अधिक डेटा लौटाया जाता है और कम लाना तब होता है जब पर्याप्त डेटा नहीं लौटाया जाता है (जो ज्यादातर संबंधों को संभालते समय होता है)।

रियल-टाइम डेटा सदस्यता नहीं

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

संस्करण प्रणाली नहीं

RESTful APIs में कोई अंतर्निर्मित संस्करण प्रणाली नहीं होती है। इसके अलावा, फ़ील्ड्स को अवकाशित करने का कोई तरीका नहीं है, जिससे समय के साथ APIs को विकसित करना मुश्किल हो जाता है। हर बार जब आप एक प्रमुख API अपडेट जारी करते हैं, तो आपको सभी क्लाइंट्स को संशोधित करने के लिए मजबूर होना पड़ता है।

उपरोक्त उल्लेखित समस्याओं को हल करने के लिए कई REST विकल्प उभरे हैं। सबसे लोकप्रिय में से कुछ Simple Object Access Protocol (SOAP), GraphQL, और gRPC शामिल हैं।

RESTful प्रमाणीकरण विधियाँ क्या हैं?

RESTful APIs अपने एंडपॉइंट्स को सुरक्षित करने के लिए विभिन्न प्रमाणीकरण विधियों का उपयोग कर सकते हैं। सबसे अधिक उपयोग की जाने वाली प्रमाणीकरण विधियाँ हैं:

• HTTP authentication
• API keys
• OAuth 2.0
• OpenID Connect
• JWT Authentication

इनमें से अधिकांश विधियाँ क्लाइंट को अपने क्रेडेंशियल्स या अपने API कुंजी को अनुरोध हेडर में भेजने की आवश्यकता होती हैं। परियोजना शुरू करते समय विभिन्न प्रमाणीकरण विधियों पर विचार किया जाना चाहिए।

RESTful API कैसे बनाएं?

लेख का यह भाग Back4app का उपयोग करके एक RESTful API बनाने और Next.js फ्रंटएंड के साथ एक कनेक्शन स्थापित करने की जांच करता है।

पूर्वापेक्षाएँ

• JavaScript ES6 के साथ अनुभव
• React और Next.js के साथ अनुभव
• REST की बुनियादी समझ

Back4app क्या है?

Back4app एक अद्भुत BaaS – Backend as a Service समाधान है। यह ओपन-सोर्स सॉफ़्टवेयर का उपयोग करता है और डेवलपर्स को मोबाइल और वेब अनुप्रयोगों को तेजी से बनाने में मदद करने के लिए कई सुविधाएँ प्रदान करता है। इससे व्यवसाय अपने व्यापार तर्क पर ध्यान केंद्रित कर सकते हैं, बिना क्लाउड इंफ्रास्ट्रक्चर की चिंता किए।

यूजर-फ्रेंडली डैशबोर्ड और कमांड-लाइन इंटरफ़ेस की विशेषता के साथ, प्लेटफ़ॉर्म व्यापक रूप से उपयोग किए जाने वाले उपकरणों जैसे कि Node.js, Flutter, React Native, Android, Angular, और iOS के साथ संगत Software Development Kits (SDKs) प्रदान करता है।

Back4app के पास एक सरल मूल्य निर्धारण मॉडल है जो किसी भी ऐप के लिए उपयुक्त हो सकता है। उनके पास एक मुफ्त योजना भी है, जिसमें क्रेडिट कार्ड की आवश्यकता नहीं होती है, जो विकास, परीक्षण और प्रोटोटाइप के लिए एक अच्छा विकल्प है।

Back4app के बारे में अधिक जानने के लिए, कृपया What is Back4app? पढ़ें।

परियोजना परिचय

इस लेख में, हम एक सरल ब्लॉग वेब एप्लिकेशन बनाएंगे। वेब ऐप संपादकों को लेख जोड़ने और उपयोगकर्ताओं को उन्हें पढ़ने की अनुमति देगा। ऐप के दो भाग होंगे: बैकएंड (REST-आधारित) और फ्रंटएंड। बैकएंड के लिए, हम Back4app का उपयोग करेंगे और फ्रंटएंड के लिए, हम React के साथ Next.js का उपयोग करेंगे।

बैकएंड

Back4app ऐप बनाएँ

निम्नलिखित चरणों के लिए आपके पास Back4app खाता होना आवश्यक है। आगे बढ़ें और लॉग इन करें या खाता बनाएं यदि आपके पास अभी तक खाता नहीं है।

अपने Back4app डैशबोर्ड पर जाएँ और “Build new app” पर क्लिक करके एक नया ऐप बनाएं।

“Backend as a Service (BaaS)” चुनें, इसे एक कस्टम नाम दें, और अपने डेटाबेस के रूप में “NoSQL Database” चुनें। अंत में, ऐप निर्माण प्रक्रिया शुरू करने के लिए “Create” पर क्लिक करें।

Back4app आपके ऐप के लिए आवश्यक सब कुछ जैसे डेटाबेस, स्केलिंग, और सुरक्षा तैयार करने में कुछ समय लेगा। एक बार आपका ऐप तैयार हो जाने पर, आपको “Database” दृश्य पर पुनर्निर्देशित किया जाएगा।

डेटाबेस क्लासेस परिभाषित करें

आगे बढ़ते हुए, आइए डेटाबेस क्लासेस परिभाषित करें।

हमारे पास निम्नलिखित दो क्लासेस होंगे:

1. ArticleCategory एक लेख श्रेणी का प्रतिनिधित्व करता है (जैसे ब्लॉकचेन, AI, प्रोग्रामिंग)
2. Article एक लेख का प्रतिनिधित्व करता है। एक लेख में कई श्रेणियाँ हो सकती हैं (M:N)।

एक क्लास बनाने के लिए अपने Back4app डैशबोर्ड पर जाएँ और साइडबार में “Database” चुनें। फिर “Create a class” पर क्लिक करें, इसे ArticleCategory नाम दें और “Public Read and Write” सक्षम करें।

उत्पादन में जाने पर आपको “Public Read and Write” को अक्षम करना चाहिए और ACLs और CLPs के साथ सुरक्षा को मजबूत करना चाहिए। अधिक जानकारी के लिए Parse Server Security की समीक्षा करें।

अगला, इसमें निम्नलिखित फ़ील्ड्स जोड़ें:

+-----------------------------+-----------------+--------------------+-------------+
| Data type                   | Name            | Default value      | Required    |
+-----------------------------+-----------------+--------------------+-------------+
| String                      | name            | <leave blank>      | yes         |
+-----------------------------+-----------------+--------------------+-------------+
| String                      | slug            | <leave blank>      | yes         |
+-----------------------------+-----------------+--------------------+-------------+
| String                      | description     | <leave blank>      | no          |
+-----------------------------+-----------------+--------------------+-------------+

दूसरे क्लास Article के लिए वही चरण दोहराएँ। निम्नलिखित फ़ील्ड्स जोड़ें:

+-----------------------------+-----------------+--------------------+-------------+
| Data type                   | Name            | Default value      | Required    |
+-----------------------------+-----------------+--------------------+-------------+
| String                      | title           | <leave blank>      | yes         |
+-----------------------------+-----------------+--------------------+-------------+
| String                      | slug            | <leave blank>      | yes         |
+-----------------------------+-----------------+--------------------+-------------+
| String                      | shortContent    | <leave blank>      | yes         |
+-----------------------------+-----------------+--------------------+-------------+
| String                      | content         | <leave blank>      | yes         |
+-----------------------------+-----------------+--------------------+-------------+
| Relation -> ArticleCategory | categories      | <leave blank>      | no          |
+-----------------------------+-----------------+--------------------+-------------+

बहुत बढ़िया, बस इतना ही।

डेटाबेस भरें

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

एक नया ArticleCategory जोड़ने के लिए इसे साइडबार में चुनें और “Add a row” पर क्लिक करें।

आप इन लेख श्रेणियों का उपयोग कर सकते हैं या अपनी खुद की बना सकते हैं:

+------------+------------+---------------------------------------------------------+
| name       | slug       | description                                             |
+------------+------------+---------------------------------------------------------+
| Blockchain | blockchain | Blockchain, crypto & more!                              |
+------------+------------+---------------------------------------------------------+
| AI         | ai         | Artificial intelligence, LLMs, stable diffusion.        |
+------------+------------+---------------------------------------------------------+

आप नमूना डेटा उत्पन्न करने के लिए ChatGPT का भी उपयोग कर सकते हैं। ChatGPT के बारे में अधिक जानने के लिए How to use ChatGPT to build an app? देखें।

Article क्लास के लिए भी वही करें:

+------------------+---------------+--------------+---------+-----------------------+
| title            | slug          | shortContent | content | categories            |
+------------------+---------------+--------------+---------+-----------------------+
| Beyond Crypto    | beyond-crypto | ...          | ...     | <blockchain.objectId> |
+------------------+---------------+--------------+---------+-----------------------+
| The Rise of AI   | rise-of-ai    | ...          | ...     | <ai.objectId>         |
+------------------+---------------+--------------+---------+-----------------------+
| What is ChatGPT? | chatgpt       | ...          | ...     | <ai.objectId>         |
+------------------+---------------+--------------+---------+-----------------------+

सुनिश्चित करें कि <blockchain.objectId> और <ai.objectId> को वास्तविक ArticleCategory objectId के साथ बदलें। मेरे मामले में, ये SxS0yiWDij और Hf8yBDTO79 हैं (संदर्भ के लिए ऊपर की छवि)।

REST API

Back4app के बारे में सबसे अच्छी बात यह है कि जैसे ही आप डेटाबेस क्लासेस परिभाषित करते हैं, Back4app आपके लिए स्वचालित रूप से एक REST API सेट अप कर देता है। जनित REST API आपको अपने डेटाबेस की सभी क्लासेस पर बुनियादी CRUD संचालन करने की अनुमति देता है।

REST API कंसोल

API का परीक्षण करने के लिए अपने Back4app डैशबोर्ड पर जाएँ और साइडबार में “API > Console > REST” चुनें। फिर अनुरोध प्रकार के रूप में GET चुनें, और एंडपॉइंट के रूप में classes/Article चुनें। अंत में, अनुरोध भेजने के लिए स्क्रीन के निचले दाएं कोने में “Send Query” पर क्लिक करें।

यह अनुरोध आपके डेटाबेस में सभी लेखों को वापस करेगा। आपको एक समान प्रतिक्रिया मिलनी चाहिए:

{
   "results":[
      {
         "objectId": "yEaR8K44il",
         "title": "Beyond Crypto",
         "slug": "beyond-crypto",
         "shortContent": "...",
         "content": "...",
         "createdAt": "2023-04-17T14:26:19.016Z",
         "updatedAt": "2023-04-17T14:26:30.922Z",
         "categories": {
            "__type": "Relation",
            "className": "ArticleCategory"
         }
      },
      {
         "objectId": "l46nMkHElH",
         "title": "What is ChatGPT?",
         "slug": "chatgpt",
         "shortContent": "...",
         "content": "...",
         "createdAt": "2023-04-17T14:27:34.931Z",
         "updatedAt": "2023-04-17T14:27:42.636Z",
         "categories": {
            "__type": "Relation",
            "className": "ArticleCategory"
         }
      }
      // ...
   ]
}

REST कंसोल आपको POST, PUT, और DELETE संचालन करने की अनुमति भी देता है। इसके अलावा, आप Parse Query पैरामीटर का उपयोग कर सकते हैं ताकि डेटा फ़िल्टर किया जा सके, संबंधों को संभाला जा सके, और अधिक।

उदाहरण के लिए, यदि आप “Blockchain” श्रेणी से संबंधित लेख प्राप्त करना चाहते हैं तो आप निम्नलिखित where बयान का उपयोग कर सकते हैं:

where={"categories": {
    "__type": "Pointer", "className": "ArticleCategory", "objectId": "<objectId>"
}}

सुनिश्चित करें कि <objectId> को ब्लॉकचेन के objectId के साथ बदलें।

query parameters के बारे में अधिक जानने के लिए Parse REST API Guide की जांच करें।

cURL

REST कंसोल शानदार है, लेकिन जब आप वास्तविक अनुप्रयोगों पर काम कर रहे होते हैं तो आपको API अनुरोधों के लिए अधिक प्रोग्रामर-उन्मुख दृष्टिकोण चाहिए होता है। आप जिन उपकरणों का उपयोग कर सकते हैं उनमें से एक है cURL – HTTP, FTP, और SMTP जैसे विभिन्न प्रोटोकॉल के लिए एक कमांड-लाइन टूल।

लेख श्रेणियों को सूचीबद्ध करने के लिए एक उदाहरण cURL कमांड इस प्रकार दिखेगा:

$ curl -X GET \
  -H "X-Parse-Application-Id: YOUR_APPLICATION_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  https://parseapi.back4app.com/classes/ArticleCategory | jq

आप कुंजी “Back4app Dashboard > App Settings > Security & Keys” से प्राप्त कर सकते हैं।

जैसा कि आप देख सकते हैं, cURL का उपयोग करते समय आपको HTTP विधि प्रकार निर्दिष्ट करना होता है और अपना एप्लिकेशन ID और REST API कुंजी प्रदान करनी होती है। इसके अलावा, आप प्रतिक्रिया को jq में पाइप कर सकते हैं ताकि इसे स्वचालित रूप से प्रारूपित किया जा सके और रंग हाइलाइट किया जा सके।

API संदर्भ

Back4app के बारे में एक और बड़ी बात यह है कि यह आपके सभी डेटाबेस क्लासेस के लिए स्वचालित रूप से API संदर्भ उत्पन्न करता है। हर बार जब आप कोई परिवर्तन करते हैं तो परिवर्तन दस्तावेज़ीकरण में परिलक्षित होता है।

API संदर्भ तक पहुँचने के लिए, साइडबार में “Database” चुनें, और स्क्रीन के ऊपर दाएं कोने में तीन बिंदुओं का उपयोग करके सभी विकल्प देखें। अंत में, “API Reference” चुनें।

API संदर्भ में आपके सभी डेटाबेस क्लासेस के विवरण, CRUD संचालन के निर्देश, नमूना अनुरोध, प्रतिक्रियाएँ, और कोड स्निपेट्स शामिल हैं।

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

फ्रंटएंड

जैसा कि ऊपर उल्लेख किया गया है, हम फ्रंटएंड बनाने के लिए Next.js 13 के साथ React का उपयोग करेंगे। सामान्य रूप से, एक JavaScript फ्रंटएंड से Parse-आधारित बैकएंड से जुड़ने के तीन तरीके हैं:

1. REST API का उपयोग करके (HTTP अनुरोध और प्रतिक्रियाएँ)
2. GraphQL API का उपयोग करके (इस लेख में)
3. JavaScript SDK का उपयोग करके

आपको अंतिम या दूसरे अंतिम विकल्प को चुनना चाहिए। REST API का सीधे उपयोग उन क्लाइंट ऐप्स में अनुशंसित नहीं है जो Parse SDKs का उपयोग कर सकते हैं (जैसे JavaScript, Flutter, Android, iOS, Xamarin)। इसका कारण यह है कि Parse SDK आपको स्वच्छ कोड लिखने की अनुमति देता है और त्रुटियों की संभावना कम होती है। पर्दे के पीछे, Parse SDKs REST API का उपयोग करते हैं।

Next ऐप बनाएँ

आगे बढ़ें और create-next-app यूटिलिटी का उपयोग करके एक Next.js प्रोजेक्ट बूटस्ट्रैप करें। अपना टर्मिनल खोलें और निम्नलिखित कमांड चलाएं:

$ yarn create next-app

√ What is your project named? ... back4app-graphql
√ Would you like to use TypeScript with this project? ... No
√ Would you like to use ESLint with this project? ... Yes
√ Would you like to use the `src/` directory with this project? ... No
√ Would you like to use the experimental `app/` directory with this project? ... No
√ What import alias would you like configured? ... @/*

Successfully created a Next.js app.

अगला, विकास सर्वर चलाएं:

$ yarn dev

http://localhost:3000 पर जाएँ और आपको Next.js लैंडिंग पेज दिखाई देना चाहिए।

ChakraUI

UI/UX निर्माण प्रक्रिया को आसान बनाने के लिए हम ChakraUI का उपयोग करेंगे। Chakra UI एक सरल, मॉड्यूलर, और यूजर-फ्रेंडली कंपोनेंट लाइब्रेरी है जो आपके React अनुप्रयोगों के विकास के लिए सभी आवश्यक तत्व प्रदान करती है।

अगर आप किसी समस्या में फंस जाते हैं तो ChakraUI: Getting started with Next.js की ओर देखें।

सबसे पहले, चलाकर Chakra और इसकी निर्भरताओं को इंस्टॉल करें:

yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion

अगला, अपने pages/_app.tsx में जाएँ और अपने ऐप को इस प्रकार ChakraProvider के साथ लपेटें:

// pages/_app.tsx

import "../styles/globals.css";
import {ChakraProvider, extendTheme} from "@chakra-ui/react";

export const theme = extendTheme({});

function MyApp({ Component, pageProps }) {
  return (
    <ChakraProvider theme={theme}>
      <Component {...pageProps} />
    </ChakraProvider>
  );
}

export default MyApp;

ChakraProvider को आयात करना न भूलें:

import {ChakraProvider} from "@chakra-ui/provider";

यादृच्छिक रंग चमक से बचने के लिए सामग्री से पहले रंग मोड स्क्रिप्ट लोड करें। ऐसा करने के लिए, आप _document.js का उपयोग इस प्रकार कर सकते हैं:

// pages/_document.js

import {ColorModeScript} from "@chakra-ui/react";
import { Html, Head, Main, NextScript } from "next/document";
import {theme} from "@/pages/_app";

export default function Document() {
  return (
    <Html lang='en'>
      <Head />
      <body>
        <ColorModeScript initialColorMode={theme.config.initialColorMode} />
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

बहुत बढ़िया, आपने सफलतापूर्वक ChakraUI इंस्टॉल कर लिया है।

उपयोगकर्ता इंटरफ़ेस

आगे बढ़ते हुए, आइए UI लागू करें। हम निम्नलिखित दो पृष्ठ बनाएंगे:

1. / लेखों की सूची प्रदर्शित करता है
2. /<articleSlug>/ एक विशिष्ट लेख प्रदर्शित करता है

सूची से शुरू करें। pages/index.js की सामग्री को निम्नलिखित के साथ बदलें:

// pages/index.js

import {Card, CardBody, Container, Heading, 
        Link, Spinner, Stack, Text} from "@chakra-ui/react";
import NextLink from "next/link";
import {useEffect, useState} from "react";

export default function Home() {

  const [isLoading, setIsLoading] = useState(true);
  const [articles, setArticles] = useState([]);

  return (
    <>
      <main>
        <Container maxW="container.lg">
          <Heading as="h1" my="4">
            back4app-rest
          </Heading>
          {isLoading ? (
            <Spinner size="lg"/>
          ) : (
            <Stack spacing="4" direction="column">
              {articles.map((article, index) => (
                <Card key={index} w="100%">
                  <CardBody>
                    <Stack spacing="3">
                      <Heading size="md">
                        <Link as={NextLink} href={article.get("slug")}>
                          {article.get("title")}
                        </Link>
                      </Heading>
                      <Text>
                        {article.get("shortContent")}
                      </Text>
                    </Stack>
                  </CardBody>
                </Card>
              ))}
            </Stack>
          )}
        </Container>
      </main>
    </>
  );
}

1. हमने लेखों और isLoading स्टेट्स की तैयारी की है जिन्हें हम बाद में डेटा प्राप्त करते समय उपयोग करेंगे।
2. हमने उपयोगकर्ता इंटरफ़ेस डिजाइन करने के लिए बुनियादी ChakraUI कंपोनेंट्स का उपयोग किया।
3. सभी लेखों को प्रदर्शित करने के लिए हम articles स्टेट के माध्यम से लूप करते हैं।

अगला, pages/[slug].js में जाएँ और इसे निम्नलिखित में बदलें:

// pages/[slug].js

import {useRouter} from "next/router";
import {Card, CardBody, Container, Heading,
        Link, Spinner, Stack, Text} from "@chakra-ui/react";
import NextLink from "next/link";
import {useEffect, useState} from "react";

export default function Article() {

  const router = useRouter();
  const {slug} = router.query;

  const [isLoading, setIsLoading] = useState(true);
  const [article, setArticle] = useState(null);

  return (
    <>
      <main>
        <Container maxW="container.lg">
          <Heading as="h1" my="4">
            back4app-rest
          </Heading>
          {isLoading ? (
            <Spinner size="lg"/>
          ) : (
            <>
              {article == null ? (
                <Text>This article does not exist.</Text>
              ) : (
                <Card w="100%">
                  <CardBody>
                    <Stack spacing="3">
                      <Heading size="md">{article.get("title")}</Heading>
                      <Text>
                        {article.get("content")}
                      </Text>
                      <Text fontSize="sm">
                        Posted on {new Date(article.get("createdAt")).toDateString()}
                      </Text>
                    </Stack>
                  </CardBody>
                </Card>
              )}
            </>
          )}
          <Text size="sm" mt="2" align="right">
              <Link as={NextLink} href="/">← Go back</Link>
          </Text>
        </Container>
      </main>
    </>
  );
}

1. हमने लेख को रखने के लिए article स्टेट की तैयारी की है।
2. हमने URL से slug पैरामीटर प्राप्त करने के लिए Next Router का उपयोग किया।

बैकएंड एकीकरण

इस अंतिम सेक्शन में, हम फ्रंटएंड को बैकएंड से जोड़ेंगे।

Parse SDK का उपयोग करने के लिए, हमें पहले इसे इंस्टॉल करना होगा। आगे बढ़ें और निम्नलिखित कमांड चलाएं:

$ yarn add parse @react-native-async-storage/async-storage

अगला, अपने pages/_app.js में जाएँ और इस प्रकार Parse को इनिशियलाइज़ करें:

// pages/_app.js

const PARSE_HOST_URL = "https://parseapi.back4app.com/";
Parse.initialize("YOUR_APPLICATION_ID", "YOUR_JAVASCRIPT_KEY");  // replace me
Parse.serverURL = PARSE_HOST_URL;

export default function App({ Component, pageProps }) {
  return (
      // ...
  );
}

आयात करना न भूलें:

import Parse from "parse/dist/parse.min.js";

सूची पृष्ठ पर लेख प्राप्त करने के लिए हम Parse.Query का उपयोग कर सकते हैं। एक बार डेटा प्राप्त हो जाने पर, हम इसे articles में संग्रहीत कर सकते हैं और isLoading को false सेट कर सकते हैं:

// pages/index.js

export default function Home() {

  // ...

  const getArticles = async () => {
    const query = new Parse.Query("Article");
    setArticles(await query.find());
    setIsLoading(false);
  };

  useEffect(() => {
    getArticles();
  }, []);

  return (
    // ...
  );
}

हम फिर pages/[slug].js में लेख के लिए भी ऐसा ही कर सकते हैं:

// pages/[slug].js

export default function Article() {

  // ...

  const getArticle = async () => {
    const query = new Parse.Query("Article");
    query.equalTo("slug", slug);
    const results = await query.find();
    setIsLoading(false);
    if (results.length === 0) return;
    setArticle(results[0]);
  };

  useEffect(() => {
    getArticle();
  }, []);

  return (
    // ...
  );
}

फिर से, दोनों फाइलों में Parse को आयात करना न भूलें।

import Parse from "parse/dist/parse.min.js";

Next विकास सर्वर शुरू करें (यदि यह पहले से नहीं चल रहा है) और अपने पसंदीदा वेब ब्राउज़र में http://localhost:3000 पर जाएँ। आपको अपने लेखों की सूची दिखाई देनी चाहिए और लेख पढ़ने योग्य होने चाहिए।

निष्कर्ष

इस लेख में, आपने APIs, RESTful APIs, और उनके लाभ और हानियों के बारे में जाना है। अब आप सरल RESTful APIs बना सकते हैं और उन्हें फ्रंटएंड ऐप से कनेक्ट कर सकते हैं।

आप अंतिम स्रोत कोड GitHub पर प्राप्त कर सकते हैं।

यदि आपको यह लेख पसंद आया, तो कृपया इस लेख को भी देखें How to make a GraphQL API।