एआई की मदद से अपनी पोर्टफ़ोलियो वेबसाइट लॉन्च करना

1. परिचय

खास जानकारी

आज एआई की मदद से डेवलपमेंट कहां से शुरू होता है? हम में से ज़्यादातर लोगों के लिए, इसकी शुरुआत किसी क्वेरी या प्रोटोटाइप से होती है. Google AI Studio में एक बेहतरीन बिल्ड मोड उपलब्ध है. इसे अक्सर "वाइब कोडिंग" कहा जाता है. इसकी मदद से, Gemini मॉडल की मदद से कोड जनरेट करके, वेब ऐप्लिकेशन डिज़ाइन, टेस्ट, और बनाए जा सकते हैं.

इस कोडलैब में, आपको एक पर्सनल पोर्टफ़ोलियो वेबसाइट बनानी होगी. AI Studio एजेंट, फ़्रंटएंड कोड लिखेगा. ऐप्लिकेशन को बेहतर बनाने के बाद, उसे एक क्लिक में सीधे Cloud Run पर डिप्लॉय किया जा सकता है.

पोर्टफ़ोलियो वेबसाइट का फ़ाइनल वर्शन

आपको क्या करना होगा

  • Google AI Studio को, निजी पोर्टफ़ोलियो वेबसाइट का प्रोटोटाइप बनाने के लिए प्रॉम्प्ट दें.
  • इंटरैक्टिव झलक दिखाने वाले सैंडबॉक्स में ऐप्लिकेशन की जांच करें.
  • ऐप्लिकेशन को Google AI Studio के यूज़र इंटरफ़ेस (यूआई) से सीधे Cloud Run पर डिप्लॉय करें.

आपको क्या सीखने को मिलेगा

  • नैचुरल लैंग्वेज का इस्तेमाल करके, फ़्रंटएंड सेवा का प्रोटोटाइप तेज़ी से बनाने के लिए, Google AI Studio के बिल्ड मोड का इस्तेमाल कैसे करें.
  • AI Studio ऐप्लिकेशन को Cloud Run पर सर्वरलेस कंटेनर के तौर पर डिप्लॉय करने का तरीका.

2. प्रोजेक्ट सेटअप करना

AI Studio लॉन्च करने से पहले, अपने खाते का स्टेटस और ज़रूरी शर्तें देखें.

Google खाता और टियर की जानकारी

  1. अगर आपके पास पहले से कोई Google खाता नहीं है, तो Google खाता बनाएं.
    • अहम जानकारी: अगर हो सके, तो इस लैब के लिए निजी Google खाते का इस्तेमाल करें. ग्रुप, कॉर्पोरेट या स्कूल खातों के लिए, Workspace की ऐसी नीतियां लागू की जा सकती हैं जिनसे एक्सपेरिमेंट की सुविधाएं या क्लाउड इंटिग्रेशन बंद हो जाते हैं.
  2. डप्लॉयमेंट के लिए बिलिंग की जानकारी देखें:
    • Google Cloud का स्टार्टर टियर: इसमें, बिना किसी शुल्क के किसी चुनिंदा इलाके में दो फ़ुल-स्टैक ऐप्लिकेशन पब्लिश किए जा सकते हैं. इसके लिए, Google Cloud का पूरा बिलिंग खाता सेट अप करने की ज़रूरत नहीं होती.
    • स्टैंडर्ड डिप्लॉयमेंट: यह Google Cloud के किसी मौजूदा क्लाउड प्रोजेक्ट से कनेक्ट होता है. साथ ही, स्टोरेज की सीमाएं, सीपीयू संसाधन, और एपीआई बढ़ाता है.

3. AI Studio के बिल्ड मोड में पोर्टफ़ोलियो वेबसाइट बनाना

ऐप्लिकेशन शेल बनाएं और एआई कोड असिस्टेंट को फ़्रंटएंड लेआउट बनाने के लिए प्रॉम्प्ट करें.

  1. Google AI Studio के ऐप्लिकेशन पैनल पर जाएं और नया ऐप्लिकेशन पर क्लिक करें.
  2. चैट प्रॉम्प्ट बॉक्स में, अपने पोर्टफ़ोलियो ऐप्लिकेशन के बारे में जानकारी डालें: 
    Build a professional personal portfolio website. The site should
have a modern, responsive design and sections for my biography,
projects showcase, skills, and links to my professional profiles
(e.g., GitHub, LinkedIn).
    इस लिंक पर क्लिक करने से, प्रॉम्प्ट बॉक्स में जानकारी अपने-आप भर जाएगी.
  3. ऐप्लिकेशन जनरेट करने की प्रोसेस शुरू करने के लिए, बनाएं पर क्लिक करें.

4. जांच करना और बार-बार एक्सपेरिमेंट करना

सेवा को लाइव लॉन्च करने से पहले, इंटरैक्टिव झलक में पुष्टि करने वाली जांचें चलाएं.

  1. Google AI Studio में, झलक वाला पैनल खोलें.
  2. विज़ुअल अनुभव की पुष्टि करने के लिए, झलक दिखाने वाले सैंडबॉक्स में मौजूद किसी भी नेविगेशन बटन, लिंक या लेआउट के साथ इंटरैक्ट करें.
    • गड़बड़ियां ठीक करने के बारे में जानकारी: जनरेशन या टेस्टिंग के दौरान, आपको कभी-कभी रनटाइम की समस्याएं या कंपाइलेशन से जुड़ी गड़बड़ियां मिल सकती हैं. ऐसा होने पर, AI Studio चैट में ठीक करें बटन दिखाता है. इससे, एजेंट से समस्या का अपने-आप पता लगाने और उसे ठीक करने के लिए कहा जा सकता है.
    Google AI Studio में 'ठीक करें' बटन की जगह
  3. अगर आपको स्टाइल या व्यवहार में बदलाव करना है, तो चैट विंडो के ज़रिए एजेंट को निर्देश दें. उदाहरण के लिए:
    • "Could you style the interface using Tailwind CSS, and add a dark mode toggle button?"
    • "Include a new section to showcase my recent presentations and talks."
  4. एजेंट के कोडबेस को अपडेट करने का इंतज़ार करें. इसके बाद, अपडेट देखने के लिए झलक वाले ब्राउज़र को देखें.

5. Cloud Run पर डिप्लॉय करना

जब आपका प्रोटोटाइप पूरी तरह से काम करने लगे, तब उसे Cloud Run पर सार्वजनिक सेवा के तौर पर डिप्लॉय करें.

  1. Google AI Studio के सबसे ऊपर दाएं कोने में मौजूद, पब्लिश करें बटन पर क्लिक करके, डिप्लॉयमेंट विज़र्ड शुरू करें.Google AI Studio में पब्लिश करने वाले बटन की जगह
  2. अपने Google Cloud प्रोजेक्ट को कॉन्फ़िगर करने के लिए, शुरू करें पर क्लिक करें.
    • पुष्टि करें कि टारगेट Google Cloud प्रोजेक्ट ड्रॉप-डाउन, उस प्रोजेक्ट से मेल खाता हो जिसे आपने अपने वर्कस्पेस से जोड़ा है.
    • AI Studio, Cloud Run इंस्टेंस के लिए यूनीक सेवा आइडेंटिफ़ायर अपने-आप जनरेट करेगा.
    • आपके पास डिप्लॉयमेंट कॉन्फ़िगरेशन के हिस्से के तौर पर, कस्टम .ai.studio यूआरएल प्रीफ़िक्स (जैसे, your-portfolio-name.ai.studio) तय करने का विकल्प होता है.
  3. अगर आपने पहली बार डिप्लॉय किया है और Google Cloud के स्टैंडर्ड पैरामीटर का इस्तेमाल किया जा रहा है, तो आपसे संगठन का टाइप बताने और बिलिंग की जानकारी देने के लिए कहा जा सकता है.
  4. ऐप्लिकेशन पब्लिश करें पर क्लिक करें.
  5. कंटेनर बनाने, कंटेनर रजिस्टर करने, और सेवा डिप्लॉय करने के चरण बैकग्राउंड में पूरे होते हैं. आम तौर पर, यह प्रोसेस दो से चार मिनट में पूरी हो जाती है.
  6. डिप्लॉयमेंट पूरा होने के बाद, जनरेट किया गया ऐप्लिकेशन का यूआरएल कॉपी करें. इसके बाद, ब्राउज़र टैब में लाइव ऐप्लिकेशन के लिंक पर जाएं.
  7. अपने ब्राउज़र में लाइव वेब ऐप्लिकेशन को टेस्ट करें!

6. (ज़रूरी नहीं) कस्टम डोमेन जोड़ना

डिफ़ॉल्ट रूप से, Cloud Run आपकी सेवा को Google के मैनेज किए गए run.app सबडोमेन पर होस्ट करता है. अगर आपको कोई निजी डोमेन (जैसे, yourname.com या portfolio.yourname.com) इस्तेमाल करना है, तो अपनी सेवा के लिए कस्टम डोमेन मैप किया जा सकता है.

पहला चरण: Cloud Run में डोमेन मैपिंग जोड़ना

  1. Google Cloud Console में, Cloud Run के डोमेन मैपिंग पेज पर जाएं.
  2. मैपिंग जोड़ें पर क्लिक करें.
  3. ड्रॉप-डाउन से, वह Cloud Run सेवा चुनें जिसे आपको मैप करना है.
  4. अपना कस्टम डोमेन नेम डालें. उदाहरण के लिए, yourname.com या portfolio.yourname.com.
  5. आगे बढ़ें या जारी रखें पर क्लिक करें. Cloud Run, डीएनएस रिकॉर्ड (जैसे कि A/AAAA या CNAME रिकॉर्ड) दिखाएगा. आपको ये रिकॉर्ड, अपने डोमेन रजिस्ट्रार के साथ बनाने होंगे.

दूसरा चरण: डीएनएस रजिस्ट्रार को कॉन्फ़िगर करना

  1. अपने डोमेन रजिस्ट्रार के एडमिन पैनल में साइन इन करें. उदाहरण के लिए, Squarespace, GoDaddy या Namecheap.
  2. अपने डोमेन के लिए, डीएनएस मैनेजमेंट या डीएनएस सेटिंग कॉन्फ़िगरेशन पेज खोलें.
  3. Cloud Run मैपिंग विज़र्ड में दिखाई गई वैल्यू से मेल खाने वाले डीएनएस रिकॉर्ड बनाएं:
    • एपेक्स डोमेन मैपिंग (जैसे, yourname.com) के लिए, सूची में दिए गए A और AAAA रिकॉर्ड जोड़ें.
    • सबडोमेन मैपिंग (जैसे, portfolio.yourname.com) के लिए, सूची में दिया गया CNAME रिकॉर्ड जोड़ें.
  4. डीएनएस कॉन्फ़िगरेशन में किए गए बदलावों को सेव करें.

तीसरा चरण: एसएसएल सर्टिफ़िकेट के उपलब्ध होने का इंतज़ार करना

डीएनएस में किए गए बदलाव लागू होने के बाद:

  1. Google Cloud, आपके सुरक्षित कनेक्शन के लिए मैनेज किया गया एसएसएल/TLS सर्टिफ़िकेट अपने-आप उपलब्ध कराएगा.
  2. आम तौर पर, यह प्रोसेस 15 मिनट में पूरी हो जाती है. हालांकि, डीएनएस प्रोपगेशन के आधार पर इसमें 24 घंटे भी लग सकते हैं.
  3. यह प्रोसेस पूरी होने के बाद, आपका कस्टम डोमेन आपकी पोर्टफ़ोलियो वेबसाइट पर सुरक्षित तरीके से रीडायरेक्ट हो जाएगा.

7. स्टोरेज में जगह बनाएं

बिलिंग से जुड़े किसी भी अनचाहे शुल्क से बचने या अपने वर्कस्पेस के संसाधनों को हटाने के लिए:

  1. Google AI Studio में, ऐप्लिकेशन पेज पर जाएं.
  2. ग्रिड या सूची में अपना आवेदन ढूंढें.
  3. ऐप्लिकेशन की स्थिति मिटाने और Cloud Run से सेवा को अनपब्लिश करने के लिए, ट्रैश आइकॉन पर क्लिक करें.
  4. अगर आपने स्टैंडर्ड प्रोजेक्ट का इस्तेमाल करके डिप्लॉय किया है और आपको सभी संसाधनों को पूरी तरह से बंद करना है, तो Google Cloud Console की प्रोजेक्ट सेटिंग पर जाएं और प्रोजेक्ट मिटाएं.

8. नतीजा

बधाई हो! आपने Google AI Studio से सीधे तौर पर, पोर्टफ़ोलियो वेबसाइट को डिज़ाइन, डेवलप, और डिप्लॉय किया हो.

ज़्यादा जानें

बिल्डर जर्नी पूरी की बैज पर दावा करने के लिए, इस लिंक पर जाएं!

अपनी यात्रा जारी रखने के लिए, अगले लैब के लिए goo.gle/builders पर जाएं.