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

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

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

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

এই অংশে, আপনি আপনার চ্যাট অ্যাপটির সাথে ইন্টারঅ্যাক্ট করেন, যেটি আপনার লোকাল এনভায়রনমেন্টে চালু থাকে।

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

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

কর্মশালা

নোড.জেএস

পাইথন

জাভা

পূর্বশর্ত

নোড.জেএস

পাইথন

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

জাভা

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

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

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

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

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

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

    গুগল চ্যাট এপিআই পৃষ্ঠায় যান

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

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

    https://NGROK_STATIC_DOMAIN
    

    NGROK_STATIC_DOMAIN জায়গায় আপনার ngrok অ্যাকাউন্টের স্ট্যাটিক ডোমেইনটি বসান।

  4. সংরক্ষণ করুন- এ ক্লিক করুন।

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

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

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

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

নোড.জেএস

  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. রুট ডিরেক্টরিতে .vscode/launch.json ফাইলটি তৈরি করে Debug Watch নামের একটি লঞ্চ তৈরি ও কনফিগার করুন, যা debug-watch স্ক্রিপ্টটিকে ট্রিগার করবে:

      {
          "version": "0.2.0",
          "configurations": [{
              "type": "node",
              "request": "launch",
              "name": "Debug Watch",
              "cwd": "${workspaceRoot}",
              "runtimeExecutable": "npm",
              "runtimeArgs": ["run-script", "debug-watch"]
          }]
      }
      
    5. index.js ফাইলে একটি ব্রেকপয়েন্ট যোগ করুন যা HTTP অনুরোধ প্রক্রিয়াকরণকে থামিয়ে দেবে, এবং পূর্বে যোগ করা Debug Watch কনফিগারেশন ব্যবহার করে অ্যাপ্লিকেশনটি চালানো ও ডিবাগ করা শুরু করুন । অ্যাপ্লিকেশনটি এখন চলছে এবং 9000 পোর্টে HTTP অনুরোধের জন্য অপেক্ষা করছে।

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

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

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

    ngrok http --domain=NGROK_STATIC_DOMAIN 9000

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

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

    চিত্র ৪। টার্মিনালটি যেখানে ngrok সার্ভার চলছে এবং রিডাইরেক্ট করছে।

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

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

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

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

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

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

    • নতুন চ্যাট -এ ক্লিক করুন।

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

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

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

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

    সেট করা ব্রেকপয়েন্টে এক্সিকিউশনটি থামানো হয়েছে।

    চিত্র ৬। নির্ধারিত ব্রেকপয়েন্টে প্রোগ্রামটি থামানো হয়েছে।

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

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

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

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

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

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

    চিত্র ৮। অ্যাপ্লিকেশনটা চলছে এবং কোড পরিবর্তনটি লোড হওয়ার পর 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 নামের একটি লঞ্চ কনফিগার করুন, যা functions-framework মডিউল থেকে অ্যাপ্লিকেশনটিকে env ভার্চুয়াল এনভায়রনমেন্টের 9000 পোর্টে ডিবাগ মোডে ট্রিগার করবে।

      {
          "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 অনুরোধের জন্য অপেক্ষা করছে।

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

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

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

    ngrok http --domain=NGROK_STATIC_DOMAIN 9000

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

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

    চিত্র ৪। টার্মিনালটি যেখানে ngrok সার্ভার চলছে এবং রিডাইরেক্ট করছে।

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

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

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

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

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

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

    • নতুন চ্যাট -এ ক্লিক করুন।

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

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

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

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

    সেট করা ব্রেকপয়েন্টে এক্সিকিউশনটি থামানো হয়েছে।

    চিত্র ৬। নির্ধারিত ব্রেকপয়েন্টে প্রোগ্রামটি থামানো হয়েছে।

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

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

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

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

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

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

    চিত্র ৮। অ্যাপ্লিকেশনটা চলছে এবং কোড পরিবর্তনটি লোড হওয়ার পর 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 ফাইলে Google Cloud Functions Framework-এর বিল্ড প্লাগইন function-maven-plugin যোগ করে Maven প্রজেক্টটি কনফিগার করুন, যাতে App স্থানীয়ভাবে 9000 পোর্টে চলে।

      ...
      <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 অনুরোধের জন্য অপেক্ষা করছে।

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

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

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

    ngrok http --domain=NGROK_STATIC_DOMAIN 9000

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

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

    চিত্র ৪। টার্মিনালটি যেখানে ngrok সার্ভার চলছে এবং রিডাইরেক্ট করছে।

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

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

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

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

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

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

    • নতুন চ্যাট -এ ক্লিক করুন।

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

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

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

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

    সেট করা ব্রেকপয়েন্টে এক্সিকিউশনটি থামানো হয়েছে।

    চিত্র ৬। নির্ধারিত ব্রেকপয়েন্টে প্রোগ্রামটি থামানো হয়েছে।

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

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

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

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

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

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

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

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

এই অংশে, আপনি আপনার চ্যাট অ্যাপটির সাথে যোগাযোগ করেন, যা একটি দূরবর্তী পরিবেশে চালু থাকে।

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

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

পূর্বশর্ত

  • আপনার চ্যাট অ্যাপে সরাসরি মেসেজ পাঠানোর একটি জায়গা। আপনি কুইকস্টার্ট গাইডের ' আপনার চ্যাট অ্যাপ পরীক্ষা করুন' অংশটি অনুসরণ করে আপনার চ্যাট অ্যাপটি খুঁজে নিয়ে একটি নতুন চ্যাট অ্যাপ চালু করতে পারেন।
  • আপনার অ্যাপ্লিকেশনটি যখন আপনার রিমোট এনভায়রনমেন্টে একটি নির্দিষ্ট পোর্টে ডিবাগার সক্রিয় করে চলে, তখন এই গাইডের নির্দেশাবলীতে সেটিকে 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 নামের একটি লঞ্চ কনফিগার করুন যা আপনার লোকাল এনভায়রনমেন্টের ডিবাগ পোর্টের সাথে সংযুক্ত হবে:

    নোড.জেএস

    {
        "version": "0.2.0",
        "configurations": [{
            "type": "node",
            "request": "attach",
            &quot;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",
            &quot;name": &quot;Debug Remote",
            "hostName": "127.0.0.1",
            "port": LOCAL_DEBUG_PORT
        }]
    }
    

    LOCAL_DEBUG_PORT জায়গায় আপনার স্থানীয় পরিবেশের ডিবাগ পোর্টটি বসান।

  3. আপনার অ্যাপের সোর্স কোডে একটি ব্রেকপয়েন্ট যোগ করুন যা HTTP অনুরোধ প্রক্রিয়াকরণকে থামিয়ে দেবে, এবং পূর্বে যোগ করা Debug Remote কনফিগারেশন ব্যবহার করে চালানো ও ডিবাগ করা শুরু করুন

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