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

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: Hard restart कमांड चलाएं.
   • एनवायरमेंट की कॉन्फ़िगरेशन अपडेट की गई सूचना में, एनवायरमेंट को फिर से बनाएं पर क्लिक करें.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 की मदद से पब्लिश करना.
• अपने ऐप्लिकेशन को मॉनिटर करना.