Google Workspace ऐड-ऑन को डीबग करना

Node.js

• node और npm के नए वर्शन, आपके लोकल डिवाइस पर इंस्टॉल किए गए.

• nodemon का सबसे नया वर्शन आपके डिवाइस पर इंस्टॉल हो जाता है. इसका इस्तेमाल, अपने-आप फिर से लोड होने के लिए किया जाता है:

  npm install -g nodemon
  

• Google Cloud प्रोजेक्ट. इसके लिए, ज़रूरी शर्तें सेक्शन और क्विकस्टार्ट गाइड के एनवायरमेंट को सेट अप करें.

• आपके लोकल एनवायरमेंट में डीबग करने के लिए, Google Workspace ऐड-ऑन का कोड. हम GitHub रिपॉज़िटरी में दिए गए 3p-resources कोड के उदाहरण में दिए गए, झलक लिंक की सुविधाओं का इस्तेमाल करते हैं. googleworkspace/add-ons-samples इस गाइड में सिर्फ़ उदाहरण के तौर पर ऐसा किया गया है.

• आपके लोकल एनवायरमेंट में सेट अप किया गया IDE, जो डीबग कर सकता है. हम उदाहरण के लिए, इस गाइड में दिए गए Visual Studio Code IDE और इसकी डिफ़ॉल्ट डीबग सुविधाओं का इस्तेमाल करते हैं.

• एक ngrok खाता.

• आपके स्थानीय इलाके में gcloud का नया वर्शन इंस्टॉल है और शुरू हुआ है.

Python

• python3 का नया वर्शन आपके लोकल एनवायरमेंट में इंस्टॉल किया गया है.
• आपके लोकल एनवायरमेंट में इंस्टॉल किए गए pip और virtualenv के सबसे नए वर्शन का इस्तेमाल, Python पैकेज और वर्चुअल एनवायरमेंट को मैनेज करने के लिए किया जाता है.
• Google Cloud प्रोजेक्ट. इसके लिए, ज़रूरी शर्तें सेक्शन और क्विकस्टार्ट गाइड के एनवायरमेंट को सेट अप करें.
• आपके लोकल एनवायरमेंट में डीबग करने के लिए, Google Workspace ऐड-ऑन का कोड. हम GitHub रिपॉज़िटरी में दिए गए 3p-resources कोड के उदाहरण में दिए गए, झलक लिंक की सुविधाओं का इस्तेमाल करते हैं. googleworkspace/add-ons-samples इस गाइड में सिर्फ़ उदाहरण के तौर पर ऐसा किया गया है.
• आपके लोकल एनवायरमेंट में सेट अप किया गया IDE, जो डीबग कर सकता है. हम उदाहरण के लिए, इस गाइड में दिए गए Visual Studio Code IDE और इसकी डिफ़ॉल्ट डीबग सुविधाओं का इस्तेमाल करते हैं.
• एक ngrok खाता.
• आपके स्थानीय इलाके में gcloud का नया वर्शन इंस्टॉल है और शुरू हुआ है.

Java

• Java SE 11's JDK का नया और ठीक से काम करने वाला वर्शन, आपके डिवाइस के आस-पास इंस्टॉल हो जाता है.
• Apache Maven का सबसे नया वर्शन आपके लोकल एनवायरमेंट में इंस्टॉल है. इसका इस्तेमाल Java प्रोजेक्ट मैनेज करने के लिए किया जाता है.
• Google Cloud प्रोजेक्ट. इसके लिए, ज़रूरी शर्तें सेक्शन और क्विकस्टार्ट गाइड के एनवायरमेंट को सेट अप करें.
• आपके लोकल एनवायरमेंट में डीबग करने के लिए, Google Workspace ऐड-ऑन का कोड. हम GitHub रिपॉज़िटरी में दिए गए 3p-resources कोड के उदाहरण में दिए गए, झलक लिंक की सुविधाओं का इस्तेमाल करते हैं. googleworkspace/add-ons-samples इस गाइड में सिर्फ़ उदाहरण के तौर पर ऐसा किया गया है.
• आपके लोकल एनवायरमेंट में सेट अप किया गया IDE, जो डीबग कर सकता है. हम उदाहरण के लिए, इस गाइड में दिए गए Visual Studio Code IDE और इसकी डिफ़ॉल्ट डीबग सुविधाओं का इस्तेमाल करते हैं.
• एक ngrok खाता.
• आपके स्थानीय इलाके में gcloud का नया वर्शन इंस्टॉल है और शुरू हुआ है.

Node.js

1. अपने लोकल एनवायरमेंट में इंस्टॉल किए गए Visual Studio Code IDE से, ये काम करें:

   1. नई विंडो में, add-ons-samples/node/3p-resources फ़ोल्डर खोलें.

   2. package.json फ़ाइल में एक डिपेंडेंसी और दो स्क्रिप्ट जोड़कर, ऐप्लिकेशन को लोकल रन और अपने-आप फिर से लोड होने वाले डीबग के लिए कॉन्फ़िगर करें:

      {
          ...
          "dependencies": {
            ...
            "@google-cloud/functions_framework": "^3.3.0"
          },
          "scripts": {
              ...
              "start": "npx functions-framework --target=createLinkPreview --port=9500",
              "debug-watch": "nodemon --watch ./ --exec npm start"
          }
          ...
      }
      

   3. रूट डायरेक्ट्री से, यह ऐप्लिकेशन इंस्टॉल करें:

      npm install
      

   4. Debug Watch नाम का ऐसा लॉन्च बनाएं और कॉन्फ़िगर करें जो रूट डायरेक्ट्री में .vscode/launch.json फ़ाइल बनाकर, debug-watch स्क्रिप्ट को ट्रिगर करे:

      {
          "version": "0.2.0",
          "configurations": [{
              "type": "node",
              "request": "launch",
              "name": "Debug Watch",
              "cwd": "${workspaceRoot}",
              "runtimeExecutable": "npm",
              "runtimeArgs": ["run-script", "debug-watch"]
          }]
      }
      

   5. ऐसा ब्रेकपॉइंट जोड़ें जो index.js फ़ाइल में, एचटीटीपी अनुरोध की प्रोसेसिंग को रोकता हो. साथ ही, पहले जोड़े गए Debug Watch कॉन्फ़िगरेशन के साथ, चलना और डीबग करना शुरू करें. ऐप्लिकेशन अभी चल रहा है और 9500 पोर्ट पर एचटीटीपी अनुरोधों को सुन रहा है.

      

      तीसरी इमेज. ऐप्लिकेशन, 9500 पोर्ट पर एचटीटीपी अनुरोधों को चला रहा है और सुन रहा है.

2. अपने स्थानीय परिवेश में ngrok ऐप्लिकेशन लॉन्च करें:

   ngrok http --domain=NGROK_STATIC_DOMAIN 9500
   

   अपने ngrok खाते में NGROK_STATIC_DOMAIN को स्टैटिक डोमेन से बदलें. अब सभी अनुरोधों को आपके लोकल एनवायरमेंट और ऐप्लिकेशन के इस्तेमाल किए जाने वाले पोर्ट पर रीडायरेक्ट कर दिया जाता है.

   

   चौथी इमेज. ngrok सर्वर वाला टर्मिनल, जो चल रहा है और रीडायरेक्ट कर रहा है.

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

   

   पांचवी इमेज. ngrok ऐप्लिकेशन पर होस्ट किया गया वेब इंटरफ़ेस, जो कोई एचटीटीपी अनुरोध नहीं दिखा रहा है.

4. टेस्टर खाते की मदद से, नए Google Doc में केस के यूआरएल की झलक देखकर, अपने Google Workspace ऐड-ऑन की जांच करें:

   • नया Google दस्तावेज़ बनाएं.

     नया Google दस्तावेज़ बनाना

   • नीचे दिया गया लिंक लिखें और enter दबाएं:

     https://example.com/support/case/?name=Name1&description=Description1&priority=P1
     

   • लिंक पर क्लिक करें.

5. आपके लोकल एनवायरमेंट के Visual Studio Code में, यह देखा जा सकता है कि सेट किए गए ब्रेकपॉइंट पर प्रोग्राम चलाने की प्रोसेस को रोक दिया गया है.

   

   छठी इमेज. सेट किए गए ब्रेकपॉइंट पर प्रोग्राम चलाने की प्रोसेस को रोक दिया जाता है.

6. अगर Google Workspace ऐड-ऑन का समय खत्म होने से पहले, Visual Studio Code के डीबगर से एक्ज़ीक्यूशन फिर से शुरू किया जाता है, तो Google Workspace ऐड-ऑन की कैश मेमोरी में लिंक की झलक, Google Docs में दिखती है.

7. अपने लोकल एनवायरमेंट में ngrok ऐप्लिकेशन से होस्ट किए गए वेब इंटरफ़ेस से, एचटीटीपी अनुरोध और रिस्पॉन्स लॉग देखे जा सकते हैं.

   

   सातवीं इमेज. ngrok ऐप्लिकेशन पर होस्ट किए गए वेब इंटरफ़ेस से मिला एचटीटीपी अनुरोध.

8. ऐप्लिकेशन का व्यवहार बदलने के लिए, Case को index.js की Case: इनलाइन 51 से बदलें. फ़ाइल सेव करने पर, nodemon अपडेट किए गए सोर्स कोड के साथ ऐप्लिकेशन को अपने-आप फिर से लोड करता है और Visual Studio Code डीबग मोड में बना रहता है.

   

   आठवां इमेज. ऐप्लिकेशन चल रहा है और कोड में बदलाव लोड किए गए 9500 पोर्ट पर एचटीटीपी अनुरोधों को सुन रहा है.

9. इस बार, लिंक पर क्लिक करने और नए Google दस्तावेज़ में कुछ सेकंड का इंतज़ार करने के बजाय, अपने लोकल एनवायरमेंट में ngrok ऐप्लिकेशन से होस्ट किए गए वेब इंटरफ़ेस पर लॉग किए गए आखिरी एचटीटीपी अनुरोध को चुना जा सकता है और Replay पर क्लिक किया जा सकता है. पहले की तरह ही, आपका Google Workspace ऐड-ऑन जवाब नहीं दे रहा है, क्योंकि इसे सक्रिय रूप से डीबग किया जा रहा है.

10. Visual Studio Code के डीबगर से एक्ज़ीक्यूशन फिर से शुरू करने पर, अपने लोकल एनवायरमेंट में ngrok ऐप्लिकेशन पर होस्ट किए गए वेब इंटरफ़ेस से देखा जा सकता है कि ऐप्लिकेशन, झलक दिखाने वाले कार्ड के अपडेट किए गए वर्शन के साथ रिस्पॉन्स जनरेट करता है.

Python

1. अपने लोकल एनवायरमेंट में इंस्टॉल किए गए Visual Studio Code IDE से, ये काम करें:

   1. नई विंडो में, add-ons-samples/python/3p-resources/create_link_preview फ़ोल्डर खोलें.

   2. Python env के लिए, नया वर्चुअल एनवायरमेंट बनाएं और इसे चालू करें:

      virtualenv env
      source env/bin/activate
      

   3. वर्चुअल एनवायरमेंट में pip का इस्तेमाल करके, सभी प्रोजेक्ट डिपेंडेंसी इंस्टॉल करें:

      pip install -r requirements.txt
      

   4. रूट डायरेक्ट्री में .vscode/launch.json फ़ाइल बनाएं और Debug Watch नाम का ऐसा लॉन्च कॉन्फ़िगर करें जो वर्चुअल एनवायरमेंट env पर डीबग मोड में पोर्ट 9500 पर मॉड्यूल functions-framework से ऐप्लिकेशन को ट्रिगर करे:

      {
          "version": "0.2.0",
          "configurations": [{
              "type": "python",
              "request": "launch",
              "name": "Debug Watch",
              "python": "${workspaceFolder}/env/bin/python3",
              "module": "functions_framework",
              "args": [
                  "--target", "create_link_preview",
                  "--port", "9500",
                  "--debug"
              ]
          }]
      }
      

   5. ऐसा ब्रेकपॉइंट जोड़ें जो main.py फ़ाइल में, एचटीटीपी अनुरोध की प्रोसेसिंग को रोकता हो. साथ ही, पहले जोड़े गए Debug Watch कॉन्फ़िगरेशन के साथ, चलना और डीबग करना शुरू करें. ऐप्लिकेशन अभी चल रहा है और 9500 पोर्ट पर एचटीटीपी अनुरोधों को सुन रहा है.

      

      तीसरी इमेज. ऐप्लिकेशन, 9500 पोर्ट पर एचटीटीपी अनुरोधों को चला रहा है और सुन रहा है.

2. अपने स्थानीय परिवेश में ngrok ऐप्लिकेशन लॉन्च करें:

   ngrok http --domain=NGROK_STATIC_DOMAIN 9500
   

   अपने ngrok खाते में NGROK_STATIC_DOMAIN को स्टैटिक डोमेन से बदलें. अब सभी अनुरोधों को आपके लोकल एनवायरमेंट और ऐप्लिकेशन के इस्तेमाल किए जाने वाले पोर्ट पर रीडायरेक्ट कर दिया जाता है.

   

   चौथी इमेज. ngrok सर्वर वाला टर्मिनल, जो चल रहा है और रीडायरेक्ट कर रहा है.

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

   

   पांचवी इमेज. ngrok ऐप्लिकेशन पर होस्ट किया गया वेब इंटरफ़ेस, जो कोई एचटीटीपी अनुरोध नहीं दिखा रहा है.

4. टेस्टर खाते की मदद से, नए Google Doc में केस के यूआरएल की झलक देखकर, अपने Google Workspace ऐड-ऑन की जांच करें:

   • नया Google दस्तावेज़ बनाएं.

     नया Google दस्तावेज़ बनाना

   • नीचे दिया गया लिंक लिखें और enter दबाएं:

     https://example.com/support/case/?name=Name1&description=Description1&priority=P1
     

   • लिंक पर क्लिक करें.

5. आपके लोकल एनवायरमेंट के Visual Studio Code में, यह देखा जा सकता है कि सेट किए गए ब्रेकपॉइंट पर प्रोग्राम चलाने की प्रोसेस को रोक दिया गया है.

   

   छठी इमेज. सेट किए गए ब्रेकपॉइंट पर प्रोग्राम चलाने की प्रोसेस को रोक दिया जाता है.

6. अगर Google Workspace ऐड-ऑन का समय खत्म होने से पहले, Visual Studio Code के डीबगर से एक्ज़ीक्यूशन फिर से शुरू किया जाता है, तो Google Workspace ऐड-ऑन की कैश मेमोरी में लिंक की झलक, Google Docs में दिखती है.

7. अपने लोकल एनवायरमेंट में ngrok ऐप्लिकेशन से होस्ट किए गए वेब इंटरफ़ेस से, एचटीटीपी अनुरोध और रिस्पॉन्स लॉग देखे जा सकते हैं.

   

   सातवीं इमेज. ngrok ऐप्लिकेशन पर होस्ट किए गए वेब इंटरफ़ेस से मिला एचटीटीपी अनुरोध.

8. ऐप्लिकेशन का व्यवहार बदलने के लिए, Case को main.py फ़ाइल की Case: इनलाइन 56 से बदलें. फ़ाइल सेव करने पर, Visual Studio Code अपडेट किए गए सोर्स कोड के साथ ऐप्लिकेशन को अपने-आप फिर से लोड करता है और डीबग मोड में बना रहता है.

   

   आठवां इमेज. ऐप्लिकेशन चल रहा है और कोड में बदलाव लोड किए गए 9500 पोर्ट पर एचटीटीपी अनुरोधों को सुन रहा है.

9. इस बार, लिंक पर क्लिक करने और नए Google दस्तावेज़ में कुछ सेकंड का इंतज़ार करने के बजाय, अपने लोकल एनवायरमेंट में ngrok ऐप्लिकेशन से होस्ट किए गए वेब इंटरफ़ेस पर लॉग किए गए आखिरी एचटीटीपी अनुरोध को चुना जा सकता है और Replay पर क्लिक किया जा सकता है. पहले की तरह ही, आपका Google Workspace ऐड-ऑन जवाब नहीं दे रहा है, क्योंकि इसे सक्रिय रूप से डीबग किया जा रहा है.

10. Visual Studio Code के डीबगर से एक्ज़ीक्यूशन फिर से शुरू करने पर, अपने लोकल एनवायरमेंट में ngrok ऐप्लिकेशन पर होस्ट किए गए वेब इंटरफ़ेस से देखा जा सकता है कि ऐप्लिकेशन, झलक दिखाने वाले कार्ड के अपडेट किए गए वर्शन के साथ रिस्पॉन्स जनरेट करता है.

Java

1. अपने लोकल एनवायरमेंट में इंस्टॉल किए गए Visual Studio Code IDE से, ये काम करें:

   1. नई विंडो में, add-ons-samples/java/3p-resources फ़ोल्डर खोलें.

   2. pom.xml फ़ाइल में Cloud फ़ंक्शन फ़्रेमवर्क बिल्ड प्लगिन function-maven-plugin को जोड़कर, 9500 पोर्ट पर ऐप्लिकेशन CreateLinkPreview को स्थानीय तौर पर चलाने के लिए, Maven प्रोजेक्ट को कॉन्फ़िगर करें:

      ...
      <plugin>
          <groupId>com.google.cloud.functions</groupId>
          <artifactId>function-maven-plugin</artifactId>
          <version>0.11.0</version>
          <configuration>
              <functionTarget>CreateLinkPreview</functionTarget>
              <port>9500</port>
          </configuration>
      </plugin>
      ...
      

   3. अब इसे स्थानीय तौर पर डीबग मोड में लॉन्च किया जा सकता है:

      mvnDebug function:run
      Preparing to execute Maven in debug mode
      Listening for transport dt_socket at address: 8000
      

   4. रूट डायरेक्ट्री में .vscode/launch.json फ़ाइल बनाएं और Remote Debug Watch नाम का ऐसा लॉन्च कॉन्फ़िगर करें जो पोर्ट 8000 के साथ पहले लॉन्च किए गए ऐप्लिकेशन से जुड़ा हो:

      {
          "version": "0.2.0",
          "configurations": [{
              "type": "java",
              "request": "attach",
              "name": "Remote Debug Watch",
              "projectName": "http-function",
              "hostName": "localhost",
              "port": 8000
          }]
      }
      

   5. ऐसा ब्रेकपॉइंट जोड़ें जो CreateLinkPreview.java फ़ाइल में, एचटीटीपी अनुरोध की प्रोसेसिंग को रोकता है. साथ ही, पहले जोड़े गए Remote Debug Watch कॉन्फ़िगरेशन के साथ, अटैच और डीबग करना शुरू करें. ऐप्लिकेशन अब चल रहा है और 9500 पोर्ट पर एचटीटीपी अनुरोधों को सुन रहा है.

      

      तीसरी इमेज. वह ऐप्लिकेशन चल रहा है और 9500 पोर्ट पर एचटीटीपी अनुरोधों को सुन रहा है.

2. अपने स्थानीय परिवेश में ngrok ऐप्लिकेशन लॉन्च करें:

   ngrok http --domain=NGROK_STATIC_DOMAIN 9500
   

   अपने ngrok खाते में NGROK_STATIC_DOMAIN को स्टैटिक डोमेन से बदलें. अब सभी अनुरोधों को आपके लोकल एनवायरमेंट और ऐप्लिकेशन के इस्तेमाल किए जाने वाले पोर्ट पर रीडायरेक्ट कर दिया जाता है.

   

   चौथी इमेज. ngrok सर्वर वाला टर्मिनल, जो चल रहा है और रीडायरेक्ट कर रहा है.

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

   

   पांचवी इमेज. ngrok ऐप्लिकेशन पर होस्ट किया गया वेब इंटरफ़ेस, जो कोई एचटीटीपी अनुरोध नहीं दिखा रहा है.

4. टेस्टर खाते की मदद से, नए Google Doc में केस के यूआरएल की झलक देखकर, अपने Google Workspace ऐड-ऑन की जांच करें:

   • नया Google दस्तावेज़ बनाएं.

     नया Google दस्तावेज़ बनाना

   • नीचे दिया गया लिंक लिखें और enter दबाएं:

     https://example.com/support/case/?name=Name1&description=Description1&priority=P1
     

   • लिंक पर क्लिक करें.

5. आपके लोकल एनवायरमेंट के Visual Studio Code में, यह देखा जा सकता है कि सेट किए गए ब्रेकपॉइंट पर प्रोग्राम चलाने की प्रोसेस को रोक दिया गया है.

   

   छठी इमेज. सेट किए गए ब्रेकपॉइंट पर प्रोग्राम चलाने की प्रोसेस को रोक दिया जाता है.

6. अगर Google Workspace ऐड-ऑन का समय खत्म होने से पहले, Visual Studio Code के डीबगर से एक्ज़ीक्यूशन फिर से शुरू किया जाता है, तो Google Workspace ऐड-ऑन की कैश मेमोरी में लिंक की झलक, Google Docs में दिखती है.

7. अपने लोकल एनवायरमेंट में ngrok ऐप्लिकेशन से होस्ट किए गए वेब इंटरफ़ेस से, एचटीटीपी अनुरोध और रिस्पॉन्स लॉग देखे जा सकते हैं.

   

   सातवीं इमेज. ngrok ऐप्लिकेशन पर होस्ट किए गए वेब इंटरफ़ेस से मिला एचटीटीपी अनुरोध.

8. ऐप्लिकेशन के व्यवहार में बदलाव करने के लिए, Case को CreateLinkPreview.java फ़ाइल की Case: इनलाइन 78 से बदलें. इसके बाद, mvnDebug प्रोसेस को रीस्टार्ट करें. साथ ही, Remote Debug Watch को फिर से लॉन्च करके, डीबग को फिर से अटैच करके रीस्टार्ट करें.

9. इस बार, लिंक पर क्लिक करने और नए Google दस्तावेज़ में कुछ सेकंड का इंतज़ार करने के बजाय, अपने लोकल एनवायरमेंट में ngrok ऐप्लिकेशन से होस्ट किए गए वेब इंटरफ़ेस पर लॉग किए गए आखिरी एचटीटीपी अनुरोध को चुना जा सकता है और Replay पर क्लिक किया जा सकता है. पहले की तरह ही, आपका Google Workspace ऐड-ऑन जवाब नहीं दे रहा है, क्योंकि इसे सक्रिय रूप से डीबग किया जा रहा है.

10. Visual Studio Code के डीबगर से एक्ज़ीक्यूशन फिर से शुरू करने पर, अपने लोकल एनवायरमेंट में ngrok ऐप्लिकेशन पर होस्ट किए गए वेब इंटरफ़ेस से देखा जा सकता है कि ऐप्लिकेशन, झलक दिखाने वाले कार्ड के अपडेट किए गए वर्शन के साथ रिस्पॉन्स जनरेट करता है.