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

{ # disableFinding("simple") #}

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

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

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

Firebase Studio SDK टूल में 'इसमें खोलें' सुविधा का इस्तेमाल करना

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

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

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

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

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

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

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

अपने प्रोजेक्ट डायरेक्ट्री में पैकेज इंस्टॉल करें:
```
npm install @firebase-studio/open-sdk
```
लाइब्रेरी इंपोर्ट करने के लिए, अपने कोड में यह जोड़ें:
```
import * as FirebaseStudio from '@firebase-studio/open-sdk';
```

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

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

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

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

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

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

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

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

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

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

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

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

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

'Firebase Studio में फ़ाइल फ़ोल्डर इंपोर्ट करें' डायलॉग बॉक्स खोलता है

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

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

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

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

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'
});