اختبار إضافات Google Workspace التي تستخدم بروتوكول HTTP وتصحيح الأخطاء فيها

Node.js

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

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

  npm install -g nodemon

• مشروع على Google Cloud يمكنك اتّباع القسمين المتطلّبات الأساسية، وإعداد البيئة في دليل البدء السريع.

• رمز إضافة Google Workspace لتصحيح الأخطاء في بيئة التطوير المحلية نستخدم ميزات رابط المعاينة من مثال الرمز البرمجي 3p-resources من مستودع GitHub googleworkspace/add-ons-samples في هذا الدليل لأغراض توضيحية.

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

• حساب على ngrok

• أحدث إصدار من gcloud مثبَّت ومُفعَّل في البيئة المحلية

Python

• أحدث إصدار من python3 مثبَّت في بيئتك المحلية
• أحدث إصدار من pip و virtualenv المثبَّتَين في البيئة المحلية، ويتم استخدامهما لإدارة حِزم Python و البيئات الافتراضية على التوالي.
• مشروع على Google Cloud يمكنك اتّباع الأقسام المتطلّبات الأساسية، وإعداد البيئة في دليل البدء السريع.
• رمز إضافة Google Workspace لتصحيح الأخطاء في بيئة التطوير المحلية نستخدم ميزات رابط المعاينة من مثال الرمز البرمجي 3p-resources من مستودع GitHub googleworkspace/add-ons-samples في هذا الدليل لأغراض توضيحية.
• بيئة تطوير متكاملة تم إعدادها في بيئتك المحلية ويمكنها تصحيح الأخطاء نستخدم IDE Visual Studio Code وميزات تصحيح الأخطاء التلقائية فيه في هذا الدليل لأغراض توضيحية.
• حساب على ngrok
• أحدث إصدار من gcloud مثبَّت ومُفعَّل في البيئة المحلية

Java

• أحدث إصدار ثابت من Java SE 11's JDK مثبَّت في البيئة المحلية
• أحدث إصدار من Apache Maven مثبَّت في بيئتك المحلية، ويُستخدَم لإدارة مشاريع Java.
• مشروع على Google Cloud يمكنك اتّباع القسمين المتطلّبات الأساسية، وإعداد البيئة في دليل البدء السريع.
• رمز إضافة Google Workspace لتصحيح الأخطاء في البيئة المحلية نستخدم ميزات رابط المعاينة من مثال الرمز البرمجي 3p-resources من مستودع GitHub googleworkspace/add-ons-samples في هذا الدليل لأغراض توضيحية.
• بيئة تطوير متكاملة تم إعدادها في بيئتك المحلية ويمكنها تصحيح الأخطاء نستخدم IDE Visual Studio Code وميزات تصحيح الأخطاء التلقائية فيه في هذا الدليل لأغراض توضيحية.
• حساب على ngrok
• أحدث إصدار من gcloud مثبَّت ومُفعَّل في البيئة المحلية

Node.js

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

   1. في نافذة جديدة، افتح المجلد add-ons-samples/node/3p-resources.

   2. يمكنك ضبط التطبيق للتشغيل على الجهاز وتشغيل ميزة تصحيح الأخطاء من خلال إعادة التحميل التلقائي من خلال إضافة تبعية واحدة ونصوص برمجية في ملف package.json:

      {
          ...
          "dependencies": {
            ...
            "@google-cloud/functions-framework": "^3.3.0"
          },
          "scripts": {
              ...
              "start": "npx functions-framework --target=createLinkPreview --port=9000",
              "debug-watch": "nodemon --watch ./ --exec npm start"
          }
          ...
      }
      

   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.

2. افتح تطبيق ngrok في بيئتك المحلية:

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000

   استبدِل NGROK_STATIC_DOMAIN بالنطاق الثابت في حسابك على ngrok. تتم الآن إعادة توجيه جميع الطلبات إلى البيئة المحلية والمنفذ المستخدَم من قِبل التطبيق.

   

   الشكل 4: وحدة التحكّم التي تعمل فيها إعادة التوجيه ويعمل فيها خادم ngrok

3. يبدأ ngrok التطبيق أيضًا واجهة ويب على المضيف المحلي، ويمكنك مراقبة جميع الأنشطة من خلال فتحها في متصفّح.

   

   الشكل 5: واجهة الويب المستضافة من خلال تطبيق ngrok لا تعرِض أي طلبات HTTP.

4. اختبِر إضافة Google Workspace من خلال معاينة عنوان URL لطلب في مستند Google جديد باستخدام حساب مختبِر:

   • أنشئ مستندًا جديدًا على Google.

     إنشاء مستند جديد على Google

   • اكتب الرابط التالي واضغط على enter:

     https://example.com/support/case/?name=Name1&description=Description1&priority=P1
     

   • انقر على هذا الرابط.

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

   

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

6. عند استئناف التنفيذ من أداة تصحيح الأخطاء في Visual Studio Code قبل انتهاء مهلة إضافات Google Workspace، تعرِض إضافة Google Workspace معاينة الرابط في "مستند Google" من ذاكرة التخزين المؤقت.

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

   

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

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

   

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

9. هذه المرة، بدلاً من النقر على الرابط والانتظار لبضع ثوانٍ في مستند جديد من "مستندات Google"، يمكنك اختيار آخر طلب HTTP تم تسجيله على واجهة الويب التي يستضيفها تطبيق ngrok في بيئتك المحلية ثم النقر على Replay. كما في المرة السابقة، لا تردّ إضافة Google Workspace لأنّه يتم تصحيح أخطاءها بشكل نشط.

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

Python

1. من بيئة Visual Studio Code IDE المثبَّتة في بيئتك المحلية، نفِّذ ما يلي:

   1. في نافذة جديدة، افتح المجلد add-ons-samples/python/3p-resources/create_link_preview.

   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", "create_link_preview",
                  "--port", "9000",
                  "--debug"
              ]
          }]
      }
      

   5. أضِف نقطة فاصلة تُوقِف مؤقتًا معالجة طلب HTTP في ملف main.py، وابدأ التشغيل و تصحيح الأخطاء باستخدام إعدادات Debug Watch التي أضفتها من قبل. يعمل التطبيق الآن وينتظر طلبات HTTP على المنفذ 9000.

      

      الشكل 3: يعمل التطبيق ويستمع إلى طلبات HTTP على المنفذ 9000.

2. افتح تطبيق ngrok في بيئتك المحلية:

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000

   استبدِل NGROK_STATIC_DOMAIN بالنطاق الثابت في حسابك على ngrok. تتم الآن إعادة توجيه جميع الطلبات إلى البيئة المحلية والمنفذ المستخدَم من قِبل التطبيق.

   

   الشكل 4: وحدة التحكّم التي تعمل فيها إعادة التوجيه ويعمل فيها خادم ngrok

3. يبدأ ngrok التطبيق أيضًا واجهة ويب على المضيف المحلي، ويمكنك مراقبة جميع الأنشطة من خلال فتحها في متصفّح.

   

   الشكل 5: واجهة الويب المستضافة من خلال تطبيق ngrok لا تعرِض أي طلبات HTTP.

4. اختبِر إضافة Google Workspace من خلال معاينة عنوان URL لطلب في مستند Google جديد باستخدام حساب مختبِر:

   • أنشئ مستندًا جديدًا على Google.

     إنشاء مستند جديد على Google

   • اكتب الرابط التالي واضغط على enter:

     https://example.com/support/case/?name=Name1&description=Description1&priority=P1
     

   • انقر على هذا الرابط.

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

   

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

6. عند استئناف التنفيذ من أداة تصحيح الأخطاء في Visual Studio Code قبل انتهاء مهلة إضافات Google Workspace، تعرِض إضافة Google Workspace معاينة الرابط في "مستند Google" من ذاكرة التخزين المؤقت.

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

   

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

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

   

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

9. هذه المرة، بدلاً من النقر على الرابط والانتظار لبضع ثوانٍ في مستند جديد من "مستندات Google"، يمكنك اختيار آخر طلب HTTP تم تسجيله على واجهة الويب التي يستضيفها تطبيق ngrok في بيئتك المحلية ثم النقر على Replay. كما في المرة السابقة، لا تردّ إضافة Google Workspace لأنّه يتم تصحيح أخطاءها بشكل نشط.

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

Java

1. من بيئة Visual Studio Code IDE المثبَّتة في بيئتك المحلية، نفِّذ ما يلي:

   1. في نافذة جديدة، افتح المجلد add-ons-samples/java/3p-resources.

   2. اضبط مشروع Maven لتشغيل التطبيق CreateLinkPreview على المنفذ 9000 محليًا من خلال إضافة المكوّن الإضافي لإنشاء إطار عمل Functions في Cloud‏ function-maven-plugin في ملف pom.xml:

      ...
      <plugin>
          <groupId>com.google.cloud.functions</groupId>
          <artifactId>function-maven-plugin</artifactId>
          <version>0.11.0</version>
          <configuration>
              <functionTarget>CreateLinkPreview</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 في ملف CreateLinkPreview.java، وابدأ عملية إرفاق ملف التفعيل و تصحيح الأخطاء باستخدام إعدادات Remote Debug Watch التي تمت إضافتها من قبل. يتم الآن تشغيل التطبيق والاستماع إلى طلبات HTTP على المنفذ 9000.

      

      الشكل 3: يعمل التطبيق ويستمع إلى طلبات HTTP على المنفذ 9000.

2. افتح تطبيق ngrok في بيئتك المحلية:

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000

   استبدِل NGROK_STATIC_DOMAIN بالنطاق الثابت في حسابك على ngrok. تتم الآن إعادة توجيه جميع الطلبات إلى البيئة المحلية والمنفذ المستخدَم من قِبل التطبيق.

   

   الشكل 4: وحدة التحكّم التي تعمل فيها إعادة التوجيه ويعمل فيها خادم ngrok

3. يبدأ ngrok التطبيق أيضًا واجهة ويب على المضيف المحلي، ويمكنك مراقبة جميع الأنشطة من خلال فتحها في متصفّح.

   

   الشكل 5: واجهة الويب المستضافة من خلال تطبيق ngrok لا تعرِض أي طلبات HTTP.

4. اختبِر إضافة Google Workspace من خلال معاينة عنوان URL لطلب في مستند Google جديد باستخدام حساب مختبِر:

   • أنشئ مستندًا جديدًا على Google.

     إنشاء مستند جديد على Google

   • اكتب الرابط التالي واضغط على enter:

     https://example.com/support/case/?name=Name1&description=Description1&priority=P1
     

   • انقر على هذا الرابط.

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

   

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

6. عند استئناف التنفيذ من أداة تصحيح الأخطاء في Visual Studio Code قبل انتهاء مهلة إضافات Google Workspace، تعرِض إضافة Google Workspace معاينة الرابط في "مستند Google" من ذاكرة التخزين المؤقت.

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

   

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

8. لتغيير سلوك التطبيق، استبدِل Case بـ Case: في 78 ضمن ملف CreateLinkPreview.java، ثم أعِد تشغيل عملية mvnDebug ، وأعِد تشغيل Remote Debug Watch من أجل إعادة إرفاق عملية تصحيح الأخطاء وإعادة تشغيلها.

9. هذه المرة، بدلاً من النقر على الرابط والانتظار لبضع ثوانٍ في مستند جديد من "مستندات Google"، يمكنك اختيار آخر طلب HTTP تم تسجيله على واجهة الويب التي يستضيفها تطبيق ngrok في بيئتك المحلية ثم النقر على Replay. كما في المرة السابقة، لا تردّ إضافة Google Workspace لأنّه يتم تصحيح أخطاءها بشكل نشط.

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