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

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 पर चल रहे झलक सर्वर को ऐक्सेस कर सकता है. ऐसा तब तक किया जा सकता है, जब तक आपका 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. ड्रॉप-डाउन पर क्लिक करें और बंद करें चुनें.

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

"Preview backend disconnected" मैसेज को अनदेखा किया जा सकता है.

अगले चरण

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