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

Node.js

Python

Java

Node.js

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

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

  npm install -g nodemon

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

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

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

• حساب على ngrok

Python

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

Java

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