00:00:00>> नमस्ते, मैं वर्सेल से पॉलीन हूँ और आज के वीडियो में,
00:00:03मैं आपको दिखाने जा रही हूँ कि
00:00:05v0 के गिट (Git) इंटीग्रेशन का उपयोग कैसे करें
00:00:08ताकि आप अपने आइडियाज़ को प्रोटोटाइप से प्रोडक्शन तक ले जा सकें।
00:00:11तो इस वीडियो में,
00:00:12हम एक ब्लॉग बनाएंगे,
00:00:14इसे गिटहब (GitHub) से जोड़ेंगे,
00:00:15शाखाओं (branches) का उपयोग करके सुरक्षित रूप से
00:00:18नए फीचर्स के साथ प्रयोग करेंगे और फिर इसे वेब पर लाइव डिप्लॉय करेंगे।
00:00:21अंत तक, आप पूरे वर्कफ़्लो को समझ जाएंगे।
00:00:25तो चलिए शुरू करते हैं।
00:00:27ठीक है, तो हम v0 में हैं।
00:00:30मैं एक साधारण ब्लॉग बनाने से शुरुआत करूंगी।
00:00:33मैं चैट में बस यह लिखूँगी कि मुझे क्या चाहिए।
00:00:35तो हम यहाँ एक
00:00:37आधुनिक ब्लॉग पेज बनाएंगे जिसमें
00:00:42एक हेडर, फीचर पोस्ट और हालिया पोस्ट्स का ग्रिड होगा।
00:00:53प्रो टिप, आप यहाँ से मॉडल भी बदल सकते हैं।
00:00:57हमारे पास कई मॉडल्स हैं।
00:00:59हमारे पास मिनी (Mini), प्रो (Pro), मैक्स (Max),
00:01:01और ओपस (Opus) भी उपलब्ध हैं।
00:01:03तो आप चैट करते समय उन्हें बदल सकते हैं।
00:01:07बढ़िया, मुझे यह पसंद आया।
00:01:09तो v0 ने मेरे लिए यह साफ-सुथरा ब्लॉग लेआउट तैयार किया है।
00:01:13इसे थोड़ा व्यक्तिगत बनाने के लिए कुछ बदलाव करते हैं।
00:01:17तो चलिए,
00:01:21अगर मैं सही स्पेलिंग लिख सकूँ,
00:01:23हेडर बैकग्राउंड को नीले से बैंगनी ग्रेडिएंट में बदल देते हैं।
00:01:32परफेक्ट। अब मेरे पास एक ब्लॉग है जिससे मैं खुश हूँ।
00:01:36लेकिन अभी, यह केवल v0 में मौजूद है।
00:01:40मुझे अपना काम कहीं अधिक स्थायी जगह पर सहेजना होगा।
00:01:43अंततः, मैं इसे लाइव डिप्लॉय करना चाहती हूँ,
00:01:45और यहीं पर यह गिट इंटीग्रेशन काम आता है।
00:01:48तो हम बस यहाँ साइडबार पर जाएंगे
00:01:52जहाँ आप गिटहब लोगो और गिट कनेक्शन देख सकते हैं।
00:01:56चूँकि मैं इस प्रोजेक्ट को पहली बार कनेक्ट कर रही हूँ,
00:01:59v0 मुझसे मेरा गिटहब अकाउंट कनेक्ट करने और रिपॉजिटरी को नाम देने के लिए कहता है।
00:02:04तो हम आगे बढ़ेंगे और कनेक्ट करेंगे।
00:02:06स्कोप मेरा अकाउंट है।
00:02:08मैं इन सभी अकाउंट्स में हूँ,
00:02:10लेकिन अभी के लिए, मैं अपने निजी पॉलीन अकाउंट का उपयोग करूंगी।
00:02:13मैं इस रिपॉजिटरी नाम से खुश हूँ,
00:02:15तो हम इसे ऐसे ही रहने देंगे और
00:02:16रिपॉजिटरी बनाना शुरू करेंगे।
00:02:18बस इसी तरह, v0 रिपॉजिटरी बना रहा है
00:02:21और मेरे सारे कोड गिटहब पर पुश कर रहा है।
00:02:24बहुत अच्छा। अब, देखते हैं कि वास्तव में गिटहब में क्या होता है।
00:02:29तो हम एक नज़र डाल सकते हैं।
00:02:31v0 द्वारा जनरेट किए गए इस पूरे कोड को देखें।
00:02:34यह उन सभी कॉन्फ़िगरेशन फ़ाइलों के साथ ठीक से संरचित है जिनकी मुझे आवश्यकता है।
00:02:38मेरे कंपोनेंट्स वहाँ हैं,
00:02:40ऐप डायरेक्टरी भी है, और
00:02:41सब कुछ व्यवस्थित और काम करने के लिए तैयार है।
00:02:43तो आप सोच रहे होंगे, "गिटहब से कनेक्ट करके मुझे वास्तव में क्या मिला?"
00:02:48पहला, मेरा कोड सुरक्षित रूप से बैकअप हो गया है।
00:02:51अगर कुछ गलत हो जाता है,
00:02:53तो मेरे पास मेरा पूरा इतिहास है।
00:02:55दूसरा, मैं अब बिना किसी बदलाव के डर के
00:02:57अधिक स्वतंत्र रूप से प्रयोग कर सकती हूँ।
00:03:00हम इसे कुछ ही देर में ब्रांचों के साथ देखेंगे,
00:03:02और तीसरा, मेरे पास प्रोडक्शन का रास्ता है।
00:03:04मैं इस ब्लॉग को लाइव डिप्लॉय कर सकती हूँ।
00:03:06ठीक है, चलिए एक नया फीचर जोड़कर इसे एक्शन में देखते हैं।
00:03:09मान लीजिए कि मैं एक "लेखक के बारे में" सेक्शन जोड़ना चाहती थी,
00:03:14लेकिन मैं अभी 100 प्रतिशत सुनिश्चित नहीं हूँ कि यह कैसा दिखना चाहिए।
00:03:17मैं इस वर्शन को खराब नहीं करना चाहती।
00:03:19तो यहीं पर शाखाएँ (branches) काम आती हैं।
00:03:21एक शाखा आपके प्रोजेक्ट के एक समानांतर वर्शन
00:03:24की तरह है जहाँ आप सुरक्षित रूप से प्रयोग कर सकते हैं।
00:03:27ठीक है। तो हम यहाँ इस शाखा को डुप्लिकेट करेंगे।
00:03:31आइए इस शाखा को "author bio" कहें।
00:03:36यहाँ ऊपर ध्यान दें,
00:03:38मैं अब "author bio" शाखा पर हूँ।
00:03:41मेरी मुख्य (main) शाखा अभी भी बिल्कुल वैसी ही है जैसी मैंने छोड़ी थी।
00:03:45तो अब हम यहाँ स्वतंत्र रूप से प्रयोग कर सकते हैं।
00:03:48तो हम वह ऑथर बायो जोड़ना चाहते हैं।
00:03:50इसलिए हम v0 से बस एक ऑथर बायो सेक्शन जोड़ने के लिए कहेंगे।
00:03:56ठीक है, अद्भुत।
00:03:59इसने यह नया ऑथर बायो कंपोनेंट जोड़ दिया है।
00:04:02तो अब चलिए यहाँ प्रिव्यू में एक त्वरित रिफ्रेश करते हैं।
00:04:06हमें यह देखने में सक्षम होना चाहिए कि इसे कहाँ जोड़ा गया है।
00:04:10वहाँ देखिए। एक नया "लेखक के बारे में" सेक्शन है।
00:04:13तो बस एक रिमाइंडर,
00:04:15हमने इस शाखा में बदलाव किए हैं,
00:04:18"author bio" शाखा में,
00:04:19जिसका अर्थ है कि मुख्य (main) शाखा में
00:04:22बिल्कुल भी कोई बदलाव नहीं किया गया है।
00:04:24तो यह शाखा हमारे प्रयोग करने के लिए स्वतंत्र है।
00:04:27तो अगर हम किसी टेक्स्ट या स्टाइल
00:04:29को और बदलना चाहते हैं, तो हम यहाँ स्वतंत्र रूप से कर सकते हैं।
00:04:33वास्तव में इसे देखते हुए,
00:04:35मुझे लगता है कि ऑथर बायो थोड़ा और कॉम्पैक्ट होना चाहिए।
00:04:38दिखाने के लिए, मैं इसी शाखा में रहते हुए इसे एडजस्ट करती हूँ।
00:04:40ऑथर बायो को और अधिक कॉम्पैक्ट बनाएं।
00:04:41ठीक है, अद्भुत।
00:04:46आप देख सकते हैं कि v0 ने ऑथर सेक्शन को और अधिक कॉम्पैक्ट बना दिया है
00:04:48और यह कुल मिलाकर पैडिंग को कम कर देता है।
00:04:52यह बहुत बेहतर लग रहा है।
00:04:56मैं इससे बहुत खुश हूँ।
00:04:57तो हम आगे बढ़ सकते हैं और एक PR खोलकर इन बदलावों को पुश कर सकते हैं।
00:04:58देखें कि यह वर्कफ़्लो मेरी मुख्य शाखा की रक्षा कैसे करता है।
00:05:03मैं इस एक्सपेरिमेंट शाखा में जितनी बार चाहूँ उतनी बार बदलाव कर सकती हूँ,
00:05:06लेकिन मुख्य शाखा तब तक स्थिर रहती है जब तक मैं पूरी तरह से संतुष्ट न हो जाऊँ।
00:05:10ठीक है, मैं अब ऑथर बायो से खुश हूँ।
00:05:13अब इसे अपनी मुख्य शाखा में मर्ज (merge) करने का समय है।
00:05:16मैं एक पुल रिक्वेस्ट (Pull Request) बनाऊंगी।
00:05:18तो पुल रिक्वेस्ट या PR मूल रूप से
00:05:20"author bio" शाखा से मेरे बदलावों को
00:05:25मुख्य (main) शाखा में खींचने (pull) के लिए कह रहा है।
00:05:28यह बदलावों को प्रस्तावित करने का औपचारिक तरीका है।
00:05:30तो हम सीधे यहाँ एक PR खोलेंगे।
00:05:32और हम यहाँ बस PR पर क्लिक करेंगे।
00:05:35और यह हमें सीधे गिटहब पर ले जाता है।
00:05:44और जैसा कि आप देख सकते हैं,
00:05:46हमें वे दो कमिट्स (commits) मिल गए हैं जो हमने v0 पर किए थे।
00:05:47यानी ऑथर बायो बनाना और उसे और अधिक कॉम्पैक्ट बनाना।
00:05:51और अगर हम यहाँ फ़ाइल परिवर्तनों पर जाते हैं,
00:05:56तो आप उस सटीक कोड की समीक्षा कर सकते हैं जिसे v0 ने बदला है।
00:05:58टीम सेटिंग में,
00:06:03यहाँ आपके सहकर्मी आपके कोड की समीक्षा करेंगे
00:06:04और टिप्पणियां (comments) छोड़ेंगे।
00:06:07अकेले प्रोजेक्ट्स के लिए,
00:06:08यह सुनिश्चित करने के लिए आपकी अंतिम जांच है कि
00:06:09सब कुछ अच्छा दिख रहा है।
00:06:11मैं इन बदलावों से संतुष्ट हूँ।
00:06:13इसलिए मैं इस पुल रिक्वेस्ट को मर्ज कर दूंगी।
00:06:14तो चलिए यहाँ वापस v0 पर चलते हैं।
00:06:17और जैसा कि आप देख सकते हैं, हम PR को मर्ज कर सकते हैं।
00:06:20तो हम इसे बस मर्ज कर देंगे।
00:06:23और अगर हम वापस गिटहब पर जाते हैं,
00:06:29तो आप देख सकते हैं कि इसे मर्ज कर दिया गया है।
00:06:31तो यह फीचर अब आधिकारिक तौर पर हमारे मुख्य कोडबेस का हिस्सा है।
00:06:34तो अब वह सब लाइव है।
00:06:38हम यहाँ सेटिंग्स पर भी जा सकते हैं
00:06:39और वर्सेल (Vercel) प्रोजेक्ट और व्यू ऑन वर्सेल देख सकते हैं।
00:06:42जैसा कि आप यहाँ देख सकते हैं, हमारा डिप्लॉयमेंट सफल रहा।
00:06:46और अगर हम यहाँ अपने डोमेन में क्लिक करते हैं, तो यह रहा।
00:06:51मेरा ब्लॉग इंटरनेट पर लाइव है।
00:06:55आप देख सकते हैं कि हमारे पास ग्रेडिएंट वाला हेडर है,
00:06:57ब्लॉग पोस्ट्स हैं।
00:07:00और अगर मैं यहाँ नीचे स्क्रॉल करूँ, तो हमारा ऑथर बायो है।
00:07:01मूल रूप से वह सब कुछ जो मैंने v0 में बनाया था,
00:07:06गिट के माध्यम से सुरक्षित रूप से मर्ज हो गया
00:07:08और अब डिप्लॉय होकर पूरी दुनिया के लिए उपलब्ध है।
00:07:10यह वही वर्कफ़्लो है जिसका उपयोग
00:07:13प्रोफेशनल डेवलपमेंट टीमें हर दिन करती हैं।
00:07:14तो आप v0 में निर्माण कर रहे हैं, गिट के साथ अपने कोड को प्रबंधित कर रहे हैं
00:07:17और फिर वर्सेल के साथ डिप्लॉय कर रहे हैं,
00:07:20एक संपूर्ण प्रोडक्शन वर्कफ़्लो।
00:07:22मुझे आशा है कि यह आपको v0 के गिट इंटीग्रेशन का
00:07:25अधिक आत्मविश्वास के साथ उपयोग करने में मदद करेगा।
00:07:27इस वर्कफ़्लो को स्वयं आज़माएँ।
00:07:30किसी छोटी चीज़ से शुरू करें, एक शाखा बनाएं,
00:07:32प्रयोग करें और डिप्लॉय करें।
00:07:34यदि आपके कोई प्रश्न हैं,
00:07:36तो हमें हमारे कम्युनिटी स्पेस community.vercel.com पर ढूंढें।
00:07:38देखने के लिए आपका बहुत-बहुत धन्यवाद।