برنامه‌های Google Chat را اشکال‌زدایی کنید

نود جی اس

پایتون

جاوا

نود جی اس

• آخرین نسخه‌های node و npm که در محیط محلی شما نصب شده باشند .

• آخرین نسخه nodemon که در محیط محلی شما نصب شده است ، برای اهداف بارگذاری مجدد خودکار استفاده می‌شود:

  npm install -g nodemon

• یک برنامه چت HTTP که برای پیام‌رسانی پیکربندی شده است. می‌توانید بخش‌های پیش‌نیازها ، راه‌اندازی محیط و انتشار برنامه در گوگل چت را در راهنمای شروع سریع دنبال کنید. تنها تفاوت‌ها این است که باید نام برنامه را Debug App و URL نقطه پایانی HTTP را روی هر چیزی مانند http://example.com تنظیم کنید.

• یک IDE که در محیط محلی شما تنظیم شده باشد و بتواند اشکال‌زدایی کند. ما در این راهنما از IDE Visual Studio Code و ویژگی‌های اشکال‌زدایی پیش‌فرض آن برای اهداف توضیحی استفاده می‌کنیم.

• Git در محیط محلی شما نصب شده باشد .

• یک حساب کاربری ngrok .

پایتون

• آخرین نسخه python3 در محیط محلی شما نصب شده باشد .
• آخرین نسخه pip و virtualenv که در محیط محلی شما نصب شده‌اند، به ترتیب برای مدیریت بسته‌های پایتون و محیط‌های مجازی استفاده می‌شوند.
• یک برنامه چت HTTP که برای پیام‌رسانی پیکربندی شده است. می‌توانید بخش‌های پیش‌نیازها ، راه‌اندازی محیط و انتشار برنامه در گوگل چت را در راهنمای شروع سریع دنبال کنید. تنها تفاوت‌ها این است که باید نام برنامه را Debug App و URL نقطه پایانی HTTP را روی هر چیزی مانند http://example.com تنظیم کنید.
• یک IDE که در محیط محلی شما تنظیم شده باشد و بتواند اشکال‌زدایی کند. ما در این راهنما از IDE Visual Studio Code و ویژگی‌های اشکال‌زدایی پیش‌فرض آن برای اهداف توضیحی استفاده می‌کنیم.
• Git در محیط محلی شما نصب شده باشد .
• یک حساب کاربری ngrok .
• آخرین نسخه gcloud نصب و در محیط محلی شما راه‌اندازی شده است .

جاوا

• آخرین نسخه پایدار Java SE 11's JDK که در محیط محلی شما نصب شده باشد .
• آخرین نسخه Apache Maven که در محیط محلی شما نصب شده است ، برای مدیریت پروژه‌های جاوا استفاده می‌شود.
• یک برنامه چت HTTP که برای پیام‌رسانی پیکربندی شده است. می‌توانید بخش‌های پیش‌نیازها ، راه‌اندازی محیط و انتشار برنامه در گوگل چت را در راهنمای شروع سریع دنبال کنید. تنها تفاوت‌ها این است که باید نام برنامه را Debug App و URL نقطه پایانی HTTP را روی هر چیزی مانند http://example.com تنظیم کنید.
• یک IDE که در محیط محلی شما تنظیم شده باشد و بتواند اشکال‌زدایی کند. ما در این راهنما از IDE Visual Studio Code و ویژگی‌های اشکال‌زدایی پیش‌فرض آن برای اهداف توضیحی استفاده می‌کنیم.
• Git در محیط محلی شما نصب شده باشد .
• یک حساب کاربری ngrok .
• آخرین نسخه gcloud نصب و در محیط محلی شما راه‌اندازی شده است .

نود جی اس

1. مخزن googleworkspace/google-chat-samples را از GitHub به محیط محلی خود کپی کنید، این مخزن شامل کد برنامه‌ای است که باید اجرا شود:

   git clone https://github.com/googleworkspace/google-chat-samples.git

2. از IDE Visual Studio Code نصب شده در محیط محلی خود، موارد زیر را انجام دهید:

   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. یک نقطه توقف (breakpoint) که پردازش درخواست HTTP را متوقف می‌کند در فایل index.js اضافه کنید و با پیکربندی Debug Watch که قبلاً اضافه شده است، اجرا و اشکال‌زدایی را شروع کنید . اکنون برنامه در حال اجرا است و به درخواست‌های HTTP روی پورت 9000 گوش می‌دهد.

      

      شکل ۳. برنامه در حال اجرا و گوش دادن به درخواست‌های HTTP روی پورت 9000 است.

3. برنامه ngrok را در محیط محلی خود اجرا کنید:

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000

   NGROK_STATIC_DOMAIN با دامنه استاتیک در حساب ngrok خود جایگزین کنید. اکنون همه درخواست‌ها به محیط محلی شما و پورت مورد استفاده برنامه هدایت می‌شوند.

   

   شکل ۴. ترمینالی که سرور ngrok در آن در حال اجرا و هدایت است.

4. یک رابط وب نیز توسط برنامه ngrok روی میزبان محلی شما آغاز می‌شود، می‌توانید با باز کردن آن در مرورگر، تمام فعالیت‌ها را رصد کنید.

   

   شکل ۵. رابط وب میزبانی‌شده توسط برنامه ngrok که هیچ درخواست HTTP را نشان نمی‌دهد.

5. برنامه چت خود را با ارسال یک پیام مستقیم آزمایش کنید:

   • گوگل چت را باز کنید.

     به گوگل چت بروید

   • add گپ جدید کلیک کنید.

   • در کادر محاوره‌ای، نام برنامه چت خود را وارد کنید.

   • در نتایج جستجو، برنامه چت خود را پیدا کنید، روی افزودن > چت کلیک کنید.

   • در قسمت پیام‌های مستقیم، Hello را تایپ کنید و enter را بزنید. برنامه چت شما پاسخ نمی‌دهد زیرا به طور فعال در حال اشکال‌زدایی است.

6. در Visual Studio Code در محیط محلی خود، می‌توانید ببینید که اجرا در نقطه توقفی که تنظیم شده بود، متوقف شده است.

   

   شکل ۶. اجرا در نقطه توقفی که تنظیم شده بود، متوقف می‌شود.

7. وقتی قبل از اتمام مهلت زمانی Google Chat، اجرا را از دیباگر Visual Studio Code از سر می‌گیرید، برنامه‌ی Chat به Your message : Hello .

8. می‌توانید گزارش‌های درخواست و پاسخ HTTP را از رابط وب میزبانی‌شده توسط برنامه ngrok در محیط محلی خود بررسی کنید.

   

   شکل ۷. درخواست HTTP از رابط وب میزبانی شده توسط برنامه ngrok .

9. برای تغییر رفتار برنامه، Your message با Here was your message inline 35 از index.json جایگزین کنید. وقتی فایل را ذخیره می‌کنید، nodemon به طور خودکار برنامه را با کد منبع به‌روزرسانی شده مجدداً بارگذاری می‌کند و Visual Studio Code در حالت اشکال‌زدایی باقی می‌ماند.

   

   شکل ۸. برنامه در حال اجرا است و به درخواست‌های HTTP روی پورت 9000 گوش می‌دهد و کد تغییر یافته بارگذاری شده است.

10. این بار، به جای ارسال پیام دوم Hello در فضای خالی، می‌توانید آخرین درخواست HTTP ثبت شده در رابط وب میزبانی شده توسط برنامه ngrok در محیط محلی خود را انتخاب کرده و روی 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. مخزن googleworkspace/google-chat-samples را از GitHub به محیط محلی خود کپی کنید، این مخزن شامل کد برنامه است:

   git clone https://github.com/googleworkspace/google-chat-samples.git

3. از IDE Visual Studio Code نصب شده در محیط محلی خود، موارد زیر را انجام دهید:

   1. در یک پنجره جدید، پوشه google-chat-samples/python/avatar-app را باز کنید.

   2. یک محیط مجازی جدید برای پایتون env ایجاد کنید و آن را فعال کنید:

      virtualenv env
      source env/bin/activate

   3. تمام وابستگی‌های پروژه را با استفاده از pip در محیط مجازی نصب کنید:

      pip install -r requirements.txt

   4. فایل .vscode/launch.json را در دایرکتوری ریشه ایجاد کنید و یک راه‌اندازی به نام Debug Watch پیکربندی کنید که برنامه را از ماژول functions-framework روی پورت 9000 در حالت اشکال‌زدایی در محیط مجازی env راه‌اندازی کند:

      {
          "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. یک نقطه توقف (breakpoint) که پردازش درخواست HTTP را متوقف می‌کند در فایل main.py اضافه کنید و با پیکربندی Debug Watch که قبلاً اضافه شده است، اجرا و اشکال‌زدایی را شروع کنید . اکنون برنامه در حال اجرا است و به درخواست‌های HTTP روی پورت 9000 گوش می‌دهد.

      

      شکل ۳. برنامه در حال اجرا و گوش دادن به درخواست‌های HTTP روی پورت 9000 است.

4. برنامه ngrok را در محیط محلی خود اجرا کنید:

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000

   NGROK_STATIC_DOMAIN با دامنه استاتیک در حساب ngrok خود جایگزین کنید. اکنون همه درخواست‌ها به محیط محلی شما و پورت مورد استفاده برنامه هدایت می‌شوند.

   

   شکل ۴. ترمینالی که سرور ngrok در آن در حال اجرا و هدایت است.

5. یک رابط وب نیز توسط برنامه ngrok روی میزبان محلی شما آغاز می‌شود، می‌توانید با باز کردن آن در مرورگر، تمام فعالیت‌ها را رصد کنید.

   

   شکل ۵. رابط وب میزبانی‌شده توسط برنامه ngrok که هیچ درخواست HTTP را نشان نمی‌دهد.

6. برنامه چت خود را با ارسال یک پیام مستقیم آزمایش کنید:

   • گوگل چت را باز کنید.

     به گوگل چت بروید

   • add گپ جدید کلیک کنید.

   • در کادر محاوره‌ای، نام برنامه چت خود را وارد کنید.

   • در نتایج جستجو، برنامه چت خود را پیدا کنید، روی افزودن > چت کلیک کنید.

   • در قسمت پیام‌های مستقیم، عبارت Hey! را تایپ کنید و enter را بزنید. برنامه چت شما پاسخ نمی‌دهد زیرا به‌طور فعال در حال اشکال‌زدایی است.

7. در Visual Studio Code در محیط محلی خود، می‌توانید ببینید که اجرا در نقطه توقفی که تنظیم شده بود، متوقف شده است.

   

   شکل ۶. اجرا در نقطه توقفی که تنظیم شده بود، متوقف می‌شود.

8. وقتی قبل از اتمام زمان‌بندی Google Chat، اجرا را از طریق دیباگر Visual Studio Code از سر می‌گیرید، برنامه‌ی Chat با نام و تصویر آواتار شما در پیام پاسخ می‌دهد.

9. می‌توانید گزارش‌های درخواست و پاسخ HTTP را از رابط وب میزبانی‌شده توسط برنامه ngrok در محیط محلی خود بررسی کنید.

   

   شکل ۷. درخواست HTTP از رابط وب میزبانی شده توسط برنامه ngrok .

10. برای تغییر رفتار برنامه، Hello در خط 51 فایل main.py با عبارت Hey جایگزین کنید. وقتی فایل را ذخیره می‌کنید، Visual Studio Code به طور خودکار برنامه را با کد منبع به‌روزرسانی شده مجدداً بارگذاری می‌کند و در حالت اشکال‌زدایی باقی می‌ماند.

    

    شکل ۸. برنامه در حال اجرا است و به درخواست‌های HTTP روی پورت 9000 گوش می‌دهد و کد تغییر یافته بارگذاری شده است.

11. این بار، به جای ارسال پیام دوم Hey! در فضای خالی، می‌توانید آخرین درخواست HTTP ثبت‌شده در رابط وب میزبانی‌شده توسط برنامه ngrok در محیط محلی خود را انتخاب کرده و روی Replay کلیک کنید. مانند دفعه قبل، برنامه چت شما پاسخی نمی‌دهد زیرا به‌طور فعال در حال اشکال‌زدایی است.

12. وقتی اجرا را از طریق دیباگر Visual Studio Code از سر می‌گیرید، می‌توانید از رابط وب میزبانی شده توسط برنامه ngrok در محیط محلی خود مشاهده کنید که برنامه پاسخی با نسخه به‌روز شده پیام تولید می‌کند.

جاوا

1. اعتبارنامه‌های کاربر جدید را برای استفاده در اعتبارنامه‌های پیش‌فرض برنامه دریافت کنید:

   gcloud config set project PROJECT_ID
   gcloud auth application-default login

   به جای PROJECT_ID ، شناسه پروژه مربوط به پروژه ابری برنامه را وارد کنید.

2. مخزن googleworkspace/google-chat-samples را از GitHub در محیط محلی خود کپی کنید، این مخزن شامل کد برنامه است:

   git clone https://github.com/googleworkspace/google-chat-samples.git

3. از IDE Visual Studio Code نصب شده در محیط محلی خود، موارد زیر را انجام دهید:

   1. در یک پنجره جدید، پوشه google-chat-samples/java/avatar-app را باز کنید.

   2. پروژه Maven را طوری پیکربندی کنید که App به صورت محلی روی پورت 9000 اجرا کند، برای این کار کافیست function-maven-plugin مربوط به ساخت فریم ورک توابع گوگل کلود را در فایل pom.xml اضافه کنید:

      ...
      <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. اکنون می‌توانید آن را به صورت محلی در حالت اشکال‌زدایی (debug mode) اجرا کنید:

      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. یک نقطه توقف (breakpoint) که پردازش درخواست HTTP را متوقف می‌کند در فایل App.java اضافه کنید و با پیکربندی Remote Debug Watch که قبلاً اضافه شده بود، شروع به اتصال و اشکال‌زدایی کنید . اکنون برنامه در حال اجرا است و به درخواست‌های HTTP روی پورت 9000 گوش می‌دهد.

      

      شکل ۳. برنامه در حال اجرا و گوش دادن به درخواست‌های HTTP روی پورت 9000 است.

4. برنامه ngrok را در محیط محلی خود اجرا کنید:

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000

   NGROK_STATIC_DOMAIN با دامنه استاتیک در حساب ngrok خود جایگزین کنید. اکنون همه درخواست‌ها به محیط محلی شما و پورت مورد استفاده برنامه هدایت می‌شوند.

   

   شکل ۴. ترمینالی که سرور ngrok در آن در حال اجرا و هدایت است.

5. یک رابط وب نیز توسط برنامه ngrok روی میزبان محلی شما آغاز می‌شود، می‌توانید با باز کردن آن در مرورگر، تمام فعالیت‌ها را رصد کنید.

   

   شکل ۵. رابط وب میزبانی‌شده توسط برنامه ngrok که هیچ درخواست HTTP را نشان نمی‌دهد.

6. برنامه چت خود را با ارسال یک پیام مستقیم آزمایش کنید:

   • گوگل چت را باز کنید.

     به گوگل چت بروید

   • add گپ جدید کلیک کنید.

   • در کادر محاوره‌ای، نام برنامه چت خود را وارد کنید.

   • در نتایج جستجو، برنامه چت خود را پیدا کنید، روی افزودن > چت کلیک کنید.

   • در قسمت پیام‌های مستقیم، عبارت Hey! را تایپ کنید و enter را بزنید. برنامه چت شما پاسخ نمی‌دهد زیرا به‌طور فعال در حال اشکال‌زدایی است.

7. در Visual Studio Code در محیط محلی خود، می‌توانید ببینید که اجرا در نقطه توقفی که تنظیم شده بود، متوقف شده است.

   

   شکل ۶. اجرا در نقطه توقفی که تنظیم شده بود، متوقف می‌شود.

8. وقتی قبل از اتمام زمان‌بندی Google Chat، اجرا را از طریق دیباگر Visual Studio Code از سر می‌گیرید، برنامه‌ی Chat با نام و تصویر آواتار شما در پیام پاسخ می‌دهد.

9. می‌توانید گزارش‌های درخواست و پاسخ HTTP را از رابط وب میزبانی‌شده توسط برنامه ngrok در محیط محلی خود بررسی کنید.

   

   شکل ۷. درخواست HTTP از رابط وب میزبانی شده توسط برنامه ngrok .

10. برای تغییر رفتار برنامه، Hello با Hey در خط 55 فایل App.java جایگزین کنید، فرآیند mvnDebug را مجدداً راه‌اندازی کنید و Remote Debug Watch مجدداً راه‌اندازی کنید تا اشکال‌زدایی دوباره متصل و از سر گرفته شود .

11. این بار، به جای ارسال پیام دوم Hey! در فضای خالی، می‌توانید آخرین درخواست HTTP ثبت‌شده در رابط وب میزبانی‌شده توسط برنامه ngrok در محیط محلی خود را انتخاب کرده و روی Replay کلیک کنید. همانند دفعه قبل، برنامه چت شما پاسخی نمی‌دهد زیرا به‌طور فعال در حال اشکال‌زدایی است.

12. وقتی اجرا را از طریق دیباگر Visual Studio Code از سر می‌گیرید، می‌توانید از رابط وب میزبانی شده توسط برنامه ngrok در محیط محلی خود مشاهده کنید که برنامه پاسخی با نسخه به‌روز شده پیام تولید می‌کند.