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

Node.js

Python

Java

Node.js

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

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

  npm install -g nodemon

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

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

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

• حساب على ngrok

Python

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

Java

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

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

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

   

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

7. عند استئناف التنفيذ من أداة تصحيح الأخطاء في Visual Studio Code قبل أن تنتهي مهلة تطبيق 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 بمعرّف المشروع لمشروع Cloud الخاص بالتطبيق.

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", "avatar_app",
                  "--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 قبل أن تنتهي مهلة تطبيق Chat في Google Chat، سيردّ التطبيق باسمك وصورة الأفاتار في الرسالة.

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

   

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

10. لتغيير سلوك التطبيق، استبدِل Hello بـ Hey inline 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 بمعرّف المشروع لمشروع Cloud الخاص بالتطبيق.

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 محليًا من خلال إضافة المكوّن الإضافي لإنشاء إطار عمل Google Cloud Functions 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. يمكنك الآن تشغيله محليًا في وضع تصحيح الأخطاء:

      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 في الملف App.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 قبل أن تنتهي مهلة تطبيق Chat في Google Chat، سيردّ التطبيق باسمك وصورة الأفاتار في الرسالة.

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

   

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

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

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

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