इस पेज का अनुवाद Cloud Translation API से किया गया है.

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

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

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

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

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