प्रोजेक्ट IDX का इस्तेमाल शुरू करना

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

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

शुरू करने के लिए:

• अपने ब्राउज़र में तीसरे पक्ष की कुकी चालू करें.
• पहली बार इस्तेमाल करने के लिए IDX सेट अप करना.
• फ़ाइल फ़ोल्डर बनाना.
• अपना वर्कस्पेस कॉन्फ़िगर करें.

शुरू करने से पहले

शुरू करने से पहले, आपको अपने ब्राउज़र के लिए तीसरे पक्ष की कुकी चालू करनी पड़ सकती हैं. Workspaces की पुष्टि करने के लिए, Project IDX को ज़्यादातर ब्राउज़र में तीसरे पक्ष की कुकी की ज़रूरत होती है.

Chrome

1. सेटिंग खोलें.
2. निजता और सुरक्षा टैब खोलें.
3. पक्का करें कि सभी कुकी को अनुमति दें चालू हो.
4. idx.google.com खोलें.
5. ट्रैकिंग सुरक्षा पैनल खोलने के लिए, पता बार में दिखने के आइकॉन visibility_off पर क्लिक करें. तीसरे पक्ष की कुकी को कुछ समय के लिए अनुमति देने के लिए, तीसरे पक्ष की कुकी सेटिंग को चालू करें. इससे IDX पर कुकी 90 दिनों के लिए चालू हो जाती हैं.

Safari

1. Safari > सेटिंग... खोलें.
2. ये सेटिंग बंद करें:
   • बेहतर > सभी कुकी ब्लॉक करें
   • निजता > एक साथ कई साइट के ज़रिए होने वाली ट्रैकिंग रोकें
3. idx.google.com खोलें.

Firefox

आपको Firefox के लिए, तीसरे पक्ष की कुकी चालू करने की ज़रूरत नहीं है. idx.google.com पर जाएं.

Opera

1. idx.google.com खोलें.
2. मेन्यू खोलें और सेटिंग पर क्लिक करें.
3. निजता और सुरक्षा सेक्शन पर जाएं और तीसरे पक्ष की कुकी विकल्प को बड़ा करें.
4. गुप्त मोड में, तीसरे पक्ष की कुकी ब्लॉक करें या तीसरे पक्ष की कुकी को अनुमति दें को चुनें.
5. idx.google.com खोलें.

आर्क

1. arc://settings पर जाएं.
2. निजता और सुरक्षा सेक्शन में जाएं और तीसरे पक्ष की कुकी विकल्प को बड़ा करें.
3. गुप्त मोड में, तीसरे पक्ष की कुकी ब्लॉक करें या तीसरे पक्ष की कुकी को अनुमति दें को चुनें.
4. idx.google.com खोलें.

ब्रेव

आपको Brave के लिए, तीसरे पक्ष की कुकी चालू करने की ज़रूरत नहीं है. idx.google.com पर जाएं.

IDX सेट अप करना

• 
• 
• 
• 

अगर IDX का इस्तेमाल पहली बार किया जा रहा है, तो आपको IDX को शुरू करना होगा. अगर आपने अपने मौजूदा खाते के साथ पहले से ही IDX का इस्तेमाल किया है, तो वर्कस्पेस बनाएं पर जाएं.

पहली बार IDX सेट अप करने के लिए:

1. Project IDX खोलें.

   IDX को पहली बार खोलने पर, आपको सेवा की शर्तें पढ़ने और उन्हें स्वीकार करने के लिए कहा जाएगा.

2. Google की सेवा की शर्तें और Android SDK की शर्तें पढ़ें. अगर आप इन शर्तों से सहमत हैं, तो मैं Google की सेवा की शर्तों और यहां दी गई Android SDK की शर्तों से सहमत हूं चेकबॉक्स को चालू करें.

3. इसके अलावा, प्रॉडक्ट के अपडेट और सूचनाएं पाने के लिए ऑप्ट-इन करें. साथ ही, IDX को बेहतर बनाने के लिए रिसर्च स्टडी में हिस्सा लें.

4. एआई की सुविधाएं चालू करने के लिए कहा जाए, तो:

   • सभी वर्कस्पेस के लिए, IDX में एआई की मदद से काम करने की सुविधा सेट अप करने के लिए, एआई की सुविधाएं चालू करें पर क्लिक करें. एआई और निजता के बारे में दिया गया नोट पढ़ें. इसके बाद, एआई की सुविधाएं चालू करने और IDX खोलने के लिए, जारी रखें पर क्लिक करें या वापस जाएं पर क्लिक करें.

   • एआई की मदद पाने की सुविधा को बाद के लिए सेट करने के लिए, अभी नहीं पर क्लिक करें.

IDX डैशबोर्ड लोड हो जाता है. अब आपके पास फ़ाइल फ़ोल्डर बनाने का विकल्प है.

अहम जानकारी: एआई की सुविधाओं को किसी भी समय फिर से चालू किया जा सकता है.

फ़ाइल फ़ोल्डर बनाना

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

Project IDX वर्कस्पेस को एक ही कोडबेस के लिए ऑप्टिमाइज़ किया गया है, ताकि अलग-अलग ऐप्लिकेशन के एनवायरमेंट और सिस्टम-लेवल की डिपेंडेंसी को एक-दूसरे से अलग रखा जा सके. अलग-अलग ऐप्लिकेशन और फ़्रेमवर्क के साथ इस्तेमाल करने के लिए, एक से ज़्यादा वर्कस्पेस बनाए जा सकते हैं.

अहम जानकारी: ज़्यादा से ज़्यादा 10 फ़ाइल फ़ोल्डर बनाए जा सकते हैं. अगर आपके पास Google डेवलपर प्रोफ़ाइल है, तो ज़्यादा से ज़्यादा पांच वर्कस्पेस बनाए जा सकते हैं. Workspace में खाते की तय सीमा तक पहुंचने के बाद, सीधे IDX से Google डेवलपर प्रोफ़ाइल बनाने के लिए, टेंप्लेट डैशबोर्ड पर सूचना में जाकर, सेटअप पूरा करें पर क्लिक करें.

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

1. Project IDX खोलें.

2. तय करें कि आपको नया फ़ाइल फ़ोल्डर बनाने के लिए, किस तरीके का इस्तेमाल करना है. अगर कोई नया ऐप्लिकेशन बनाया जा रहा है, तो इन तरीकों का इस्तेमाल करके तुरंत नया वर्कस्पेस बनाया जा सकता है:

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

   • GitHub से डेटा स्टोर करने की जगह इंपोर्ट करना: आपके पास सीधे GitHub से डेटा स्टोर करने की जगह इंपोर्ट करने का विकल्प होता है.

   • कम्यूनिटी टेंप्लेट का इस्तेमाल करें. Project IDX में कम्यूनिटी टेंप्लेट मौजूद होते हैं. इनमें कम्यूनिटी के लोग योगदान दे सकते हैं. अगर आपने कम्यूनिटी टेंप्लेट का इस्तेमाल किया है, तो हमारा सुझाव है कि आप उसमें किए गए मददगार बदलावों या अपने बनाए गए नए टेंप्लेट शेयर करें.

आधिकारिक टेंप्लेट

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

2. अपने फ़ाइल फ़ोल्डर को नाम दें और अन्य विकल्प सेट करें.

3. बनाएं पर क्लिक करें. IDX, आपके चुने गए टेंप्लेट के आधार पर एक नया फ़ाइल फ़ोल्डर बनाता है.

हम लगातार नए टेंप्लेट जोड़ रहे हैं. इसलिए, समय-समय पर वापस आकर देखते रहें या हमें बताएं कि आपको क्या देखना है.

Git डेटा स्टोर करने की जगह इंपोर्ट करना

1. रिपॉज़िटरी इंपोर्ट करें पर क्लिक करें.

2. रिपो का यूआरएल डालें. रिपॉज़िटरी को GitHub, GitLab या Bitbucket पर होस्ट किया जा सकता है.

3. बनाएं पर क्लिक करें. IDX, आपकी चुनी गई चीज़ों के आधार पर एक नया वर्कस्पेस बनाता है.

4. अगर कोई रिपॉज़िटरी निजी है, तो आपसे उससे जुड़े प्रोवाइडर की पुष्टि करने के लिए कहा जाएगा:

   • GitHub के लिए, ऐक्सेस टोकन कॉपी करने के लिए निर्देशों का पालन करें.
   • GitLab के लिए, अपने खाते के पासवर्ड का इस्तेमाल किया जा सकता है या निजी खाते का टोकन बनाया जा सकता है
   • Bitbucket के लिए, पुष्टि करने के लिए अपने उपयोगकर्ता नाम (ईमेल नहीं) और ऐप्लिकेशन के पासवर्ड का इस्तेमाल करें.

5. प्रोजेक्ट इंपोर्ट करने के बाद, IDX टर्मिनल में npm install (या flutter pub get) चलाएं.

   अहम जानकारी: प्रोजेक्ट इंपोर्ट करने पर, IDX डिफ़ॉल्ट रूप से डिपेंडेंसी इंस्टॉल नहीं करता. इसे बदलने के लिए, अपनी dev.nix फ़ाइल में ऐसा onCreate हुक जोड़ें जो npm install (या flutter pub get) चलाता हो. अपने प्रोजेक्ट के डेटा स्टोर में dev.nix जोड़ने के बाद, जब भी उपयोगकर्ता आपके डेटा स्टोर को IDX में इंपोर्ट करते हैं, तो डिपेंडेंसी इंस्टॉल हो जाती हैं.

कम्यूनिटी टेंप्लेट

1. वह कम्यूनिटी टेंप्लेट चुनें जिसका इस्तेमाल करना है. इसके बाद, उसका यूआरएल कॉपी करें.

2. इस फ़ॉर्मैट का इस्तेमाल करके, तुरंत खुलने वाला Project IDX यूआरएल बनाएं:

   https://idx.google.com/new?template=TEMPLATE_URL
   

   उदाहरण के लिए, अगर आपको Three.js React टेंप्लेट का इस्तेमाल करके नया फ़ाइल फ़ोल्डर बनाना है, तो आपको इस यूआरएल का इस्तेमाल करना होगा:

   https://idx.google.com/new?template=https://github.com/project-idx/community-templates/tree/main/threejs-react
   

3. बनाएं पर क्लिक करें. IDX, आपके रेफ़र किए गए टेंप्लेट के आधार पर एक नया वर्कस्पेस बनाता है.

अपना फ़ाइल फ़ोल्डर कॉन्फ़िगर करना

IDX, हर फ़ाइल फ़ोल्डर के लिए एनवायरमेंट कॉन्फ़िगरेशन तय करने के लिए, Nix का इस्तेमाल करता है. Nix एक पूरी तरह से काम करने वाला पैकेज मैनेजर है. यह हर डिपेंडेंसी के लिए यूनीक आइडेंटिफ़ायर असाइन करता है. इसका मतलब है कि आपके एनवायरमेंट में एक ही डिपेंडेंसी के कई वर्शन आसानी से मौजूद हो सकते हैं. इसे फिर से बनाया जा सकता है और यह एलान करने वाला होता है. IDX के संदर्भ में, इसका मतलब है कि एक ही एनवायरमेंट कॉन्फ़िगरेशन को लोड करने के लिए, अपनी Nix कॉन्फ़िगरेशन फ़ाइल को सभी वर्कस्पेस में शेयर किया जा सकता है. Nix + IDX के बारे में ज़्यादा जानें.

.idx/dev.nix फ़ाइल बनाना या उसमें बदलाव करना

एनवायरमेंट कॉन्फ़िगरेशन, आपकी कोड रिपॉज़िटरी में मौजूद .idx/dev.nix फ़ाइल में तय किया जाता है. इस फ़ाइल में, आपके फ़ाइल फ़ोल्डर में जोड़े जाने वाले सभी कॉम्पोनेंट के बारे में बताया गया है. जैसे:

• Nix पैकेज रजिस्ट्री से उपलब्ध सिस्टम टूल. इनमें कंपाइलर, पैकेज (जैसे, go या angular) और कमांड-लाइन की सुविधाएं शामिल हैं. जैसे, gcloud CLI के अतिरिक्त कॉम्पोनेंट.

• OpenVSX रजिस्ट्री से आईडीई एक्सटेंशन, जैसे कि भाषा के हिसाब से डीबगर, कोड फ़ॉर्मैटर, क्लाउड सेवाओं के लिए आधिकारिक एक्सटेंशन वगैरह.

• सामान्य सेवाएं, जैसे कि docker, Pub/Sub मैसेजिंग, Postgres और Redis जैसे डेटाबेस वगैरह. इसके अलावा, और भी सेवाएं.

IDX में ऐप्लिकेशन की झलक दिखाने की सुविधा चालू करने वाले, वर्कस्पेस के बुनियादी एनवायरमेंट के कॉन्फ़िगरेशन के लिए, यहां दी गई .idx/dev.nix फ़ाइल का उदाहरण देखें:

{ pkgs, ... }: {

  # Which nixpkgs channel to use.
  channel = "stable-23.11"; # or "unstable"

  # Use https://search.nixos.org/packages to find packages
  packages = [
    pkgs.nodejs_18
  ];

  # Sets environment variables in the workspace
  env = {
    SOME_ENV_VAR = "hello";
  };

  # Search for the extensions you want on https://open-vsx.org/ and use "publisher.id"
  idx.extensions = [
    "angular.ng-template"
  ];

  # Enable previews and customize configuration
  idx.previews = {
    enable = true;
    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";
      };
    };
  };
}

नया कॉन्फ़िगरेशन लागू करना

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

एनवायरमेंट के बिल्ड में होने वाली गड़बड़ियों को डीबग करना

कॉन्फ़िगरेशन फ़ाइलें, मशीन के पढ़ने लायक कोड होती हैं. इसलिए, इनमें गड़बड़ियां हो सकती हैं. ऐसा होने पर, हो सकता है कि एनवायरमेंट न बन पाए और न शुरू हो पाए. IDX, रिकवरी एनवायरमेंट शुरू करने का विकल्प दिखाता है. इस वर्कस्पेस में, आपके तय किए गए कॉन्फ़िगरेशन शामिल नहीं होते. इसमें सिर्फ़ Code OSS का बुनियादी वर्शन चलता है. इससे, आपको अपनी dev.nix कॉन्फ़िगरेशन फ़ाइल में गड़बड़ियां ठीक करने और एनवायरमेंट को फिर से बनाने का मौका मिलता है.

IDX, एनवायरमेंट बनाने से जुड़ी गड़बड़ियों को दिखाएगा. फ़िलहाल, आपको समस्या को खुद हल करना होगा.

अगले चरण

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

• अपना फ़ाइल फ़ोल्डर शेयर करना

• इस्तेमाल और शेयर करने के लिए कस्टम टेंप्लेट बनाना

• अपने वर्कस्पेस कॉन्फ़िगरेशन या पसंद के मुताबिक बनाए गए टेंप्लेट को शेयर करने के लिए, "IDX में खोलें" बटन का इस्तेमाल करें