Goonरीमिक्स और स्ट्रैपी के साथ पूर्ण-स्टैक विकास का परिचय
पूर्ण-स्टैक विकास एक व्यापक दृष्टिकोण है जो वेब अनुप्रयोगों के निर्माण को शामिल करता है, जो फ्रंट-एंड और बैक-एंड दोनों पहलुओं को कवर करता है। इस लेख में, हम रीमिक्स और स्ट्रैपी का उपयोग करके पूर्ण-स्टैक विकास पर एक क्रैश कोर्स में गहराई से जाएंगे। हम एक सरल अनुप्रयोग बनाएंगे जो स्ट्रैपी बैकएंड से लेखों की सूची प्रदर्शित करता है और फ्रंट-एंड के लिए रीमिक्स का उपयोग करता है।
स्ट्रैपी और रीमिक्स का अवलोकन
स्ट्रैपी एक हेडलेस सीएमएस है जो आसानी से सामग्री प्रबंधन की अनुमति देता है, जो एक रेस्टफुल या ग्राफक्यूएल एपीआई प्रदान करता है। दूसरी ओर, रीमिक्स एक आधुनिक रिएक्ट ढांचा है जो सर्वर-रेंडर्ड अनुप्रयोगों को सक्षम बनाता है, जो प्रदर्शन और उपयोगकर्ता अनुभव के लिए अनुकूलित है।
पाठ्यक्रम के लिए पूर्वापेक्षाएं
इस पाठ्यक्रम का पालन करने के लिए, आपको जावास्क्रिप्ट, रिएक्ट, और नोड.जेएस की मूल बातों का ज्ञान होना चाहिए। इसके अलावा, सुनिश्चित करें कि आपके पास अपने मशीन पर नोड.जेएस और नपीएम स्थापित हैं।
चरण 1: स्ट्रैपी सेट अप करना
स्ट्रैपी सेट अप करने के लिए, हमें पहले एक नया स्ट्रैपी परियोजना बनाने की आवश्यकता है। अपने टर्मिनल खोलें और एक नए स्ट्रैपी परियोजना नामक my-strapi-backend बनाने के लिए कमांड चलाएं।
स्ट्रैपी सेट अप करना 0 सेकंड पर
इसके बाद, हम एक सामग्री प्रकार परिभाषित करते हैं। स्ट्रैपी एडमिन पैनल खोलें और http://localhost:1337/admin पर नेविगेट करें और एक नया संग्रह प्रकार बनाएं जिसे article कहा जाता है, जिसमें शीर्षक और सामग्री के लिए क्षेत्र हैं।
सामग्री प्रकार परिभाषित करना 26 सेकंड पर
इसके बाद, हम कुछ लेख जोड़ते हैं जो articles संग्रह में जाते हैं और कुछ नमूना लेख बनाते हैं।
अनुमतियां सेट अप करने के लिए, सेटिंग्स -> भूमिकाएं -> सार्वजनिक पर जाएं और article के लिए find और findOne अनुमतियां सक्षम करें।
अनुमतियां सेट अप करना 78 सेकंड पर
अंत में, एपीआई URL प्राप्त करें, जो http://localhost:1337/api/articles पर उपलब्ध होगा।
एपीआई URL प्राप्त करना 124 सेकंड पर
चरण 2: रीमिक्स एप्लिकेशन सेट अप करना
रीमिक्स एप्लिकेशन सेट अप करने के लिए, एक नए टर्मिनल विंडो में एक नया रीमिक्स परियोजना बनाएं और अपनी पसंद के अनुसार प्रॉम्प्ट्स का पालन करें।
रीमिक्स सेट अप करना 156 सेकंड पर
इसके बाद, एपीआई कॉल के लिए एक्सिओस स्थापित करें और अपने रीमिक्स परियोजना निर्देशिका में नेविगेट करें और स्थापना कमांड चलाएं।
एक्सिओस स्थापित करना 181 सेकंड पर
चरण 3: रीमिक्स में स्ट्रैपी से डेटा प्राप्त करना
रीमिक्स में स्ट्रैपी से डेटा प्राप्त करने के लिए, एक मार्ग बनाएं जिसे app/routes/articles.jsx कहा जाता है।
स्ट्रैपी से डेटा प्राप्त करना 206 सेकंड पर
इस कोड में, हम स्ट्रैपी से लेख प्राप्त करते हैं और उन्हें एक सूची में प्रदर्शित करते हैं। अंत में, लेख पृष्ठ