Firebase Studio में कोड इंपोर्ट करने के लिए बटन बनाना

अपनी वेबसाइट में "Firebase Studio में खोलें" बटन जोड़ें. इससे उपयोगकर्ताओं को आपकी साइट से कोड को सीधे Firebase Studio वर्कस्पेस में इंपोर्ट करने में मदद मिलेगी. साथ ही, वे एजेंटिक क्लाउड-आधारित डेवलपमेंट एनवायरमेंट में काम जारी रख पाएंगे.

यह सुविधा इनके लिए डिज़ाइन की गई है:

• कोड प्लेग्राउंड, जहां आपके उपयोगकर्ता बुनियादी एडिटर से पूरे डेवलपमेंट एनवायरमेंट में जा सकते हैं.

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

Open in Firebase Studio SDK का इस्तेमाल करना

"Firebase Studio" बटन, Firebase Studio SDK टूल की मदद से काम करता है. यह एक JavaScript लाइब्रेरी है, जो नया वर्कस्पेस बनाने और उसमें डेटा भरने के लिए सही लिंक जनरेट करती है. यह कोड इंपोर्ट करने के कई विकल्प देती है.

इंपोर्ट करने के तरीके

बटन को इन तरीकों से कोड इंपोर्ट करने के लिए कॉन्फ़िगर किया जा सकता है:

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

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

अपनी साइट में "Firebase Studio में खोलें" बटन जोड़ना

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

अपनी वेबसाइट में "Firebase Studio में खोलें" बटन जोड़ने के लिए:

1. अपने प्रोजेक्ट की डायरेक्ट्री में पैकेज इंस्टॉल करें:

   npm install @firebase-studio/open-sdk
   

2. लाइब्रेरी इंपोर्ट करने के लिए, अपने कोड में यह जोड़ें:

   import * as FirebaseStudio from '@firebase-studio/open-sdk';
   

ज़्यादा जानकारी के लिए, कोड के उदाहरण, और एपीआई के पूरे रेफ़रंस के लिए, SDK टूल का आधिकारिक दस्तावेज़ देखें.

वर्कस्पेस एनवायरमेंट के बारे में जानकारी

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

ऑप्टिमाइज़ किया गया एनवायरमेंट

React, Angular, और सामान्य एचटीएमएल प्रोजेक्ट के लिए, Firebase Studio एक ऑप्टिमाइज़ किया गया, पहले से कॉन्फ़िगर किया गया एनवायरमेंट उपलब्ध कराता है. हालांकि, इसके लिए ज़रूरी है कि कॉल करने वाला व्यक्ति, baselineEnvironment प्रॉपर्टी को settings ऑब्जेक्ट में सही तरीके से सेट करे. इसका मतलब है कि जब कोई उपयोगकर्ता लिंक खोलता है Firebase Studio, Firebase Studio वर्कस्पेस बनाता है और अपने-आप:

• सभी ज़रूरी डिपेंडेंसी इंस्टॉल करता है.
• सही डेवलपमेंट सर्वर को कॉन्फ़िगर करता है और उसे शुरू करता है.
• सही टूल और एक्सटेंशन के साथ एनवायरमेंट सेट अप करता है.

इससे एक ऐसा एनवायरमेंट खुलता है जहां आपके उपयोगकर्ता, आपके ऐप्लिकेशन की लाइव झलक देख सकते हैं और कोड के साथ सीधे इंटरैक्ट कर सकते हैं.

जेनेरिक एनवायरमेंट

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

• लैंग्वेज रनटाइम और डिपेंडेंसी इंस्टॉल करना.
• dev.nix फ़ाइल को कॉन्फ़िगर करना.

इन प्रोजेक्ट के लिए, Firebase Studio एक ऐसा एनवायरमेंट बनाता है जिसे पसंद के मुताबिक नहीं बनाया जा सकता. इससे उपयोगकर्ता को सेटअप प्रोसेस पर पूरा कंट्रोल मिलता है.

उपयोगकर्ता अनुभव

दोनों तरह के वर्कस्पेस के लिए, जब कोई उपयोगकर्ता " Firebase Studio में खोलें" बटन पर क्लिक करता है, तो उससे अपने वर्कस्पेस का नाम डालने और इंपोर्ट की जाने वाली फ़ाइलों की सूची की समीक्षा करने के लिए कहा जाता है.

जब उपयोगकर्ता इंपोर्ट करें पर क्लिक करता है, तो एक नया Firebase Studio वर्कस्पेस खुलता है. इसमें आपके प्रोजेक्ट की फ़ाइलें, ऐप्लिकेशन की झलक, और अगले चरणों के साथ README फ़ाइल शामिल होती है.

"Firebase Studio में खोलें" बटन डिज़ाइन करना

Firebase Studio में खोलें SDK टूल का इस्तेमाल करके, अपना बटन डिज़ाइन किया जा सकता है. इसके अलावा, Firebase Studio के बटन के लिए एचटीएमएल जनरेट करने के लिए, इस टूल का इस्तेमाल किया जा सकता है:Firebase StudioFirebase Studio

अगर SDK टूल का इस्तेमाल किया जाता है, तो बटन के लिए कॉन्फ़िगरेशन की वैकल्पिक प्रॉपर्टी शामिल की जा सकती हैं:

• label: बटन पर दिखने वाला टेक्स्ट लेबल सेट करता है.
  • इन वैल्यू का इस्तेमाल किया जा सकता है: open, try, export, या continue.
• color: बटन की कलर स्कीम तय करता है.
  • इन वैल्यू का इस्तेमाल किया जा सकता है: dark, light, blue, या bright.
• size: बटन की ऊंचाई पिक्सल में तय करता है.
  • इन वैल्यू का इस्तेमाल किया जा सकता है: 20 या 32.
• imageFormat: जनरेट की गई इमेज का फ़ाइल फ़ॉर्मैट तय करता है.
  • इन वैल्यू का इस्तेमाल किया जा सकता है: svg या png.

उदाहरण के लिए:

img.src = FirebaseStudio.getButtonImageUrl({
  label: 'export',
  color: 'dark',
  size: 32,
  imageFormat: 'svg'
});

अगले चरण

• Firebase Studio में खोलें SDK टूल इंस्टॉल करनाFirebase Studio
• वर्कस्पेस को पसंद के मुताबिक बनाने का तरीका समझनाFirebase Studio