Google Workspace के एचटीटीपी ऐड-ऑन की जांच करना और उन्हें डीबग करना

Node.js

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

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

  npm install -g nodemon

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

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

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

• ngrok खाता.

• आपके लोकल एनवायरमेंट में, gcloud का नया वर्शन इंस्टॉल और शुरू किया गया हो.

Python

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

Java

• आपके लोकल एनवायरमेंट में Java SE 11's JDK का नया स्टेबल वर्शन इंस्टॉल होना चाहिए.
• आपके लोकल एनवायरमेंट में Apache Maven का नया वर्शन इंस्टॉल होना चाहिए. इसका इस्तेमाल Java प्रोजेक्ट मैनेज करने के लिए किया जाता है.
• Google Cloud प्रोजेक्ट. क्विकस्टार्ट गाइड के ज़रूरी शर्तें और एनवायरमेंट सेट अप करें सेक्शन देखें.
• Google Workspace ऐड-ऑन का कोड, जिसे आपको अपने लोकल एनवायरमेंट में डीबग करना है. इस गाइड में, झलक दिखाने वाले लिंक की सुविधाओं के बारे में बताने के लिए, GitHub रिपॉज़िटरी googleworkspace/add-ons-samples से लिए गए कोड के उदाहरण 3p-resources का इस्तेमाल किया गया है.
• आपके लोकल एनवायरमेंट में ऐसा आईडीई सेट अप होना चाहिए जो डीबग कर सके. इस गाइड में, उदाहरण के तौर पर 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=9000",
              "debug-watch": "nodemon --watch ./ --exec npm start"
          }
          ...
      }
      

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

      npm install

   4. रूट डायरेक्ट्री में .vscode/launch.json फ़ाइल बनाकर, Debug Watch नाम का एक लॉन्च बनाएं और उसे कॉन्फ़िगर करें. यह लॉन्च, स्क्रिप्ट 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 कॉन्फ़िगरेशन के साथ चलाना और डीबग करना शुरू करें. अब ऐप्लिकेशन चल रहा है और पोर्ट 9000 पर एचटीटीपी अनुरोधों को सुन रहा है.

      

2. अपने लोकल एनवायरमेंट में ngrok ऐप्लिकेशन लॉन्च करें:

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000

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

   

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

   

4. टेस्टर खाते से, नए Google दस्तावेज़ में केस के यूआरएल की झलक देखकर, अपने 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 दस्तावेज़ में कैश मेमोरी से लिंक की झलक दिखाता है.

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

   

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

   

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 पर डीबग मोड में पोर्ट 9000 पर मौजूद मॉड्यूल 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", "9000",
                  "--debug"
              ]
          }]
      }
      

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

      

2. अपने लोकल एनवायरमेंट में ngrok ऐप्लिकेशन लॉन्च करें:

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000

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

   

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

   

4. टेस्टर खाते से, नए Google दस्तावेज़ में केस के यूआरएल की झलक देखकर, अपने 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 दस्तावेज़ में कैश मेमोरी से लिंक की झलक दिखाता है.

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

   

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

   

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. ऐप्लिकेशन को स्थानीय तौर पर पोर्ट 9000 पर चलाने के लिए, Maven प्रोजेक्ट को कॉन्फ़िगर करें. इसके लिए, pom.xml फ़ाइल में Cloud Functions Framework build plugin function-maven-plugin जोड़ें:CreateLinkPreview

      ...
      <plugin>
          <groupId>com.google.cloud.functions</groupId>
          <artifactId>function-maven-plugin</artifactId>
          <version>0.11.0</version>
          <configuration>
              <functionTarget>CreateLinkPreview</functionTarget>
              <port>9000</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 कॉन्फ़िगरेशन के साथ अटैच करना और डीबग करना शुरू करें. ऐप्लिकेशन अब चल रहा है और पोर्ट 9000 पर एचटीटीपी अनुरोधों को सुन रहा है.

      

2. अपने लोकल एनवायरमेंट में ngrok ऐप्लिकेशन लॉन्च करें:

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000

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

   

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

   

4. टेस्टर खाते से, नए Google दस्तावेज़ में केस के यूआरएल की झलक देखकर, अपने 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 दस्तावेज़ में कैश मेमोरी से लिंक की झलक दिखाता है.

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

   

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

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

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