استخدام Duet AI خلال مراحل تطوير البرامج

1. نظرة عامة

يتضمن عادةً يوم في حياة مطوّر برامج Google Cloud استخدام منتجات وخدمات متعددة من Google Cloud. وتتيح هذه المنتجات للمطوّر تطوير التطبيقات واختبارها ونشرها وإدارتها في السحابة الإلكترونية. بمساعدة من Duet AI، يمكن للمطوّرين أن يصبحوا أكثر إنتاجية عند استخدام منتجات Google Cloud من خلال المحادثة التفاعلية والمساعدة في استخدام الرموز وعمليات الدمج المضمّنة في Duet AI.

ملاحظة: بإمكان Duet AI إنشاء نتائج تبدو منطقية ولكنّها غير صحيحة في مراحلها الأولى. ننصحك بالتحقّق من صحة جميع النتائج من Duet AI قبل استخدامها. لمزيد من المعلومات، يُرجى الاطّلاع على مقالة Duet AI في Google Cloud والذكاء الاصطناعي المسؤول.

يستخدم هذا التمرين المعملي مساعدة Duet AI لنشر "متجر Cymbal Superstore". تطبيق ويب البقالة. ويمكنك بعد ذلك تطوير ميزة جديدة ونشرها وإنشاء الواجهة الأمامية والخلفية للتطبيق. ستحصل أيضًا على مساعدة Duet في كتابة اختبارات لتطبيقك ومعرفة كيف يمكن دمج Duet مع أدوات Google Cloud الأخرى.

الأهداف

وستتعرّف على كيفية:

• يمكنك تحسين تطبيق ويب حالي بمساعدة Duet AI.
• انشر التطبيق في التشغيل السحابي.
• اطلب من Duet AI توضيح خطأ في التطبيق وإصلاح الأخطاء.
• طوّر اختبارات للتطبيق بمساعدة Duet AI.
• اطّلِع على سجلّات التطبيقات بمساعدة Duet AI.

المتطلبات الأساسية

• حساب Google Cloud Platform ومشروع تم تفعيل الفوترة فيه
• تجربة Linux الأساسية

2. ضبط إعدادات الجهاز

يتناول هذا القسم كل الإجراءات المطلوبة للبدء في هذا التمرين.

إنشاء مشروع

لتسهيل عملية الحذف، يُرجى إنشاء مشروع جديد على Google Cloud.

• انتقِل إلى https://console.cloud.google.com.
• انقر على القائمة المنسدلة لأداة اختيار المشروع.
• اختيار "إنشاء مشروع"
• اختَر اسمًا يسهُل تذكّره، مثل بطاقة مقدمة إلى الحاويات.

تفعيل Duet AI في مشروع Google Cloud

سيتم الآن تفعيل Duet AI API في مشروع Google Cloud. يُرجى اتّباع الخطوات التالية:

1. انتقل إلى لوحة التحكم في زيارة https://console.cloud.google.com وتأكد من اختيار مشروع Google Cloud الذي تخطط للعمل معه لهذا التمرين. انقر على رمز Duet AI الذي يظهر في أعلى يسار الصفحة.

2. سيتم فتح نافذة محادثة Duet AI على يسار وحدة التحكّم. انقر على الزر "تفعيل" كما هو موضّح أدناه. إذا لم يظهر لك الزر "تفعيل" وظهرت لك واجهة Chat بدلاً من ذلك، من المحتمل أنّك سبق وفعّلت Duet AI للمشروع ويمكنك الانتقال مباشرةً إلى الخطوة التالية.

3. بعد تفعيلها، يمكنك اختبار Duet AI من خلال طرح سؤال أو طلبَين عليه. يتم عرض بعض نماذج الطلبات، ولكن يمكنك تجربة سؤال مثل "ما المقصود بالتشغيل السحابي؟"

سيقدّم Duet AI إجابة عن سؤالك. يمكنك النقر على الرمز _ في أعلى يسار الصفحة لإغلاق نافذة المحادثة في Duet AI.

تفعيل Duet AI في بيئة Cloud Shell IDE

سنستخدم بيئة تطوير متكاملة Cloud Shell في باقي الدرس التطبيقي حول الترميز. نحتاج إلى تفعيل Duet AI وإعداده في بيئة تطوير البرامج (IDE) في Cloud Shell، وإليك الخطوات أدناه:

1. شغِّل Cloud Shell من خلال الرمز الموضح أدناه. قد يستغرق بدء تشغيل مثيل Cloud Shell دقيقة أو دقيقتين.

2. انقر على الزر "Editor" (المحرر) أو "Open Editor" (فتح المحرر) (كما قد تكون الحالة) وانتظر حتى تظهر Cloud Shell IDE. ستستخدم زر "الجديد" المحرر، وليس المحرر القديم.

3. انقر على زر Cloud Code - تسجيل الدخول في شريط مدى التقدم السفلي كما هو موضَّح. عليك تفويض المكوّن الإضافي وفقًا للتعليمات. في حال ظهور "Cloud Code - no project" (ما مِن مشروع) في شريط الحالة، اختَر ذلك ثم اختَر المشروع المحدّد على Google Cloud من قائمة المشاريع التي تخطط للعمل فيها.

4. انقر على الزر Duet AI في أسفل يسار الصفحة كما هو موضّح واختَر مشروع Google Cloud الصحيح الذي تم فيه تفعيل Cloud AI Companion API.

5. بعد اختيار مشروعك على Google Cloud وتفويضه، تأكَّد من أنّه يمكنك رؤية ذلك في رسالة حالة رمز السحابة الإلكترونية في شريط الحالة ومن تفعيل Duet AI أيضًا على يسار الصفحة، في شريط الحالة كما هو موضّح أدناه:

Duet AI جاهز للاستخدام

3- استخدام Duet AI

ستنشئ تطبيق ويب كجزء من هذا التمرين المعملي. يشير المعمل إلى العديد من الأماكن التي يمكن استخدامها لتجربة Duet. إذا كنت مهتمًا بالدرس، يمكنك أيضًا تخصيص بعض الوقت لطرح سؤال على Duet في أي مكان داخل المختبر.

على سبيل المثال، ستستخدم Terraform لإنشاء التطبيق الأساسي ونشره. إذا كنت لا تعرف ما هي Terraform، يمكنك أن تسأل Duet. إذا أردت فهم وظيفة كل خطوة، يمكن أن يشرح لك Duet. هل تريد فعلاً فتح الرمز والسؤال عن أسطر محددة؟ جرِّب استخدام Duet.

ملاحظة: بإمكان Duet AI إنشاء نتائج تبدو منطقية ولكنّها غير صحيحة في مراحلها الأولى. ننصحك بالتحقّق من صحة جميع النتائج من Duet AI قبل استخدامها. لمزيد من المعلومات، يُرجى الاطّلاع على مقالة Duet AI في Google Cloud والذكاء الاصطناعي المسؤول.

4. إنشاء تطبيق الويب

يستخدم هذا التمرين المعملي "متجر Cymbal Superstore". تطبيق ويب البقالة. في المهام اللاحقة من هذا التمرين، يمكنك استخدام Duet AI لتطوير ميزة جديدة ونشرها في هذا التطبيق. لكي تتمكّن من معرفة كيف يساعدك Duet AI في فهم الرموز البرمجية الحالية، يجب أن تتمكّن من استخدام بعض الرموز البرمجية الحالية، لذا عليك إنشاء مكونات الواجهة الأمامية والخلفية من هذا التطبيق الآن.

ستنتقل بين Cloud Shell و"محرِّر Cloud Shell" أثناء العمل على هذا المشروع. هناك طريقة سهلة للقيام بذلك وهي استخدام الأزرار الموجودة أعلى الشاشة:

ضبط البيئة

نفِّذ الأوامر في Cloud Shell.

1. اضبط رقم تعريف المشروع:

gcloud config set project <Google Cloud Project ID>

2. لتشغيل مساعد بيانات اعتماد Docker، شغِّل الأمر التالي:

gcloud auth configure-docker

3. إذا طُلب منك تحديد ما إذا كنت تريد المتابعة، اكتب Y.
4. لتنزيل "متجر Cymbal Superstore". رمز التطبيق، شغِّل الأمر التالي من الدليل الجذري في Cloud Shell. سيتلقّى رمز متجر Cymbal Superstore من GitHub.

git clone https://github.com/GoogleCloudPlatform/cymbal-superstore

5. يجب تفعيل واجهات برمجة تطبيقات متعددة حتى يتم تشغيل هذا الرمز بشكل صحيح. في Cloud Shell، أدخِل الأمر أدناه:

gcloud services enable cloudresourcemanager.googleapis.com compute.googleapis.com artifactregistry.googleapis.com serviceusage.googleapis.com run.googleapis.com bigquery.googleapis.com 

6. التغيير إلى الدليل Terraform في الرمز الذي قمت بتنزيله:

cd cymbal-superstore/terraform

5. بما أن هذا التمرين لن يستخدم Spanner، فسنستخدم نسخة من إرشادات Terraform لا تقوم بتثبيت Spanner. في Cloud Shell، أدخِل الأمر أدناه:

mv main.tf.nospanner main.tf

8. لحفظ حاجتك إلى إدخال اسم مشروعك ورقمه في كل مرة تشغّل فيها أمر Terraform، يمكنك إنشاء ملف باسم terraform.tfvars في دليل terraform هذا. أضف سطرين إلى هذا الملف بالمعلومات الواردة أدناه واحفظ الملف. يمكنك العثور على هذه المعلومات في لوحة معلومات المشروع.

project_id="Your project id"
project_number=Your project number

9. تهيئة Terraform بالسطر:

terraform init

10. أخيرًا، يمكنك نشر موارد Terraform في مشروعك باستخدام الأمر أدناه. قد يُطلب منك كتابة "نعم". أثناء عملية النشر هذه. قد يستغرق ذلك ما يصل إلى 10 دقائق، لذا قد تحتاج إلى تخصيص بعض الوقت لفحص الرسم التخطيطي للبنية على الرابط https://github.com/GoogleCloudPlatform/cymbal-superstore/blob/main/assets/architecture.png. يمكنك أيضًا إلقاء نظرة على الرمز البرمجي الحالي واستخدام Duet لمساعدتنا في فهمه.

terraform apply

بعد إكمال هذا الأمر بنجاح، من المفترض أن تظهر لك نتيجة مشابهة لما يلي:

11. يُرجى تعديل الواجهة الأمامية للتحدّث إلى الواجهة inventory_cr_endpoint الخلفية في الناتج. ولإجراء ذلك، انسخ قيمة inventory_cr_endpoint، وافتح cymbal-superstore/frontend/.env.production، واستبدِل قيمة REACT_APP_INVENTORY_URL.
12. يجب إعادة تشغيل "terraform apply". من المفترَض أن تستغرق هذه العملية دقيقة واحدة فقط، لأنّه سيعيد نشر تطبيق React في الواجهة الأمامية على Cloud Storage باستخدام عنوان URL المعدَّل للواجهة الخلفية.
13. افتح frontend_ip في متصفّح. من المفترض أن تظهر لك واجهة Cymbal Superstore الأمامية. قد يستغرق نشر التغييرات بضع دقائق، لذا قد تحتاج إلى التحقق أكثر من مرة.

14. انقر على "العناصر الجديدة" على يمين صفحة Cymbal الرئيسية. من المفترض أن تظهر لك صفحة واجهة أمامية وهمية تحتوي على منتجات عناصر نائبة. وهذا أمر متوقّع، إذ إنك ستنفّذ رمز واجهة برمجة التطبيقات الخاص بمستودع الواجهة الخلفية لعرض صفحة المنتجات الجديدة في المهمة التالية من هذا التمرين.

إذا كنت تواجه مشكلة في ظهور التطبيق في المتصفح، يجب التحقق للتأكد من نشر Cloud Run بشكلٍ صحيح. ولإجراء ذلك:

• انتقِل إلى Cloud Run من القائمة الرئيسية في Cloud Console.
• اختَر خدمة inventory من قائمة الخدمات.
• اختَر "المراجعات" من علامات التبويب في صفحة المستودع.

• تأكَّد من نشر تطبيق Cloud Run عندما كنت تتوقع أن يكون:

وفي حال لم يتم نشره، يمكنك نشره عن طريق تحديد "تعديل" نشر "مراجعة جديدة" في أعلى الصفحة وقبول القيم التلقائية.

5- تعديل الواجهة الخلفية لتطبيق الويب

هيا نستخدم الآن Duet AI لإضافة وظائف إلى الواجهة الخلفية لتطبيق الويب.

في هذه المهمة، ستطلب من Duet AI إكمال الرمز البرمجي لتنفيذ نقطة نهاية /newproducts في التطبيق. عليك إنشاء نقطة نهاية في الخلفية لاسترداد المنتجات الجديدة من Firestore واختبار نقطة النهاية هذه قبل نشر التغيير.

تطوير نقطة النهاية /newproducts

1. افتح الملف "cymbal-superstore/backend/index.ts" في محرِّر Cloud Shell.
2. في ملف index.ts، انتقِل إلى تعليق DEMO TASK START حول السطر 95، حيث تظهر مجموعة من الأسطر تم التعليق عليها بشأن هذه المهمة. أزِل جميع الأسطر التي تم التعليق عليها واستبدِلها بطلب Duet AI التالي:

// Get new products from Firestore (added < 7 days ago) and quantity > 0 (in stock)

3. للطلب من Duet AI إنشاء رمز الدالة، اختَر التعليق بالكامل، ثم انقر على المصباح ( ).
4. في قائمة إجراءات إضافية، حدد إنشاء رمز.
5. مرِّر مؤشر الماوس فوق الرمز الذي تم إنشاؤه، وفي شريط أدوات Duet AI، انقر على "قبول". يملأ Duet AI رمز الدالة لنقطة النهاية /newproducts.

ملاحظة: قد ينشئ Duet AI نُسخًا متعددة من الرمز في طلبك. يمكنك اختيار إصدار معيّن من خلال التمرير عبر القائمة في شريط الأدوات.

6. يجب أن يكون الرمز الذي تم إنشاؤه مشابهًا لما يلي:

app.get("/newproducts", async (req: Request, res: Response) => {
  const products = await firestore
    .collection("inventory")
    .where("timestamp", ">", new Date(Date.now() - 604800000))
    .where("quantity", ">", 0)
    .get();
  const productsArray: any[] = [];
  products.forEach((product) => {
    const p: Product = {
      id: product.id,
      name: product.data().name,
      price: product.data().price,
      quantity: product.data().quantity,
      imgfile: product.data().imgfile,
      timestamp: product.data().timestamp,
      actualdateadded: product.data().actualdateadded,
    };
    productsArray.push(p);
  });
  res.send(productsArray);
});

قد يتم وضع خط تحت العديد من الأسطر لتحذيرك من مشاكل الترخيص المحتملة. يمكنك تطبيق "إصلاح سريع" في هذا التمرين المعملي، ولكن في المستقبل، يمكنك مراجعة هذه التحذيرات.

7. إذا لم يكن الرمز الذي تم إنشاؤه مماثلاً للمثال في الخطوة السابقة، ننصحك باستبداله الآن أو الاطّلاع على الطريقة التي يمكن أن يساعدك بها Duet في تصحيح الأخطاء لاحقًا. هناك أيضًا نسخة من الرمز تعرض الخطأ المتوقّع في الملف scripts/solutioncode-with-bug.ts ..
8. احفظ ملف index.ts.

اختبار نقطة نهاية /``newproducts وتصحيح الأخطاء فيها

1. في Cloud Shell، انتقِل إلى دليل cymbal-superstore/backend. أدخِل الأمر:

npm run start

سيؤدي هذا إلى بدء نقطة النهاية.

2. للاطّلاع على نتائج نقطة النهاية، افتح نافذة طرفية أخرى باستخدام الرمز + في شريط القائمة في Cloud Shell ونفِّذ الأمر:

curl localhost:8000/newproducts

قد يظهر لك الخطأ curl: (52) Empty reply from server في الوحدة الطرفية الجديدة ورسالة خطأ طويلة تحتوي على التفاصيل 'Cannot have inequality filters on multiple properties: [quantity, timestamp]' في الوحدة الطرفية التي تشغِّل نقطة النهاية.

3. لنصلح هذا الخطأ. لكن علينا أولاً فهم معنى رسالة الخطأ. للقيام بذلك، سنطلب من Duet. افتح Duet AI Chat من القائمة على يمين "محرِّر Cloud Shell" واطرح الأسئلة التالية:

I'm querying Cloud Firestore and getting this error: 'Cannot have inequality filters on multiple properties: [quantity, timestamp]' What does it mean?

من المفترض أن يمنحك Duet بعض الخيارات لإصلاحه، بما في ذلك إزالة أحد فلاتر عدم المساواة. لحل هذه المشكلة، احذف السطر .where("quantity", ">", 0) من index.ts بحيث يكون لدينا فلتر واحد فقط في طلب البحث.

4. كرِّر أول خطوتين أعلاه لإعادة تشغيل الخادم والحصول على قائمة المنتجات. من المفترض أن يتم تنفيذ الإجراء بنجاح الآن، ولكن إذا لم يكن الأمر كذلك، استخدِم Duet لحل المشكلة (أو استخدام الحل المصحّح في scripts/solutioncode-bug-fixed.ts للمتابعة).

نشر التغيير

لنشر التطبيق الذي تم تغييره، ما عليك سوى إعادة تشغيل terraform apply من دليل terraform في Cloud Shell. يمكنك بعد ذلك عرض التطبيق على عنوان IP الذي يوفره Terraform.

6- اختبارات الكتابة

من المهام المهمة التي لا يتم منحها الأولوية في كثير من الأحيان هي إنشاء اختبارات للتعليمات البرمجية في مشروع. كما ترى، بإمكان Duet مساعدتك في إنشاء هذه الاختبارات.

لنبدأ في إنشاء اختبارات لرمز newproducts الذي أنشأناه للتو.

1. فتح "backend/index.test.ts" يمكنك استخدام المحادثة في Duet AI لإنشاء اختبار لوظيفة "newproducts()" باستخدام الطلب:

Help me write an Express.js test using Jest, in typescript, for the GET /newproducts handler in index.ts. Should check if the response code is 200 and the list of new products is length 8.

ستلاحظ أنه يوفر import سطرًا موجود بالفعل في الملف. انسخ اختبار describe() فقط في الملف داخل الأسطر المُشار إليها. احفظ الملف.

بدلاً من ذلك، يمكنك تحسين الطلب وإخبار Duet بعدم تضمين أي عبارات استيراد، لذا من المفترض أن تحصل على الرمز الذي تحتاجه فقط.

2. للاطّلاع على نتائج الاختبار، انتقِل إلى Cloud Shell وغيِّر الدليل إلى المجلد backend ونفِّذ الأمر:

npm run test

7. التسجيل

يمكن أن يساعد Duet AI مشروعك حتى بعد نشره. في هذا القسم، سنلقي نظرة على السجلّات بمساعدة Duet AI.

ارجع إلى Cloud Console وتأكَّد من أنّ Duet قيد التشغيل. اطلب من Duet أين تعثر على السجلات. لا تتردد في تجربة المطالبة الخاصة بك، ولكن إذا لم تقدم إجابة مناسبة، فمن المفترض أن تنجح المطالبة التالية.

How can I view the Cloud Run logs for the service called 'inventory'?

من المفترض أن يقترح Duet AI الانتقال إلى صفحة "التشغيل في السحابة الإلكترونية" واختيار خدمة المستودع ثم فحص سجلّات تلك الخدمة. من المفترض أن يظهر لك شيء مثل:

اختَر أحد العناصر واطلب من Duet AI شرحه. من المفترض أن تحصل على وصف للمدخل بلغة طبيعية.

يمكنك أيضًا عرض إدخالات السجل في مستكشف السجلات، والذي يمكنك فتحه من خيار "التسجيل" في القائمة الرئيسية. تتمثل إحدى ميزات عرض إدخالات السجل من مستكشف السجلات في أن خيار شرح الإدخالات مضمن، كما هو موضح أدناه:

8. تهانينا!

تهانينا، لقد استخدمت Duet AI بنجاح لمساعدتك في فهم الرموز البرمجية التي ربما لم تتعرّف عليها من قبل. لقد حسّنت هذا الرمز وأنشأت اختبارات له واستخدمت Duet للمساعدة في فهم إدخالات السجلّ.

تنظيف

حذف المشروع

للتنظيف، نحذف مشروعنا ببساطة.

• في قائمة التنقل، حدد "إدارة الهوية وإمكانية الوصول" وحدة تحكّم المشرف
• ثم انقر على الإعدادات في القائمة الفرعية
• النقر على رمز سلة المهملات الذي يتضمن النص "حذف المشروع"
• اتّباع تعليمات المطالبات

في هذا التمرين المعملي، تبيَّن لنا كيفية تنفيذ ما يلي:

• يمكنك تحسين تطبيق ويب حالي بمساعدة Duet AI.
• انشر التطبيق في التشغيل السحابي.
• اطلب من Duet AI توضيح خطأ في التطبيق وإصلاح الأخطاء.
• طوّر اختبارات للتطبيق بمساعدة Duet AI.
• اطّلِع على سجلّات التطبيقات بمساعدة Duet AI.