Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Laravel
Code

Laravel RESTful बैक एंड के साथ एक React App बनाएं: पार्ट 1, Laravel की 5.5 API

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Build a React App with Laravel Backend.
Build a React App With a Laravel Back End: Part 2, React

Hindi (हिंदी) translation by Ashish Rampal (you can also view the original English article)

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

आधुनिक वेब एप्लीकेशन में, सर्वर के पास कुछ API (Application Programming Interface) के एन्ड पॉइंट्स के माध्यम से बैक एंड को मैनेज करने की एक सीमित जॉब है। क्लाइंट इन एन्ड पॉइंट्स के लिए रिक्वेस्ट को भेजता है, और सर्वर एक रिस्पांस देता है। हालांकि, सर्वर इस बात से चिंतित नहीं होता कि क्लाइंट ने व्यू को कैसे प्रस्तुत किया है, जो पूरी तरह से चिंताओं के पृथक्करण (Separation of Concerns) सिद्धांत के अनुरूप है। यह आर्किटेक्चर डेवलपर्स को वेब के लिए और भी विभिन्न डिवाइस के लिए रोबस्ट ऍप्लिकेशन्स बनाने की अनुमति देता है।

इस ट्यूटोरियल में, हम एक RESTful बैक-एंड API बनाने के लिए, Laravel का नवीनतम वर्जन 5.5 का उपयोग करेंगे। फ्रंट एन्ड में React में लिखे गए कॉम्पोनेन्ट शामिल होंगे। हम एक रेसोर्स्फुल प्रोडक्ट लिस्टिंग एप्लीकेशन का निर्माण करेंगे। ट्यूटोरियल का पहला भाग Laravel के कांसेप्ट पर और बैक एन्ड पर केंद्रित होगा। आएँ शुरू करें।

परिचय

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

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

Laravel और React क्यों?

यदि आप वेब के लिए डेवेलप कर रहे हैं, तो आप सर्वर और क्लाइंट दोनों के लिए एक सिंगल कोडबेस का उपयोग करने के लिए इच्छुक हो सकते हैं। हालांकि, हर कंपनी डेवलपर को अपनी पसंद की टेक्नोलॉजी का उपयोग करने की स्वतंत्रता नहीं देती, और कुछ अच्छे कारणों के लिए। संपूर्ण प्रोजेक्ट के लिए जावास्क्रिप्ट स्टैक का प्रयोग करना आज कल आदर्श है, लेकिन सर्वर साइड और क्लाइंट साइड के लिए दो अलग-अलग टेक्नोलॉजीज को चुनने से आपको कोई रोकता नहीं है।

तो कितनी अच्छी तरह Laravel और React एक साथ फिट होते हैं? वास्तव में बहुत अच्छे से। हालांकि Laravel Vue.js के लिए सपोर्टेड डॉक्यूमेंट देता है, जो एक और जावास्क्रिप्ट फ़्रेमवर्क है, हम फ्रंट-एंड के लिए React का उपयोग करेंगे क्योंकि यह अधिक लोकप्रिय है।

आवश्यक शर्तें

आरंभ करने से पहले, मैं यह मानने जा रहा हूं कि आपके पास RESTful आर्किटेक्चर की मूलभूत जानकारी है और API एंडपॉइन्ट्स कैसे काम करता है। इसके अलावा, अगर आपके पास React या Laravel में पहले अनुभव है, तो आप इस ट्यूटोरियल का अधिकतम लाभ उठा सकेंगे।

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

अपने Laravel के प्रोजेक्ट को इनस्टॉल और सेटअप करना

सभी डिपेंडेंसी को मैनेज करने के लिए Laravel Composer का उपयोग करता है। इसलिए, Laravel के साथ आरंभ करने से पहले, अपनी मशीन में Composer को डाउनलोड करें और इंस्टॉल करें। आपको path environment वेरिएबल कॉन्फ़िगर करने की आवश्यकता हो सकती है ताकि Composer ग्लोबली एक्सेस हो सकें।

Laravel इंस्टॉलर डाउनलोड करने के लिए निम्न कमांड चलाएं।

यदि आपने $PATH वेरिएबल को सही तरीके से कॉन्फ़िगर किया है और आपके पाथ में ~/.composer/vendor/bin जोड़ा है, तो आपको एक फ्रेश Laravel प्रोजेक्ट जेनेरेट होकर मिलेगा:

वैकल्पिक रूप से, आप Laravel इंस्टॉलर के बिना एक नया प्रोजेक्ट बनाने के लिए Composer का उपयोग कर सकते हैं।

यदि सबकुछ ठीक हो जाता है, तो आप http://localhost:8000 पर एक डेवलपमेंट सर्वर पर अपनी एप्लीकेशन को सर्व करने में सक्षम होंगे।

नोट: Artisan एक कमांड लाइन टूल है, जिसका Laravel में काम करते समय आप इस्तेमाल किये बिना नहीं रह सकते। Artisan कमांड की एक बड़ी लिस्ट को स्वीकार करता है जो आपको आपके एप्लिकेशन के लिए कोड जेनेरेट करने देता है। सभी उपलब्ध artisan कमांड्स को देखने के लिए php artisan list को चलाएं

एनवायरनमेंट को कॉन्फ़िगर करना

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

मॉडल, रूट और कंट्रोलर्स को समझना

Laravel एक ऐसा फ्रेमवर्क है जो Model-View-Controller (MVC) आर्किटेक्चर का अनुसरण करता है। मोटे तौर पर बोलते हुए, MVC आपको डाटाबेस की क्वेरीज (Model) को लॉजिक से अलग करने में मदद करता है कि कैसे रिक्वेस्ट को प्रोसेस किया जाना चाहिए (Controller) और लेआउट कैसे प्रस्तुत किया जाना चाहिए (View)। नीचे दी गई इमेज टिपिकल Laravel एप्लिकेशन के कामकाज को दर्शाती है।

Overview of Laravels architecture for building RESTful API endpoints
Laravel का आर्किटेक्चर। कंट्रोलर रिस्पांस को रीटर्न करता है और इसलिए व्यू लेयर की आवश्यकता नहीं है।

चूंकि हम Laravel का उपयोग करके एक API का निर्माण कर रहे हैं, इसलिए हम Model और Controller के लिए हमारी चर्चा को सीमित कर देंगे। हम इस ट्यूटोरियल के दूसरे भाग में View बनाने के लिए हमारे ऑप्शंस की समीक्षा करेंगे।

The Router

जब सर्वर को एक HTTP रिक्वेस्ट प्राप्त होती है, तो Laravel इसे रूट फ़ाइलों में से किसी में भी रजिस्टर route से मेल करने की कोशिश करता है। सभी route फ़ाइलें routes डायरेक्टरी के अंदर स्थित होती हैं। routes/web.php वेब इंटरफेस के लिए route को होस्ट करता है, जबकि routes/api.php API के लिए route को होस्ट करता है। api.php में रजिस्टर route को /api से प्रीफिक्स किया जाता है (जैसे की localhost:3000 /api में)। यदि आप इस व्यवहार को बदलना चाहते हैं, तो आपको /app/Providers/RouteServiceProvider.php में RouteServiceProvider क्लास की ओर जाना चाहिए और वहां पर परिवर्तन करना चाहिए।

चूंकि हम एक प्रोडक्ट-लिस्टिंग एप्लीकेशन बना रहे हैं, इसलिए ये API के एंडपॉइन्ट्स और उन एंडपॉइन्ट्स से संबंधित HTTP एक्शन्स हैं।

  • GET /products/: सभी प्रोडक्ट्स को प्राप्त करें।
  • GET /product/{id}: id से मेल खाने वाला प्रोडक्ट्स प्राप्त करें।
  • POST /products: एक नया प्रोडक्ट बनाएं और उसे डेटाबेस में डालें।
  • PUT /products/{id} : id से मेल खाने वाला एक मौजूदा प्रोडक्ट अपडेट करें।
  • DELETE /products/{id}: दी गयी id से प्रोडक्ट हटाएं।

चलो, शब्दावली देखें, ठीक है। GET, POST, PUT और DELETE HTTP क्रियाएं हैं (अधिक लोकप्रिय रूप से HTTP मेथड के नाम से जाने जाते हैं) जिन्हे अनिवार्य रूप से एक RESTful सर्विस बनाने की आवश्यक हैं। /products प्रोडक्ट्स रिसोर्स से जुडी URI है। HTTP मेथड्स सर्वर को किसी दिए गए रिसोर्स पर वांछित कार्य करने के लिए अनुरोध करती हैं।

HTTP actions acting on the Product resource
GET, POST, PUT और DELETE सामान्यतः उपयोग किए जाने वाले REST एक्शन्स हैं

राउटर आपको उस रिसोर्स को टारगेट करने वाले HTTP मेथड्स के साथ एक रिसोर्स के लिए routes को घोषित करने की अनुमति देता है। यहां एक सैंपल route फ़ाइल है जो कुछ हार्ड कोड वाला डेटा देता है।

routes/api.php

यदि आप यह सत्यापित करना चाहते हैं कि route अपेक्षित रूप से कार्य कर रहे हैं, तो आपको POSTMAN या curl जैसे tool का उपयोग करना चाहिए।

The Product Model

प्रोडक्ट्स के रिसोर्स को एक मॉडल की जरूरत है जो डेटाबेस से इंटरैक्ट कर सकता है। मॉडल वह लेयर है जो डेटाबेस के शीर्ष पर बैठता है, सभी डेटाबेस-विशिष्ट शब्दगण (jagron) को छिपाता है। डाटाबेस के मॉडलिंग के लिए Laravel Eloquent ORM का उपयोग करता है।

Laravel के साथ Eloquent ORM में आपके डेटाबेस के साथ काम करने के लिए एक सुंदर, सरल ActiveRecord इम्प्लीमेंटेशन प्रदान किया गया है। प्रत्येक डेटाबेस टेबल में एक इसी से सम्बंधित "Model" होता है जिसका प्रयोग उस टेबल के साथ इंटरैक्ट करने के लिए किया जाता है। मॉडल आपको अपनी टेबल में डेटा के लिए क्वेरी करने की अनुमति देता है, साथ ही साथ टेबल में नए रिकॉर्ड सम्मिलित करता है।
Laravel Docs

डेटाबेस schema डेफिनिशन के बारे में क्या? Laravel का माइग्रेशन उस की देखभाल करता है। Artisan में एक माइग्रेशन कमांड है जो आपको अपनी schema को परिभाषित करने देता है और इसे बाद के स्तर पर क्रमिक रूप से (incrementally) अपडेट कर देता है। चलिए Product इकाई के लिए एक मॉडल और माइग्रेशन बनाएं।

नोट: यहाँ बहुत साड़ी Artisan कमांड्स हैं, और इन्हे भूल जाना आसान है। इसलिए प्रत्येक artisan कमांड में एक सहायक स्क्रीन शामिल है जो उपलब्ध अतिरिक्त विकल्प जैसे कि ऑप्शंस और आर्ग्यूमेंट्स उपलब्ध हैं। सहायता वाले पेज पर पहुंचने के लिए, कमांड का नाम help से पहले होना चाहिए। -m ऑप्शन किस लिए होता है यह देखने के लिए निम्न हेल्प कमांड को रन करें: $php artisan help make:model

यहाँ जेनेरेट की गयी माइग्रेशन फ़ाइल है।

database/migrations/timestamp_create_products_table.php

डेटाबेस में नई टेबल्स और कॉलम को माइग्रेट करते समय up मेथड को कॉल किया जाता है, जबकि माइग्रेशन को वापस रोलिंग करने के लिए down मेथड को चलाया जाता है। हमने तीन rows के साथ टेबल के लिए एक schema बनाई है: id, created_at, और updated_at$table->timestamp() मेथड created_at और updated_at कॉलम को बनाए रखने के लिए जिम्मेदार है। चलो schema की परिभाषा में कुछ और लाइन जोड़ते हैं।

हमने चार नए कॉलम के साथ schema को अपडेट किया है। Laravel का schema बिल्डर विभिन्न प्रकार के कॉलम टाइप्स को जैसे string, text, integer, boolean आदि का समर्थन करता है।

लंबित माइग्रेशन को एक्सेक्यूट करने के लिए, आपको निम्न कमांड को चलाना होगा:

कन्वेंशन के अनुसार, Laravel मानता है कि Product मॉडल products टेबल से जुड़ा हुआ है। हालांकि, यदि आपको कस्टम टेबल नाम के साथ मॉडल को संबद्ध करने की आवश्यकता है, तो आप टेबल के नाम को डिक्लेअर करने के लिए $table प्रॉपर्टी  का उपयोग कर सकते हैं। तब मॉडल को custom_products नामक एक टेबल के साथ जोड़ दिया जाएगा।

लेकिन हम चीजों को सरल रखेंगे और कन्वेंशन के साथ जाएंगे। Product मॉडल app/ डायरेक्टरी को जेनेरेट करेगा। हालांकि मॉडल क्लास खाली हो सकती है, यह विभिन्न क्वेरी बिल्डर मेथड्स से लैस आती है जिसे आप डेटाबेस को क्वेरी करने के लिए उपयोग कर सकते हैं। उदाहरण के लिए, आप सभी प्रोडक्ट्स को प्राप्त करने के लिए Product::all() या किसी ख़ास प्रोडक्ट को प्राप्त करने के लिए Product::find(1) का प्रयोग कर सकते हैं।

Laravel मॉडल में mass assignment vulnerability के खिलाफ एक अंतर्निहित संरक्षण तंत्र (built-in protection mechanism) है। fillable प्रॉपर्टी का उपयोग एट्रिब्यूट के नामों को घोषित करने के लिए किया जाता है जो बड़े पैमाने पर सुरक्षित रूप से जमा हो सकते हैं।

app/Product.php

ऊपर दिया गया कोड title, description, price और availability ऐट्रिब्यूट्स को श्वेतसूची (whitelists) करता है और उनको mass assignable की तरह treat करता है। अब हम products टेबल में नई row को डालने के लिए Product::create मेथड का प्रयोग कर सकते हैं।

Database Seeding

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

जनरेटेड seeder फाइलों को database/seeds डायरेक्टरी में रखा जाएगा।

डमी डेटा जेनरेट करने के लिए, आप str_random(10) जैसे कुछ का उपयोग कर सकते हैं जो एक रैंडम स्ट्रिंग रीटर्न करता है। लेकिन अगर आपको डेटा की आवश्यकता हो जो वास्तविक डेटा के काफी करीब हो, तो आपको faker लाइब्रेरी की तरह किसी का उपयोग करना चाहिए। Faker एक थर्ड-पार्टी वाली लाइब्रेरी है जो fake डाटा को जेनेरेट करने के लिए Laravel के फ्रेमवर्क के साथ आती है।

database/seeds/ProductsTableSeeder.php

artisan कमांड db:seed को डेटाबेस को पॉप्युलेट करने के लिए एक्सेक्यूट करें।

आइए, routes/api.php पर वापस जाएं और मिस किये गए टुकड़ों को भरें।

routes/api.php

The Controller

रूट फाइल वर्तमान में रूटिंग के लॉजिक को होस्ट करहि है और requests को हैंडल करती है। हम request को हैंडल करने वाले लॉजिक को Controller क्लास में भेज सकते हैं ताकि हमारे कोड बेहतर ढंग से संगठित हो और अधिक पड़ने लायक हो। चलो पहले एक कंट्रोलर क्लास को जेनेरेट करते हैं।

Controller क्लास में विभिन्न मेथड्स शामिल हैं (index, show, store, update, और delete) जो अलग-अलग HTTP एक्शन्स के अनुरूप हैंI मैंने रिक्वेस्ट को हैंडल करने के लॉजिक को route से कंट्रोलर में स्थानांतरित कर दिया है।

app/HTTP/Controllers/ProductsController.php

routes/api.php

यदि आपने गौर नहीं किया है, तो मैंने Product का एक इंस्टैंस कंट्रोलर मेथड्स में डाल दिया है। यह Laravel के इम्प्लिसिट बॉन्डिंग (implicit binding) का एक उदाहरण है। Laravel URI सेगमेंट नाम {product} के साथ मॉडल इंस्टेंस जिसका नाम Product $product है को मैच करने का प्रयास करता है। यदि कोई मैच मिलता है, तो Product मॉडल का एक इंस्टैंस कंट्रोलर एक्शन में इंजेक्ट कर दिया जाता है। यदि डेटाबेस में कोई प्रोडक्ट नहीं है, तो यह एक 404 एरर देता हैI अंतिम परिणाम पहले जैसा ही है लेकिन कम कोड के साथ।

POSTMAN को खोलें और प्रोडक्ट के लिए एंडपॉइन्ट को काम करना चाहिए। सुनिश्चित करें कि आपके पास Accept : application/json हेडर इनेबल है।

वेलिडेशन और एक्सेप्शन हैंडल करना

यदि आप किसी ऐसे रिसोर्स पर जाते हैं जो है ही नहीं तो आपको यह दिखाई देगा।

The error page displayed for the NotFoundHTTPException

NotFoundHTTPException होता है जिससे Laravel 404 एरर प्रदर्शित करता है। यदि आप सर्वर से इसके बजाय एक JSON रिस्पांस वापस कराना चाहते हैं, तो आपको डिफ़ॉल्ट एक्सेप्शन हैंडलिंग व्यवहार को बदलना होगा। Laravel में app/Exceptions/Handler.php में एक्सेप्शन हैंडलिंग के लिए समर्पित Handler क्लास है। क्लास में मुख्यतः दो मेथड्स हैं: report() और render()report method एक्सेप्शन इवेंट्स की रिपोर्टिंग और लॉगिंग के लिए उपयोगी है, जबकि एक एक्सेप्शन का सामना करने पर रिस्पांस देने के लिए render मेथड का उपयोग किया जाता है। JSON रिस्पांस रीटर्न करने के लिए render मेथड को अपडेट करें:

app/Exceptions/Handler.php

Laravel हमें वेलिडेशन रूल्स का एक सेट का उपयोग करके आने वाले HTTP रिक्वेस्ट्स को वैलिडेट करने की अनुमति देता है और ऑटोमेटिकली एक JSON रिस्पांस को रीटर्न करता है यदि वेलिडेशन फ़ैल हो जाता है। वेलिडेशन के लिए लॉजिक कंट्रोलर के अंदर रखा जाएगा। Illuminate\Http\Request ऑब्जेक्ट एक वैलिडेट मेथड प्रदान करता है जिसे हम वेलिडेशन रूल्स को परिभाषित करने के लिए उपयोग कर सकते हैं। चलो store मेथड में कुछ वेलिडेशन चेक जोड़ते हैं।

app/HTTP/Controllers/ProductsController.php

सारांश

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

आप में से जो लोग या तो Laravel के साथ शुरू हो रहे हैं या अपने ज्ञान, साइट या एक्सटेंशन के साथ एप्लीकेशन का विस्तार करने की तलाश में हैं, हमारे पास कई तरह की चीजें हैं जो आप Envato Market में पढ़ सकते हैं।

अब जब हम बैकएन्ड पर काम कर चुके हैं, तो हम अपना ध्यान फ्रंट-एन्ड के कांसेप्ट में लगाएंगे। श्रृंखला के दूसरे भाग के लिए बने रहें। कमैंट्स में अपने विचारों को साझा करें।

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.