Google Chat ऐप्लिकेशन डीबग करना

Google Chat ऐप्लिकेशन के डेवलपर के तौर पर, आपको कोड डीबग करने की ज़रूरत पड़ सकती है. ऐसा बदलावों को टेस्ट करने या मुश्किल समस्याओं को हल करने के लिए किया जाता है. चैट ऐप्लिकेशन को डीबग करने के कई तरीके हैं. ये तरीके, आपके ऐप्लिकेशन के आर्किटेक्चर, ऐप्लिकेशन के काम करने के तरीके, ऐप्लिकेशन को डिप्लॉय करने के तरीके, और आपकी प्राथमिकताओं पर निर्भर करते हैं.

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

लोकल डेवलपमेंट एनवायरमेंट से डीबग करना

इस सेक्शन में, आपको अपने Chat ऐप्लिकेशन से इंटरैक्ट करना होता है. यह ऐप्लिकेशन, आपके लोकल एनवायरमेंट में काम करता है.

लोकल डेवलपमेंट एनवायरमेंट से डीबग करना

पहली इमेज. लोकल डेवलपमेंट एनवायरमेंट में डीबग करें.

वर्कशॉप

Node.js

Python

Java

ज़रूरी शर्तें

Node.js

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

    npm install -g nodemon
  • एचटीटीपी Chat ऐप्लिकेशन, जिसे मैसेज भेजने के लिए कॉन्फ़िगर किया गया हो. क्विकस्टार्ट गाइड में दिए गए इन सेक्शन को पढ़ें: ज़रूरी शर्तें, एनवायरमेंट सेट अप करना, और Google Chat पर ऐप्लिकेशन पब्लिश करना. इनमें सिर्फ़ यह अंतर है कि आपको ऐप्लिकेशन का नाम को Debug App पर और एचटीटीपी एंडपॉइंट यूआरएल को http://example.com जैसे किसी भी यूआरएल पर सेट करना होगा.

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

  • Git इंस्टॉल किया गया हो आपके लोकल एनवायरमेंट में.

  • ngrok खाता.

Python

  • आपके लोकल एनवायरमेंट में, python3 का नया वर्शन इंस्टॉल होना चाहिए.
  • आपके लोकल एनवायरमेंट में pip और virtualenv का नया वर्शन इंस्टॉल होना चाहिए. इनका इस्तेमाल, Python पैकेज और वर्चुअल एनवायरमेंट को मैनेज करने के लिए किया जाता है.
  • मैसेजिंग के लिए कॉन्फ़िगर किया गया एचटीटीपी Chat ऐप्लिकेशन. क्विकस्टार्ट गाइड में दिए गए इन सेक्शन को पढ़ें: ज़रूरी शर्तें, एनवायरमेंट सेट अप करना, और Google Chat पर ऐप्लिकेशन पब्लिश करना. इनमें सिर्फ़ यह अंतर है कि आपको ऐप्लिकेशन का नाम को Debug App पर और एचटीटीपी एंडपॉइंट यूआरएल को http://example.com जैसे किसी भी यूआरएल पर सेट करना होगा.
  • आपके लोकल एनवायरमेंट में सेट अप किया गया ऐसा IDE जो डीबग कर सकता हो. इस गाइड में, उदाहरण के तौर पर Visual Studio Code IDE और इसकी डिफ़ॉल्ट डीबग करने की सुविधाओं का इस्तेमाल किया गया है.
  • Git इंस्टॉल किया गया हो आपके लोकल एनवायरमेंट में.
  • ngrok खाता.
  • आपके लोकल एनवायरमेंट में, gcloud का नया वर्शन इंस्टॉल और शुरू किया गया हो.

Java

  • आपके लोकल एनवायरमेंट में, Java SE 11's JDK का नया और स्टेबल वर्शन इंस्टॉल हो.
  • आपके लोकल एनवायरमेंट में Apache Maven का नया वर्शन इंस्टॉल होना चाहिए. इसका इस्तेमाल Java प्रोजेक्ट मैनेज करने के लिए किया जाता है.
  • मैसेजिंग के लिए कॉन्फ़िगर किया गया एचटीटीपी Chat ऐप्लिकेशन. क्विकस्टार्ट गाइड में दिए गए इन सेक्शन को पढ़ें: ज़रूरी शर्तें, एनवायरमेंट सेट अप करना, और Google Chat पर ऐप्लिकेशन पब्लिश करना. इनमें सिर्फ़ यह अंतर है कि आपको ऐप्लिकेशन का नाम Debug App पर सेट करना होगा. साथ ही, मैसेज ट्रिगर एचटीटीपी एंडपॉइंट यूआरएल को http://example.com जैसे किसी भी यूआरएल पर सेट करना होगा.
  • आपके लोकल एनवायरमेंट में सेट अप किया गया ऐसा IDE जो डीबग कर सकता हो. इस गाइड में, उदाहरण के तौर पर Visual Studio Code IDE और इसकी डिफ़ॉल्ट डीबग करने की सुविधाओं का इस्तेमाल किया गया है.
  • Git इंस्टॉल किया गया हो आपके लोकल एनवायरमेंट में.
  • ngrok खाता.
  • आपके लोकल एनवायरमेंट में, gcloud का नया वर्शन इंस्टॉल और शुरू किया गया हो.

लोकल होस्ट सेवा को सार्वजनिक तौर पर उपलब्ध कराना

आपको अपने लोकल एनवायरमेंट को इंटरनेट से कनेक्ट करना होगा, ताकि Chat ऐप्लिकेशन इसे ऐक्सेस कर सके. ngrok ऐप्लिकेशन का इस्तेमाल, सार्वजनिक यूआरएल पर किए गए एचटीटीपी अनुरोधों को आपके लोकल एनवायरमेंट पर रीडायरेक्ट करने के लिए किया जाता है.

  1. अपने लोकल एनवायरमेंट के ब्राउज़र में, अपने ngrok खाते में साइन इन करें.
  2. ऐप्लिकेशन इंस्टॉल करें और अपने लोकल एनवायरमेंट में authtoken सेट अप करें.
  3. अपने ngrok खाते में एक स्टैटिक डोमेन बनाएं. इस गाइड के निर्देशों में इसे NGROK_STATIC_DOMAIN के तौर पर दिखाया गया है.

Chat ऐप्लिकेशन को कॉन्फ़िगर करना

Chat ऐप्लिकेशन को कॉन्फ़िगर करें, ताकि वह अपने सभी एचटीटीपी अनुरोध आपके स्टैटिक डोमेन पर भेज सके.

  1. Google API Console में, Google Chat API पेज खोलें:

    Google Chat API पेज पर जाएं

  2. कॉन्फ़िगरेशन टैब पर क्लिक करें.

  3. इंटरैक्टिव सुविधाएं > कनेक्शन की सेटिंग > ट्रिगर पर जाएं. इसके बाद, जिन ट्रिगर की जांच करनी है उनके लिए एचटीटीपी एंडपॉइंट यूआरएल सेट करें. जैसे, मैसेज के लिए यह यूआरएल सेट करें:

    https://NGROK_STATIC_DOMAIN
    

    NGROK_STATIC_DOMAIN को अपने ngrok खाते में मौजूद स्टैटिक डोमेन से बदलें.

  4. सेव करें पर क्लिक करें.

Chat ऐप्लिकेशन, अपने सभी एचटीटीपी अनुरोध स्टैटिक डोमेन को भेजता है

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

Chat ऐप्लिकेशन को आज़माना

अपने चैट ऐप्लिकेशन को स्थानीय तौर पर डिप्लॉय, कॉन्फ़िगर, टेस्ट, डीबग, और ऑटो-रीलोड किया जा सकता है.

Node.js

  1. GitHub से googleworkspace/add-ons-samples रिपॉज़िटरी को अपने लोकल एनवायरमेंट में क्लोन करें. इसमें ऐप्लिकेशन का कोड होता है, जिसे एक्ज़ीक्यूट किया जा सकता है:

    git clone https://github.com/googleworkspace/add-ons-samples.git
  2. अपने लोकल एनवायरमेंट में इंस्टॉल किए गए Visual Studio Code IDE में जाकर, यह काम करें:

    1. नई विंडो में, फ़ोल्डर add-ons-samples/node/chat/avatar-app खोलें.
    2. package.json फ़ाइल में दो स्क्रिप्ट जोड़कर, ऐप्लिकेशन को ऑटो-रीलोड डीबग के लिए कॉन्फ़िगर करें:

      {
          ...
          "scripts": {
              ...
              "debug": "node --inspect index.js",
              "debug-watch": "nodemon --watch ./ --exec npm run debug"
          }
          ...
      }
      
    3. रूट डायरेक्ट्री से, ऐप्लिकेशन इंस्टॉल करें:

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

      {
          "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 पर एचटीटीपी अनुरोधों को सुन रहा है.

      ऐप्लिकेशन चल रहा है और पोर्ट `9000` पर एचटीटीपी अनुरोधों को सुन रहा है

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

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

    ngrok http --domain=NGROK_STATIC_DOMAIN 9000

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

    `ngrok` सर्वर चालू है और रीडायरेक्ट कर रहा है

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

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

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

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

  5. Chat ऐप्लिकेशन को डायरेक्ट मैसेज भेजकर, उसकी जांच करें:

    • Google Chat खोलें.

      Google Chat पर जाएं

    • नई चैट पर क्लिक करें.

    • डायलॉग बॉक्स में, अपने Chat ऐप्लिकेशन का नाम डालें.

    • खोज के नतीजों में, अपना Chat ऐप्लिकेशन ढूंढें. इसके बाद, जोड़ें > Chat पर क्लिक करें.

    • डायरेक्ट मैसेज वाले स्पेस में, Hello टाइप करें और enter दबाएं. आपका चैट ऐप्लिकेशन जवाब नहीं देता, क्योंकि इस पर सक्रिय रूप से डीबग किया जा रहा है.

  6. अपने लोकल एनवायरमेंट में Visual Studio Code में, आपको दिखेगा कि सेट किए गए ब्रेकपॉइंट पर एक्ज़ीक्यूशन रुक गया है.

    ब्रेकपॉइंट पर एक्ज़ीक्यूशन को रोक दिया गया है

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

  7. जब Visual Studio Code के डीबगर से फिर से एक्ज़ीक्यूशन शुरू किया जाता है, तो Google Chat, Chat ऐप्लिकेशन के टाइम आउट होने से पहले आपके मैसेज का जवाब देता है.

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

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

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

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

    ऐप्लिकेशन चल रहा है और कोड में बदलाव होने के बाद, पोर्ट `9000` पर एचटीटीपी अनुरोधों को सुन रहा है

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

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

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

Python

  1. ऐप्लिकेशन के डिफ़ॉल्ट क्रेडेंशियल के लिए, नए उपयोगकर्ता के क्रेडेंशियल पाएं:

    gcloud config set project PROJECT_ID
    gcloud auth application-default login

    PROJECT_ID की जगह, ऐप्लिकेशन के क्लाउड प्रोजेक्ट का प्रोजेक्ट आईडी डालें.

  2. GitHub से googleworkspace/add-ons-samples रिपॉज़िटरी को अपने लोकल एनवायरमेंट में क्लोन करें. इसमें ऐप्लिकेशन कोड होता है:

    git clone https://github.com/googleworkspace/add-ons-samples.git
  3. अपने लोकल एनवायरमेंट में इंस्टॉल किए गए Visual Studio Code IDE में जाकर, यह काम करें:

    1. नई विंडो में, फ़ोल्डर add-ons-samples/python/chat/avatar-app खोलें.
    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", "avatar_app",
                  "--port", "9000",
                  "--debug"
              ]
          }]
      }
      
    5. main.py फ़ाइल में एक ऐसा ब्रेकपॉइंट जोड़ें जो एचटीटीपी अनुरोध को प्रोसेस करने के दौरान रुक जाए. इसके बाद, पहले जोड़े गए Debug Watch कॉन्फ़िगरेशन के साथ चलाना और डीबग करना शुरू करें. अब ऐप्लिकेशन चल रहा है और पोर्ट 9000 पर एचटीटीपी अनुरोधों को सुन रहा है.

      ऐप्लिकेशन चल रहा है और पोर्ट `9000` पर एचटीटीपी अनुरोधों को सुन रहा है

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

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

    ngrok http --domain=NGROK_STATIC_DOMAIN 9000

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

    `ngrok` सर्वर चालू है और रीडायरेक्ट कर रहा है

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

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

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

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

  6. Chat ऐप्लिकेशन को डायरेक्ट मैसेज भेजकर, उसकी जांच करें:

    • Google Chat खोलें.

      Google Chat पर जाएं

    • नई चैट पर क्लिक करें.

    • डायलॉग बॉक्स में, अपने Chat ऐप्लिकेशन का नाम डालें.

    • खोज के नतीजों में, अपना Chat ऐप्लिकेशन ढूंढें. इसके बाद, जोड़ें > Chat पर क्लिक करें.

    • डायरेक्ट मैसेज वाले स्पेस में, Hey! टाइप करें और enter दबाएं. आपका चैट ऐप्लिकेशन जवाब नहीं देता, क्योंकि फ़िलहाल इसकी डीबगिंग की जा रही है.

  7. अपने लोकल एनवायरमेंट में Visual Studio Code में, आपको दिखेगा कि सेट किए गए ब्रेकपॉइंट पर एक्ज़ीक्यूशन रुक गया है.

    ब्रेकपॉइंट पर एक्ज़ीक्यूशन को रोक दिया गया है

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

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

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

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

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

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

    ऐप्लिकेशन चल रहा है और कोड में बदलाव होने के बाद, पोर्ट `9000` पर एचटीटीपी अनुरोधों को सुन रहा है

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

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

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

Java

  1. ऐप्लिकेशन के डिफ़ॉल्ट क्रेडेंशियल के लिए, नए उपयोगकर्ता के क्रेडेंशियल पाएं:

    gcloud config set project PROJECT_ID
    gcloud auth application-default login

    PROJECT_ID की जगह, ऐप्लिकेशन के क्लाउड प्रोजेक्ट का प्रोजेक्ट आईडी डालें.

  2. अपने लोकल एनवायरमेंट में, GitHub से googleworkspace/add-ons-samples रिपॉज़िटरी का क्लोन बनाएं. इसमें ऐप्लिकेशन कोड होता है:

    git clone https://github.com/googleworkspace/add-ons-samples.git
  3. अपने लोकल एनवायरमेंट में इंस्टॉल किए गए Visual Studio Code IDE में जाकर, यह काम करें:

    1. नई विंडो में, फ़ोल्डर add-ons-samples/java/chat/avatar-app खोलें.
    2. Maven प्रोजेक्ट को कॉन्फ़िगर करें, ताकि ऐप्लिकेशन App को स्थानीय तौर पर पोर्ट 9000 पर चलाया जा सके. इसके लिए, pom.xml फ़ाइल में Google Cloud Functions Framework build plugin function-maven-plugin जोड़ें:

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

      ऐप्लिकेशन चल रहा है और पोर्ट `9000` पर एचटीटीपी अनुरोधों को सुन रहा है

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

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

    ngrok http --domain=NGROK_STATIC_DOMAIN 9000

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

    `ngrok` सर्वर चालू है और रीडायरेक्ट कर रहा है

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

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

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

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

  6. Chat ऐप्लिकेशन को डायरेक्ट मैसेज भेजकर, उसकी जांच करें:

    • Google Chat खोलें.

      Google Chat पर जाएं

    • नई चैट पर क्लिक करें.

    • डायलॉग बॉक्स में, अपने Chat ऐप्लिकेशन का नाम डालें.

    • खोज के नतीजों में, अपना Chat ऐप्लिकेशन ढूंढें. इसके बाद, जोड़ें > Chat पर क्लिक करें.

    • डायरेक्ट मैसेज वाले स्पेस में, Hey! टाइप करें और enter दबाएं. आपका चैट ऐप्लिकेशन जवाब नहीं देता, क्योंकि फ़िलहाल इसकी डीबगिंग की जा रही है.

  7. अपने लोकल एनवायरमेंट में Visual Studio Code में, आपको दिखेगा कि सेट किए गए ब्रेकपॉइंट पर एक्ज़ीक्यूशन रुक गया है.

    ब्रेकपॉइंट पर एक्ज़ीक्यूशन को रोक दिया गया है

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

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

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

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

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

  10. ऐप्लिकेशन के व्यवहार में बदलाव करने के लिए, App.java फ़ाइल के Hello को Hey इनलाइन 55 से बदलें. इसके बाद, mvnDebug प्रोसेस को रीस्टार्ट करें. साथ ही, Remote Debug Watch को फिर से लॉन्च करके, डीबग करने की सुविधा को फिर से अटैच और रीस्टार्ट करें.

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

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

रिमोट एनवायरमेंट से डीबग करना

इस सेक्शन में, आपको अपने Chat ऐप्लिकेशन से इंटरैक्ट करना है. यह ऐप्लिकेशन, रिमोट एनवायरमेंट पर काम करता है.

रिमोट एनवायरमेंट से डीबग करना

नौवीं इमेज. रिमोट एनवायरमेंट से डीबग करें.

ज़रूरी शर्तें

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

अपने लोकल और रिमोट एनवायरमेंट को कनेक्ट करना

अपने लोकल एनवायरमेंट में, जहां से आपको डीबग क्लाइंट कनेक्शन शुरू करना है वहां एसएसएच टनल सेट अप करें:

ssh -L LOCAL_DEBUG_PORT:localhost:REMOTE_DEBUG_PORT REMOTE_USERNAME@REMOTE_ADDRESS

इनकी जगह ये डालें:

  • LOCAL_DEBUG_PORT: आपके लोकल एनवायरमेंट में मौजूद डीबग पोर्ट.
  • REMOTE_USERNAME: आपके रिमोट एनवायरमेंट में मौजूद उपयोगकर्ता नाम.
  • REMOTE_ADDRESS: आपके रिमोट एनवायरमेंट का पता.
  • REMOTE_DEBUG_PORT: आपके रिमोट एनवायरमेंट में मौजूद डीबग पोर्ट.

आपके लोकल एनवायरमेंट में मौजूद डीबग पोर्ट अब रिमोट एनवायरमेंट में मौजूद डीबग पोर्ट से लिंक हो गया है.

डीबग करना शुरू करें

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

  1. नई विंडो में, अपने ऐप्लिकेशन का सोर्स कोड खोलें.
  2. रूट डायरेक्ट्री में .vscode/launch.json फ़ाइल बनाएं और Debug Remote नाम का एक लॉन्च कॉन्फ़िगर करें. यह लॉन्च, आपके लोकल एनवायरमेंट में डीबग पोर्ट से अटैच होता है:

    Node.js

    {
        "version": "0.2.0",
        "configurations": [{
            "type": "node",
            "request": "attach",
            "name": "Debug Remote",
            "address": "127.0.0.1",
            "port": LOCAL_DEBUG_PORT
        }]
    }
    

    Python

    {
        "version": "0.2.0",
        "configurations": [{
            "type": "python",
            "request": "attach",
            "name": "Debug Remote",
            "connect": {
                "host": "127.0.0.1",
                "port": LOCAL_DEBUG_PORT
            }
        }]
    }
    

    Java

    {
        "version": "0.2.0",
        "configurations": [{
            "type": "java",
            "request": "attach",
            "name": "Debug Remote",
            "hostName": "127.0.0.1",
            "port": LOCAL_DEBUG_PORT
        }]
    }
    

    अपने लोकल एनवायरमेंट में, LOCAL_DEBUG_PORT को डीबग पोर्ट से बदलें.

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

Chat ऐप्लिकेशन के डायरेक्ट मैसेज स्पेस में, वह टेक्स्ट टाइप करें जिसे आपको टेस्ट करना है. इसके बाद, enter दबाएं. आपका चैट ऐप्लिकेशन जवाब नहीं देता, क्योंकि Visual Studio Code IDE में इसकी डीबगिंग की जा रही है.

ऐसे Chat ऐप्लिकेशन जो ऐड-ऑन नहीं हैं: Google Chat ऐप्लिकेशन को डीबग करना

यहां दिया गया दस्तावेज़, उन Chat ऐप्लिकेशन पर लागू होता है जो Google Workspace ऐड-ऑन नहीं हैं. अगर आपको किसी ऐसे Chat ऐप्लिकेशन को माइग्रेट करना है जो ऐड-ऑन नहीं है, तो Chat ऐप्लिकेशन को Google Workspace ऐड-ऑन में बदलना लेख पढ़ें.

अपने लोकल एनवायरमेंट से किसी ऐसे Chat ऐप्लिकेशन को डीबग करने के लिए जो ऐड-ऑन नहीं है:

  • Chat API Configuration टैब में जाकर, Interactive features > Connection settings में, HTTP endpoint URL को चुनें. इसके बाद, HTTP endpoint URL फ़ील्ड को सीधे तौर पर https://<var>NGROK_STATIC_DOMAIN</var> पर सेट करें.
  • Chat ऐप्लिकेशन के लिए सैंपल कोड का इस्तेमाल करें. ये ऐसे ऐड-ऑन नहीं हैं जो googleworkspace/google-chat-samples GitHub रिपॉज़िटरी (google-chat-samples/node/basic-app, google-chat-samples/python/avatar-app या google-chat-samples/java/avatar-app) से जुड़े हों.