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

Firebase Studio एक झलक दिखाने वाला टूल है. यह आपके कोड एडिटर के साथ-साथ, आपके ऐप्लिकेशन का लाइव व्यू रेंडर करता है.

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

टेंप्लेट का इस्तेमाल करने पर, झलक अक्सर आपके लिए पहले से कॉन्फ़िगर होती हैं. अगर आपके टेंप्लेट में झलक पहले से सेट अप नहीं हैं, तो उन्हें प्रोजेक्ट की 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, Flutter वर्कस्पेस में Chrome और Android एमुलेटर पर वेब प्रीव्यू की सुविधा देता है. इससे, आपका ऐप्लिकेशन प्रीव्यू एनवायरमेंट पर इंस्टॉल हो जाता है. इसकी मदद से, सीधे अपने वर्कस्पेस से अपने ऐप्लिकेशन की पूरी टेस्टिंग की जा सकती है.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

अगले चरण

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