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

Node.js

Python

جافا

Node.js

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

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

  npm install -g nodemon

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

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

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

• حساب ngrok

Python

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

جافا

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

Node.js

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

   git clone https://github.com/googleworkspace/add-ons-samples.git

2. من بيئة التطوير المتكاملة Visual Studio Code المثبَّتة في بيئتك المحلية، اتّبِع الخطوات التالية:

   1. في نافذة جديدة، افتح المجلد add-ons-samples/node/chat/avatar-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، سيردّ تطبيق Chat على رسالتك.

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

   

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

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

   

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

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

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

Python

1. احصل على بيانات اعتماد مستخدم جديد لاستخدامها مع بيانات الاعتماد التلقائية للتطبيق:

   gcloud config set project PROJECT_ID
   gcloud auth application-default login

   استبدِل PROJECT_ID برقم تعريف المشروع لمشروع على السحابة الإلكترونية الخاص بالتطبيق.

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

   git clone https://github.com/googleworkspace/add-ons-samples.git

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

   1. في نافذة جديدة، افتح المجلد add-ons-samples/python/chat/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. لا يرد تطبيق الدردشة لأنّه قيد التصحيح النشط.

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

   

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

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

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

   

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

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

    

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

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

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

جافا

1. احصل على بيانات اعتماد مستخدم جديد لاستخدامها مع بيانات الاعتماد التلقائية للتطبيق:

   gcloud config set project PROJECT_ID
   gcloud auth application-default login

   استبدِل PROJECT_ID برقم تعريف المشروع لمشروع على السحابة الإلكترونية الخاص بالتطبيق.

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

   git clone https://github.com/googleworkspace/add-ons-samples.git

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

   1. في نافذة جديدة، افتح المجلد add-ons-samples/java/chat/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. لا يرد تطبيق الدردشة لأنّه قيد التصحيح النشط.

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

   

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

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