Firebase Studio का इस्तेमाल शुरू करना

1. खास जानकारी

इस कोडलैब में, Firebase Studio में App Prototyping एजेंट का इस्तेमाल करने का तरीका बताया गया है. इसकी मदद से, एक ऐसा ऐप्लिकेशन बनाया जा सकता है जो आपको नई भाषा सीखने में मदद करे. इसके बाद, ऐप्लिकेशन को बेहतर बनाया जा सकता है. साथ ही, इसे Firebase ऐप्लिकेशन होस्टिंग पर पब्लिश किया जा सकता है.

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

• Firebase Studio में प्रॉम्प्ट लिखने के सबसे सही तरीके
• ऐप्लिकेशन में नई सुविधाएं जोड़ने और गड़बड़ियां ठीक करने के लिए, उसे बार-बार दोहराना
• ऐप्लिकेशन को Firebase App Hosting पर पब्लिश करना और उसे दूसरों के साथ शेयर करना
• ऐप्लिकेशन होस्टिंग की खास जानकारी देने वाले पैनल की मदद से, अहम मेट्रिक ट्रैक करना

आपको इनकी ज़रूरत होगी

• अपनी पसंद का ब्राउज़र, जैसे कि Google Chrome
• Firebase प्रोजेक्ट बनाने और उसे मैनेज करने के लिए Google खाता

2. App Prototyping एजेंट का इस्तेमाल करके अपना ऐप्लिकेशन जनरेट करना

ऐप्लिकेशन का प्रोटोटाइप बनाने वाला एजेंट, आपके ऐप्लिकेशन को बनाने के लिए Firebase में Gemini का इस्तेमाल करता है. एक जैसे प्रॉम्प्ट का इस्तेमाल करने पर भी, हो सकता है कि आपको मिला नतीजा इस कोडलैब में दिखाए गए नतीजे से अलग हो. अगर आपको कोई समस्या आती है, तो हमने फ़ाइलों का एक सेट उपलब्ध कराया है. इन्हें अपने वर्कस्पेस में जोड़ा जा सकता है, ताकि इस कोडलैब के दौरान कई चेकपॉइंट पर लैब को फिर से शुरू किया जा सके.

1. अपने Google खाते में लॉग इन करें और Firebase Studio खोलें.
2. एआई की मदद से ऐप्लिकेशन का प्रोटोटाइप बनाएं फ़ील्ड में, उस ऐप्लिकेशन के बारे में जानकारी डालें जिसे आपको बनाना है. इस कोडलैब में, आपको एक ऐसा ऐप्लिकेशन बनाना है जो आपको कहानियों, फ़्लैशकार्ड, और एआई ट्यूटर की मदद से नई भाषा सीखने में मदद करे. कोई प्रॉम्प्ट डालें. जैसे:

   An app to help someone learn a new language. The app should include
   AI-generated stories in the target language, where users can click vocab
   words or the entire story to see it in English. A different section
   includes flashcards, where the user is shown a word in the chosen language
   and can click it to flip the card and see the word in English. The final
   section includes an AI chatbot that allows the user to have simple
   conversations in the chosen language or ask questions in English about
   what a word means or how to form a sentence in the chosen language. All
   content should be beginner-friendly, focusing on basic greetings, common
   questions/answers, and vocabulary relevant to the lessons or stories.
   To start, the app should teach the user French, although we might add
   additional languages in the future.
   

3. एआई की मदद से प्रोटोटाइप बनाएं पर क्लिक करें.
4. सुझाए गए ऐप्लिकेशन ब्लूप्रिंट की समीक्षा करें. ब्लूप्रिंट में बदलाव करने के लिए, पसंद के मुताबिक बनाएं पर क्लिक करें:
   1. ऐप्लिकेशन का नाम बदलकर Speak Easy कर दो.
   2. कलर स्कीम को बदलकर यह करें:

   Primary color: Asparagus green (#98BF64) for a calm and friendly feel.
   Secondary color: Light parchment (#F5EBCD) to complement the primary color.
   Accent: Marigold (#FFB833) for interactive elements and call-to-action buttons.
   

   अगर आपको अपनी कलर स्कीम या लेआउट को इमेज के तौर पर सबमिट करना है, तो प्रॉम्प्ट या ब्लूप्रिंट प्रोसेस के दौरान इमेज अपलोड करने के लिए, अटैचमेंट विकल्प पर क्लिक करें. इमेज का साइज़ 3 एमबी से कम होना चाहिए.
5. सेव करें पर क्लिक करें.
6. जब ब्लूप्रिंट में आपके अपडेट शामिल हो जाएं, तब इस ऐप्लिकेशन का प्रोटोटाइप बनाएं पर क्लिक करें.
7. इस ऐप्लिकेशन में एआई एलिमेंट शामिल हैं. इसलिए, एजेंट आपसे Gemini की कुंजी के लिए प्रॉम्प्ट करता है. अपना Gemini API पासकोड जोड़ें या Gemini API पासकोड जनरेट करने के लिए, अपने-आप जनरेट होने वाला पासकोड पर क्लिक करें. अपने-आप जनरेट होने वाला पर क्लिक करने से, Firebase Studio एक Firebase प्रोजेक्ट बनाता है और आपके लिए Gemini API पासकोड जनरेट करता है.
8. ऐप्लिकेशन का प्रोटोटाइप बनाने वाला एजेंट, ऐप्लिकेशन के ब्लूप्रिंट का इस्तेमाल करके आपके ऐप्लिकेशन का पहला वर्शन बनाता है. इसके बाद, आपके ऐप्लिकेशन की झलक, Gemini के चैट इंटरफ़ेस के साथ दिखती है. कुछ समय निकालकर अपने ऐप्लिकेशन को टेस्ट करें. भले ही, यह आपकी सोच के मुताबिक न हो, लेकिन अगले सेक्शन में बताया गया है कि नई सुविधाएं कैसे जोड़ी जाएं और डिज़ाइन को कैसे बेहतर बनाया जाए.

3. (ज़रूरी नहीं) कोड पाएं

अगर आपको कोई समस्या आ रही है या आपको उदाहरण ऐप्लिकेशन के साथ-साथ ज़्यादा जानकारी चाहिए, तो कोडलैब में कई चेकपॉइंट पर दी गई सैंपल फ़ाइलों का इस्तेमाल करें.

1. फ़ोल्डर में मौजूद फ़ाइलें डाउनलोड करें.
2. कोड व्यू खोलने के लिए, Firebase Studio में कोड पर स्विच करें पर क्लिक करें.
3. डाउनलोड की गई फ़ाइलों को खींचकर, Firebase Studio के Explorer पैनल में छोड़ें. फ़ाइलों को किसी भी मौजूदा फ़ाइल को बदलने की अनुमति दें.
4. ऐप्लिकेशन के उदाहरण वर्शन का इस्तेमाल करके कोडलैब जारी रखने के लिए, Prototyper पर स्विच करें पर क्लिक करें.

4. अपने ऐप्लिकेशन के फ़ंक्शन की जांच करना, उसे दोहराना, और डीबग करना

ऐप्लिकेशन की झलक देखते समय, आपको गड़बड़ियां या अनचाही सुविधाएं दिख सकती हैं. ऐप्लिकेशन के उदाहरण वर्शन में, हम ये बदलाव और सुधार करेंगे:

• एआई की मदद से कहानी जनरेट करने की सुविधा में, उपयोगकर्ताओं को शब्दावली के शब्दों पर क्लिक करने का विकल्प मिलना चाहिए, ताकि वे अंग्रेज़ी में उनकी परिभाषा देख सकें.
• फ़्लैशकार्ड फ़्रेंच में दिखने चाहिए. इसके बाद, क्लिक करने पर अंग्रेज़ी में दिखने चाहिए.
• उपयोगकर्ता के पास सेटिंग पेज पर जाकर, फ़्रेंच के बजाय जैपनीज़ सीखने का विकल्प होना चाहिए.

पहला लक्ष्य: एआई स्टोरी जनरेटर में शब्दावली के शब्द जोड़ना

ज़रूरी नहीं: इस पॉइंट से ऐप्लिकेशन के उदाहरण वर्शन का इस्तेमाल करने के लिए, इन फ़ाइलों को डाउनलोड करें और कोड व्यू में Firebase Studio के एक्सप्लोरर पैन में खींचें.

1. चैट इंटरफ़ेस में, उस सुविधा के बारे में बताएं जिसे आपको जोड़ना है:

   In the AI Story Generator, users should be able to click vocab words or
   phrases to get the definition in English. Words or phrases should be
   underlined to indicate they can be clicked.
   

2. झलक विंडो में ऐप्लिकेशन को टेस्ट करें. ऐप्लिकेशन के लुक और फ़ील को बाद में अपडेट किया जाएगा. इसलिए, फ़िलहाल सिर्फ़ इसकी सुविधाओं पर ध्यान दें.
3. अगर आपका ऐप्लिकेशन आपकी उम्मीद के मुताबिक काम नहीं करता है, तो App Prototyping एजेंट को बदलाव करने के लिए प्रॉम्प्ट करते रहें. उदाहरण के लिए:

   IMPORTANT: Be sure to underline and provide a definition for most words
   and phrases, and ESPECIALLY all nouns and verbs. If a word or phrase in the
   story appears multiple times, only underline and define the first instance.
   

4. कोड व्यू खोलने के लिए, कोड पर स्विच करें पर क्लिक करें. यहां आपको अपने ऐप्लिकेशन की सभी फ़ाइलें दिखेंगी. साथ ही, कोड में सीधे बदलाव करने का विकल्प मिलेगा. अगर Gemini किसी बग को ठीक नहीं कर पा रहा है, तो कभी-कभी फ़ाइल में मैन्युअल तरीके से बदलाव करना आसान होता है. जब आप तैयार हों, तब App Prototyping एजेंट का इस्तेमाल जारी रखने के लिए, Prototyper मोड पर स्विच करें.

दूसरा लक्ष्य: फ़्लैश कार्ड में अनुवाद जोड़ना

ज़रूरी नहीं: इस पॉइंट से ऐप्लिकेशन के उदाहरण वर्शन का इस्तेमाल करने के लिए, इन फ़ाइलों को डाउनलोड करें और कोड व्यू में Firebase Studio के एक्सप्लोरर पैन में खींचें.

ऊपर दी गई प्रोसेस को ही फ़ॉलो करें. इसके लिए, चैट इंटरफ़ेस का इस्तेमाल करके सुविधा के बारे में बताएं. इसके बाद, झलक वाली विंडो में इसे आज़माएं. इसके बाद, फ़्लैश कार्ड में अनुवाद जोड़ने के लिए, अतिरिक्त प्रॉम्प्ट या कोड व्यू का इस्तेमाल करें. इस तरह का प्रॉम्प्ट आज़माएं:

 The flash cards should appear in the target language to start, then switch to
 English when clicked.

कभी-कभी, ऐप्लिकेशन प्रोटोटाइपिंग एजेंट को यह पता नहीं चलता कि कोई गड़बड़ी है. आपको क्या दिख रहा है और क्या ठीक करने की ज़रूरत है, इसके बारे में बताने से ज़्यादा मदद मिल सकती है. जैसे:

 The flip button for the flash cards isn't working. Can you debug it? All flash
 cards are only showing in English.

तीसरा लक्ष्य: नई भाषा जोड़ना

ज़रूरी नहीं: इस पॉइंट से ऐप्लिकेशन के उदाहरण वर्शन का इस्तेमाल करने के लिए, इन फ़ाइलों को डाउनलोड करें और कोड व्यू में Firebase Studio के एक्सप्लोरर पैन में खींचें.

इस तरह का प्रॉम्प्ट आज़माएं:

 Add a settings section to the app, where users can swap to a new language
 to learn. Add Japanese to the list of languages the user can pick from. If
 the user selects Japanese, the AI-generated stories, flash cards, and chatbot
 tutor should all use Japanese instead of French.

5. अपने ऐप्लिकेशन के डिज़ाइन को बेहतर बनाना

ज़रूरी नहीं: इस पॉइंट से ऐप्लिकेशन के उदाहरण वर्शन का इस्तेमाल करने के लिए, इन फ़ाइलों को डाउनलोड करें और कोड व्यू में Firebase Studio के एक्सप्लोरर पैन में खींचें.

अब आपके ऐप्लिकेशन में वे सभी सुविधाएं मौजूद हैं जो आपको चाहिए थीं. अब स्टाइल पर काम करने का समय है.

ऐप्लिकेशन की कलर स्कीम बदलना

आपके पास यह तय करने का विकल्प होता है कि आपको किन रंगों का इस्तेमाल करना है. इसके अलावा, App Prototyping एजेंट को भी यह काम सौंपा जा सकता है. चैट इंटरफ़ेस में, अटैचमेंट विकल्प पर क्लिक करके भी, उन रंगों या स्टाइल की इमेज अपलोड की जा सकती है जिनका आपको इस्तेमाल करना है. अगर आपको प्रॉम्प्ट का इस्तेमाल करना है, तो यह आज़माएं:

 Add color to the design of the app. Use modern, clean colors that adhere
 to accessibility standards and have a calming feel.

ऐप्लिकेशन में इस्तेमाल किए गए टेक्स्ट को अपडेट करना

उदाहरण के लिए, "एआई चैटबॉट ट्यूटर" के बजाय, हो सकता है कि आप सिर्फ़ "चैट" कहना चाहें:

 Change the text "AI Chatbot Tutor" to "Chat".

ऐप्लिकेशन के यूज़र इंटरफ़ेस (यूआई) में बदलाव करके, उसे ज़्यादा आसान बनाना

उदाहरण के लिए, टेक्स्ट सबमिट करने के लिए उपयोगकर्ता को बटन दबाने के बजाय, हो सकता है कि आपको उसे अपने कीबोर्ड पर Return दबाने की अनुमति देनी हो:

 In the story generator section, allow the user to press the return key on
 the keyboard to submit the text.

उपयोगकर्ता को हल्के और गहरे रंग वाले मोड में से किसी एक को चुनने का विकल्प जोड़ें

कई उपयोगकर्ता, ऐप्लिकेशन के लिए हल्के या गहरे रंग वाली थीम में से किसी एक को चुनने का विकल्प पसंद कर सकते हैं. सोचें कि इस स्विच को ढूंढने के लिए, सही जगह कौनसी होगी:

 Add an icon in the upper right corner to dynamically switch the color theme of
 the app between dark mode and light mode.

प्रॉम्प्ट लिखने और डीबग करने से जुड़ी सलाह

• प्रॉम्प्ट लिखने में मदद पाना: अगर आपको App Prototyping एजेंट को यह बताने में समस्या आ रही है कि आपको क्या चाहिए, तो Gemini for Google से प्रॉम्प्ट को बेहतर बनाने के लिए मदद मांगें. बेहतर प्रॉम्प्ट लिखने के बारे में ज़्यादा जानें.
• अन्य डिवाइसों पर टेस्ट करें: प्रोटोटाइप मोड में, झलक का लिंक शेयर करें पर क्लिक करके, अपने ऐप्लिकेशन को अन्य डिवाइसों पर टेस्ट करें.
• पहले से मौजूद टूल इस्तेमाल करें: कोड व्यू में, Firebase Studio की पहले से मौजूद डीबग करने और रिपोर्टिंग की सुविधाओं का इस्तेमाल करके, अपने ऐप्लिकेशन की जांच करें, उसे डीबग करें, और उसका ऑडिट करें.
• आसान तरीके से शुरू करें: एक बार में सिर्फ़ एक सुविधा का इस्तेमाल करें. अपने प्रोटोटाइप में सुविधाओं का एक बुनियादी सेट शामिल करें. इसके बाद, जब ये सुविधाएं उम्मीद के मुताबिक काम करने लगें, तब इन्हें बढ़ाएं.
• गड़बड़ियों के बारे में जानकारी दें: अगर कोई सुविधा काम नहीं कर रही है, तो App Prototyping एजेंट को बताएं कि वह सुविधा अभी कैसे काम कर रही है. इसके बाद, बताएं कि आपको वह सुविधा कैसे चाहिए.
• ज़रूरत पड़ने पर, पिछले वर्शन पर वापस जाएं: अगर App Prototyping एजेंट किसी प्रॉम्प्ट को ठीक से नहीं समझ पाता है या कोई ऐसी समस्या पैदा करता है जिसे हल करना मुश्किल है, तो पिछला वर्शन वापस लाएं बटन पर क्लिक करके, ऐप्लिकेशन के पिछले वर्शन पर वापस जाएं. इसके बाद, किसी दूसरे प्रॉम्प्ट का इस्तेमाल करके फिर से कोशिश करें.

6. (वैकल्पिक) ऐप्लिकेशन को पब्लिश करना

ज़रूरी नहीं: इस पॉइंट से ऐप्लिकेशन के उदाहरण वर्शन का इस्तेमाल करने के लिए, इन फ़ाइलों को डाउनलोड करें और कोड व्यू में Firebase Studio के एक्सप्लोरर पैन में खींचें.

ऐप्लिकेशन की जांच करने और उससे संतुष्ट होने के बाद, Firebase ऐप्लिकेशन होस्टिंग की मदद से इसे वेब पर पब्लिश किया जा सकता है.

1. नया Firebase प्रोजेक्ट बनाने और ऐप्लिकेशन होस्टिंग का सेटअप शुरू करने के लिए, पब्लिश करें पर क्लिक करें. ऐप्लिकेशन को पब्लिश करें पैनल दिखता है.
2. Firebase प्रोजेक्ट चरण में, आपके लिए बनाए गए Firebase प्रोजेक्ट का नाम नोट करें. इसके बाद, आगे बढ़ें पर क्लिक करें.
3. Cloud Billing खाता लिंक करें चरण में, इनमें से कोई एक विकल्प चुनें:
   1. वह Cloud Billing खाता चुनें जिसे आपको अपने Firebase प्रोजेक्ट से लिंक करना है.
   2. अगर आपके पास Cloud Billing खाता नहीं है या आपको नया खाता बनाना है, तो Cloud Billing खाता बनाएं पर क्लिक करें. इससे Google Cloud का टेक्स्ट खुलता है. यहां खुद से मैनेज किया जाने वाला नया Cloud Billing खाता बनाया जा सकता है. खाता बनाने के बाद, Firebase Studio पर वापस जाएं और 'Cloud Billing से लिंक करें' सूची से खाता चुनें.
4. आगे बढ़ें पर क्लिक करें. Firebase Studio, बिलिंग खाते को आपके Workspace से जुड़े प्रोजेक्ट से लिंक करता है. यह प्रोजेक्ट तब बनाया जाता है, जब आपने Gemini API कुंजी अपने-आप जनरेट की हो या जब आपने पब्लिश करें पर क्लिक किया हो. इसके बाद, ऐप्लिकेशन होस्टिंग, Google Cloud में आपके ऐप्लिकेशन के लिए पूरी तरह से मैनेज किया गया एनवायरमेंट सेट अप करती है.
5. पहला रोलआउट बनाएं पर क्लिक करें. Firebase Studio, App Hosting को रोल आउट करता है. इसमें 10 मिनट लग सकते हैं. बैकग्राउंड में होने वाली प्रोसेस के बारे में ज़्यादा जानने के लिए, ऐप्लिकेशन होस्ट करने की सुविधा के लिए, बिल्ड करने की प्रोसेस लेख पढ़ें.
6. रोलआउट पूरा होने के बाद, ऐप्लिकेशन की खास जानकारी, यूआरएल और ऐप्लिकेशन की अहम जानकारी के साथ दिखती है. यह जानकारी, ऐप्लिकेशन होस्टिंग की निगरानी की सुविधा से मिलती है. Firebase से जनरेट किए गए डोमेन के बजाय, कस्टम डोमेन (जैसे, example.com या app.example.com) का इस्तेमाल करने के लिए, Firebase टेक्स्ट में कस्टम डोमेन जोड़ा जा सकता है.

ऐप्लिकेशन होस्टिंग के बारे में ज़्यादा जानकारी के लिए, ऐप्लिकेशन होस्टिंग और इसके काम करने के तरीके के बारे में जानकारी लेख पढ़ें.

7. (ज़रूरी नहीं) अपने ऐप्लिकेशन पर नज़र रखना

App Hosting के ऐप्लिकेशन की खास जानकारी पैनल में, आपके ऐप्लिकेशन के बारे में अहम मेट्रिक और जानकारी मिलती है. इससे, App Hosting के बिल्ट-इन मॉनिटरिंग टूल का इस्तेमाल करके, अपने वेब ऐप्लिकेशन की परफ़ॉर्मेंस को मॉनिटर किया जा सकता है. साइट के रोल आउट होने के बाद, पब्लिश करें पर क्लिक करके, खास जानकारी को ऐक्सेस किया जा सकता है. इस पैनल से, ये काम किए जा सकते हैं:

• अपने ऐप्लिकेशन का नया वर्शन रिलीज़ करने के लिए, लॉन्च करें पर क्लिक करें.
• अपने ऐप्लिकेशन का लिंक शेयर करें या अपने ऐप्लिकेशन पर जाएं में जाकर, सीधे अपना ऐप्लिकेशन खोलें.
• पिछले सात दिनों में आपके ऐप्लिकेशन की परफ़ॉर्मेंस की खास जानकारी देखें. इसमें अनुरोधों की कुल संख्या और रोलआउट की मौजूदा स्थिति शामिल है. Firebase टेक्स्ट में ज़्यादा जानकारी ऐक्सेस करने के लिए, ब्यौरा देखें पर क्लिक करें.
• पिछले 24 घंटों में आपके ऐप्लिकेशन को मिले अनुरोधों की संख्या का ग्राफ़ देखें. इसे एचटीटीपी स्टेटस कोड के हिसाब से बांटा गया है.

ऐप्लिकेशन की खास जानकारी वाला पैनल बंद करने पर, पब्लिश करें पर क्लिक करके उसे किसी भी समय फिर से खोला जा सकता है.

रोलआउट और रिलीज़ मैनेज करें पर जाकर, App Hosting के रोलआउट को मैनेज करने और मॉनिटर करने के बारे में ज़्यादा जानें.

8. नतीजा

बधाई हो! आपने Firebase Studio का इस्तेमाल करके, ऐप्लिकेशन बना लिया है. ऐप्लिकेशन में और भी कई चीज़ें जोड़ी जा सकती हैं. जैसे, बड़ी डिक्शनरी, ज़्यादा भाषाएं, ऑडियो, ऐनिमेशन या मुश्किल लेवल चुनने की सुविधा. बेझिझक अपने ऐप्लिकेशन का इस्तेमाल जारी रखें या कुछ नया बनाएं.

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

• App Prototyping एजेंट की मदद से, फ़ुल-स्टैक वेब ऐप्लिकेशन डेवलप करना, उसे पब्लिश करना, और उसकी परफ़ॉर्मेंस को मॉनिटर करना
• Firebase Studio की मदद से, अपने नए ऐप्लिकेशन का प्रोटोटाइप बनाना शुरू करें
• Firebase Studio के फ़ाइल फ़ोल्डर के बारे में ज़्यादा जानें