تصحيح الأخطاء في تطبيقات 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 التي تم تثبيتها في بيئتك المحلية، عليك تنفيذ ما يلي:

   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، يردّ تطبيق 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 برقم تعريف المشروع الخاص بمشروع التطبيق على Google Cloud.

2. استنسِخ مستودع googleworkspace/google-chat-samples من GitHub إلى بيئتك المحلية، فهو يحتوي على رمز التطبيق:

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

3. من بيئة التطوير المتكاملة 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، وانقر على إضافة > 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 برقم تعريف المشروع الخاص بمشروع التطبيق على Google Cloud.

2. استنسِخ مستودع googleworkspace/google-chat-samples من GitHub في بيئتك المحلية، فهو يحتوي على رمز التطبيق:

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

3. من بيئة التطوير المتكاملة Visual Studio Code التي تم تثبيتها في بيئتك المحلية، عليك تنفيذ ما يلي:

   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 في بيئتك المحلية أنّ التطبيق ينشئ استجابة باستخدام الإصدار المحدَّث من الرسالة.