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

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

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

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

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

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

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

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

ऐप्लिकेशन प्रोटोटाइपिंग एजेंट, आपके ऐप्लिकेशन को बनाने के लिए 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 के एक्सप्लोरर पैनल में खींचें और छोड़ें. फ़ाइलों को किसी भी मौजूदा फ़ाइल को बदलने की अनुमति दें.
4. ऐप्लिकेशन के उदाहरण वाले वर्शन का इस्तेमाल करके, कोडलैब जारी रखने के लिए, प्रोटोटाइपर पर स्विच करें पर क्लिक करें.

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. अगर आपका ऐप्लिकेशन उम्मीद के मुताबिक काम नहीं कर रहा है, तो ऐप्लिकेशन प्रोटोटाइप एजेंट से बदलाव करने के लिए कहें. उदाहरण के लिए:

   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 में कोई गड़बड़ी है और उसे ठीक नहीं किया जा सकता, तो कभी-कभी फ़ाइल में मैन्युअल तरीके से बदलाव करना आसान होता है. जब आप तैयार हों, तो ऐप्लिकेशन प्रोटोटाइपिंग एजेंट का इस्तेमाल जारी रखने के लिए, प्रोटोटाइपर पर स्विच करें मोड का इस्तेमाल करें.

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

ज़रूरी नहीं: इस बिंदु से ऐप्लिकेशन के उदाहरण वाले वर्शन का इस्तेमाल करने के लिए, इन फ़ाइलों को डाउनलोड करें और कोड व्यू में 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 के एक्सप्लोरर पैनल में खींचें और छोड़ें.

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

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

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

 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.

प्रॉम्प्ट और डीबग करने के लिए सलाह

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

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 पर वापस जाएं और 'Google Cloud बिलिंग खाता लिंक करें' सूची से खाता चुनें.
4. आगे बढ़ें पर क्लिक करें. Firebase Studio, बिलिंग खाते को आपके Workspace से जुड़े प्रोजेक्ट से लिंक करता है. यह प्रोजेक्ट, Gemini API पासकोड अपने-आप जनरेट होने पर या पब्लिश करें पर क्लिक करने पर बनता है. इसके बाद, ऐप्लिकेशन होस्टिंग की सुविधा, Google Cloud में आपके ऐप्लिकेशन के लिए पूरी तरह से मैनेज किया जाने वाला एनवायरमेंट सेट अप करती है.
5. अपना पहला रोल आउट बनाएं पर क्लिक करें. Firebase Studio, ऐप्लिकेशन होस्टिंग की सुविधा को लॉन्च करता है. इसमें 10 मिनट लग सकते हैं. इस प्रोसेस के बारे में ज़्यादा जानने के लिए, ऐप्लिकेशन होस्टिंग की बिल्ड प्रोसेस देखें.
6. रोल आउट पूरा होने के बाद, ऐप्लिकेशन की खास जानकारी दिखती है. इसमें, ऐप्लिकेशन के यूआरएल और ऐप्लिकेशन के बारे में अहम जानकारी दिखती है. यह जानकारी, ऐप्लिकेशन होस्टिंग की निगरानी की सुविधा से मिलती है. Firebase से जनरेट किए गए डोमेन के बजाय, कस्टम डोमेन (जैसे, example.com या app.example.com) का इस्तेमाल करने के लिए, Firebase टेक्स्ट में कस्टम डोमेन जोड़ा जा सकता है.

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

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

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

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

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

रोल आउट और रिलीज़ मैनेज करें पर जाकर, ऐप्लिकेशन होस्टिंग के रोल आउट को मैनेज और मॉनिटर करने के बारे में ज़्यादा जानें.

8. नतीजा

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

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

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