আপনার অ্যাপের পূর্বরূপ দেখুন

প্রজেক্ট IDX আপনাকে আপনার কোড এডিটরের পাশাপাশি আপনার অ্যাপ্লিকেশনটির একটি লাইভ ভিউ রেন্ডার করে আপনার কাজের পূর্বরূপ দেখতে দেয়। IDX ওয়েব প্রিভিউ অ্যাপের ওয়েব সার্ভারের একটি ইনলাইন ফ্রেম (iFrame) এবং একটি ক্লাউড-ভিত্তিক অ্যান্ড্রয়েড এমুলেটর রেন্ডার করে।

আপনার পূর্বরূপ পরিবেশ সক্ষম করুন এবং কনফিগার করুন

আপনার কর্মক্ষেত্রে আপনার অ্যাপের পূর্বরূপ দেখতে, আপনাকে অবশ্যই আপনার পূর্বরূপ পরিবেশ কনফিগার করতে হবে।

  1. আপনার .idx/dev.nix কনফিগারেশন ফাইলে পূর্বরূপ সক্ষম করুন। আপনি যখন একটি নতুন ওয়ার্কস্পেস তৈরি করেন তখন IDX স্বয়ংক্রিয়ভাবে এই ফাইলটি তৈরি করে এবং আপনার নির্বাচন করা টেমপ্লেটের উপর ভিত্তি করে যেকোন প্রযোজ্য পূর্বরূপ পরিবেশ অন্তর্ভুক্ত করে। ফাইলটি আপনার 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-এ নিক্স বৈশিষ্ট্যের সম্পূর্ণ তালিকার জন্য, নিক্স + আইডিএক্স দেখুন।

  2. আপনার পরিবেশ পুনর্নির্মাণ করুন:

    • প্রজেক্ট IDX চালান: কমান্ড প্যালেট থেকে হার্ড রিস্টার্ট কমান্ড ( Cmd+Shift+P / Ctrl+Shift+P )।
    • এনভায়রনমেন্ট কনফিগার আপডেট করা বিজ্ঞপ্তি থেকে পরিবেশ পুনর্নির্মাণ ক্লিক করুন।

    আপনি যখন আপনার dev.nix ফাইলটি পরিবর্তন করার পরে পরিবেশটি পুনর্নির্মাণ করেন, তখন আপনার কর্মক্ষেত্রে প্রিভিউ প্যানেল প্রদর্শিত হয় যা আপনি কী সক্ষম করেছেন তার উপর নির্ভর করে Android এবং ওয়েব ট্যাবগুলি দেখায়৷ যাইহোক, পরিবেশ পুনর্নির্মাণের জন্য আপনাকে কিছুক্ষণ অপেক্ষা করতে হতে পারে। ওয়ার্কস্পেস বন্ধ করার চেষ্টা করুন এবং তারপর IDX ড্যাশবোর্ড থেকে এটি পুনরায় খোলার চেষ্টা করুন।

অ্যাপ প্রিভিউ ব্যবহার করুন

IDX ক্রোম এবং অ্যান্ড্রয়েড এমুলেটরগুলিতে (ফ্লাটার ওয়ার্কস্পেসগুলিতে) ওয়েব প্রিভিউ অফার করে যা প্রিভিউ এনভায়রনমেন্টে আপনার অ্যাপ ইনস্টল করে, যাতে আপনি সরাসরি আপনার ওয়ার্কস্পেস থেকে শেষ থেকে শেষ পর্যন্ত এটি সম্পূর্ণভাবে পরীক্ষা করতে পারেন।

ওয়েব এবং অ্যান্ড্রয়েডের জন্য প্রিভিউ রিফ্রেশ করুন

IDX অন্তর্নিহিত ফ্রেমওয়ার্কগুলির হট রিলোড কার্যকারিতাগুলিকে (যেমন npm run start এবং flutter hot-reload ) আপনাকে একটি শক্ত অভ্যন্তরীণ বিকাশ লুপ দিতে হুক করে৷ যদি IDX-এ ডিফল্ট আচরণ আপনার ব্যবহারের ক্ষেত্রে ভালোভাবে কাজ না করে তাহলে সমস্যা সমাধানে সাহায্য করার জন্য এই বিভাগে বিভিন্ন ধরনের রিলোড কভার করে।

  • স্বয়ংক্রিয় হট রিলোড : আপনি যখন একটি ফাইল সংরক্ষণ করেন তখন হট রিলোডগুলি স্বয়ংক্রিয়ভাবে সঞ্চালিত হয়। কখনও কখনও হট মডিউল রিপ্লেসমেন্ট (বা এইচএমআর) নামে পরিচিত, একটি হট রিলোড পৃষ্ঠাটি পুনরায় লোড না করে (ওয়েব অ্যাপগুলির জন্য) বা অ্যাপটি পুনরায় চালু বা পুনরায় ইনস্টল না করে (এমুলেটরগুলির জন্য) আপনার অ্যাপ আপডেট করে। এই পদ্ধতিটি আপনার অ্যাপের লাইভ স্টেট সংরক্ষণের জন্য চমৎকার কিন্তু কখনও কখনও উদ্দেশ্য অনুযায়ী কাজ নাও করতে পারে।

  • ম্যানুয়াল সম্পূর্ণ পুনরায় লোড : এই বিকল্পটি একটি পৃষ্ঠা রিফ্রেশ (ওয়েব অ্যাপ্লিকেশনগুলির জন্য) বা একটি অ্যাপ্লিকেশন পুনরায় চালু করার (ইমুলেটরগুলির জন্য) সমতুল্য৷ আমরা আপনার সোর্স কোডে উল্লেখযোগ্য পরিবর্তনগুলি ক্যাপচার করার জন্য একটি সম্পূর্ণ রিলোড ব্যবহার করার পরামর্শ দিই, যেমন কোডের বড় অংশগুলিকে রিফ্যাক্টর করার সময়।

  • ম্যানুয়াল হার্ড রিস্টার্ট : এই বিকল্পটি IDX এর পূর্বরূপ সিস্টেমের একটি সম্পূর্ণ পুনঃসূচনা করে, যার মধ্যে আপনার অ্যাপের ওয়েব সার্ভার বন্ধ করা এবং পুনরায় চালু করা অন্তর্ভুক্ত।

আইডিএক্স বিভাগের অধীনে প্রিভিউ টুলবার বা কমান্ড প্যালেট (ম্যাকে Cmd+Shift+P বা ChromeOS, Windows বা Linux-এ Ctrl+Shift+P ) ব্যবহার করে সমস্ত রিলোড বিকল্প উপলব্ধ।

পূর্বরূপ টুলবার ব্যবহার করতে, এই পদক্ষেপগুলি অনুসরণ করুন:

  1. পৃষ্ঠাটি রিফ্রেশ করতে পুনরায় লোড আইকনে ক্লিক করুন। এটি একটি সম্পূর্ণ পুনরায় লোড জোর করে। একটি ভিন্ন ধরনের রিফ্রেশের জন্য, মেনুটি প্রসারিত করতে রিলোড আইকনের পাশের তীরটিতে ক্লিক করুন।

  2. মেনু থেকে আপনি যে রিফ্রেশ বিকল্পটি চান তা নির্বাচন করুন: হট রিলোড , ফুল রিলোড , বা হার্ড রিস্টার্ট

    প্রিভিউ টুলবারটি প্রিভিউ প্যানেলের শীর্ষে রয়েছে

অন্যদের সাথে আপনার ওয়েব পূর্বরূপ শেয়ার করুন

আপনি অ্যাক্সেস সক্ষম করে এবং তারপর পূর্বরূপের সরাসরি লিঙ্কটি ভাগ করে প্রতিক্রিয়ার জন্য অন্যদের সাথে আপনার অ্যাপের ওয়েব পূর্বরূপ ভাগ করতে পারেন:

  1. ওয়েব প্রিভিউ টুলবারে, ক্লিক করুন একটি লিঙ্ক আইকনের ছবি শেয়ারিং মেনু খুলতে ঠিকানা বারের ডানদিকে শেয়ার প্রিভিউ লিঙ্ক আইকন।

    প্রাকদর্শন শেয়ার মেনু

  2. এই বিকল্পগুলির একটি ব্যবহার করে অন্যদের আপনার কর্মক্ষেত্র অ্যাক্সেস করার অনুমতি দিন:

    • বিকল্প A : আপনার ওয়ার্কস্পেস প্রিভিউকে সর্বজনীনভাবে অ্যাক্সেসযোগ্য করুন প্রিভিউ পাবলিক নির্বাচন করে। এটি আপনার কর্মক্ষেত্র সক্রিয় থাকাকালীন এবং আপনি সর্বজনীন অ্যাক্সেস বন্ধ না করা পর্যন্ত আপনার কর্মক্ষেত্রের চলমান পূর্বরূপ সার্ভারে পৌঁছাতে ইন্টারনেটে যে কাউকে সক্ষম করে৷

    • বিকল্প বিওয়ার্কস্পেস অ্যাক্সেস পরিচালনা করুন নির্বাচন করে আপনি যাদের অ্যাক্সেস দিতে চান তাদের সাথে আপনার ওয়ার্কস্পেস শেয়ার করুন।

  3. ওয়ার্কস্পেস প্রিভিউতে সরাসরি লিঙ্ক কপি করতে কপি প্রিভিউ ইউআরএল নির্বাচন করুন, যা আপনি তাদের কাছে পাঠাতে পারেন যাদের থেকে আপনি প্রতিক্রিয়া পেতে চান।

অটোসেভ এবং হট রিলোড কনফিগার করুন

ডিফল্টরূপে, আপনি টাইপ করা বন্ধ করার পরে, স্বয়ংক্রিয় হট রিলোড ট্রিগার করে IDX আপনার কাজকে এক সেকেন্ড স্বয়ংক্রিয়ভাবে সংরক্ষণ করে। আপনি যদি IDX একটি ভিন্ন বিরতিতে আপনার কাজ সংরক্ষণ করতে চান, স্বয়ংক্রিয় সংরক্ষণ সেটিং পরিবর্তন করুন. এছাড়াও আপনি অটোসেভ বন্ধ করতে পারেন।

অটোসেভ কনফিগার করুন

  1. প্রজেক্ট IDX খুলুন।
  2. সেটিংস আইকনে ক্লিক করুন। সেটিংস উইন্ডো প্রদর্শিত হবে।
  3. ফাইলগুলির জন্য অনুসন্ধান করুন: স্বয়ংক্রিয়ভাবে সংরক্ষণ করুন এবং ক্ষেত্রটি `আফটারডিলে`-তে সেট করা আছে কিনা তা যাচাই করুন।
  4. ফাইল অনুসন্ধান করুন: স্বয়ংক্রিয় সংরক্ষণ বিলম্ব । স্বয়ংক্রিয় সংরক্ষণ বিলম্ব ক্ষেত্রটি প্রদর্শিত হবে।
  5. মিলিসেকেন্ডে প্রকাশ করা একটি নতুন অটোসেভ বিলম্ব ব্যবধান লিখুন। নতুন অটোসেভ বিলম্ব সেটিং এর উপর ভিত্তি করে আপনার কাজের পরিবর্তনগুলি এখন স্বয়ংক্রিয়ভাবে সংরক্ষিত হয়৷

অটোসেভ বন্ধ করুন

  1. প্রজেক্ট IDX খুলুন।
  2. সেটিংস আইকনে ক্লিক করুন। সেটিংস উইন্ডো প্রদর্শিত হবে।
  3. ফাইল অনুসন্ধান করুন: স্বয়ংক্রিয় সংরক্ষণ করুন
  4. ড্রপ-ডাউনে ক্লিক করুন এবং অফ নির্বাচন করুন। অটোসেভ এখন অক্ষম।