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

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

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

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

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

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

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

वर्कशॉप

Node.js

Python

Java

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

Node.js

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

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

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

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

  • ngrok खाता.

Python

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

Java

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

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

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

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

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

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

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

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

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

  3. इंटरैक्टिव सुविधाएं > कनेक्शन सेटिंग पर जाएं और टेक्स्ट फ़ील्ड एचटीटीपी एंडपॉइंट यूआरएल की वैल्यू को इन पर सेट करें:

    https://NGROK_STATIC_DOMAIN
    

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

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

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

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

Chat ऐप्लिकेशन की जांच करना

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

Node.js

  1. GitHub से googleworkspace/google-chat-samples डेटा स्टोर करने की जगह को क्लोन करके, अपने स्थानीय एनवायरमेंट में इंपोर्ट करें. इसमें, ऐप्लिकेशन को चलाने के लिए कोड शामिल होता है:

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

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

      {
          ...
          "scripts": {
              ...
              "debug": "node --inspect index.js",
              "debug-watch": "nodemon --watch ./ --exec npm run debug"
          }
          ...
      }
      
    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 कॉन्फ़िगरेशन के साथ रनिंग और डिबगिंग शुरू करें. अब ऐप्लिकेशन 9000 पोर्ट पर, एचटीटीपी अनुरोधों को सुन रहा है और उन्हें प्रोसेस कर रहा है.

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

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

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

    ngrok http --domain=NGROK_STATIC_DOMAIN 9000

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

    `ngrok` सर्वर के साथ चलने वाला टर्मिनल और फिर से डायरेक्ट करने वाला टर्मिनल

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

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

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

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

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

    • Google Chat खोलें.

      Google Chat पर जाएं

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

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

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

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

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

    कोड को उस ब्रेकपॉइंट पर रोक दिया जाता है जिसे सेट किया गया था

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

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

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

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

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

  9. ऐप्लिकेशन के काम करने के तरीके में बदलाव करने के लिए, Your message को index.json के Here was your message इन-लाइन 35 से बदलें. फ़ाइल सेव करने पर, nodemon अपडेट किए गए सोर्स कोड के साथ ऐप्लिकेशन को अपने-आप रीलोड कर देता है और Visual Studio Code डीबग मोड में बना रहता है.

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

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

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

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

Python

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

    gcloud config set project PROJECT_ID
    gcloud auth application-default login

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

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

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

    1. नई विंडो में, फ़ोल्डर google-chat-samples/python/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. अपने चैट ऐप्लिकेशन को डायरेक्ट मैसेज भेजकर, उसकी जांच करें:

    • Google Chat खोलें.

      Google Chat पर जाएं

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

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

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

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

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

    कोड को उस ब्रेकपॉइंट पर रोक दिया जाता है जिसे सेट किया गया था

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

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

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

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

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

  10. ऐप्लिकेशन के काम करने के तरीके में बदलाव करने के लिए, Hello को main.py फ़ाइल के Hey इनलाइन 51 से बदलें. फ़ाइल सेव करने पर, 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

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

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

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

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

      ...
      <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. अपने चैट ऐप्लिकेशन को डायरेक्ट मैसेज भेजकर, उसकी जांच करें:

    • Google Chat खोलें.

      Google Chat पर जाएं

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

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

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

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

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

    कोड को उस ब्रेकपॉइंट पर रोक दिया जाता है जिसे सेट किया गया था

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Chat ऐप्लिकेशन में डायरेक्ट मैसेज स्पेस. शुरुआती गाइड में, Chat ऐप्लिकेशन की जांच करें सेक्शन को फ़ॉलो करें. इसके बाद, Chat ऐप्लिकेशन खोजें और स्पेस बनाएं.
  • आपका ऐप्लिकेशन, आपके रिमोट एनवायरमेंट में किसी पोर्ट पर डीबगर चालू करके चल रहा है. इस गाइड के निर्देशों में, इसका रेफ़रंस REMOTE_DEBUG_PORT के तौर पर दिया गया है.
  • आपका लोकल एनवायरमेंट, आपके रिमोट एनवायरमेंट को ssh कर सकता है.
  • आपके स्थानीय एनवायरमेंट में सेट अप किया गया ऐसा आईडीई जो डीबग कर सकता है. हम इस गाइड में, उदाहरण के तौर पर 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. अपने ऐप्लिकेशन के सोर्स कोड में ब्रेकपॉइंट जोड़ें, जो HTTP अनुरोध की प्रोसेसिंग को रोक दे. साथ ही, पहले जोड़े गए Debug Remote कॉन्फ़िगरेशन के साथ रनिंग और डिबगिंग शुरू करें.

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