تصحيح الأخطاء في تطبيقات Google Chat

Node.js

Python

Java

Node.js

• أحدث إصدار من "node" و"npm" مثبتة في بيئتك المحلية.

• تم تثبيت أحدث إصدار من "nodemon" في جهازك. يتم استخدامها لأغراض إعادة التحميل التلقائي:

  npm install -g nodemon
  

• تطبيق HTTP في Chat تم ضبطه على المراسلة. يمكنك متابعة هذه الأقسام المتطلّبات الأساسية إعداد البيئة، ونشر التطبيق على Google الدردشة من دليل البدء السريع الاختلاف هو أنك بحاجة إلى ضبط اسم التطبيق على Debug App عنوان URL للتطبيق إلى أي عنصر مثل http://example.com.

• خادم IDE تم إعداده في بيئتك المحلية ويمكنه تصحيح الأخطاء. نستخدم دالة sort_values Visual Studio Code IDE والأداة التلقائية تصحيح الأخطاء في هذا الدليل لأغراض التوضيح.

• Git مثبت في بيئتك المحلية.

• حساب على ngrok

Python

• أحدث إصدار من "python3" مثبت في بيئتك المحلية.
• أحدث إصدار من pip تم تثبيت virtualenv في بيئة محلية، فهي تُستخدم لإدارة حزم البايثون على التوالي.
• تطبيق HTTP في Chat تم ضبطه على المراسلة. يمكنك متابعة هذه الأقسام المتطلّبات الأساسية إعداد البيئة، ونشر التطبيق على Google الدردشة من دليل البدء السريع الاختلاف هو أنك بحاجة إلى ضبط اسم التطبيق على Debug App عنوان URL للتطبيق إلى أي عنصر مثل http://example.com.
• خادم IDE تم إعداده في بيئتك المحلية ويمكنه تصحيح الأخطاء. نستخدم دالة sort_values Visual Studio Code IDE والأداة التلقائية تصحيح الأخطاء في هذا الدليل لأغراض التوضيح.
• Git مثبت في بيئتك المحلية.
• حساب على ngrok
• أحدث إصدار من "gcloud" مثبت وتم إعدادها في البيئة المحلية.

Java

• أحدث إصدار ثابت من "Java SE 11's JDK" مثبّتة في جهازك محددة.
• أحدث إصدار من "Apache Maven" مثبتة في بيئتك المحلية، يتم استخدامها لإدارة مشروعات Java.
• تطبيق HTTP في Chat تم ضبطه على المراسلة. يمكنك متابعة هذه الأقسام المتطلّبات الأساسية إعداد البيئة، ونشر التطبيق على Google الدردشة من دليل البدء السريع الاختلاف هو أنك بحاجة إلى ضبط اسم التطبيق على Debug App عنوان URL للتطبيق إلى أي عنصر مثل http://example.com.
• خادم IDE تم إعداده في بيئتك المحلية ويمكنه تصحيح الأخطاء. نستخدم دالة sort_values Visual Studio Code IDE والأداة التلقائية تصحيح الأخطاء في هذا الدليل لأغراض التوضيح.
• Git مثبت في بيئتك المحلية.
• حساب على ngrok
• أحدث إصدار من "gcloud" مثبت وتم إعدادها في البيئة المحلية.

Node.js

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" تؤدي إلى تشغيل البرنامج النصي debug-watch من خلال إنشاء الملف .vscode/launch.json في الدليل الجذري:

      {
          "version": "0.2.0",
          "configurations": [{
              "type": "node",
              "request": "launch",
              "name": "Debug Watch",
              "cwd": "${workspaceRoot}",
              "runtimeExecutable": "npm",
              "runtimeArgs": ["run-script", "debug-watch"]
          }]
      }
      

   5. إضافة نقطة توقف توقف معالجة طلب HTTP مؤقتًا index.js، وبدء التشغيل تصحيح الأخطاء باستخدام تمت إضافة إعدادات Debug Watch من قبل. أصبح التطبيق الآن قيد التشغيل والاستماع إلى طلبات HTTP على المنفذ 9000.

      

      الشكل 3. التطبيق يعمل ويستمع إلى بروتوكول HTTP الطلبات على المنفذ 9000.

3. تشغيل تطبيق ngrok في بيئتك المحلية:

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000
   

   استبدل NGROK_STATIC_DOMAIN بالنطاق الثابت في حسابك على ngrok. تتم الآن إعادة توجيه جميع الطلبات إلى دليل البيئة والمنفذ الذي يستخدمه التطبيق.

   

   الشكل 4. الوحدة الطرفية التي يعمل خادم ngrok فيها قيد التشغيل وتُعيد التوجيه.

4. يتم أيضًا بدء واجهة ويب على مضيفك المحلي من خلال ngrok. يمكنك مراقبة جميع الأنشطة من خلال فتحه في متصفح.

   

   الشكل 5. واجهة الويب التي يستضيفها تطبيق "ngrok" عدم عرض أي طلبات HTTP.

5. اختبار تطبيق Chat من خلال إرسال رسالة مباشرة الرسالة:

   • افتح Google Chat.

     الانتقال إلى Google Chat

   • انقر على رمز محادثة جديدة add.

   • في مربع الحوار، أدخل اسم تطبيق Chat

   • ضمن نتائج البحث، ابحث عن تطبيق Chat، انقر على إضافة > الدردشة

   • في مساحة الرسائل المباشرة، اكتب Hello واضغط على enter. إنّ لا يردّ تطبيق Chat لأنّه قيد المراجعة. تصحيح الأخطاء بشكل نشط.

6. في Visual Studio Code في بيئتك المحلية، يمكنك ملاحظة ما يلي: يتم إيقاف التنفيذ مؤقتًا عند نقطة التوقف التي تم تعيينها.

   

   الشكل 6. يتم إيقاف التنفيذ مؤقتًا عند نقطة الإيقاف التي تم ضبطها.

7. عند استئناف التنفيذ من برنامج تصحيح أخطاء Visual Studio Code قبل انتهاء مهلة Google Chat لتطبيق Chat الردود Your message : Hello.

8. يمكنك التحقق من طلب HTTP وسجلات الاستجابة من واجهة الويب مستضاف من خلال تطبيق ngrok في بيئتك المحلية.

   

   الشكل 7. طلب HTTP من واجهة الويب التي تستضيفها تطبيق "ngrok".

9. لتغيير سلوك التطبيق، استبدِل Your message بـ Here was your message مضمّن 35 من index.json. عند الحفظ الملف، يعيد nodemon تحميل التطبيق تلقائيًا رمز المصدر المعدَّل وسيبقى Visual Studio Code في وضع تصحيح الأخطاء.

   

   الشكل 8. التطبيق قيد التشغيل ويستمع إلى طلبات HTTP في المنفذ 9000 مع تحميل تغيير الرمز.

10. هذه المرة، بدلاً من إرسال رسالة ثانية Hello في المساحة، يمكنك يمكن تحديد آخر طلب HTTP تم تسجيله على واجهة الويب المستضافة بواسطة تطبيق 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
   

   استبدال 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. يمكنك إنشاء بيئة افتراضية جديدة للغة Python 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", "hello_chat",
                  "--port", "9000",
                  "--debug"
              ]
          }]
      }
      

   5. إضافة نقطة توقف توقف معالجة طلب HTTP مؤقتًا main.py، وبدء التشغيل تصحيح الأخطاء باستخدام تمت إضافة إعدادات Debug Watch من قبل. أصبح التطبيق الآن قيد التشغيل والاستماع إلى طلبات HTTP على المنفذ 9000.

      

      الشكل 3. التطبيق يعمل ويستمع إلى بروتوكول HTTP الطلبات على المنفذ 9000.

4. تشغيل تطبيق ngrok في بيئتك المحلية:

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000
   

   استبدل NGROK_STATIC_DOMAIN بالنطاق الثابت في حسابك على ngrok. تتم الآن إعادة توجيه جميع الطلبات إلى دليل البيئة والمنفذ الذي يستخدمه التطبيق.

   

   الشكل 4. الوحدة الطرفية التي يعمل خادم ngrok فيها قيد التشغيل وتُعيد التوجيه.

5. يتم أيضًا بدء واجهة ويب على مضيفك المحلي من خلال ngrok. يمكنك مراقبة جميع الأنشطة من خلال فتحه في متصفح.

   

   الشكل 5. واجهة الويب التي يستضيفها تطبيق "ngrok" عدم عرض أي طلبات HTTP.

6. اختبار تطبيق Chat من خلال إرسال رسالة مباشرة الرسالة:

   • افتح Google Chat.

     الانتقال إلى Google Chat

   • انقر على رمز محادثة جديدة add.

   • في مربع الحوار، أدخل اسم تطبيق Chat

   • ضمن نتائج البحث، ابحث عن تطبيق Chat، انقر على إضافة > الدردشة

   • في مساحة الرسائل المباشرة، اكتب Hey! واضغط على enter. إنّ تطبيق Chat لا يستجيب لأنّه قيد التشغيل تصحيح الأخطاء بشكل نشط.

7. في Visual Studio Code في بيئتك المحلية، يمكنك ملاحظة ما يلي: يتم إيقاف التنفيذ مؤقتًا عند نقطة التوقف التي تم تعيينها.

   

   الشكل 6. يتم إيقاف التنفيذ مؤقتًا عند نقطة الإيقاف التي تم ضبطها.

8. عند استئناف التنفيذ من برنامج تصحيح أخطاء Visual Studio Code قبل انتهاء مهلة Google Chat لتطبيق Chat الردود مع اسمك وصورتك الرمزية في الرسالة.

9. يمكنك التحقق من طلب HTTP وسجلات الاستجابة من واجهة الويب مستضاف من خلال تطبيق ngrok في بيئتك المحلية.

   

   الشكل 7. طلب HTTP من واجهة الويب التي تستضيفها تطبيق "ngrok".

10. لتغيير سلوك التطبيق، يُرجى استبدال Hello بـ Hey مضمّن. 51 من الملف main.py عند حفظ الملف، يتم Visual Studio Code يعيد تحميل التطبيق تلقائيًا باستخدام رمز المصدر المحدَّث يبقى في وضع تصحيح الأخطاء.

    

    الشكل 8. التطبيق قيد التشغيل ويستمع إلى طلبات HTTP في المنفذ 9000 مع تحميل تغيير الرمز.

11. هذه المرة، بدلاً من إرسال رسالة ثانية Hey! في المساحة، يمكنك يمكن تحديد آخر طلب HTTP تم تسجيله على واجهة الويب المستضافة بواسطة تطبيق ngrok في بيئتك المحلية وانقر على Replay. مثل آخر مرة، لا يردّ تطبيق Chat على جهازك. لأنه يتم تصحيحه بشكل نشط.

12. عند استئناف التنفيذ من برنامج تصحيح أخطاء Visual Studio Code يمكنك الاطّلاع على ذلك من واجهة الويب التي يستضيفها التطبيق ngrok في بيئتك المحلية حتى ينشئ التطبيق استجابة باستخدام النسخة المحدّثة من الرسالة.

Java

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 لتشغيل تطبيق "HelloChat" عليه المنفذ 9000 محليًا عن طريق إضافة إصدار Cloud Functions Platform المكون الإضافي function-maven-plugin في ملف pom.xml:

      ...
      <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. إضافة نقطة توقف توقف معالجة طلب HTTP مؤقتًا HelloChat.java، وابدأ في الإرفاق تصحيح الأخطاء باستخدام تمت إضافة إعدادات Remote Debug Watch من قبل. التطبيق يتم الآن تشغيل طلبات HTTP والاستماع إلى طلبات HTTP على المنفذ 9000.

      

      الشكل 3. الجهاز قيد التشغيل ويستمع إلى بروتوكول HTTP الطلبات على المنفذ 9000.

4. تشغيل تطبيق ngrok في بيئتك المحلية:

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000
   

   استبدل NGROK_STATIC_DOMAIN بالنطاق الثابت في حسابك على ngrok. تتم الآن إعادة توجيه جميع الطلبات إلى دليل البيئة والمنفذ الذي يستخدمه التطبيق.

   

   الشكل 4. الوحدة الطرفية التي يعمل خادم ngrok فيها قيد التشغيل وتُعيد التوجيه.

5. يتم أيضًا بدء واجهة ويب على مضيفك المحلي من خلال ngrok. يمكنك مراقبة جميع الأنشطة من خلال فتحه في متصفح.

   

   الشكل 5. واجهة الويب التي يستضيفها تطبيق "ngrok" عدم عرض أي طلبات HTTP.

6. اختبار تطبيق Chat من خلال إرسال رسالة مباشرة الرسالة:

   • افتح Google Chat.

     الانتقال إلى Google Chat

   • انقر على رمز محادثة جديدة add.

   • في مربع الحوار، أدخل اسم تطبيق Chat

   • ضمن نتائج البحث، ابحث عن تطبيق Chat، انقر على إضافة > الدردشة

   • في مساحة الرسائل المباشرة، اكتب Hey! واضغط على enter. إنّ تطبيق Chat لا يستجيب لأنّه قيد التشغيل تصحيح الأخطاء بشكل نشط.

7. في Visual Studio Code في بيئتك المحلية، يمكنك ملاحظة ما يلي: يتم إيقاف التنفيذ مؤقتًا عند نقطة التوقف التي تم تعيينها.

   

   الشكل 6. يتم إيقاف التنفيذ مؤقتًا عند نقطة الإيقاف التي تم ضبطها.

8. عند استئناف التنفيذ من برنامج تصحيح أخطاء Visual Studio Code قبل انتهاء مهلة Google Chat لتطبيق Chat الردود مع اسمك وصورتك الرمزية في الرسالة.

9. يمكنك التحقق من طلب HTTP وسجلات الاستجابة من واجهة الويب مستضاف من خلال تطبيق ngrok في بيئتك المحلية.

   

   الشكل 7. طلب HTTP من واجهة الويب التي تستضيفها تطبيق "ngrok".

10. لتغيير سلوك التطبيق، يُرجى استبدال Hello بـ Hey مضمّن. 55 من ملف HelloChat.java، ثم أعِد تشغيل عملية mvnDebug، إعادة تشغيل Remote Debug Watch من أجل إعادة تركيبه ثم إعادة تشغيله تصحيح الأخطاء.

11. هذه المرة، بدلاً من إرسال رسالة ثانية Hey! في المساحة، يمكنك يمكن تحديد آخر طلب HTTP تم تسجيله على واجهة الويب المستضافة بواسطة تطبيق ngrok في بيئتك المحلية وانقر على Replay. كما كانت الحال في المرة الأخيرة، لا يردّ تطبيق Chat على جهازك. لأنه يتم تصحيحه بشكل نشط.

12. عند استئناف التنفيذ من برنامج تصحيح أخطاء Visual Studio Code يمكنك الاطّلاع على ذلك من واجهة الويب التي يستضيفها التطبيق ngrok في بيئتك المحلية حتى ينشئ التطبيق استجابة باستخدام النسخة المحدّثة من الرسالة.