v0 के साथ शुरुआत करें: प्रॉम्प्ट से लेकर प्रोडक्शन तक

VVercel
컴퓨터/소프트웨어창업/스타트업AI/미래기술

Transcript

00:00:00यह एक इवेंट लैंडिंग पेज है जिसे मैंने खुद कुछ ही मिनटों में बनाया है।
00:00:05इसमें एआई-संचालित वर्चुअल ट्राई-ऑन अनुभव भी शामिल है।
00:00:09मेरे बॉस ने मुझे यह प्रोजेक्ट सौंपा था और V0 ने मेरे विचारों को वास्तविक सॉफ़्टवेयर में बदलने में मदद की।
00:00:14इस वीडियो में, मैं आपको दिखाऊंगा कि V0 क्या है और कदम-दर-कदम प्रोजेक्ट्स कैसे बनाएं।
00:00:19तो V0 क्या है?
00:00:21एआई कोड जनरेट करना आसान बनाता है।
00:00:23V0 उस शक्ति का उपयोग एक ऐसे फॉर्मेट में करता है जिससे किसी के लिए भी वास्तविक ऐप बनाना आसान हो जाता है
00:00:28और वेबसाइटें बनाना या डेवलपर्स के साथ सहयोग करना आसान हो जाता है।
00:00:30V0 को आपको जितनी जल्दी हो सके शून्य से शिप करने में मदद करने के लिए डिज़ाइन किया गया है।
00:00:36V0 इस तरह काम करता है।
00:00:37आप उस ऐप, एजेंट या वेबसाइट का विवरण देते हैं जो आप चाहते हैं, और फिर V0 लाइव प्रिव्यू में
00:00:42कोड जनरेट करता है।
00:00:43आप V0 से बात करके अपने प्रोजेक्ट में बदलाव और संशोधन कर सकते हैं, उसे बताएं कि क्या बदलाव करने हैं,
00:00:48और वह उन्हें आपके लिए कर देगा।
00:00:49V0, Vercel और Next.js का उपयोग करके वास्तविक सॉफ़्टवेयर जनरेट करता है, लेकिन V0 केवल एक वेबसाइट बिल्डर नहीं है।
00:00:56यह वास्तविक ऐप्स जनरेट कर सकता है, उन्हें एआई और डेटाबेस से जोड़ सकता है, और ऐसा कोड जनरेट कर सकता है जिसे डेवलपर्स
00:01:00उपयोग और डिप्लॉय कर सकते हैं।
00:01:02यह इसलिए संभव है क्योंकि V0 को Next.js कोडिंग फ्रेमवर्क के निर्माता Vercel द्वारा बनाया गया है,
00:01:08जिसका उपयोग Under Armour, Stripe और Notion जैसे ब्रांडों द्वारा किया जाता है।
00:01:11इसलिए जब V0 आपके Next.js ऐप को बनाता और डिप्लॉय करता है, तो आप उसी कोड और सुरक्षित
00:01:15इन्फ्रास्ट्रक्चर का उपयोग कर रहे होते हैं जो दुनिया की शीर्ष कंपनियां करती हैं।
00:01:19आइए कुछ प्रोजेक्ट्स दिखाते हैं ताकि आप V0 को काम करते हुए देख सकें और जान सकें कि शुरुआत करना कितना आसान है।
00:01:24तो मैं एक मार्केटिंग टीम में हूँ, और मुझे इस सप्ताह दो बड़े प्रोजेक्ट करने हैं।
00:01:27पहला, मुझे एक नए प्रोडक्ट के लॉन्च के लिए एक इवेंट पेज बनाना है जिसे हम पेश कर रहे हैं।
00:01:31और दूसरा, मुझे हमारी वेबसाइट पर एक लैंडिंग पेज को अपडेट करना है।
00:01:34आइए पहले इवेंट पेज से शुरुआत करते हैं।
00:01:36इवेंट एक प्रोडक्ट रिलीज़ पार्टी के लिए है जहाँ हम "सन ऑफ़ अली" नामक एक नई घड़ी पेश करेंगे।
00:01:40अली।
00:01:41मैं लैंडिंग पेज को स्टाइलिश और रोमांचक बनाना चाहता हूँ ताकि उत्साह बढ़े और विज़िटर्स के लिए
00:01:45एक आकर्षक वर्चुअल ट्राई-ऑन अनुभव तैयार हो ताकि वे रजिस्ट्रेशन करें।
00:01:48इसलिए मैं V0 को बिल्कुल यही करने के लिए कहने जा रहा हूँ।
00:01:53मैंने अपना प्रॉम्प्ट लिखना पूरा कर लिया है।
00:01:54तो अब मैं अपने निर्देश सबमिट करूँगा, और V0 बनाना शुरू कर देगा।
00:01:59जब तक V0 निर्माण कर रहा है, मैं आपको दिखाना चाहता हूँ कि यह इतना शक्तिशाली क्यों है।
00:02:02यदि आप सेटिंग्स और फिर इंटीग्रेशन पर क्लिक करते हैं, तो आपको वे सभी इंटीग्रेशन दिखाई देंगे
00:02:07जो आपके लिए V0 में उपलब्ध हैं।
00:02:09पहले आप देख सकते हैं कि V0 में एआई पहले से ही इन-बिल्ट है।
00:02:12यह एआई फीचर्स बनाने के लिए AI SDK का उपयोग करेगा और आपके ऐप को सैकड़ों एआई मॉडल तक
00:02:17ऑटोमैटिक एक्सेस देने के लिए एआई गेटवे का उपयोग करेगा।
00:02:20आप अपने ऐप के बैकएंड को संचालित करने के लिए डेटाबेस भी बना या कनेक्ट कर सकते हैं और यहाँ तक कि
00:02:25Stripe के माध्यम से पेमेंट भी स्वीकार कर सकते हैं।
00:02:27इन इंटीग्रेशन के साथ, आप वास्तविक, फुल-स्टैक एआई-सक्षम ऐप्स बना सकते हैं।
00:02:32ठीक है, आइए अपने इवेंट पेज को चेक करते हैं।
00:02:34V0 ने इस पहले वर्ज़न को बनाना पूरा कर लिया है, तो आइए इसका परीक्षण करें।
00:02:38तो मैं अपनी एक इमेज अपलोड करने जा रहा हूँ, और इसे हमें वे चार
00:02:44जनरेशन देने चाहिए जो हमने वर्चुअल वॉच ट्राई-ऑन के साथ मांगे थे।
00:02:49शानदार, तो V0 ने वास्तव में मेरे निर्देशों को लिया है और कोड को अपडेट कर दिया है।
00:02:55अगर हम एडिटर को देखें, तो आप देख सकते हैं कि V0 सक्रिय रूप से Next.js कोड को अपडेट कर रहा है।
00:03:00एडिटर डेवलपर्स के लिए कोड की समीक्षा करना और उसे एडिट करना भी आसान बनाता है।
00:03:04ठीक है, V0 ने बदलाव करना पूरा कर लिया है और वे बहुत अच्छे लग रहे हैं।
00:03:09इसे पब्लिश करने से पहले, मैं फीडबैक के लिए इसे अपनी टीम के साथ शेयर करना चाहता हूँ।
00:03:12तो मैं शेयर पर क्लिक कर सकता हूँ और फिर लिंक को कॉपी करके चैट और प्रिव्यू अपनी टीम को भेज सकता हूँ।
00:03:18इस प्रिव्यू के साथ वे जो देखेंगे, वह बिल्कुल वही होगा जो पेज को सार्वजनिक करने पर यूज़र्स देखेंगे,
00:03:22इसलिए मुझे वास्तव में डिप्लॉय करते समय किसी भी बदलाव की चिंता करने की ज़रूरत नहीं है।
00:03:26एक बार जब मेरी टीम पेज की समीक्षा कर लेती है, तो मैं इसे एक कस्टम यूआरएल देने और पब्लिश करने के लिए तैयार हूँ।
00:03:31इससे भी बड़ी बात यह है कि इसने वास्तव में मेरे द्वारा बनाए गए इस V0 क्रिएशन के लिए Vercel पर एक प्रोजेक्ट बना दिया है।
00:03:36बनाया है।
00:03:37तो अगर मैं Vercel पर Inspect पर क्लिक करता हूँ, तो मैं जाकर वास्तव में उस प्रोजेक्ट को देख सकता हूँ।
00:03:42उस प्रोजेक्ट के अंदर, मैं सभी एनालिटिक्स, एरर्स और डिप्लॉयमेंट का पूरा इतिहास देख सकता हूँ।
00:03:48ठीक है बहुत बढ़िया, तो मैंने इस ऐप को प्रोडक्शन में पब्लिश कर दिया है।
00:03:51तो अब मैं वास्तव में लाइव साइट पर जा सकता हूँ और यह वही होगा जो यूज़र्स देखेंगे और मैं
00:03:56उस लिंक को शेयर कर सकता हूँ और वे इसे सार्वजनिक रूप से एक्सेस कर सकते हैं।
00:03:59V0 के साथ वास्तव में जो अच्छी बात है वो यह है कि मैं एक कस्टम डोमेन जोड़ने का विकल्प चुन सकता हूँ।
00:04:03मैं .vercel.app पर डोमेन को कस्टमाइज़ कर सकता हूँ, डोमेन खरीद सकता हूँ, या ऐसा डोमेन जोड़ सकता हूँ जो मेरे पास पहले से
00:04:09है।
00:04:10चूंकि यह एक बार होने वाले इवेंट का पेज है, इसलिए मैं बेस डोमेन को कस्टमाइज़ करूँगा और
00:04:14फिर इसे दोबारा पब्लिश करूँगा।
00:04:15बहुत बढ़िया।
00:04:16ठीक है, अब वह डोमेन अपडेट हो गया है और मैं उसी पेज को उस नए डोमेन पर एक्सेस कर सकता हूँ जिसे
00:04:21मैंने एडिट किया है और जोड़ा है।
00:04:23और बस हो गया।
00:04:24V0 ने अब मेरे ऐप को Vercel के इन्फ्रास्ट्रक्चर पर डिप्लॉय कर दिया है और यह किसी के भी एक्सेस करने के लिए सार्वजनिक है।
00:04:30अब आइए अपने अगले प्रोजेक्ट पर चलते हैं, जो हमारी मार्केटिंग साइट पर पहले से ही पब्लिश हो चुके
00:04:34एक लैंडिंग पेज को अपडेट करना है।
00:04:36हमारी डेवलपमेंट टीम साइट को मैनेज करती है और GitHub के माध्यम से कोड के वर्ज़न को कंट्रोल करती है, इसलिए मुझे
00:04:41यह अपडेट उनके वर्कफ़्लो के हिस्से के रूप में करना होगा।
00:04:44अच्छी खबर यह है कि V0 मेरे लिए बिल्कुल यही करना आसान बनाता है।
00:04:48मैं एक नई V0 विंडो खोलूँगा और GitHub से इम्पोर्ट पर क्लिक करूँगा।
00:04:52मेरे पास वास्तव में इस GitHub रेपो का यूआरएल पहले से ही है जिसे मैं एक्सेस करने की कोशिश कर रहा हूँ, इसलिए मैं
00:04:56इसे उस टॉप बार में पेस्ट करूँगा और इम्पोर्ट पर क्लिक करूँगा।
00:05:01और बस ऐसे ही, V0 रेपो को इम्पोर्ट कर लेता है।
00:05:05तो अब V0 ने रेपो इम्पोर्ट कर लिया है और मैं बदलाव करने के लिए तैयार हूँ।
00:05:08मैं इस मार्केटिंग पेज के शीर्ष पर एक बैनर जोड़ना चाहूँगा जो लोगों को
00:05:12हमारे द्वारा अभी बनाए गए इवेंट लैंडिंग पेज पर निर्देशित करे ताकि वे सन ऑफ़ अली लॉन्च
00:05:17इवेंट के लिए साइन अप कर सकें।
00:05:18तो मैं V0 को बिल्कुल यही करने के लिए कहूँगा।
00:05:21जब तक V0 बदलाव करता है, मैं आगे बढ़कर Git पर क्लिक करने जा रहा हूँ।
00:05:27आप देख सकते हैं कि V0 ने मेरे लिए ऑटोमैटिक रूप से एक ब्रांच बना दी है, जिससे मेरे
00:05:31डेवलपर्स के लिए मेरे द्वारा किए जा रहे बदलावों को मुख्य साइट में मर्ज करने से पहले उनकी समीक्षा और परीक्षण करना
00:05:35आसान हो जाएगा।
00:05:36ठीक है, V0 ने बदलाव कर दिया है, तो अब एक पुल रिक्वेस्ट बनाने का समय आ गया है जिसकी
00:05:42मेरी टीम समीक्षा कर सके।
00:05:44तो मैं आगे बढ़कर open PR पर क्लिक करूँगा और फिर open pull request पर।
00:05:49अब अगर मैं view PR पर क्लिक करता हूँ, तो मैं देख सकता हूँ कि मेरी पुल रिक्वेस्ट GitHub पर खोल दी गई है।
00:05:54और चूँकि हमारी साइट Vercel पर है, एक प्रिव्यू बिल्ड ऑटोमैटिक रूप से बन गया है।
00:05:59तो न केवल मेरे डेवलपर्स कोड की समीक्षा कर सकते हैं, बल्कि बाकी टीम भी देख सकती है कि अपडेट कैसा
00:06:03दिखता है और कमेंट्स के माध्यम से फीडबैक दे सकती है।
00:06:06और बस हो गया।
00:06:07मैंने इंजीनियरिंग के लिए कोई टिकट खोले बिना खुद ही हमारी मार्केटिंग साइट पर एक बदलाव कर दिया
00:06:11और वे अपने मौजूदा प्रोसेस के हिस्से के रूप में इस बदलाव की समीक्षा कर सकते हैं।
00:06:15हमने V0 को उन टीमों के लिए बनाया है जो डेवलपर्स के साथ काम करती हैं, चाहे वह मार्केटिंग हो, प्रोडक्ट हो, फाउंडर्स हों,
00:06:19या खुद इंजीनियर्स ही क्यों न हों।
00:06:22V0 के साथ, कोई भी अपने विचारों को वास्तविक सॉफ़्टवेयर में बदल सकता है और मौजूदा ऐप्स और
00:06:27वेबसाइटों पर सहयोग कर सकता है।
00:06:28आज ही v0.app पर जाएं और अपना पहला प्रोजेक्ट शिप करें।

Key Takeaway

V0 का उपयोग करके कोई भी बिना जटिल कोडिंग के Next.js और GitHub इंटीग्रेशन के साथ फुल-स्टैक एआई-सक्षम ऐप्स और लाइव इवेंट पेज मिनटों में बनाकर Vercel पर डिप्लॉय कर सकता है।

Highlights

  • V0 वास्तविक सॉफ़्टवेयर बनाने के लिए Vercel और Next.js कोडिंग फ्रेमवर्क का उपयोग करता है, जिसे Under Armour, Stripe और Notion जैसे ब्रांड उपयोग करते हैं।

  • यह प्लेटफॉर्म AI SDK और एआई गेटवे की मदद से सैकड़ों एआई मॉडल तक पहुंच प्रदान करता है और बैकएंड के लिए सीधे डेटाबेस या Stripe पेमेंट गेटवे से जुड़ सकता है।

  • उपयोगकर्ता .vercel.app पर डोमेन को कस्टमाइज़ कर सकते हैं, नया डोमेन खरीद सकते हैं, या अपने मौजूदा कस्टम डोमेन को जोड़कर ऐप को सार्वजनिक कर सकते हैं।

  • V0 में GitHub इंटीग्रेशन उपलब्ध है, जिसके माध्यम से किसी भी मौजूदा कोड रिपोजिटरी को सीधे इम्पोर्ट करके उसमें बदलाव किया जा सकता है।

  • कोड में बदलाव करने पर V0 स्वचालित रूप से Git पर एक नई ब्रांच बना देता है और टीम की समीक्षा के लिए GitHub पर सीधे पुल रिक्वेस्ट (PR) खोलने की सुविधा देता है।

Timeline

V0 का परिचय और इसकी बुनियादी क्षमताएं

  • V0 उपयोगकर्ताओं के विवरण और प्रॉम्प्ट के आधार पर लाइव प्रिव्यू के साथ वास्तविक समय में कोड जनरेट करता है।
  • यह केवल एक साधारण वेबसाइट बिल्डर नहीं है बल्कि फुल-स्टैक एआई-सक्षम ऐप बनाने का एक माध्यम है।

यह प्लेटफॉर्म Vercel द्वारा निर्मित Next.js फ्रेमवर्क का उपयोग करता है। दुनिया की बड़ी कंपनियां जैसे Notion और Stripe इसी सुरक्षित इंफ्रास्ट्रक्चर का इस्तेमाल करती हैं। उपयोगकर्ता प्राकृतिक भाषा में निर्देश देकर अपने ऐप्स में बदलाव और संशोधन करवा सकते हैं।

इवेंट लैंडिंग पेज का निर्माण और फुल-स्टैक इंटीग्रेशन

  • वर्चुअल ट्राई-ऑन जैसी जटिल सुविधाओं को केवल एक प्रॉम्प्ट के माध्यम से ऐप में जोड़ा जा सकता है।
  • V0 में इन-बिल्ट एआई फीचर्स, डेटाबेस कनेक्शन और Stripe पेमेंट गेटवे जोड़ने की क्षमता मौजूद है।

एक उत्पाद लॉन्च इवेंट के लिए वर्चुअल वॉच ट्राई-ऑन पेज बनाने के निर्देश देने पर V0 ने तुरंत प्रिव्यू तैयार कर दिया। इसमें इमेज अपलोड करने पर एआई-संचालित जनरेशन दिखाई देती है। डेवलपर्स के लिए कोड को सीधे एडिटर में देखने और संशोधित करने की व्यवस्था भी है।

वेबसाइट को पब्लिश करना और कस्टम डोमेन सेटअप

  • बनाए गए ऐप का प्रिव्यू लिंक कॉपी करके टीम के साथ वास्तविक समय में फीडबैक के लिए साझा किया जा सकता है।
  • यह सिस्टम प्रत्येक क्रिएशन के लिए Vercel पर स्वचालित रूप से एक प्रोजेक्ट और उसका पूरा एनालिटिक्स इतिहास तैयार करता है।

प्रोजेक्ट को पब्लिश करने के बाद लाइव यूआरएल जनरेट होता है जो सार्वजनिक रूप से सुलभ होता है। उपयोगकर्ता अपनी पसंद के अनुसार .vercel.app डोमेन को कस्टमाइज़ कर सकते हैं, नया डोमेन खरीद सकते हैं या अपने पहले से खरीदे गए कस्टम डोमेन को जोड़ सकते हैं।

GitHub इंटीग्रेशन और सहयोगी वर्कफ़्लो का उपयोग

  • GitHub रिपोजिटरी के यूआरएल को सीधे V0 में पेस्ट करके किसी भी मौजूदा वेबसाइट कोड को इम्पोर्ट किया जा सकता है।
  • V0 बिना मुख्य कोडबेस को प्रभावित किए स्वचालित रूप से एक नई Git ब्रांच और पुल रिक्वेस्ट (PR) बना देता है।

मार्केटिंग पेज पर एक नया बैनर जोड़ने के लिए GitHub से प्रोजेक्ट इम्पोर्ट किया गया। बदलाव के बाद प्रिव्यू बिल्ड अपने आप तैयार हो गया जिससे टीम के सदस्य GitHub पर कोड की समीक्षा कर सकते हैं और कमेंट्स के जरिए फीडबैक दे सकते हैं। इससे गैर-तकनीकी टीमें भी डेवलपर्स के मौजूदा वर्कफ़्लो में सीधे योगदान दे सकती हैं।

Community Posts

No posts yet. Be the first to write about this video!

Write about this video