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

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

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

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

इस सेक्शन में, आपके उस Chat ऐप्लिकेशन के साथ इंटरैक्ट किया जाता है जो आपके आस-पास के इलाके में काम करता है.

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

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

वर्कशॉप

Node.js

Python

Java

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

Node.js

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

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

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

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

  • एक ngrok खाता.

Python

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

Java

  • आपके लोकल एनवायरमेंट में इंस्टॉल किए गए Java SE 11's JDK का नया और स्टेबल वर्शन.
  • Apache Maven का सबसे नया वर्शन जो आपके लोकल एनवायरमेंट में इंस्टॉल है. इसका इस्तेमाल Java प्रोजेक्ट मैनेज करने के लिए किया जाता है.
  • ऐसा एचटीटीपी चैट ऐप्लिकेशन जिसे मैसेज भेजने के लिए कॉन्फ़िगर किया गया हो. यहां दिए गए सेक्शन में दिए गए हैं: ज़रूरी शर्तें, एनवायरमेंट सेट अप करना, और क्विकस्टार्ट गाइड के ऐप्लिकेशन को Google Chat पर पब्लिश करना. सिर्फ़ अंतर यह है कि आपको ऐप्लिकेशन का नाम को Debug App और ऐप्लिकेशन यूआरएल को http://example.com जैसी किसी भी चीज़ पर सेट करना होगा.
  • आपके लोकल एनवायरमेंट में एक IDE सेट अप किया गया है, जो डीबग कर सकता है. हम इस गाइड में, Visual Studio Code आईडीई और इसकी डिफ़ॉल्ट डीबगिंग सुविधाओं का इस्तेमाल इस गाइड में दिखाने के लिए करते हैं.
  • 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 खाते में मौजूद NGROK_STATIC_DOMAIN को स्टैटिक डोमेन से बदलें.

  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 खाते में मौजूद NGROK_STATIC_DOMAIN को स्टैटिक डोमेन से बदलें. सभी अनुरोध अब आपके डिवाइस के लोकल एनवायरमेंट और ऐप्लिकेशन में इस्तेमाल किए जाने वाले पोर्ट पर रीडायरेक्ट कर दिए जाते हैं.

    टर्मिनल, जिसमें `ngrok` सर्वर चल रहा है और दूसरे वेबलिंक पर भेज रहा है

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

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

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

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

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

    • 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", "hello_chat",
                  "--port", "9000",
                  "--debug"
              ]
          }]
      }
      
    5. ऐसा ब्रेकपॉइंट जोड़ें जो main.py फ़ाइल में, एचटीटीपी अनुरोध की प्रोसेसिंग को रोकता हो. साथ ही, पहले जोड़े गए Debug Watch कॉन्फ़िगरेशन की मदद से, रनिंग और डीबग करना शुरू करें. यह ऐप्लिकेशन अब 9000 पोर्ट पर एचटीटीपी अनुरोधों को सुन रहा है और चालू कर रहा है.

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

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

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

    ngrok http --domain=NGROK_STATIC_DOMAIN 9000
    

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

    टर्मिनल, जिसमें `ngrok` सर्वर चल रहा है और दूसरे वेबलिंक पर भेज रहा है

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

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

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

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

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

    • 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. ऐप्लिकेशन के व्यवहार को बदलने के लिए, main.py फ़ाइल के Hello को 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 Framework बिल्ड प्लग इन function-maven-plugin जोड़कर, पोर्ट 9000 पर HelloChat ऐप्लिकेशन को स्थानीय तौर पर चलाने के लिए, Maven प्रोजेक्ट को कॉन्फ़िगर करें:

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

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

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

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

    ngrok http --domain=NGROK_STATIC_DOMAIN 9000
    

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

    टर्मिनल, जिसमें `ngrok` सर्वर चल रहा है और दूसरे वेबलिंक पर भेज रहा है

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

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

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

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

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

    • 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 को HelloChat.java फ़ाइल की 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 आईडीई और इसकी डिफ़ॉल्ट डीबगिंग सुविधाओं का इस्तेमाल करते हैं.

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

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

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 दबाएं. आपका Chat ऐप्लिकेशन जवाब नहीं दे रहा है, क्योंकि उसे Visual Studio Code IDE में डीबग किया जा रहा है.