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

Node.js

Python

Java

Node.js

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

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

  npm install -g nodemon
  

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

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

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

• حساب على ngrok

Python

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

Java

• أحدث إصدار ثابت من Java SE 11's JDK المثبَّت في بيئتك المحلية
• أحدث إصدار من Apache Maven مُثبَّت في بيئتك المحلية، ويُستخدَم لإدارة مشاريع Java.
• تطبيق HTTP في Chat تم إعداده للمراسلة. يمكنك اتباع الأقسام المتطلبات الأساسية، وإعداد البيئة، ونشر التطبيق على Google Chat من دليل البدء السريع. الاختلاف الوحيد هو أنك تحتاج إلى ضبط اسم التطبيق على Debug App وعنوان URL للتطبيق على أي شيء مثل http://example.com.
• خادم IDE تم إعداده في بيئتك المحلية ويمكنه تصحيح الأخطاء. نستخدم 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. من 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 تؤدي إلى تشغيل النص البرمجي 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، وانقر على إضافة > Chat.

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

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

   

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

7. عند استئناف التنفيذ من برنامج تصحيح أخطاء Visual Studio Code قبل أن تنتهي مهلة تطبيق Google 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. من 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 على المنفذ 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، وانقر على إضافة > 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. من Visual Studio Code IDE المثبت في بيئتك المحلية، قم بما يلي:

   1. في نافذة جديدة، افتح المجلد google-chat-samples/java/avatar-app.

   2. يمكنك ضبط مشروع Maven لتشغيل التطبيق HelloChat على المنفذ 9000 محليًا عن طريق إضافة المكوّن الإضافي function-maven-plugin لإنشاء إطار عمل Cloud Functions في ملف 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 على المنفذ 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، وانقر على إضافة > 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 في بيئتك المحلية أنّ التطبيق ينشئ ردًا باستخدام النسخة المعدّلة من الرسالة.