مقدمة عن الاختبار باستخدام Gemini Code Assist

1- مقدمة

سوف تستخدم في هذا التمرين المعملي Gemini Code Assist، وهو متعاون يستند إلى الذكاء الاصطناعي في Google Cloud، لإضافة اختبارات إلى تطبيق ويب Python حالي والعثور على الأخطاء في ذلك التطبيق التي كشفت عنها الاختبارات وتصحيحها. ستستخدم بعد ذلك Code Assist لإنشاء اختبارات للوظائف الجديدة وإنشاء رمز لاجتياز هذه الاختبارات وتوسيع نطاق التطبيق.

الإجراءات...

  • ستستخدم "محرِّر Cloud Shell" لتنزيل رمز تطبيق ويب حالي.
  • ستستخدم محادثة Gemini Code Assist في "محرِّر Cloud Shell" لطرح أسئلة عامة عن Google Cloud.
  • ستستخدم المساعدة في رموز Gemini Code Assist Inline في "محرِّر Cloud Shell" لإنشاء اختبارات للتطبيق وإجراء الاختبارات والعثور على الأخطاء وإصلاحها، ثم توسيع نطاق وظائف التطبيق.

ما ستتعرّف عليه...

  • طريقة استخدام Gemini Code Assist للعديد من مهام المطوّرين، مثل إنشاء الاختبارات وإنشاء الرموز
  • طريقة استخدام Gemini Code Assist للتعرّف على Google Cloud.

المتطلبات...

  • متصفح الويب Chrome
  • حساب Gmail
  • مشروع على السحابة الإلكترونية مع تفعيل الفوترة
  • تم تفعيل أداة Gemini Code Assist لمشروعك على Google Cloud.

هذا التمرين موجّه للمطوّرين من جميع المستويات، بما في ذلك المبتدئين. على الرغم من أن نموذج التطبيق بلغة بايثون، لا يجب أن تكون على دراية ببرمجة بايثون لفهم ما يحدث. سنركّز على التعرّف على إمكانات Gemini Code Assist للمطوّرين.

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

يجب أن يكون لديك مشروع على Cloud سبق أن تم تفعيل الفوترة لاستخدامه في هذا التمرين المعملي. سنُفعّل الآن Gemini API في مشروع Google Cloud. يُرجى اتّباع الخطوات الواردة أدناه:

  1. انتقِل إلى https://console.cloud.google.com وتأكَّد من اختيار المشروع على Google Cloud الذي تخطط للعمل به في هذا التمرين المعملي. انقر على رمز Gemini الذي تراه في أعلى اليمين.

GeminiBanner.png

  1. سيتم فتح نافذة Gemini for Cloud Console على الجانب الأيمن من وحدة التحكّم. انقر على الزر تفعيل إذا كان موضّحًا أدناه. إذا لم يظهر لك الزر تفعيل وبدلاً من ذلك ترى واجهة Chat، يعني ذلك أنّه سبق لك تفعيل Gemini في Cloud للمشروع ويمكنك الانتقال مباشرةً إلى الخطوة التالية.

GeminiApiEnable.png

  1. بمجرد تمكين ذلك، يمكنك اختبار Gemini عن طريق طرح استعلام أو استعلامين عليه. يتم عرض بعض نماذج طلبات البحث، ولكن يمكنك تجربة أمثلة مثل ما هي خدمة Cloud Run؟

GeminiChatWindow.png

سيجيب Code Assist بالإجابة عن سؤالك. يمكنك النقر على رمز f68286b2b2ea5c0a.png في أعلى يسار الشاشة لإغلاق نافذة المحادثة في Code Assist.

تفعيل Gemini في "محرِّر Cloud Shell"

يتوفّر برنامج Gemini Code Assist وهو يعمل بالطريقة نفسها في العديد من برامج IDE الشائعة. ستستخدم محرّر Google Cloud Shell، الذي يعمل بالكامل في متصفّح الويب، في هذا الدرس التطبيقي حول الترميز. عليك تفعيل Gemini وإعداده في "محرِّر Cloud Shell"، ويتم اتّباع الخطوات التالية:

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

72dc3df7b007fcde.png

  1. انقر على الزرّ Editor (المحرِّر) أو Open Editor (فتح المحرِّر) (كما قد تكون الحالة)، وانتظر حتى يظهر "محرِّر Cloud Shell". عند ظهور الزر تجربة المحرِّر الجديد، انقر عليه.

CloudShellEditor.png

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

CloudCodeSignIn.png

  1. إذا لم يظهر لك رمز Gemini في شريط الحالة في أسفل يسار الصفحة، عليك تفعيله باستخدام رمز Cloud. قبل إجراء ذلك، تأكَّد من تفعيل Gemini (المعروف سابقًا باسم Duet AI for Developers) في بيئة تطوير البرامج (IDE) من خلال الانتقال إلى إضافة رمز السحابة الإلكترونية ← الإعدادات، ثم إدخال النص Duet AI: تفعيل كما هو موضّح أدناه. تأكَّد من وضع علامة في مربّع الاختيار. يجب إعادة تحميل بيئة التطوير المتكاملة (IDE). يؤدي ذلك إلى تفعيل Gemini في Cloud Code، وسيظهر شريط حالة Gemini في بيئة تطوير البرامج (IDE).

EnableDuetAiSetting.png

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

GeminiSelectGoogleCloudProject.png

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

GeminiEnabledStatusBar.png

Gemini Code Assist جاهز للاستخدام.

3- تنزيل التطبيق وفحصه

في النافذة الطرفية، شغِّل الأمر لنسخ المستودع باستخدام رمز البداية، ثم التغيير إلى الدليل الجديد (إذا لم تعُد نافذة الوحدة الطرفية مفتوحة، انقر على الزر Terminal أو Open Terminal لاستعادته):

git clone https://github.com/GoogleCloudPlatform/testing-with-duet-ai-codelab.git
cd testing-with-duet-ai-codelab

افتح main.py في المحرِّر، ثم افتح نافذة Gemini Chat من خلال النقر على رمز محادثة Gemini على الجانب الأيمن من المحرّر. تتوفّر نافذة Gemini Chat هذه ضِمن بيئة التطوير المتكاملة (IDE) وتحتوي على الرمز البرمجي في بيئة التطوير المتكاملة (IDE) المتاح كسياق للمناقشة. أدخِل الطلب اشرح هذا واطّلِع على الإجابة:

GeminiChatExplainThis.png

يمكنك التمرير في نافذة المحادثة هذه للاطّلاع على الإجابة الكاملة. يوضّح الشرح أنّه يمكننا تشغيل هذا البرنامج محليًا باستخدام الأمر python3 main.py في النافذة الطرفية.

4. التنفيذ محليًا

انتقِل إلى دليل المستودع باستخدام cd ~/testing-with-duet-ai-codelab إذا لزم الأمر، وأدخِل الأمر python3 main.py في النافذة الطرفية:

3bf558e9cea15375.png

انقر على الرابط http://127.0.0.1:8080 لفتح علامة تبويب جديدة في المتصفح على الصفحة الرئيسية للتطبيق:

fb06f382a4c03e4c.png

تشغيل التطبيق "محليًا". في الواقع، قدّم "محرِّر Cloud Shell" بعض الإبداع هنا. يعمل التطبيق في Cloud Shell، وليس على جهاز الكمبيوتر. عند النقر على الرابط، تم فتح علامة تبويب ليس للعنوان المحلي الفعلي http://127.0.0.1:8080، ولكن على خادم وكيل أعدّته Cloud Shell لهذا الغرض فقط. ويكون التأثير هو نفسه كما لو كنت تقوم بتشغيله محليًا بالفعل.

ننصحك بتجربته الآن. أدخِل 25 واضغط على تحويل!

e1b9d5832f6d0058.png

هذا صحيح، الرقم 25 هو XXV بالأرقام الرومانية. يجب إتمام العملية هنا.

يُرجى التحقّق من بعض الأرقام الأخرى. ثم 25، ماذا عن 24؟

37982e385e17baac.png

ربما كان الاعتقاد أن كل شيء على ما يرام. هل XXII هو الإحالة الناجحة الصحيحة لـ 24؟ أليس ينبغي أن يكون XXIV؟

لنفترض أن هناك حتمًا بأنّ 2222 هي على حق، ولكن هذا ليس ما يتوقعه الناس عادةً. وبما أنّ الأمر ليس خاطئًا (يُرجى العلم أنّ العديد من الساعات تعرض الرقم 4 بالرمز الروماني II)، لذا يجب إدخال هذا الرقم لتحسينه في المستقبل.

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

يمكن أن يساعد الاختبار في العثور على الأخطاء وإزالتها، ويمكن أن يساعدنا Gemini Code Assist في كتابة الاختبارات واستخدامها.

5- إضافة الاختبارات

ارجع إلى نافذة محادثة Gemini، واسأل

How can I test the number_to_roman function?

اقرأ الرد الذي يجب أن يتضمن مناقشة الوحدة unittest ووحدة pytest.

قد ترغب في أن تطلب من Gemini Code Assist كتابة هذه الاختبارات لك. افتح calendar.py، حيث يقع رمز الإحالة الناجحة الفعلي في المحرِّر، وارجع إلى نافذة محادثة Gemini، ثم اسأل مرة أخرى

How can I test the number_to_roman function?

أصبحت الاستجابة أكثر تحديدًا الآن، حتى تضمين وحدة اختبار وحدة يمكنك نسخها أو إدخالها في ملف جديد:

import unittest
import calendar

class NumberToRomanTest(unittest.TestCase):

    def test_convert_1(self):
        self.assertEqual(calendar.number_to_roman(1), "I")

    def test_convert_4(self):
        self.assertEqual(calendar.number_to_roman(4), "IV")

    def test_convert_9(self):
        self.assertEqual(calendar.number_to_roman(9), "IX")

    def test_convert_40(self):
        self.assertEqual(calendar.number_to_roman(40), "XL")

    def test_convert_90(self):
        self.assertEqual(calendar.number_to_roman(90), "XC")

    def test_convert_400(self):
        self.assertEqual(calendar.number_to_roman(400), "CD")

    def test_convert_900(self):
        self.assertEqual(calendar.number_to_roman(900), "CM")

    def test_convert_1990(self):
        self.assertEqual(calendar.number_to_roman(1990), "MCMXC")

    def test_convert_2023(self):
        self.assertEqual(calendar.number_to_roman(2023), "MMXXIII")

قد ترى رمزًا مختلفًا عن المثال أعلاه. يتم تعديل النماذج الأساسية لتطبيق Gemini Code Assist من حين لآخر، لذلك لن تتطابق الإجابات دائمًا. إذا رأيت مجموعة مختلفة من الرموز، يمكنك الآن اختيار ما إذا كنت تريد مواصلة استخدام النماذج المعروضة في هذا الدرس التطبيقي حول الترميز من خلال نسخ الرمز الموضّح هنا، أو يمكنك تجربة الإجابة البديلة التي يقدّمها لك Gemini Code Assist الآن. إذا كان لديك متسع من الوقت، يمكنك حتى تجربة كلا المسارين. Gemini Code Assist هو مساعد لك في الترميز يمكنك استخدامه بالشكل الذي يناسبك.

انقر على السهم مرّتين في أعلى يسار نافذة Gemini Chat لإنشاء ملف جديد يحتوي على رمز اختبار الوحدة، أو استخدِم بيئة التطوير المتكاملة (IDE) لإنشاء ملف جديد ولصق الرمز الظاهر في هذا التمرين المعملي. اضغط على CTRL-S أو CMD-S في هذه النافذة لحفظه، واطلب الملف المحفوظ calendar-unittest.py.

ارجع إلى الوحدة الطرفية واضغط على CTRL-C لإيقاف خادم الويب الذي تركته في وقت سابق، والحصول على موجه الأوامر. أدخل الأمر

python3 calendar-unittest.py

لإجراء الاختبارات الجديدة.

ما مِن نتيجة. لم يكن هذا ما كان متوقعًا. هل مرّ كل شيء في صمت؟ أنت تريد أن تعرف ذلك بالتأكيد. انظر إلى الإجابة من Gemini Code Assist التي تضمنت رمز الاختبار. يوجد أسفل الرمز المزيد من المعلومات عن كيفية إجراء اختبار الحالة:

run-unittest.png

جرِّب تشغيل الأمر المقترَح:

python -m unittest discover

قد تواجهك مشكلة إذا لم يتم تسمية الجهاز باسم python3 الأمر python، وفي هذه الحالة قم بتشغيل:

python3 -m unittest discover

يتم تشغيل الأمر، لكنه يعرض الخطأ Ran 0 tests in 0.000s. تحتوي الوحدة على عدة اختبارات. ماذا يحدث؟

هذه هي الكلمة الأخيرة في الأمر، discover. من أين أتت؟ على ما يبدو، توقّع Gemini Code Assist حفظ رمز الاختبار في ملف باسم discover أو discover.py، ولكنّه لم يحدِّد ذلك. بما أنّك حفظت الملف في calendar-unittest.py، جرِّب تنفيذ الأمر:

python3 -m unittest calendar-unittest

أنت الآن تشاهد الكثير من المخرجات، بدءًا بشيء مثل هذا:

$ python3 -m unittest calendar-unittest
.F.FFFFFF
======================================================================
FAIL: test_convert_1990 (calendar-unittest.NumberToRomanTest)
----------------------------------------------------------------------
Traceback (most recent call last):
  File "/home/charles_engelke/testing-with-duet-ai-codelab/calendar-unittest.py", line 28, in test_convert_1990
    self.assertEqual(calendar.number_to_roman(1990), "MCMXC")
AssertionError: 'MDCCCCLXXXX' != 'MCMXC'
- MDCCCCLXXXX
+ MCMXC

يعرض السطر الأول فترة لكل اختبار ناجح، وF لكل اختبار غير ناجح. معظم الاختبارات لا تنجح! ثم يسرد الاختبارات التي أخفقت بشكل فردي، مع إظهار المخرجات المتوقعة والناتج الفعلي. لم يتم توضيح بعض الشيء بشأن الترتيب الذي تم فيه إجراء هذه الاختبارات. كان هذا الترتيب أبجديًا حسب اسم الاختبار، وليس الترتيب الذي تظهر به الاختبارات في الملف. تم تشغيل "test_convert_1" أولاً، ثم "test_convert_1990"، ثم "test_convert_2023"، وهكذا. حالتا الاختبار لكل من 1 و2023 هما حالتا الاختبار الوحيدتان اللتان تم اجتيازهما.

في المرة الأولى التي جرّبت فيها هذا الرمز، لاحظت أنّه حوّل 24 إلى XXIIII، وهذا لم يكن صحيحًا تمامًا، ولكنه ليس التنسيق الشائع الذي يتم فيه تحويل IIII إلى IV. كانت جميع الاختبارات غير الناجحة لحالات مماثلة. عند رصد هذه المشكلة لأول مرة، قال المعمل: "بما أنّ ذلك ليس خطأً حقًا (مع العلم أنّ العديد من الساعات تعرض 4 بالأرقام الرومانية IIII)، يُرجى ترك هذه المشكلة لتحسينها في المستقبل".

يمكنك تغيير حالات الاختبار لتوقُّع الإجابات "غير الخاطئة" التي تُمنح للرمز وقبولها، أو قبول أنّ الوقت قد حان لإجراء هذا "التحسين المستقبلي". إذًا، خطوتك التالية هي إصلاح الرمز البرمجي، بمساعدة Gemini Code Assist، لتقديم إجابات أكثر قبولاً تتوقّعها الاختبارات.

6. تحسين التعليمات البرمجية

تذكَّر أنّ الردود مثل XXIIII لـ 24، بدلاً من XXIV الأكثر شيوعًا، تم اعتبارها "ليست خاطئة حقًا" وتم تأجيلها لإجراء تحسينات مستقبلية. المستقبل هو الآن. لا تزال هذه الإجابات "ليست خاطئة حقًا" مزعجة.

القاعدة الأولى للأرقام المتكررة في الأرقام الرومانية هي: في أي وقت يكون لديك فيه أربعة أرقام متطابقة في صف واحد، يجب استبدالها بأحد الأرقام متبوعًا بالرقم التالي الأعلى. لذلك يجب استبدال XXIIII بـ XXIV. وبالمثل، يجب تغيير XXXX إلى XL، ويجب أن يصبح CCCC CD.

اسأل Gemini Code Assist عن كيفية تغيير قيمة المتغير roman بهذه الطريقة مباشرةً قبل عرضه بواسطة number_to_roman:

If the final value of roman has IIII in it, that should be replaced by IV. Similarly XXXX should be replaced by XL, and CCCC should become CD. How can I make those changes?

الاقتراح هو إضافة بعض التعليمات البرمجية في النهاية:

6437c3fa2c5fabd1.png

انسخ/الصق هذه الأسطر أو اكتبها في المحرر، ثم تحقق مما يحدث:

dcefa568cab82fb7.png

أضاف Gemini Code Assist المزيد من الأسطر للتعامل مع الحالات التي يمكن أن ينتهي بها الأمر بعد إجراء المجموعة الأولى من عمليات الاستبدال. على سبيل المثال، سيتم تحويل الرقم 19 إلى XVIIII، ثم إلى XVIV، وأخيرًا إلى XIX الصحيح.

إذا قدم Gemini Code Assist اقتراحات مفيدة على ما يبدو، اضغط على مفتاح التبويب (Tab) لقبول الاقتراحات، واحفظ الملف، ثم شغِّل خادم الويب مرة أخرى. وبخلاف ذلك، أضف الأسطر الموضحة في المثال هنا يدويًا، واحفظ الملف. تجربة إحالة ناجحة صعبة: 1999:

a206999587fdc9.png

إجابتك صحيحة

يُرجى إعادة إجراء الاختبارات الآن. اجتازت جميعها بنجاح!

يبدو أن تطبيق الويب جاهز للإنتاج.

7. النشر في Cloud Run

سيشغل Cloud Run تطبيقًا محصورًا على الإنترنت من أجلك. وفي التطبيقات المكتوبة باستخدام أُطر عمل شائعة، مثل Flash، سينشئ الأمر gcloud run deploy هذه الحاوية نيابةً عنك قبل نشرها. نفِّذ الأمر التالي:

gcloud run deploy

في الوحدة الطرفية عند سؤالك عن موقع رمز المصدر، اضغط على Enter لقبول الموقع الصحيح الذي يقترحه. وبالمثل، عندما يُطلب منك إدخال اسم خدمة، اضغط على مفتاح Enter لقبول الاقتراح.

قد يتعذّر تنفيذ الأمر لأن gcloud لا يمكنه تحديد المشروع الذي سيتم استخدامه. في هذه الحالة، شغِّل الأمر:

gcloud config set core/project <project-id>

حيث يتم استبدال بمعرّف مشروعك، والذي قد يكون مطابقًا لاسمه. بعد ذلك، عليك إعادة تنفيذ الأمر gcloud run deploy.

  • سيطلب منك الأمر أن تكون هناك حاجة إلى واجهات برمجة تطبيقات معيّنة ولم يتم تفعيلها بعد. أدخل y ليتم تفعليها لك.
  • عندما يُطلب منك اختيار منطقة، اختَر منطقة مناسبة لك. يعد إدخال الرقم المتوافق مع us-central1 اختيارًا آمنًا.
  • عندما يُطلَب منك إدخال الرمز، أدخِل Y للمتابعة.
  • ستحتاج إلى السماح بالاستدعاءات unauthenticated لخدمة Cloud Run هذه. خيار المصادقة الذي تستخدمه Cloud Run مناسب للاستخدام من خلال البرامج التي تستدعي الخدمة. بما أن هذا موقع إلكتروني، لن تستخدم المصادقة.

ستنشئ Google Cloud الحاوية وتنشرها وتوجِّه عدد الزيارات إليها وتضبط سياسات الوصول، ثم تعرض لك الرابط إلى الصفحة الرئيسية:

94ba7d8d63a44afd.png

يمكنك الانتقال إلى هذا الرابط والوصول إلى تطبيقك.

a2e51666dfd33a9f.png

أدخل رقمًا واضغط على Enter، ثم tada!

5021535ac991a95c.png

ماذا؟!

نجحت هذه العملية على جهازك. لماذا لم ينتهِ ذلك؟

اكتشف ذلك. طرح سؤال على Gemini Code Assist،

Why am I getting an internal server error on cloud run?

4b24321251d6eddf.png

على ما يبدو، يمكن لتطبيق Gemini Code Assist قراءة ملف السجلّ الذي يحتوي على معلومات مشابهة. لنسألك عن كيفية الاطّلاع على السجلات بنفسك من Gemini Code Assist:

92d1855be73ef1d.png

استمر وافعل ذلك. ابحث عن الأسطر التي تتضمن مؤشرات !! حمراء كخطأ، كما يلي:

9bed4f9ed82de21c.png

ويتبع ذلك أسطر عديدة من التفاصيل حول حزمة المكالمات التي تصل إلى هنا، ولكن إليك ما يلي:

47fc93be845f4e3f.png

عندما تنظر إلى ملف calendar.py، ترى الدالة number_to_roman هناك! وأنت تعلم أنَّه صحيح لأنّه نجح في الجهاز. ما الذي يمكن أن يختلف في Cloud Run؟

الإجابة صعبة. هناك وحدة قياسية مضمنة في بايثون 3 تُسمى calendar، تمامًا مثل ملف calendar.py الذي يتم تعريف الدالة number_to_roman فيه. عندما بحثَت بايثون عن وحدة تُسمى calendar على جهازك المحلي، بحثَت في دليل التطبيقات أولاً. يبدو أنّ لغة Python على Cloud Run بحثت أولاً عن الوحدات العادية، وتم استيرادها، ولم تعثر على الدالة number_to_roman.

هذه الأنواع من الاختلافات في البيئات ممكنة دائمًا. ومن الجيّد أنّ التطبيق عندما يكون مضمّنًا في حاويات، فإنّه يحمل بيئته داخله، وبالتالي يمكنك توقُّع السلوك نفسه في أي مكان يتم تشغيله. إذا كنت قد شغَّلت التطبيق المُحوّى نفسه الذي يحتوي عليه Cloud Run على الجهاز، لكان ستواجه المشكلة نفسها.

حل هذه المشكلة. تحتاج إلى تغيير اسم وحدة التقويم المحلي إلى شيء ليس أيضًا اسم الوحدة القياسية. أعد تسمية ملف calendar.py باسم my_calendar.py، ثم غيِّر أسطر import calendar في main.py وcalendar-unittest.py إلى import my_calendar. أخيرًا، غيِّر الخط

roman = calendar.number_to_roman(number)

إلى

roman = my_calendar.number_to_roman(number)

يمكنك تجربته محليًا وإجراء الاختبارات ثم إعادة النشر:

gcloud run deploy

وهي الآن تعمل:

ed288801c6825eb1.png

يمكنك مشاركة عنوان URL هذا، وسيتمكّن كل من يحتاج إلى أداة تحويل الأرقام الرومانية من استخدام عنوان URL الخاص بك.

8. اختياري: إضفاء لمسة أجمل

يعمل تطبيقك بشكل جيد ويمكن لأي شخص على الويب الوصول إليه. لكنها ذات مظهر بسيط بعض الشيء. قبل أن تخبر الجميع عن هذا المنتج، ما رأيك في أن تطلب من Gemini Code Assist تحسين مظهره؟

افتح ملف templates/index.html. في نافذة محادثة Gemini، يمكنك طرح الأسئلة التالية:

Make this index.html file use material design.

الاستجابة هي إجراء إضافات إلى الملف الحالي، مما ينتج عنه شيء مشابه لما يلي:

<!DOCTYPE html>
<html>
<head>
    <title>Roman Numerals</title>
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">   
    <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>     
</head>
<body>
    <h1 class="mdl-typography--title">Roman Numerals</h1>
    <form action="/convert" method="post">
        <div class="mdl-textfield mdl-js-textfield">
            <input class="mdl-textfield__input" type="text" id="number" name="number" required />
            <label class="mdl-textfield__label" for="number">Enter a number:</label>
          </div>
          <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
            Convert!
          </button>
    </form>
</body>
</html>

استخدِم الرمز لنسخ الرمز المقترَح ولصقه في محتوى index.html الحالي. في الوحدة الطرفية، شغِّل python3 main.py وانقر على الرابط لفتح نافذة معاينة. أصبحت الصفحة الآن أقل وضوحًا إلى حد ما:

295643ec03fcaafc.png

يمكنك تكرار هذا الإجراء مع ملف convert.html إذا أردت.

يعرف Gemini Code Assist القليل من CSS، ويمكنك أن تجعله يساعدك في تصميم صفحات التطبيق بعدة طرق. ليست هذه سوى البداية.

نظرًا لأنك تريد مشاركة هذا التطبيق، لا تنسَ إعادة نشره على Cloud Run:

gcloud run deploy

يمكنك تمرير عنوان URL إلى الأشخاص الذين يحتاجون إلى تحويله إلى الأرقام الرومانية.

9. تهانينا!

تهانينا، لقد عملت بنجاح مع Gemini Code Assist لإضافة اختبارات إلى أحد التطبيقات وإصلاح الأخطاء فيه وإضافة وظائف محسّنة.

عند الانتهاء من استخدام التطبيق الذي تنشئه، يمكنك حذفه من لوحة بيانات Cloud Console لإيقاف أي رسوم محتملة مستقبلية.

المستندات المرجعية...