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

1. परिचय

खास जानकारी

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

इस कोडलैब में, पोर्टफ़ोलियो की निजी वेबसाइट बनाई जाएगी. एआई 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 Starter Tier: इसकी मदद से, चुने गए किसी इलाके में दो फ़ुल-स्टैक ऐप्लिकेशन बिना किसी शुल्क के पब्लिश किए जा सकते हैं. इसके लिए, 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 चैट में ठीक करें बटन दिखाता है. इसकी मदद से, एजेंट से समस्या की अपने-आप पहचान करने और उसे ठीक करने के लिए कहा जा सकता है.
   
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 में सबसे ऊपर दाएं कोने में मौजूद पब्लिश करें बटन पर क्लिक करें.
2. Google Cloud प्रोजेक्ट को कॉन्फ़िगर करने के लिए, शुरू करें पर क्लिक करें.
   • इस बात की पुष्टि करें कि टारगेट Google Cloud प्रोजेक्ट ड्रॉप-डाउन, उस प्रोजेक्ट से मेल खाता हो जिसे आपने अपने Workspace से जोड़ा है.
   • AI Studio, Cloud Run इंस्टेंस के लिए, सेवा का यूनीक आइडेंटिफ़ायर अपने-आप जनरेट करेगा.
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. प्रोसेस पूरी होने के बाद, आपका कस्टम डोमेन सुरक्षित तरीके से पोर्टफ़ोलियो की वेबसाइट पर रूट हो जाएगा.

ध्यान दें: Cloud Run के डोमेन मैपिंग की सुविधा, फ़िलहाल झलक के तौर पर उपलब्ध है. यह सुविधा सिर्फ़ कुछ इलाकों में उपलब्ध है. अगर आपकी Cloud Run सेवा, ऐसे इलाके में है जहां डोमेन मैपिंग की सुविधा उपलब्ध नहीं है, तो ग्लोबल एक्सटर्नल ऐप्लिकेशन लोड बैलेंसर या Firebase होस्टिंग का इस्तेमाल करके, अपने डोमेन को मैप किया जा सकता है.

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

बिलिंग के अनचाहे शुल्क से बचने या Workspace के संसाधनों को मिटाने के लिए:

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

8. नतीजा

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

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

इस लिंक पर जाएं और बिल्डर जर्नी पूरी की बैज पाएं!

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

• Cloud Run के दस्तावेज़
• Google AI Studio में ऐप्लिकेशन बनाना