Google Chat অ্যাপ ডিবাগ করুন

একজন Google Chat অ্যাপস ডেভেলপার হিসেবে পরিবর্তনগুলি পরীক্ষা করতে বা জটিল সমস্যা সমাধানের জন্য আপনাকে কোড ডিবাগ করতে হতে পারে। আপনার অ্যাপের আর্কিটেকচার, অ্যাপটি কী করে, কীভাবে আপনার অ্যাপ স্থাপন করা হয় এবং আপনার পছন্দের উপর নির্ভর করে চ্যাট অ্যাপগুলিকে ডিবাগ করা বিভিন্ন উপায়ে করা যেতে পারে।

এই পৃষ্ঠাটি ব্যাখ্যা করে যে কীভাবে এনগ্রোক ব্যবহার করে একটি HTTP চ্যাট অ্যাপ ডিবাগ করতে হয়, যা একটি ইউনিফাইড ইনগ্রেস প্ল্যাটফর্ম যা আপনি স্থানীয় উন্নয়ন পরিবেশ পরীক্ষা করতে ব্যবহার করতে পারেন। এই নির্দেশিকায়, আপনি স্থানীয় পরিবেশে কোড পরিবর্তন পরীক্ষা করুন এবং দূরবর্তী পরিবেশে সমস্যা সমাধান করুন।

স্থানীয় উন্নয়ন পরিবেশ থেকে ডিবাগ করুন

এই বিভাগে, আপনি আপনার চ্যাট অ্যাপের সাথে ইন্টারঅ্যাক্ট করেন যা আপনার স্থানীয় পরিবেশে কার্যকর হয়।

স্থানীয় উন্নয়ন থেকে ডিবাগ করুন পরিবেশ

চিত্র 1. স্থানীয় উন্নয়ন পরিবেশে ডিবাগ করুন।

কর্মশালা

Node.js

পাইথন

জাভা

পূর্বশর্ত

Node.js

  • আপনার স্থানীয় পরিবেশে ইনস্টল করা node এবং npm সর্বশেষ সংস্করণ।
  • আপনার স্থানীয় পরিবেশে ইনস্টল করা nodemon সর্বশেষ সংস্করণ, এটি স্বয়ংক্রিয়ভাবে পুনরায় লোড করার উদ্দেশ্যে ব্যবহৃত হয়:

    npm install -g nodemon
  • একটি HTTP চ্যাট অ্যাপ যা বার্তা পাঠানোর জন্য কনফিগার করা হয়েছে। আপনি বিভাগগুলি অনুসরণ করতে পারেন পূর্বশর্তগুলি , পরিবেশ সেট আপ করুন এবং কুইকস্টার্ট গাইডের Google চ্যাটে অ্যাপটি প্রকাশ করুন ৷ শুধুমাত্র পার্থক্য হল যে আপনাকে অ্যাপের নাম Debug App সেট করতে হবে এবং HTTP এন্ডপয়েন্ট ইউআরএলকে http://example.com এর মতো যেকোনো কিছুতে সেট করতে হবে।

  • আপনার স্থানীয় পরিবেশে একটি IDE সেট আপ যা ডিবাগ করতে পারে। আমরা চিত্রের উদ্দেশ্যে এই নির্দেশিকায় Visual Studio Code IDE এবং এর ডিফল্ট ডিবাগিং বৈশিষ্ট্যগুলি ব্যবহার করি।

  • Git আপনার স্থানীয় পরিবেশে ইনস্টল করুন

  • একটি ngrok অ্যাকাউন্ট।

পাইথন

  • আপনার স্থানীয় পরিবেশে python3 এর সর্বশেষ সংস্করণ ইনস্টল করা হয়েছে
  • আপনার স্থানীয় পরিবেশে ইনস্টল করা pip এবং virtualenv এর সর্বশেষ সংস্করণ, এগুলি যথাক্রমে Python প্যাকেজ এবং ভার্চুয়াল পরিবেশ পরিচালনা করতে ব্যবহৃত হয়।
  • একটি HTTP চ্যাট অ্যাপ যা বার্তা পাঠানোর জন্য কনফিগার করা হয়েছে। আপনি বিভাগগুলি অনুসরণ করতে পারেন পূর্বশর্তগুলি , পরিবেশ সেট আপ করুন এবং কুইকস্টার্ট গাইডের Google চ্যাটে অ্যাপটি প্রকাশ করুন ৷ শুধুমাত্র পার্থক্য হল যে আপনাকে অ্যাপের নাম Debug App সেট করতে হবে এবং HTTP এন্ডপয়েন্ট ইউআরএলকে http://example.com এর মতো যেকোনো কিছুতে সেট করতে হবে।
  • আপনার স্থানীয় পরিবেশে একটি IDE সেট আপ যা ডিবাগ করতে পারে। আমরা চিত্রের উদ্দেশ্যে এই নির্দেশিকায় Visual Studio Code IDE এবং এর ডিফল্ট ডিবাগিং বৈশিষ্ট্যগুলি ব্যবহার করি।
  • Git আপনার স্থানীয় পরিবেশে ইনস্টল করুন
  • একটি ngrok অ্যাকাউন্ট।
  • gcloud এর সর্বশেষ সংস্করণ আপনার স্থানীয় পরিবেশে ইনস্টল এবং আরম্ভ করা হয়েছে

জাভা

  • আপনার স্থানীয় পরিবেশে ইনস্টল করা Java SE 11's JDK এর সর্বশেষ স্থিতিশীল সংস্করণ।
  • আপনার স্থানীয় পরিবেশে ইনস্টল করা Apache Maven সর্বশেষ সংস্করণ, এটি জাভা প্রকল্পগুলি পরিচালনা করতে ব্যবহৃত হয়।
  • একটি HTTP চ্যাট অ্যাপ যা বার্তা পাঠানোর জন্য কনফিগার করা হয়েছে। আপনি বিভাগগুলি অনুসরণ করতে পারেন পূর্বশর্তগুলি , পরিবেশ সেট আপ করুন এবং কুইকস্টার্ট গাইডের Google চ্যাটে অ্যাপটি প্রকাশ করুন ৷ শুধুমাত্র পার্থক্য হল যে আপনাকে অ্যাপের নাম Debug App সেট করতে হবে এবং HTTP এন্ডপয়েন্ট ইউআরএলকে http://example.com এর মতো যেকোনো কিছুতে সেট করতে হবে।
  • আপনার স্থানীয় পরিবেশে একটি IDE সেট আপ যা ডিবাগ করতে পারে। আমরা চিত্রের উদ্দেশ্যে এই নির্দেশিকায় Visual Studio Code IDE এবং এর ডিফল্ট ডিবাগিং বৈশিষ্ট্যগুলি ব্যবহার করি।
  • Git আপনার স্থানীয় পরিবেশে ইনস্টল করুন
  • একটি ngrok অ্যাকাউন্ট।
  • gcloud এর সর্বশেষ সংস্করণ আপনার স্থানীয় পরিবেশে ইনস্টল এবং আরম্ভ করা হয়েছে

লোকালহোস্ট পরিষেবা সর্বজনীনভাবে উপলব্ধ করুন

আপনাকে আপনার স্থানীয় পরিবেশকে ইন্টারনেটের সাথে সংযুক্ত করতে হবে যাতে চ্যাট অ্যাপ এটি অ্যাক্সেস করতে পারে। ngrok অ্যাপ্লিকেশনটি আপনার স্থানীয় পরিবেশে একটি সর্বজনীন URL-এ করা HTTP অনুরোধগুলিকে পুনঃনির্দেশ করতে ব্যবহৃত হয়।

  1. আপনার স্থানীয় পরিবেশে একটি ব্রাউজারে, আপনার ngrok অ্যাকাউন্টে সাইন ইন করুন।
  2. অ্যাপ্লিকেশনটি ইনস্টল করুন এবং আপনার স্থানীয় পরিবেশে আপনার authtoken সেট আপ করুন।
  3. আপনার ngrok অ্যাকাউন্টে একটি স্ট্যাটিক ডোমেন তৈরি করুন , এই গাইডের নির্দেশাবলীতে এটিকে NGROK_STATIC_DOMAIN হিসাবে উল্লেখ করা হয়েছে।

চ্যাট অ্যাপ কনফিগার করুন

আপনার স্ট্যাটিক ডোমেনে এর সমস্ত HTTP অনুরোধ পাঠাতে চ্যাট অ্যাপটিকে কনফিগার করুন।

  1. Google ক্লাউড কনসোলে, Google Chat API পৃষ্ঠাটি খুলুন:

    Google Chat API পৃষ্ঠায় যান

  2. কনফিগারেশন ট্যাবে ক্লিক করুন।

  3. ইন্টারেক্টিভ বৈশিষ্ট্য > সংযোগ সেটিংসে যান এবং টেক্সট ফিল্ড HTTP এন্ডপয়েন্ট URL এর মান এতে সেট করুন:

    https://NGROK_STATIC_DOMAIN
    

    আপনার ngrok অ্যাকাউন্টের স্ট্যাটিক ডোমেন দিয়ে NGROK_STATIC_DOMAIN প্রতিস্থাপন করুন।

  4. Save এ ক্লিক করুন।

চ্যাট অ্যাপটি তার সমস্ত HTTP অনুরোধগুলিকে পাঠায়৷ স্ট্যাটিক ডোমেইন

চিত্র 2. চ্যাট অ্যাপটি তার সমস্ত HTTP অনুরোধ স্ট্যাটিক ডোমেনে পাঠায়। ngrok পাবলিক সার্ভিস চ্যাট অ্যাপ এবং স্থানীয়ভাবে কার্যকর করা অ্যাপ্লিকেশন কোডের মধ্যে সেতু হিসেবে কাজ করে।

চ্যাট অ্যাপটি পরীক্ষা করুন

আপনি আপনার চ্যাট অ্যাপ স্থানীয়ভাবে স্থাপন, কনফিগার, পরীক্ষা, ডিবাগ এবং স্বয়ংক্রিয়ভাবে পুনরায় লোড করতে পারেন।

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 ফাইলে HTTP অনুরোধ প্রক্রিয়াকরণকে বিরতি দেয় এবং আগে যোগ করা Debug Watch কনফিগারেশনের সাথে চালানো এবং ডিবাগ করা শুরু করুন । অ্যাপ্লিকেশনটি এখন চলছে এবং 9000 পোর্টে HTTP অনুরোধের জন্য শুনছে।

      অ্যাপ্লিকেশনটি চলছে এবং তে HTTP অনুরোধের জন্য শুনছে৷ পোর্ট `9000`

      চিত্র 3. অ্যাপ্লিকেশনটি চলছে এবং 9000 পোর্টে HTTP অনুরোধের জন্য শুনছে।

  3. আপনার স্থানীয় পরিবেশে ngrok অ্যাপ্লিকেশন চালু করুন:

    ngrok http --domain=NGROK_STATIC_DOMAIN 9000

    আপনার ngrok অ্যাকাউন্টের স্ট্যাটিক ডোমেন দিয়ে NGROK_STATIC_DOMAIN প্রতিস্থাপন করুন। সমস্ত অনুরোধ এখন আপনার স্থানীয় পরিবেশ এবং অ্যাপ্লিকেশন দ্বারা ব্যবহৃত পোর্টে পুনঃনির্দেশিত হয়।

    টার্মিনাল যেখানে `ngrok` সার্ভার চলছে এবং পুনঃনির্দেশ করা

    চিত্র 4. ngrok সার্ভার চলমান এবং পুনঃনির্দেশ সহ টার্মিনাল।

  4. ngrok অ্যাপ্লিকেশন দ্বারা আপনার লোকালহোস্টে একটি ওয়েব ইন্টারফেসও শুরু হয়েছে, আপনি এটি একটি ব্রাউজারে খোলার মাধ্যমে সমস্ত ক্রিয়াকলাপ নিরীক্ষণ করতে পারেন।

    `ngrok` অ্যাপ্লিকেশন দ্বারা হোস্ট করা ওয়েব ইন্টারফেসটিতে কোনো HTTP নেই অনুরোধ

    চিত্র 5. ngrok অ্যাপ্লিকেশন দ্বারা হোস্ট করা ওয়েব ইন্টারফেসটিতে কোনো HTTP অনুরোধ নেই।

  5. আপনার চ্যাট অ্যাপটিকে একটি সরাসরি বার্তা পাঠিয়ে পরীক্ষা করুন:

    • গুগল চ্যাট খুলুন।

      গুগল চ্যাটে যান

    • নতুন চ্যাট ক্লিক করুন.

    • ডায়ালগে, আপনার চ্যাট অ্যাপের নাম লিখুন।

    • অনুসন্ধান ফলাফলে, আপনার চ্যাট অ্যাপ খুঁজুন, যোগ করুন > চ্যাট এ ক্লিক করুন।

    • সরাসরি বার্তার জায়গায়, Hello টাইপ করুন এবং enter টিপুন। আপনার চ্যাট অ্যাপটি উত্তর দেয় না কারণ এটি সক্রিয়ভাবে ডিবাগ করা হচ্ছে।

  6. আপনার স্থানীয় পরিবেশে Visual Studio Code , আপনি দেখতে পাচ্ছেন যে ব্রেকপয়েন্ট সেট করা হয়েছিল সেখানে এক্সিকিউশনটি থামানো হয়েছে।

    যে ব্রেকপয়েন্টে মৃত্যুদন্ড কার্যকর করা বন্ধ করা হয়েছে সেট

    চিত্র 6. যে ব্রেকপয়েন্ট সেট করা হয়েছিল সেখানে এক্সিকিউশন থামানো হয়েছে।

  7. যখন আপনি Google চ্যাটের সময়সীমা শেষ হওয়ার আগে Visual Studio Code ডিবাগার থেকে এক্সিকিউশন পুনরায় শুরু করেন তখন চ্যাট অ্যাপ Your message : Hello

  8. আপনি আপনার স্থানীয় পরিবেশে ngrok অ্যাপ্লিকেশন দ্বারা হোস্ট করা ওয়েব ইন্টারফেস থেকে HTTP অনুরোধ এবং প্রতিক্রিয়া লগগুলি পরীক্ষা করতে পারেন।

    'ngrok' দ্বারা হোস্ট করা ওয়েব ইন্টারফেস থেকে HTTP অনুরোধ আবেদন

    চিত্র 7. ngrok অ্যাপ্লিকেশন দ্বারা হোস্ট করা ওয়েব ইন্টারফেস থেকে HTTP অনুরোধ।

  9. অ্যাপ্লিকেশন আচরণ পরিবর্তন করতে, Your message এখানে index.json এর ইনলাইন 35 Here was your message দিয়ে প্রতিস্থাপন করুন। আপনি যখন ফাইলটি সংরক্ষণ করেন, nodemon স্বয়ংক্রিয়ভাবে আপডেট হওয়া সোর্স কোডের সাথে অ্যাপ্লিকেশনটিকে পুনরায় লোড করে এবং Visual Studio Code ডিবাগ মোডে থাকে।

    অ্যাপ্লিকেশনটি চলছে এবং পোর্টে HTTP অনুরোধের জন্য শুনছে কোড পরিবর্তনের সাথে `9000` লোড

    চিত্র 8. কোড পরিবর্তন লোড সহ পোর্ট 9000 এ অ্যাপ্লিকেশনটি চলছে এবং HTTP অনুরোধের জন্য শুনছে।

  10. এইবার, স্পেসে Hello একটি দ্বিতীয় বার্তা পাঠানোর পরিবর্তে, আপনি আপনার স্থানীয় পরিবেশে ngrok অ্যাপ্লিকেশন দ্বারা হোস্ট করা ওয়েব ইন্টারফেসে লগ করা শেষ HTTP অনুরোধটি নির্বাচন করতে পারেন এবং Replay ক্লিক করতে পারেন। গতবারের মতোই, আপনার চ্যাট অ্যাপটি উত্তর দেয় না কারণ এটি সক্রিয়ভাবে ডিবাগ করা হচ্ছে।

  11. আপনি যখন Visual Studio Code ডিবাগার থেকে এক্সিকিউশন পুনরায় শুরু করেন তখন আপনি আপনার স্থানীয় পরিবেশে ngrok অ্যাপ্লিকেশন দ্বারা হোস্ট করা ওয়েব ইন্টারফেস থেকে দেখতে পাবেন যে অ্যাপ্লিকেশনটি বার্তাটির আপডেট হওয়া সংস্করণের সাথে একটি প্রতিক্রিয়া তৈরি করে Here was your message : Hello

পাইথন

  1. অ্যাপ্লিকেশন ডিফল্ট শংসাপত্রগুলির জন্য ব্যবহার করার জন্য নতুন ব্যবহারকারীর শংসাপত্রগুলি অর্জন করুন:

    gcloud config set project PROJECT_ID
    gcloud auth application-default login

    অ্যাপের ক্লাউড প্রজেক্টের জন্য প্রোজেক্ট আইডি দিয়ে 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 ফাইলে HTTP অনুরোধ প্রক্রিয়াকরণে বিরতি দেয় এবং আগে যোগ করা Debug Watch কনফিগারেশনের সাথে চালানো এবং ডিবাগ করা শুরু করুন । অ্যাপ্লিকেশনটি এখন চলছে এবং 9000 পোর্টে HTTP অনুরোধের জন্য শুনছে।

      অ্যাপ্লিকেশনটি চলছে এবং তে HTTP অনুরোধের জন্য শুনছে৷ পোর্ট `9000`

      চিত্র 3. অ্যাপ্লিকেশনটি চলছে এবং 9000 পোর্টে HTTP অনুরোধের জন্য শুনছে।

  4. আপনার স্থানীয় পরিবেশে ngrok অ্যাপ্লিকেশন চালু করুন:

    ngrok http --domain=NGROK_STATIC_DOMAIN 9000

    আপনার ngrok অ্যাকাউন্টের স্ট্যাটিক ডোমেন দিয়ে NGROK_STATIC_DOMAIN প্রতিস্থাপন করুন। সমস্ত অনুরোধ এখন আপনার স্থানীয় পরিবেশ এবং অ্যাপ্লিকেশন দ্বারা ব্যবহৃত পোর্টে পুনঃনির্দেশিত হয়।

    টার্মিনাল যেখানে `ngrok` সার্ভার চলছে এবং পুনঃনির্দেশ করা

    চিত্র 4. ngrok সার্ভার চলমান এবং পুনঃনির্দেশ সহ টার্মিনাল।

  5. ngrok অ্যাপ্লিকেশন দ্বারা আপনার লোকালহোস্টে একটি ওয়েব ইন্টারফেসও শুরু হয়েছে, আপনি এটি একটি ব্রাউজারে খোলার মাধ্যমে সমস্ত ক্রিয়াকলাপ নিরীক্ষণ করতে পারেন।

    `ngrok` অ্যাপ্লিকেশন দ্বারা হোস্ট করা ওয়েব ইন্টারফেসটিতে কোনো HTTP নেই অনুরোধ

    চিত্র 5. ngrok অ্যাপ্লিকেশন দ্বারা হোস্ট করা ওয়েব ইন্টারফেসটিতে কোনো HTTP অনুরোধ নেই।

  6. আপনার চ্যাট অ্যাপটিকে একটি সরাসরি বার্তা পাঠিয়ে পরীক্ষা করুন:

    • গুগল চ্যাট খুলুন।

      গুগল চ্যাটে যান

    • নতুন চ্যাট ক্লিক করুন.

    • ডায়ালগে, আপনার চ্যাট অ্যাপের নাম লিখুন।

    • অনুসন্ধান ফলাফলে, আপনার চ্যাট অ্যাপ খুঁজুন, যোগ করুন > চ্যাট এ ক্লিক করুন।

    • ডাইরেক্ট মেসেজ স্পেসে টাইপ করুন Hey! এবং enter টিপুন। আপনার চ্যাট অ্যাপটি উত্তর দিচ্ছে না কারণ এটি সক্রিয়ভাবে ডিবাগ করা হচ্ছে।

  7. আপনার স্থানীয় পরিবেশে Visual Studio Code , আপনি দেখতে পাচ্ছেন যে ব্রেকপয়েন্ট সেট করা হয়েছিল সেখানে এক্সিকিউশনটি থামানো হয়েছে।

    যে ব্রেকপয়েন্টে মৃত্যুদন্ড কার্যকর করা বন্ধ করা হয়েছে সেট

    চিত্র 6. যে ব্রেকপয়েন্ট সেট করা হয়েছিল সেখানে এক্সিকিউশন থামানো হয়েছে।

  8. আপনি যখন Google চ্যাটের সময়সীমা শেষ হওয়ার আগে Visual Studio Code ডিবাগার থেকে এক্সিকিউশন পুনরায় শুরু করেন তখন বার্তাটিতে আপনার নাম এবং অবতার ছবি সহ চ্যাট অ্যাপ উত্তর দেয়।

  9. আপনি আপনার স্থানীয় পরিবেশে ngrok অ্যাপ্লিকেশন দ্বারা হোস্ট করা ওয়েব ইন্টারফেস থেকে HTTP অনুরোধ এবং প্রতিক্রিয়া লগগুলি পরীক্ষা করতে পারেন।

    'ngrok' দ্বারা হোস্ট করা ওয়েব ইন্টারফেস থেকে HTTP অনুরোধ আবেদন

    চিত্র 7. ngrok অ্যাপ্লিকেশন দ্বারা হোস্ট করা ওয়েব ইন্টারফেস থেকে HTTP অনুরোধ।

  10. অ্যাপ্লিকেশন আচরণ পরিবর্তন করতে, main.py ফাইলের Hey inline 51 দিয়ে Hello প্রতিস্থাপন করুন। আপনি যখন ফাইলটি সংরক্ষণ করেন, Visual Studio Code স্বয়ংক্রিয়ভাবে আপডেট হওয়া সোর্স কোডের সাথে অ্যাপ্লিকেশনটিকে পুনরায় লোড করে এবং ডিবাগ মোডে থাকে।

    অ্যাপ্লিকেশনটি চলছে এবং পোর্টে HTTP অনুরোধের জন্য শুনছে কোড পরিবর্তনের সাথে `9000` লোড

    চিত্র 8. কোড পরিবর্তন লোড সহ পোর্ট 9000 এ অ্যাপ্লিকেশনটি চলছে এবং HTTP অনুরোধের জন্য শুনছে।

  11. এইবার, দ্বিতীয় বার্তা পাঠানোর পরিবর্তে Hey! স্পেসে, আপনি আপনার স্থানীয় পরিবেশে ngrok অ্যাপ্লিকেশন দ্বারা হোস্ট করা ওয়েব ইন্টারফেসে লগ করা শেষ HTTP অনুরোধটি নির্বাচন করতে পারেন এবং Replay ক্লিক করতে পারেন। গতবারের মতোই, আপনার চ্যাট অ্যাপটি উত্তর দেয় না কারণ এটি সক্রিয়ভাবে ডিবাগ করা হচ্ছে।

  12. আপনি যখন Visual Studio Code ডিবাগার থেকে এক্সিকিউশন পুনরায় শুরু করেন তখন আপনি আপনার স্থানীয় পরিবেশে ngrok অ্যাপ্লিকেশন দ্বারা হোস্ট করা ওয়েব ইন্টারফেস থেকে দেখতে পারেন যে অ্যাপ্লিকেশনটি বার্তাটির আপডেট হওয়া সংস্করণের সাথে একটি প্রতিক্রিয়া তৈরি করে।

জাভা

  1. অ্যাপ্লিকেশন ডিফল্ট শংসাপত্রগুলির জন্য ব্যবহার করার জন্য নতুন ব্যবহারকারীর শংসাপত্রগুলি অর্জন করুন:

    gcloud config set project PROJECT_ID
    gcloud auth application-default login

    অ্যাপের ক্লাউড প্রজেক্টের জন্য প্রোজেক্ট আইডি দিয়ে 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 ফাইলে ক্লাউড ফাংশন ফ্রেমওয়ার্ক বিল্ড প্লাগইন function-maven-plugin যোগ করে স্থানীয়ভাবে পোর্ট 9000 এ অ্যাপ্লিকেশন App চালানোর জন্য 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 ফাইলে HTTP অনুরোধ প্রক্রিয়াকরণে বিরতি দেয় এবং আগে যোগ করা Remote Debug Watch কনফিগারেশনের সাথে সংযুক্ত করা এবং ডিবাগ করা শুরু করুন । অ্যাপ্লিকেশনটি এখন চলছে এবং 9000 পোর্টে HTTP অনুরোধের জন্য শুনছে।

      অ্যাপ্লিকেশনটি চলছে এবং তে HTTP অনুরোধের জন্য শুনছে৷ পোর্ট `9000`

      চিত্র 3. সে অ্যাপ্লিকেশন চলছে এবং 9000 পোর্টে HTTP অনুরোধের জন্য শুনছে।

  4. আপনার স্থানীয় পরিবেশে ngrok অ্যাপ্লিকেশন চালু করুন:

    ngrok http --domain=NGROK_STATIC_DOMAIN 9000

    আপনার ngrok অ্যাকাউন্টের স্ট্যাটিক ডোমেন দিয়ে NGROK_STATIC_DOMAIN প্রতিস্থাপন করুন। সমস্ত অনুরোধ এখন আপনার স্থানীয় পরিবেশ এবং অ্যাপ্লিকেশন দ্বারা ব্যবহৃত পোর্টে পুনঃনির্দেশিত হয়।

    টার্মিনাল যেখানে `ngrok` সার্ভার চলছে এবং পুনঃনির্দেশ করা

    চিত্র 4. ngrok সার্ভার চলমান এবং পুনঃনির্দেশ সহ টার্মিনাল।

  5. ngrok অ্যাপ্লিকেশন দ্বারা আপনার লোকালহোস্টে একটি ওয়েব ইন্টারফেসও শুরু হয়েছে, আপনি এটি একটি ব্রাউজারে খোলার মাধ্যমে সমস্ত ক্রিয়াকলাপ নিরীক্ষণ করতে পারেন।

    `ngrok` অ্যাপ্লিকেশন দ্বারা হোস্ট করা ওয়েব ইন্টারফেসটিতে কোনো HTTP নেই অনুরোধ

    চিত্র 5. ngrok অ্যাপ্লিকেশন দ্বারা হোস্ট করা ওয়েব ইন্টারফেসটিতে কোনো HTTP অনুরোধ নেই।

  6. আপনার চ্যাট অ্যাপটিকে একটি সরাসরি বার্তা পাঠিয়ে পরীক্ষা করুন:

    • গুগল চ্যাট খুলুন।

      গুগল চ্যাটে যান

    • নতুন চ্যাট ক্লিক করুন.

    • ডায়ালগে, আপনার চ্যাট অ্যাপের নাম লিখুন।

    • অনুসন্ধান ফলাফলে, আপনার চ্যাট অ্যাপ খুঁজুন, যোগ করুন > চ্যাট এ ক্লিক করুন।

    • ডাইরেক্ট মেসেজ স্পেসে টাইপ করুন Hey! এবং enter টিপুন। আপনার চ্যাট অ্যাপটি উত্তর দিচ্ছে না কারণ এটি সক্রিয়ভাবে ডিবাগ করা হচ্ছে।

  7. আপনার স্থানীয় পরিবেশে Visual Studio Code , আপনি দেখতে পাচ্ছেন যে ব্রেকপয়েন্ট সেট করা হয়েছিল সেখানে এক্সিকিউশনটি থামানো হয়েছে।

    যে ব্রেকপয়েন্টে মৃত্যুদন্ড কার্যকর করা বন্ধ করা হয়েছে সেট

    চিত্র 6. যে ব্রেকপয়েন্ট সেট করা হয়েছিল সেখানে এক্সিকিউশন থামানো হয়েছে।

  8. আপনি যখন Google চ্যাটের সময়সীমা শেষ হওয়ার আগে Visual Studio Code ডিবাগার থেকে এক্সিকিউশন পুনরায় শুরু করেন তখন বার্তাটিতে আপনার নাম এবং অবতার ছবি সহ চ্যাট অ্যাপ উত্তর দেয়।

  9. আপনি আপনার স্থানীয় পরিবেশে ngrok অ্যাপ্লিকেশন দ্বারা হোস্ট করা ওয়েব ইন্টারফেস থেকে HTTP অনুরোধ এবং প্রতিক্রিয়া লগগুলি পরীক্ষা করতে পারেন।

    'ngrok' দ্বারা হোস্ট করা ওয়েব ইন্টারফেস থেকে HTTP অনুরোধ আবেদন

    চিত্র 7. ngrok অ্যাপ্লিকেশন দ্বারা হোস্ট করা ওয়েব ইন্টারফেস থেকে HTTP অনুরোধ।

  10. অ্যাপ্লিকেশন আচরণ পরিবর্তন করতে, App.java ফাইলের Hey inline 55 দিয়ে Hello প্রতিস্থাপন করুন, mvnDebug প্রক্রিয়া পুনরায় চালু করুন এবং পুনরায় সংযুক্ত করতে এবং ডিবাগিং পুনরায় চালু করতে Remote Debug Watch পুনরায় চালু করুন।

  11. এইবার, দ্বিতীয় বার্তা পাঠানোর পরিবর্তে Hey! স্পেসে, আপনি আপনার স্থানীয় পরিবেশে ngrok অ্যাপ্লিকেশন দ্বারা হোস্ট করা ওয়েব ইন্টারফেসে লগ করা শেষ HTTP অনুরোধটি নির্বাচন করতে পারেন এবং Replay ক্লিক করতে পারেন। গতবারের মতোই, আপনার চ্যাট অ্যাপটি উত্তর দেয় না কারণ এটি সক্রিয়ভাবে ডিবাগ করা হচ্ছে।

  12. আপনি যখন Visual Studio Code ডিবাগার থেকে এক্সিকিউশন পুনরায় শুরু করেন তখন আপনি আপনার স্থানীয় পরিবেশে ngrok অ্যাপ্লিকেশন দ্বারা হোস্ট করা ওয়েব ইন্টারফেস থেকে দেখতে পারেন যে অ্যাপ্লিকেশনটি বার্তাটির আপডেট হওয়া সংস্করণের সাথে একটি প্রতিক্রিয়া তৈরি করে।

দূরবর্তী পরিবেশ থেকে ডিবাগ করুন

এই বিভাগে, আপনি আপনার চ্যাট অ্যাপের সাথে ইন্টারঅ্যাক্ট করেন যা দূরবর্তী পরিবেশে কার্যকর হয়।

রিমোট থেকে ডিবাগ করুন পরিবেশ

চিত্র 9. দূরবর্তী পরিবেশ থেকে ডিবাগ করুন।

পূর্বশর্ত

  • আপনার চ্যাট অ্যাপের সাথে একটি সরাসরি বার্তা স্থান। আপনি Quickstart গাইডের আপনার চ্যাট অ্যাপ পরীক্ষা করুন বিভাগটি অনুসরণ করতে পারেন এবং একটি শুরু করতে আপনার চ্যাট অ্যাপটি অনুসন্ধান করতে পারেন।
  • আপনার অ্যাপ্লিকেশনটি একটি প্রদত্ত পোর্টে ডিবাগার সক্ষম করে আপনার দূরবর্তী পরিবেশে চলছে, এই গাইডের নির্দেশাবলীতে এটিকে REMOTE_DEBUG_PORT হিসাবে উল্লেখ করা হয়েছে৷
  • আপনার স্থানীয় পরিবেশ আপনার দূরবর্তী পরিবেশে ssh করতে পারে।
  • আপনার স্থানীয় পরিবেশে একটি IDE সেট আপ যা ডিবাগ করতে পারে। আমরা চিত্রের উদ্দেশ্যে এই নির্দেশিকায় Visual Studio Code IDE এবং এর ডিফল্ট ডিবাগিং বৈশিষ্ট্যগুলি ব্যবহার করি।

আপনার স্থানীয় এবং দূরবর্তী পরিবেশের সাথে সংযোগ করুন

আপনার স্থানীয় পরিবেশে যেখানে আপনি একটি ডিবাগ ক্লায়েন্ট সংযোগ শুরু করতে চান, একটি SSH টানেল সেট আপ করুন:

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
        }]
    }
    

    পাইথন

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

    জাভা

    {
        "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 কনফিগারেশনের সাথে চলমান এবং ডিবাগ করা শুরু করুন

আপনার চ্যাট অ্যাপের সাথে সরাসরি বার্তার জায়গায়, আপনি যা পরীক্ষা করতে চান তা টাইপ করুন এবং enter টিপুন। আপনার চ্যাট অ্যাপটি উত্তর দেয় না কারণ এটি Visual Studio Code IDE-তে সক্রিয়ভাবে ডিবাগ করা হচ্ছে।