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

Project IDX की मदद से, अपने काम की झलक देखी जा सकती है. इसके लिए, कोड एडिटर के साथ-साथ अपने ऐप्लिकेशन का लाइव व्यू रेंडर किया जाता है. IDX वेब झलक, ऐप्लिकेशन के वेब सर्वर और क्लाउड-आधारित Android एमुलेटर का इनलाइन फ़्रेम (iFrame) रेंडर करती हैं.

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

अपने फ़ाइल फ़ोल्डर में अपने ऐप्लिकेशन की झलक देखने के लिए, आपको झलक एनवायरमेंट को कॉन्फ़िगर करना होगा.

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

   { pkgs, ... }: {
   
     # NOTE: This is an excerpt of a complete Nix configuration example.
     # For more information about the dev.nix file in IDX, see
     # https://developers.google.com/idx/guides/customize-idx-env
   
     # 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";
         };
       };
     };
   }
   

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   

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

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

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

   

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

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

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

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

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

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

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

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

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

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

1. Project IDX खोलें.
2. सेटिंग आइकॉन पर क्लिक करें. सेटिंग विंडो खुलेगी.
3. फ़ाइलें: अपने-आप सेव करें खोजें.
4. ड्रॉप-डाउन पर क्लिक करें और बंद करें को चुनें. अपने-आप सेव होने की सुविधा अब बंद कर दी गई है.