इस गाइड में, Firebase में Gemini की मदद से फ़ुल-स्टैक ऐप्लिकेशन को तेज़ी से डेवलप और पब्लिश करने के लिए, App Prototyping agent का इस्तेमाल करने का तरीका बताया गया है. आपको एक ऐसा Next.js ऐप्लिकेशन जनरेट करने के लिए, सामान्य भाषा के प्रॉम्प्ट का इस्तेमाल करना होगा जो किसी फ़ोटो या ब्राउज़र में मौजूद कैमरे से, खाने की चीज़ों की पहचान करता है. साथ ही, पहचाने गए आइटम की रेसिपी भी उपलब्ध कराता है. इसके बाद, आपको ऐप्लिकेशन को बेहतर बनाना होगा और आखिर में, Firebase App Hosting पर पब्लिश करना होगा.
इस गाइड में आगे बढ़ने पर, आपको इन टेक्नोलॉजी का इस्तेमाल करना होगा:
पहला चरण: अपना ऐप्लिकेशन जनरेट करना
अपने Google खाते में लॉग इन करें और Firebase Studio खोलें.
एआई की मदद से ऐप्लिकेशन का प्रोटोटाइप बनाएं फ़ील्ड में, उस ऐप्लिकेशन के बारे में जानकारी डालें जिसे आपको बनाना है. इस समाधान के लिए, इमेज पर आधारित रेसिपी ऐप्लिकेशन बनाते समय, कैमरे और जनरेटिव एआई का इस्तेमाल करने वाले ऐप्लिकेशन का प्रोटोटाइप बनाने के लिए, इस तरह के प्रॉम्प्ट का इस्तेमाल किया जा सकता है:
Build a web app that can identify food products from an uploaded picture or in-browser camera. The app should provide a recipe that contains the identified ingredients.एआई की मदद से प्रोटोटाइप बनाएं पर क्लिक करें.
Gemini आपके प्रॉम्प्ट के आधार पर, ऐप्लिकेशन का ब्लूप्रिंट जनरेट करता है. इसमें, ऐप्लिकेशन का सुझाया गया नाम, ज़रूरी सुविधाएं, और स्टाइल के दिशा-निर्देश शामिल होते हैं.
ब्लूप्रिंट की समीक्षा करें और उसमें कुछ बदलाव करें. उदाहरण के लिए, इनमें से किसी एक विकल्प का इस्तेमाल करके, ऐप्लिकेशन का सुझाया गया नाम या कलर स्कीम बदली जा सकती है:
पसंद के मुताबिक बनाएं पर क्लिक करें और सीधे ब्लूप्रिंट में बदलाव करें. बदलाव करने के बाद, सेव करें पर क्लिक करें.
चैट पैनल में, बताओ... फ़ील्ड में, सवाल और संदर्भ जोड़ें. आपके पास अन्य इमेज अपलोड करने का विकल्प भी होता है.
इस ऐप्लिकेशन का प्रोटोटाइप बनाएं पर क्लिक करें. Gemini आपके ऐप्लिकेशन को कोड करना शुरू कर देगा. ऐप्लिकेशन के ब्यौरे में ऐसी सुविधाओं के बारे में बताया गया है जिनके लिए जनरेटिव एआई की ज़रूरत होती है. इसलिए, Gemini आपसे Gemini API कुंजी मांगेगा.
अपनी Gemini API कुंजी जोड़ें या Gemini API कुंजी जनरेट करने के लिए, अपने-आप जनरेट करें पर क्लिक करें.
दूसरा चरण: टेस्ट करना, बेहतर बनाना, डीबग करना, और दोहराना
शुरुआती ऐप्लिकेशन जनरेट होने के बाद, उसे टेस्ट किया जा सकता है, बेहतर बनाया जा सकता है, डीबग किया जा सकता है, और उसमें बदलाव किया जा सकता है.
अपने ऐप्लिकेशन की समीक्षा करें और उससे इंटरैक्ट करें: कोड जनरेट होने के बाद, आपके ऐप्लिकेशन की झलक दिखती है. इसकी जांच करने के लिए, सीधे झलक के साथ इंटरैक्ट किया जा सकता है.
सामान्य भाषा का इस्तेमाल करके, अपने ऐप्लिकेशन को बेहतर बनाएं: Gemini से सुविधाएं जोड़ने और ऐप्लिकेशन को बेहतर बनाने के लिए, चैट इंटरफ़ेस का इस्तेमाल करना जारी रखें.
ऐप्लिकेशन की जांच करना: ऐप्लिकेशन की झलक वाले पैनल में, अलग-अलग तरह के खाने की इमेज अपलोड करें. इससे, यह पता चलेगा कि आपका ऐप्लिकेशन, अलग-अलग तरह के खाने की सामग्री की पहचान कर सकता है या नहीं. साथ ही, यह भी पता चलेगा कि आपका ऐप्लिकेशन, अलग-अलग तरह के खाने की रेसिपी दे सकता है या नहीं. इसके अलावा, Code ऐप्लिकेशन को सार्वजनिक तौर पर शेयर करने के लिए, Firebase Studio सार्वजनिक तौर पर ऐप्लिकेशन की झलक दिखाने की सुविधा का इस्तेमाल किया जा सकता है. हालांकि, यह सुविधा कुछ समय के लिए ही उपलब्ध होती है.
सीधे कोड में डीबग करें और उसमें बदलाव करें: Code व्यू खोलने के लिए,
कोड पर स्विच करें पर क्लिक करें. यहां आपको अपने ऐप्लिकेशन की सभी फ़ाइलें दिखेंगी और सीधे अपने कोड में बदलाव किया जा सकेगा. Prototyper mode at any time. पर वापस स्विच किया जा सकता हैCode व्यू में, इन काम की सुविधाओं का भी इस्तेमाल किया जा सकता है:
अपने ऐप्लिकेशन की जांच करने, डीबग करने, और ऑडिट करने के लिए, Firebase Studio की डीबग करने और रिपोर्ट करने की सुविधाएं इस्तेमाल करें.
Firebase में Gemini का इस्तेमाल करके एआई की मदद पाएं. इसके लिए, कोड में इनलाइन या इंटरैक्टिव चैट का इस्तेमाल किया जा सकता है. दोनों ही सुविधाएं डिफ़ॉल्ट रूप से उपलब्ध हैं. इंटरैक्टिव चैट की मदद से, समस्याओं का पता लगाया जा सकता है, उनके समाधान दिए जा सकते हैं, और ऐप्लिकेशन को तेज़ी से ठीक करने के लिए टूल चलाए जा सकते हैं. चैट को ऐक्सेस करने के लिए, वर्कस्पेस में सबसे नीचे मौजूद स्पार्कGemini पर क्लिक करें.
(ज़रूरी नहीं) तीसरा चरण: App Hosting की मदद से अपना ऐप्लिकेशन पब्लिश करना
ऐप्लिकेशन की जांच करने और उससे संतुष्ट होने के बाद, उसे Firebase App Hosting की मदद से वेब पर पब्लिश किया जा सकता है.
App Hosting सेट अप करने पर, Firebase Studio आपके लिए एक Firebase प्रोजेक्ट बनाता है. साथ ही, Cloud Billing खाते को लिंक करने का तरीका भी बताता है.
Firebase App Hosting पर अपना ऐप्लिकेशन पब्लिश करने के लिए:
नया Firebase प्रोजेक्ट बनाने और App Hosting सेटअप शुरू करने के लिए, पब्लिश करें पर क्लिक करें. अपना ऐप्लिकेशन पब्लिश करें पैनल दिखेगा.
Firebase प्रोजेक्ट चरण में, आपके लिए बनाए गए Firebase प्रोजेक्ट का नाम नोट करें. इसके बाद, आगे बढ़ें पर क्लिक करें.
Cloud Billing खाता लिंक करें चरण में, इनमें से कोई एक विकल्प चुनें:
वह Cloud Billing खाता चुनें जिसे आपको अपने Firebase प्रोजेक्ट से लिंक करना है.
अगर आपके पास Cloud Billing खाता नहीं है या आपको नया खाता बनाना है, तो Cloud Billing खाता बनाएं पर क्लिक करें. इससे Google Cloud कंसोल खुलेगा. यहां खुद से मैनेज किया जा सकने वाला नया Cloud Billing खाता बनाया जा सकता है. खाता बनाने के बाद, Firebase Studio पर वापस जाएं और Cloud Billing लिंक करें सूची से खाता चुनें.
आगे बढ़ें पर क्लिक करें. Firebase Studio, बिलिंग खाते को आपके Workspace से जुड़े प्रोजेक्ट से लिंक करता है. यह प्रोजेक्ट, Gemini API पासकोड अपने-आप जनरेट होने पर या पब्लिश करें पर क्लिक करने पर बनता है. इसके बाद, App Hosting Google Cloud में आपके ऐप्लिकेशन के लिए, पूरी तरह से मैनेज किया जाने वाला एनवायरमेंट सेट अप करता है.
पर जाएं.अपना पहला रोल आउट बनाएं पर क्लिक करें. Firebase Studio, App Hosting का रोलआउट लॉन्च करता है. इसमें 10 मिनट लग सकते हैं. इस बारे में ज़्यादा जानने के लिए कि पर्दे के पीछे क्या हो रहा है, App Hosting बिल्ड करने की प्रोसेस देखें.
रोल आउट पूरा होने के बाद, ऐप्लिकेशन की खास जानकारी दिखती है. इसमें यूआरएल और ऐप्लिकेशन के बारे में अहम जानकारी होती है. यह जानकारी, App Hosting निगरानी की सुविधा से मिलती है. Firebase से जनरेट किए गए डोमेन के बजाय, कस्टम डोमेन (जैसे, example.com या app.example.com) का इस्तेमाल करने के लिए, Firebase कंसोल में कस्टम डोमेन जोड़ा जा सकता है.
App Hosting के बारे में ज़्यादा जानकारी के लिए, App Hosting और इसके काम करने के तरीके को समझना लेख पढ़ें.
(ज़रूरी नहीं) चौथा चरण: अपने ऐप्लिकेशन को मॉनिटर करना
App Hosting ऐप्लिकेशन की खास जानकारी पैनल में, आपके ऐप्लिकेशन की मुख्य मेट्रिक और जानकारी मिलती है. इससे, App Hosting में पहले से मौजूद निगरानी टूल का इस्तेमाल करके, अपने वेब ऐप्लिकेशन की परफ़ॉर्मेंस को मॉनिटर किया जा सकता है. साइट के रोल आउट होने के बाद, पब्लिश करें पर क्लिक करके खास जानकारी को ऐक्सेस किया जा सकता है. इस पैनल से, ये काम किए जा सकते हैं:
- अपने ऐप्लिकेशन का नया वर्शन रिलीज़ करने के लिए, रोल आउट बनाएं पर क्लिक करें.
- अपने ऐप्लिकेशन का लिंक शेयर करें या अपने ऐप्लिकेशन पर जाएं में जाकर, सीधे अपने ऐप्लिकेशन को खोलें.
- पिछले सात दिनों में अपने ऐप्लिकेशन की परफ़ॉर्मेंस की खास जानकारी देखें. इसमें अनुरोधों की कुल संख्या और नए रोल आउट की स्थिति शामिल है. Firebase console में ज़्यादा जानकारी ऐक्सेस करने के लिए, जानकारी देखें पर क्लिक करें.
- पिछले 24 घंटों में आपके ऐप्लिकेशन को मिले अनुरोधों की संख्या का ग्राफ़ देखें. इसमें, एचटीटीपी स्टेटस कोड के हिसाब से अनुरोधों की संख्या देखी जा सकती है.
अगर आपने ऐप्लिकेशन की खास जानकारी वाला पैनल बंद कर दिया है, तो पब्लिश करें पर क्लिक करके, इसे कभी भी फिर से खोला जा सकता है.
App Hosting रोलआउट को मैनेज करने और उनकी निगरानी करने के बारे में ज़्यादा जानने के लिए, रोलआउट और रिलीज़ मैनेज करें पर जाएं.
(ज़रूरी नहीं) पांचवां चरण: डिप्लॉयमेंट को रोल बैक करना
अगर आपने App Hosting पर अपने ऐप्लिकेशन के एक से ज़्यादा वर्शन डिप्लॉय किए हैं, तो उसे किसी पुराने वर्शन पर वापस रोल किया जा सकता है. इसे हटाया भी जा सकता है.
पब्लिश की गई साइट को रोल बैक करने के लिए:
Firebase कंसोल में App Hosting खोलें.
अपने ऐप्लिकेशन का बैकएंड ढूंढें, देखें पर क्लिक करें. इसके बाद, रोल आउट पर क्लिक करें.
आपको जिस डिप्लॉयमेंट पर वापस जाना है उसके बगल में, ज़्यादा पर क्लिक करें. इसके बाद, इस बिल्ड पर वापस जाएं को चुनें और पुष्टि करें.
ज़्यादा जानने के लिए, रोलआउट और रिलीज़ मैनेज करना लेख पढ़ें.
वेब से अपना App Hosting डोमेन हटाने के लिए:
Firebase कंसोल में, App Hosting खोलें. इसके बाद, Firebase Studio ऐप्लिकेशन सेक्शन में जाकर, देखें पर क्लिक करें.
बैकएंड की जानकारी सेक्शन में, मैनेज करें पर क्लिक करें. डोमेन पेज लोड हो जाता है.
अपने डोमेन के बगल में, ज़्यादा पर क्लिक करें. इसके बाद, डोमेन बंद करें चुनें और पुष्टि करें.
इससे आपका डोमेन वेब से हट जाता है. अपना App Hosting बैकएंड पूरी तरह से हटाने के लिए, बैकएंड मिटाना में दिए गए निर्देशों का पालन करें.
(ज़रूरी नहीं) छठा चरण: डिप्लॉय की गई सुविधाओं के लिए Genkit मॉनिटरिंग का इस्तेमाल करना
अपने एआई फ़्लो कोड में टेलीमेट्री की सुविधा चालू करके, Genkit सुविधा के चरणों, इनपुट, और आउटपुट पर नज़र रखी जा सकती है. Genkit की टेलीमेट्री सुविधा की मदद से, एआई फ़्लो की परफ़ॉर्मेंस और इस्तेमाल को मॉनिटर किया जा सकता है. इस डेटा की मदद से, आपको उन जगहों का पता चल सकता है जहां सुधार की ज़रूरत है. साथ ही, समस्याओं को हल करने, बेहतर परफ़ॉर्मेंस और कम लागत के लिए अपने प्रॉम्प्ट और फ़्लो को ऑप्टिमाइज़ करने, और समय के साथ अपने फ़्लो के इस्तेमाल को ट्रैक करने में मदद मिल सकती है.
Genkit में मॉनिटरिंग सेट अप करने के लिए, Genkit एआई फ़्लो में टेलीमेट्री जोड़ें और फिर Firebase कंसोल में नतीजे देखें.
पहला चरण: Firebase Studio में अपने Genkit फ़्लो कोड में टेलीमेट्री जोड़ना
अपने कोड में मॉनिटरिंग सेट अप करने के लिए:
अगर आप पहले से Code व्यू में नहीं हैं, तो उसे खोलने के लिए
कोड पर स्विच करें पर क्लिक करें.Genkit के इंस्टॉल किए गए वर्शन की पुष्टि करने के लिए,
package.jsonको चुनें.टर्मिनल खोलें (MacOS में
Ctrl-Shift-CयाCmd-Shift-C).टर्मिनल में क्लिक करें और Firebase प्लग इन इंस्टॉल करें. इसके लिए, अपनी
package.jsonफ़ाइल से मैच होने वाले वर्शन का इस्तेमाल करें. उदाहरण के लिए, अगर आपकेpackage.jsonमें Genkit पैकेज 1.0.4 पर हैं, तो प्लग इन इंस्टॉल करने के लिए, आपको यह कमांड चलाना चाहिए:npm i --save @genkit-ai/firebase@1.0.4एक्सप्लोरर में जाकर,
src > ai > flowsको बड़ा करें.flowsफ़ोल्डर में, एक या उससे ज़्यादा TypeScript फ़ाइलें दिखती हैं. इनमें आपके Genkit फ़्लो शामिल होते हैं.किसी फ़्लो को खोलने के लिए उस पर क्लिक करें.
फ़ाइल के इंपोर्ट सेक्शन में सबसे नीचे,
FirebaseTelemetryको इंपोर्ट करने और चालू करने के लिए, यह जोड़ें:import { enableFirebaseTelemetry } from '@genkit-ai/firebase'; enableFirebaseTelemetry();
दूसरा चरण: अनुमतियां सेट अप करना
Firebase Studio ने आपके Firebase प्रोजेक्ट को सेट अप करते समय, आपके लिए ज़रूरी एपीआई चालू किए हैं. हालांकि, आपको App Hosting सेवा खाते को भी अनुमतियां देनी होंगी.
अनुमतियां सेट अप करने के लिए:
Google Cloud IAM कंसोल खोलें और अपना प्रोजेक्ट चुनें. इसके बाद, ऐप्लिकेशन होस्टिंग सेवा खाते को ये भूमिकाएं दें:
- मेट्रिक राइटर को मॉनिटर करना (
roles/monitoring.metricWriter) - Cloud Trace एजेंट (
roles/cloudtrace.agent) - लॉग लेखक (
roles/logging.logWriter)
- मेट्रिक राइटर को मॉनिटर करना (
App Hosting पर अपना ऐप्लिकेशन फिर से पब्लिश करें.
पब्लिश करने की प्रोसेस पूरी होने के बाद, अपना ऐप्लिकेशन लोड करें और उसका इस्तेमाल शुरू करें. पांच मिनट के बाद, आपका ऐप्लिकेशन टेलीमेट्री डेटा को लॉग करना शुरू कर देगा.
तीसरा चरण: Firebase कंसोल पर, जनरेटिव एआई की सुविधाओं को मॉनिटर करना
जब टेलीमेट्री कॉन्फ़िगर की जाती है, तो Genkit आपके सभी फ़्लो के लिए अनुरोधों की संख्या, रिस्पॉन्स मिलने में लगने वाला समय, और अनुरोध पूरा होने की जानकारी रिकॉर्ड करता है. साथ ही, हर फ़्लो के लिए, Genkit स्थिरता मेट्रिक इकट्ठा करता है, ज़्यादा जानकारी वाले ग्राफ़ दिखाता है, और कैप्चर किए गए ट्रेस को लॉग करता है.
Genkit की मदद से लागू की गई एआई की सुविधाओं को मॉनिटर करने के लिए:
पांच मिनट बाद, Firebase कंसोल में Genkit खोलें और Genkit के प्रॉम्प्ट और जवाबों की समीक्षा करें.
Genkit, स्टैबिलिटी मेट्रिक को कंपाइल करता है:
- कुल अनुरोध: आपके फ़्लो को मिले अनुरोधों की कुल संख्या.
- सफलता दर: उन अनुरोधों का प्रतिशत जिन्हें सही तरीके से प्रोसेस किया गया.
- 95वें पर्सेंटाइल के हिसाब से इंतज़ार का समय: आपके फ़्लो का 95वां पर्सेंटाइल के हिसाब से इंतज़ार का समय, जो 95% अनुरोधों को प्रोसेस होने में लगने वाला समय होता है.
टोकन का इस्तेमाल:
- इनपुट टोकन: प्रॉम्प्ट में मॉडल को भेजे गए टोकन की संख्या.
- आउटपुट टोकन: रिस्पॉन्स में मॉडल से जनरेट होने वाले टोकन की संख्या.
इमेज का इस्तेमाल:
- इनपुट इमेज: प्रॉम्प्ट में मॉडल को भेजी गई इमेज की संख्या.
- आउटपुट इमेज: जवाब में मॉडल की ओर से जनरेट की गई इमेज की संख्या.
बिना रुकावट Android का इस्तेमाल करने से जुड़ी मेट्रिक को बड़ा करने पर, ज़्यादा जानकारी वाले ग्राफ़ दिखते हैं:
- समय के साथ अनुरोध की संख्या.
- समय के साथ, सफलता की दर.
- समय के साथ इनपुट और आउटपुट टोकन.
- समय के साथ, इंतज़ार का समय (95वां और 50वां पर्सेंटाइल).
Genkit पर जाकर, Genkit के बारे में ज़्यादा जानें.
अगले चरण
- Firebase Studio वर्कस्पेस में ऐप्लिकेशन डेवलप करने का तरीका जानें.
- Firebase Studio में एआई (AI) की मदद पाने के बारे में ज़्यादा जानें.