अपने ऐप्लिकेशन की झलक देखना

Firebase Studio, डेवलपमेंट के दौरान आपके ऐप्लिकेशन की झलक देखने और उसे टेस्ट करने के कई तरीके उपलब्ध कराता है. इसमें App Prototyping agent का इस्तेमाल करना, वेब प्रीव्यू की सुविधा देने वाले बिल्ट-इन टूल का फ़ायदा लेना, और Firebase Studio के फ़ाइल फ़ोल्डर में उपलब्ध वेब और Android प्रीव्यू की सुविधा देने वाले टूल का इस्तेमाल करना शामिल है.

झलक देखने की सुविधा वाला एनवायरमेंट चालू करना और उसे कॉन्फ़िगर करना

अगर आपने टेंप्लेट का इस्तेमाल किया है या App Prototyping agent का इस्तेमाल करके अपना ऐप्लिकेशन जनरेट किया है, तो अक्सर आपके लिए झलकें पहले से कॉन्फ़िगर की जाती हैं. अगर आपके टेंप्लेट में झलक देखने की सुविधा पहले से सेट अप नहीं है, तो प्रोजेक्ट की Nix कॉन्फ़िगरेशन फ़ाइल में जाकर इसे कॉन्फ़िगर किया जा सकता है.

1. अपने फ़ाइल फ़ोल्डर में जाकर, .idx/dev.nix खोलें.

   Firebase Studio नई वर्कस्पेस बनाते समय, इस फ़ाइल को अपने-आप जनरेट करता है. इसमें आपके चुने गए टेंप्लेट के आधार पर, लागू होने वाले सभी प्रीव्यू एनवायरमेंट शामिल होते हैं. अगर फ़ाइल आपकी Firebase Studio कोड रिपॉज़िटरी में नहीं है, तो उसे बनाएं. इसके बाद, idx.previews एट्रिब्यूट की वैल्यू को true पर सेट करें. इसके बाद, कॉन्फ़िगरेशन एट्रिब्यूट जोड़ें. उदाहरण के लिए:

   { pkgs, ... }: {
   
     # NOTE: This is an excerpt of a complete Nix configuration example.
     # For more information about the dev.nix file in Firebase Studio, see
     # https://firebase.google.com/docs/studio/customize-workspace
   
     # Enable previews and customize configuration
     idx.previews = {
       enable = true;
       previews = {
         # The following object sets web previews
         web = {
           command = [
             "npm"
             "run"
             "start"
             "--"
             "--port"
             "$PORT"
             "--host"
             "0.0.0.0"
             "--disable-host-check"
           ];
           manager = "web";
           # Optionally, specify a directory that contains your web app
           # cwd = "app/client";
         };
         # The following object sets Android previews
         # Note that this is supported only on Flutter workspaces
         android = {
           manager = "flutter";
         };
       };
     };
   }
   

   Firebase Studio में मौजूद Nix एट्रिब्यूट की पूरी सूची देखने के लिए, Nix + Firebase Studio देखें.

2. अपने एनवायरमेंट को फिर से बनाएं:

   • कमांड पैलेट (Cmd+Shift+P/Ctrl+Shift+P) से, Firebase Studio: हार्ड रीस्टार्ट करें कमांड चलाएं.
   • परिवेश का कॉन्फ़िगरेशन अपडेट किया गया सूचना में, परिवेश को फिर से बनाएं पर क्लिक करें.

   dev.nix फ़ाइल में बदलाव करने के बाद एनवायरमेंट को फिर से बनाने पर, आपको अपने फ़ाइल फ़ोल्डर में झलक पैनल दिखेगा. इसमें Android और वेब टैब में से कोई एक या दोनों दिखेंगे. यह इस बात पर निर्भर करता है कि आपने कौनसे टैब चालू किए हैं.

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

ऐप्लिकेशन की झलक दिखाने की सुविधा का इस्तेमाल करना

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

वेब और Android के लिए झलक रीफ़्रेश करना

Firebase Studio, npm run start और flutter hot-reload जैसे बुनियादी फ़्रेमवर्क की हॉट रिलोड सुविधाओं का इस्तेमाल करता है. इससे आपको डेवलपमेंट लूप को बेहतर बनाने में मदद मिलती है. Firebase Studio में, इस तरह के रीलोड उपलब्ध हैं:

• अपने-आप हॉट रिलोड होने की सुविधा: किसी फ़ाइल को सेव करने पर, हॉट रिलोड अपने-आप हो जाते हैं. इसे कभी-कभी हॉट मॉड्यूल रिप्लेसमेंट (या एचएमआर) भी कहा जाता है. हॉट रिलोड की सुविधा, वेब ऐप्लिकेशन के लिए पेज को रीलोड किए बिना और एम्युलेटर के लिए ऐप्लिकेशन को रीस्टार्ट या फिर से इंस्टॉल किए बिना, आपके ऐप्लिकेशन को अपडेट करती है. यह तरीका, आपके ऐप्लिकेशन की लाइव स्थिति को बनाए रखने के लिए फ़ायदेमंद है. हालांकि, ऐसा हो सकता है कि यह हमेशा काम न करे.

• मैन्युअल तरीके से पूरा रीलोड: यह विकल्प, वेब ऐप्लिकेशन के लिए पेज रीफ़्रेश करने या एम्युलेटर के लिए ऐप्लिकेशन को फिर से शुरू करने जैसा होता है. हमारा सुझाव है कि सोर्स कोड में हुए अहम बदलावों को कैप्चर करने के लिए, पूरे पेज को फिर से लोड करें. जैसे, जब कोड के बड़े हिस्सों को फिर से फ़ैक्टर किया जाता है.

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

सभी रीलोड विकल्प, झलक दिखाने वाले टूलबार या कमांड पैलेट (Mac पर Cmd+Shift+P या ChromeOS, Windows या Linux पर Ctrl+Shift+P) में जाकर, Firebase Studio कैटगरी में उपलब्ध हैं.

'झलक देखें' टूलबार का इस्तेमाल करने के लिए, यह तरीका अपनाएं:

1. पेज को रीफ़्रेश करने के लिए, फिर से लोड करें आइकॉन पर क्लिक करें. इससे पूरा पेज फिर से लोड हो जाता है. किसी दूसरे टाइप के रीफ़्रेश के लिए, मेन्यू को बड़ा करने के लिए, फिर से लोड करें आइकॉन के बगल में मौजूद ऐरो पर क्लिक करें.

2. मेन्यू से, रीफ़्रेश करने का कोई विकल्प चुनें: हॉट रिलोड, पूरी तरह से रिलोड करें या हार्ड रीस्टार्ट करें.

वेब पर दिखने वाली झलक को दूसरों के साथ शेयर करना

अपने ऐप्लिकेशन की वेब झलक को दूसरों के साथ शेयर करके, उनसे सुझाव/राय मांगी जा सकती है. इसके लिए, ऐक्सेस चालू करें. इसके बाद, झलक का डायरेक्ट लिंक शेयर करें:

1. वेब पर झलक देखने वाले टूलबार में, पता बार की दाईं ओर मौजूद झलक देखने का लिंक शेयर करें आइकॉन पर क्लिक करें. इससे शेयर करने का मेन्यू खुलेगा.

2. इनमें से किसी एक विकल्प का इस्तेमाल करके, अन्य लोगों को अपने वर्कस्पेस का ऐक्सेस दें:

   • झलक को सार्वजनिक करें: अपने फ़ाइल फ़ोल्डर की झलक को सार्वजनिक तौर पर ऐक्सेस करने की अनुमति दें. इससे इंटरनेट पर मौजूद कोई भी व्यक्ति, आपके Workspace के चालू होने तक, झलक दिखाने वाले सर्वर को ऐक्सेस कर सकता है. ऐसा तब तक किया जा सकता है, जब तक कि आपने सार्वजनिक ऐक्सेस बंद न कर दिया हो.

   • वर्कस्पेस का ऐक्सेस मैनेज करें. अपने वर्कस्पेस को सिर्फ़ उन लोगों के साथ शेयर करें जिन्हें आपको ऐक्सेस देना है.

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

3. वर्कस्पेस की झलक का डायरेक्ट लिंक कॉपी करने के लिए, झलक का यूआरएल कॉपी करें को चुनें. इसके बाद, इस लिंक को उन लोगों को भेजें जिनसे आपको सुझाव या राय चाहिए. अपने फ़ोन या टैबलेट पर झलक देखने के लिए, आपको दिखने वाले क्यूआर कोड का भी इस्तेमाल किया जा सकता है.

अपने-आप सेव होने और हॉट रिलोड की सुविधा कॉन्फ़िगर करना

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

अपने-आप सेव होने की सुविधा कॉन्फ़िगर करना

1. Firebase Studio खोलें.
2. सेटिंग आइकॉन पर क्लिक करें.
3. Files: Auto Save खोजें और पुष्टि करें कि फ़ील्ड `afterDelay` पर सेट है.
4. Files: Auto Save Delay खोजें.
5. ऑटोसेव होने में लगने वाले समय का नया इंटरवल डालें. यह समय मिलीसेकंड में होना चाहिए. अब आपके काम में किए गए बदलाव, अपने-आप सेव होने में लगने वाले समय की नई सेटिंग के आधार पर अपने-आप सेव हो जाते हैं.

अपने-आप सेव होने की सुविधा बंद करना

1. Firebase Studio खोलें.
2. सेटिंग आइकॉन पर क्लिक करें.
3. Files: Auto Save को खोजें.
4. ड्रॉप-डाउन पर क्लिक करें और बंद करें चुनें.

झलक दिखाने वाला बैकएंड डिसकनेक्ट हो गया है

"प्रीव्यू बैकएंड डिसकनेक्ट हो गया है" मैसेज को अनदेखा किया जा सकता है.

अगले चरण

• Firebase की मदद से पब्लिश करें.
• अपने ऐप्लिकेशन को मॉनिटर करें.