Transcript
00:00:00Shopify स्टोर सेटअप करना पहले से कहीं ज्यादा आसान हो गया है क्योंकि अब आप इसे बस उन
00:00:04AI एजेंट्स के साथ जोड़ते हैं जिनका उपयोग आप कोडिंग के लिए करते हैं और उन्हें सब कुछ संभालने देते हैं। लेकिन सिर्फ क्लाउड कोड को
00:00:09अपने स्टोर से कनेक्ट करना ही काफी नहीं है। एक ऐसी शॉप बनाने के लिए जो सामान्य न दिखे
00:00:14जैसे कि बाहर मौजूद हर दूसरी Shopify स्टोर दिखती है, आपको इसे अपने सेटअप में कुछ मुख्य चीजों के साथ जोड़ना होगा।
00:00:19इस वीडियो के अंत तक, आप उस पूरे वर्कफ़्लो को जान जाएंगे जिसका उपयोग आप अपनी खुद की
00:00:23Shopify पाइपलाइन को एंड-टू-एंड सेट करने के लिए कर सकते हैं ताकि आप तुरंत अपने उत्पादों को बेचना शुरू कर सकें।
00:00:28अपने स्टोर बनाने की तैयारी के लिए आपको कुछ चरणों का पालन करना होगा। पहली
00:00:32चीज जो आपको चाहिए वह है एक Shopify पार्टनर अकाउंट, इसलिए आप ब्राउज़र पर जाएं और साइन अप करें। पार्टनर
00:00:37अकाउंट मायने रखता है क्योंकि यह आपको उन डेवलपमेंट टूल्स तक पहुंच देता है जो आपको प्लेटफॉर्म के साथ
00:00:41प्रयोग करने की अनुमति देते हैं। यह मूल रूप से आपके स्टोर के लिए एक सैंडबॉक्स है, जहां आप अपनी ऐप को उस तरह से बना सकते हैं जैसे आप
00:00:46सामान्य रूप से करते हैं, साथ ही नकली भुगतान और टेस्ट उपयोगकर्ताओं जैसे डेवलपमेंट टूल्स का उपयोग कर सकते हैं ताकि आप
00:00:51लाइव होने से पहले ऐप का परीक्षण कर सकें। और बाद में, यदि आपको लगता है कि आपकी ऐप बिक्री शुरू करने के लिए तैयार है
00:00:56तो आपको बस पेमेंट इंटीग्रेशन जोड़ने की आवश्यकता है और आप आसानी से डेवलपमेंट अकाउंट को
00:01:01मर्चेंट अकाउंट में स्थानांतरित कर सकते हैं जहां आप वास्तविक लोगों को वास्तविक उत्पाद बेचना शुरू कर सकते हैं।
00:01:05अब जब आपने प्रोजेक्ट में ऐप बना लिया है, तो Shopify CLI इंस्टॉल करने का समय आ गया है। आप ऐसा
00:01:10CLI डॉक्स से इंस्टॉल कमांड को कॉपी करके और उसे टर्मिनल में चलाकर कर सकते हैं। एक बार जब आप इसे चला लेते हैं, तो आप
00:01:15React ऐप या एक्सटेंशन ऐप के बीच चयन करने के लिए प्रेरित होंगे। हमने React ऐप चुना क्योंकि
00:01:20हम ज्यादातर इसी में विकसित करते हैं और उस तरह से ऐप को कस्टमाइज़ करना आसान होता है। उसके बाद, आप चुन सकते हैं कि
00:01:26आप कौन सी भाषा का उपयोग करना चाहते हैं और हमने TypeScript को इसकी टाइप सुरक्षा और सुरक्षा सुविधाओं के कारण चुना
00:01:31JavaScript की तुलना में। एक बार जब आप इस सेटअप से गुजर जाते हैं, तो यह सभी आवश्यक डिपेंडेंसी इंस्टॉल कर देगा
00:01:37ऐप चलाने के लिए। डिपेंडेंसी के बाद, प्रोजेक्ट तैयार हो जाएगा और जब आप इसे चलाएंगे, तो आप
00:01:41ऐप का एक बुनियादी टेम्प्लेट देखेंगे जहां से आप आगे के बदलाव करना शुरू कर सकते हैं। तो एक बार जब CLI
00:01:46इंस्टॉल हो जाता है, तो आपको अन्य चीजें भी इंस्टॉल करनी होती हैं, Shopify AI टूलकिट से शुरू करके जो
00:01:51बिल्डिंग प्रक्रिया में जुड़ता है। इसका सबसे महत्वपूर्ण हिस्सा MCP है और इसके लिए इंस्टॉल कमांड
00:01:56सभी AI कोडिंग एजेंट्स के लिए MCP डॉक्स में पाया जा सकता है। चूंकि हम क्लाउड कोड का उपयोग कर रहे थे, हमने क्लाउड के लिए कमांड कॉपी की
00:02:03और MCP इंस्टॉल किया और आप अपनी पसंद के किसी भी कोडिंग टूल के साथ ऐसा कर सकते हैं। एक बार MCP
00:02:08इंस्टॉल हो जाने के बाद, यह अपने टूल्स को क्लाउड के सामने उजागर करता है, लेकिन केवल MCP काफी नहीं है क्योंकि इसमें सभी टूल्स
00:02:14मूल रूप से क्लाउड को बेहतर बनाने में मदद करने के लिए हैं। MCP के पास क्लाउड में चल रहे आपके स्टोर में बदलाव करने का कोई तरीका नहीं है।
00:02:19इसमें केवल Shopify API के बारे में डॉक्स और ज्ञान के साथ-साथ अन्य वैलिडेशन शामिल हैं। तो
00:02:25यह सेटअप अकेले निर्माण के लिए पर्याप्त नहीं था। और इसीलिए CLI मायने रखता है क्योंकि यह
00:02:30वास्तव में Shopify ऐप और स्थानीय सेटअप के बीच एक पुल है। MCP के अलावा, आपको
00:02:35प्लगइन भी इंस्टॉल करना होगा। प्लगइन मायने रखता है क्योंकि इसमें कई एजेंट्स और कौशल एक साथ बंडल किए गए हैं।
00:02:40आप इसे इंस्टॉल कमांड का पालन करके इंस्टॉल कर सकते हैं। इंस्टॉलेशन कमांड चलाने के बाद,
00:02:44रिलोड प्लगइन्स कमांड चलाएं और सभी एजेंट्स और कौशल उपयोग के लिए तैयार हो जाएंगे।
00:02:49अब मुख्य सेटअप हो गया है, लेकिन निर्माण शुरू करने से पहले, आपको प्रोजेक्ट को तैयार करने की आवश्यकता है।
00:02:53सबसे पहली चीज जो सेटअप करनी है वह है Claude.md फ़ाइल, जो मूल रूप से
00:02:59एजेंट को उन प्रथाओं के बारे में मार्गदर्शन करने के लिए फ़ाइल है जिनका आप पालन करना चाहते हैं। हमने जो Claude.md जोड़ा है उसमें वे सभी सर्वोत्तम अभ्यास शामिल हैं
00:03:05जिनके बारे में हम हमेशा बात करते हैं। इस पर हमारा एक समर्पित पूरा वीडियो है जहां हम Claude.md फ़ाइल के लिए सर्वोत्तम प्रथाओं के माध्यम से चलते हैं,
00:03:10जिसे आप चैनल पर देख सकते हैं। Claude.md के अलावा, आपको कुछ अन्य चीजों को भी जगह पर रखने की आवश्यकता है।
00:03:15डिफ़ॉल्ट रूप से, क्लाउड SVG बनाता है और उन्हें छवियों के लिए प्लेसहोल्डर के रूप में उपयोग करता है। लेकिन
00:03:21ये SVG हमारी शॉप के दृश्यों के लिए काम नहीं करेंगे, इसलिए हमने अंतर को कवर करने के लिए एक कौशल बनाया। हमने एक
00:03:26जेमिनी छवि निर्माण कौशल बनाया, जो जिस एजेंट में आप इसे इंस्टॉल करते हैं उसे जेमिनी CLI को कॉल करने और
00:03:32वेबसाइट के लिए चित्र बनाने के लिए उसे प्रॉम्प्ट करने की अनुमति देता है। कौशल में जेमिनी CLI को कॉल करने के निर्देश शामिल हैं
00:03:38और उत्पन्न छवियों को कहां सहेजना है। और क्योंकि जेमिनी CLI में छवि निर्माण एकीकृत है, इसलिए
00:03:44किसी अलग API कुंजी की आवश्यकता नहीं है, इसलिए आप जेमिनी CLI प्रमाणीकरण पर भरोसा करके सीधे इस कौशल का उपयोग कर सकते हैं।
00:03:50छवि निर्माण के अलावा, हमने अपनी आसानी के लिए एक और कौशल भी बनाया। प्रोटोटाइप
00:03:55कौशल इस तरह काम करता है कि जब भी आप एजेंट से डिज़ाइन परिवर्तन के लिए पूछते हैं, तो यह पहले एक HTML फ़ाइल बनाता है
00:04:01जिसे आप पूर्वावलोकन कर सकते हैं, और एक बार जब आप पूर्वावलोकन कर लेते हैं, तो यह उस बदलाव को ऐप के डिज़ाइन पर लागू कर देता है। स्किल.md
00:04:05फ़ाइल में दो चरणों में विभाजित पूरे वर्कफ़्लो के बारे में विवरण शामिल है। एक बार ये कौशल मौजूद हो जाने के बाद,
00:04:11कुछ हुक भी होते हैं जिन्हें आप .claud के अंदर settings.json में कॉन्फ़िगर और कनेक्ट करते हैं।
00:04:17फ़ोल्डर। ये हुक मूल रूप से क्लाउड के लिए गार्डरेल के रूप में कार्य करते हैं। उदाहरण के लिए, प्री-टूल उपयोग स्क्रिप्ट
00:04:22आपकी स्वीकृति के बिना क्लाउड को सीधे ऐप पर बदलाव करने से रोक सकती है। आप उतने हुक कॉन्फ़िगर कर सकते हैं
00:04:28जितना आप चाहें। तो इस सेटअप के साथ, हम वास्तव में ऐप बनाने के लिए तैयार थे। लेकिन आगे बढ़ने से पहले,
00:04:33आइए हमारे प्रायोजक, विलो वॉयस से एक शब्द सुनते हैं। यदि आप अपना अधिकांश दिन ईमेल टाइप करने में बिताते हैं,
00:04:37स्लैक संदेश, डॉक्स और प्रॉम्प्ट, आप जितनी आवश्यकता है उससे कहीं अधिक धीरे काम कर रहे हैं। विलो वॉयस आपको
00:04:42अपने कंप्यूटर पर कहीं भी टाइप करने के बजाय बोलने की अनुमति देता है, और टेक्स्ट तुरंत दिखाई देता है। यह आपके
00:04:47इन-बिल्ट डिक्टेशन की तरह नहीं है जो हर दूसरे शब्द को गलत कर देता है। विलो तीन गुना अधिक सटीक है, और यह
00:04:52वास्तव में पैराग्राफ और संरचना के साथ सब कुछ ठीक से स्वरूपित करता है। सबसे अच्छी बात यह है कि यह आपके काम के अनुकूल हो जाता है
00:04:57औपचारिक जब आप ईमेल लिख रहे हों, आकस्मिक जब आप स्लैक पर हों, और तकनीकी जब आप कोड में हों।
00:05:02यह समय के साथ सीखता है कि आप कैसे लिखते हैं ताकि आउटपुट आप जैसा लगे, न कि रोबोट जैसा। 100,000 से अधिक पेशेवर
00:05:07इसे दैनिक उपयोग करते हैं, और यह HIPAA अनुपालन और शून्य डेटा प्रतिधारण के साथ SOC2 प्रमाणित है, इसलिए आपके शब्द
00:05:13निजी रहते हैं। मैं पिछले एक हफ्ते से इसका उपयोग कर रहा हूँ, और टाइपिंग पर वापस जाना अब दर्दनाक रूप से धीमा लगता है।
00:05:18विवरण में दिए गए लिंक का उपयोग करके विलो वॉयस मुफ्त डाउनलोड करें। अब एक बार जब यह जगह पर हो, तो आप
00:05:23बस क्लाउड को प्रॉम्प्ट कर सकते हैं कि आप क्या बनाना चाहते हैं। आपको उस लैंडिंग पेज का वर्णन करने की आवश्यकता है जिसे आप चाहते हैं,
00:05:27ठीक वैसे ही जैसे हमने उस शैली का उल्लेख किया जिसे हम चाहते थे कि लैंडिंग पेज पालन करे। और क्योंकि हमने
00:05:31कौशल को कॉन्फ़िगर किया था, इसने पहले प्रोटोटाइप कौशल लोड किया। तो वास्तविक ऐप पर बदलाव करने के बजाय
00:05:36इसने HTML कोड लिखा जिसमें इसने डिज़ाइन को अंतिम रूप दिया, और फिर हमारी स्वीकृति की प्रतीक्षा की।
00:05:41इसने डिज़ाइन को एक नए टैब में भी खोला ताकि हम इसका पूर्वावलोकन कर सकें। पहला संस्करण जिसे इसने बनाया
00:05:46वह साफ-सुथरा लगा और नेत्रहीन रूप से अच्छी तरह से काम किया, लेकिन इसने लैंडिंग पेज पर प्लेसहोल्डर अनुभागों का उपयोग किया जहाँ
00:05:51छवियां जानी चाहिए थीं। चूंकि हमने छवि निर्माण कौशल इंस्टॉल किया था, इसे सीधे लोड करना चाहिए था
00:05:55और पहली जगह में छवि निर्माण का उपयोग करना चाहिए था। इसलिए हमने इसे छवि निर्माण कौशल का उपयोग करने के लिए फिर से प्रॉम्प्ट किया
00:06:00और वास्तव में उन प्लेसहोल्डर अनुभागों के लिए छवियां उत्पन्न कीं। हमारे उस प्रॉम्प्ट को देने के बाद,
00:06:05इसने बैश टूल के माध्यम से कई जेमिनी CLI लॉन्च किए और उन्हें YOLO मोड में खोला ताकि जेमिनी CLI
00:06:12किसी भी अनुमति प्रॉम्प्ट द्वारा अवरुद्ध न हो। क्लाउड ने कई टर्मिनल लॉन्च किए और उन सभी ने
00:06:17समांतर में चित्र बनाना शुरू कर दिया। छवि निर्माण में लंबा समय लगता है, इसलिए आपको इसके समाप्त होने का इंतजार करना होगा।
00:06:22एक बार छवियां तैयार हो जाने के बाद, आप वेबसाइट देख सकते हैं और यह बहुत अधिक पॉलिश दिखेगी। और
00:06:27चूंकि छवि निर्माण प्रॉम्प्ट को भी क्लाउड द्वारा नियंत्रित किया गया था, इसलिए छवियां UI शैली से बहुत अच्छी तरह से मेल खाती थीं।
00:06:33अब दृश्य जुड़ जाने के साथ, वेबसाइट पूरी हो गई थी। आप इस बिंदु पर डिज़ाइन को पुनरावृत्त कर सकते हैं।
00:06:38चूंकि हमारे पास कोई और बदलाव नहीं करना था, हमने क्लाउड को आगे बढ़ने और स्टोर में ऐप लागू करने के लिए कहा।
00:06:43यह आपसे कुछ प्रश्न पूछेगा कि आप ऐप को कैसे लागू करना चाहते हैं, जैसे कि क्या आप
00:06:48इसे लाइव स्टोर के साथ सिंक करना चाहते हैं या नहीं, जो हमने किया, इसलिए हमने वह विकल्प चुना। एक बार जब आप इसके प्रश्नों का उत्तर दे देते हैं,
00:06:53तो इसने HTML डिज़ाइन को सीधे मुख्य ऐप में नहीं, बल्कि ऐप में बदलने के लिए आगे बढ़ा,
00:06:58बल्कि उस डेवलपमेंट ऐप में जिसे हमने बनाया था। इसने डिज़ाइन को एक-से-एक नकल किया और आप ऐप का पूर्वावलोकन कर सकते हैं
00:07:03स्वयं यह देखने के लिए कि इसने डिज़ाइन की पूरी तरह से नकल की है। अब, यह एक अच्छी बात थी कि हमने HTML का उपयोग किया
00:07:08ऐप में इसे वास्तव में लागू करने से पहले पूर्वावलोकन करें क्योंकि यह प्रक्रिया बहुत समय लेती है। और यदि आप
00:07:13इस प्रक्रिया का उपयोग करके डिज़ाइन पर पुनरावृत्ति कर रहे थे, तो इसने बहुत समय और टोकन बर्बाद कर दिए होते। HTML
00:07:18प्रोटोटाइपिंग बहुत तेज़ और पुनरावृत्ति करने में आसान थी। साथ ही, यदि आप हमारी सामग्री का आनंद ले रहे हैं, तो विचार करें
00:07:23हाइप बटन दबाने के बारे में क्योंकि यह हमें इस तरह की और सामग्री बनाने और अधिक लोगों तक पहुंचने में मदद करता है।
00:07:28इस बिंदु तक, ऐप वास्तविक स्टोर URL के साथ सिंक में है। जिसे आपने अभी बनाया है वह डिज़ाइन स्थानीय पर है
00:07:34मशीन पर पूर्वावलोकन के लिए सर्वर और यह थीम पूर्वावलोकन के अंदर भी बैठता है, जो वह जगह है जहाँ
00:07:39मूल रूप से इसने थीम को डेवलपमेंट ऐप में भेज दिया ताकि हम इसे लाइव पूर्वावलोकन कर सकें। यह अंतिम संस्करण नहीं है,
00:07:44यह सिर्फ एक ड्राफ्ट है। इसलिए हमने बस इसे लाइव सिंक करने के लिए कहा और इसने Shopify CLI और MCP का उपयोग किया
00:07:50डिज़ाइन को Shopify स्टोर के लिए कॉन्फ़िगर किए गए मुख्य URL पर सिंक करने के लिए टूल। और इसके बाद,
00:07:55क्लाउड आपके ऐप पर डिज़ाइन को लाइव अपडेट कर चुका होगा। अब, इसी तरह, आप इसे
00:08:00अपनी वेबसाइट के अन्य सभी पृष्ठों को अपडेट करने के लिए कह सकते हैं और यह उसी प्रक्रिया का पालन करेगा। यह पहले अनुभागों को प्रोटोटाइप करेगा,
00:08:05फिर उन्हें वास्तविक ऐप में अपडेट करें और फिर उन्हें होस्ट किए गए स्टोर पर सिंक करें। लेकिन कुछ चीजें हैं
00:08:10जिन्हें आपको अभी भी अपने स्टोर पर करने की आवश्यकता होगी ताकि यह तैयार हो सके। इस बिंदु पर, आप जोड़ने में सक्षम नहीं होंगे
00:08:14उत्पाद क्योंकि उत्पादों को अपडेट करना और उन्हें कार्यान्वयन के लिए तैयार करना Shopify एडमिन की आवश्यकता है
00:08:20API. इसे एडमिन API के बिना नहीं किया जा सकता क्योंकि यही वह है जो आपको स्टोर के मुख्य भागों तक पहुंच प्रदान करता है
00:08:25जैसे अबाउट पेज उत्पाद और अन्य प्रबंधन सुविधाएँ। अब तक, हम सिर्फ
00:08:30थीम में बदलाव कर रहे थे और दृश्यों के लिए उस थीम को स्टोर पर ही लागू कर रहे थे। कनेक्ट करने के लिए
00:08:35एडमिन API, आपको Shopify CLI का उपयोग करके इसे स्टोर के साथ प्रमाणित करने की आवश्यकता है। एक बार जब आप
00:08:41अपने प्रमाणीकरण लिंक के साथ प्रमाणीकरण कमांड दर्ज करते हैं, तो यह ब्राउज़र खोलेगा जहाँ से आप प्रमाणित कर सकते हैं। के बाद
00:08:46वह, आप स्टोर संबंधित पृष्ठ बनाने में सक्षम होंगे और यह Shopify MCP और CLI टूल का उपयोग करेगा
00:08:52पृष्ठ के अन्य अनुभागों को अपडेट करने के लिए एक साथ। अब, आप इसे अन्य उत्पादों को जोड़ने के लिए कह सकते हैं
00:08:56अपने स्टोर पर ताकि आप बेचना शुरू कर सकें। लेकिन उत्पाद जोड़ने के लिए, आपको अनुमतियों को कॉन्फ़िगर करने की आवश्यकता है
00:09:01Shopify स्टोर के लिए ताकि यह एडमिन API के माध्यम से टूल्स तक पहुंच सके। उत्पाद जोड़ने के लिए अधिक की आवश्यकता होती है
00:09:06अनुमतियां जो हमने पहले दी थीं। हमने केवल सामग्री लिखने की अनुमति जोड़ी थी, लेकिन जोड़ने के लिए
00:09:11उत्पाद, हमें अतिरिक्त अनुमतियों की आवश्यकता है जैसे उत्पाद लिखना और प्रकाशन पढ़ना और लिखना।
00:09:16तो, आपको प्रमाणीकरण कमांड को फिर से चलाना होगा लेकिन अतिरिक्त अनुमतियों के साथ। एक बार यह हो जाने के बाद,
00:09:20आप क्लाउड से अपनी साइट पर उत्पाद जोड़ने के लिए कह सकते हैं। और एक बार जब यह हो जाता है, तो आप ऐप की जांच कर सकते हैं और देख सकते हैं
00:09:25उत्पाद वहां सूचीबद्ध हैं साथ ही स्टोर उत्पाद विवरण और कार्ट सुविधाओं के साथ तैयार है और
00:09:30एडमिन पैनल में भी उत्पादों की जांच कर सकते हैं। लेकिन जो भी आपके स्टोर पर आता है, वह अभी भी सक्षम नहीं होगा
00:09:35इस बिंदु पर खरीदारी करें। स्टोर वास्तव में उत्पाद बेचने के लिए तैयार होने के लिए, आपको भुगतान जोड़ने की आवश्यकता है
00:09:40विवरण ताकि भुगतान संसाधित किया जा सके। आपको एक योजना का चयन करने की भी आवश्यकता होगी क्योंकि जब तक आप ऐसा नहीं करते,
00:09:45जो कोई भी आपके स्टोर पर आता है उसे इसे देखने के लिए पासवर्ड दर्ज करना होगा, जो स्पष्ट रूप से संभव नहीं है। तो,
00:09:51एक बार जब आप अपनी योजना चुन लेते हैं, तो आप अपने उत्पाद बेचना शुरू कर पाएंगे। अब, पूरा सेटअप
00:09:55गाइड और यहां बनाए गए सभी कौशल AI लैब्स प्रो में इस वीडियो के लिए और हमारे सभी पिछले के लिए पाए जा सकते हैं
00:10:02वीडियो जहां से आप इसे डाउनलोड कर सकते हैं और अपनी परियोजनाओं के लिए उपयोग कर सकते हैं। यदि आपको वह मूल्य मिला जो हम करते हैं
00:10:07और चैनल का समर्थन करना चाहते हैं, तो इसे करने का यह सबसे अच्छा तरीका है। लिंक विवरण में है।
00:10:11यह हमें इस वीडियो के अंत में लाता है। यदि आप चैनल का समर्थन करना चाहते हैं और हमें बनाना जारी रखने में मदद करना चाहते हैं
00:10:16इस तरह के वीडियो, आप नीचे दिए गए सुपर थैंक्स बटन का उपयोग करके ऐसा कर सकते हैं। हमेशा की तरह,
00:10:20देखने के लिए धन्यवाद और मैं आपको अगले में देखूंगा
Community Posts
No posts yet. Be the first to write about this video!
Write about this video