1. قبل البدء
يعرض هذا الدرس التطبيقي حول الترميز كيفية استخدام Gemini Code Assist في تطبيق "التصميم المتعدد الأبعاد" على موقع إلكتروني. بمجرد تنفيذ Material Design، ستقوم بالتكرار التحسيني للتصميم، وإجراء تغييرات لتحسين تجربة المستخدم وإضافة وظائف. في نهاية ورشة العمل هذه، ستتمكّن من استخدام Gemini لإنشاء صفحات ويب سهلة الاستخدام وقابلة للاستخدام باستخدام "التصميم المتعدد الأبعاد" أو مكتبة مشابهة بدون الحاجة إلى كتابة لغة CSS.
المتطلبات الأساسية
- فهم HTML وCSS وJavaScript
- فهم أساسي لتصميم الويب
المعلومات التي تطّلع عليها
- كيفية تطبيق مكتبات الأنماط باستخدام Gemini Code Assist
- كيفية التكرار التحسيني لتصميم ما باستخدام Gemini Code Assist بدلاً من تعديل CSS يدويًا
- طريقة الطلب بفعالية من Gemini Code Assist بالمساهمة بالرموز البرمجية بالأسلوب المطلوب
ما تحتاج إليه
- الوصول إلى مشروع على Google Cloud يكون فيه "Gemini في Google Cloud" مفعّلاً
- صفحة ويب لتصميمها أو على الأقل مجلد يمكن إنشاء تصميم فيه
2. ضبط إعدادات الجهاز
يتطلّب هذا الدرس التطبيقي حول الترميز إجراءَين: الوصول إلى مشروع على Google Cloud تم تفعيل Gemini فيه، وإمكانية تخصيص صفحة ويب لتصميم المحتوى. يمكنك تفعيل Gemini في مشروع جديد بالنقر على زرّ Gemini في أعلى يسار Cloud Console، ثم النقر على "تفعيل" في اللوحة أدناه.
أما بالنسبة إلى تصميم صفحة الويب، فلا تتردد في استخدام أي صفحة ويب متاحة لديك. بدلاً من ذلك، إذا كان Gemini مفعّلاً، يمكنك أن تطلب منه إنشاء حساب لك. إذا أرسلت طلبًا إلى Gemini، مثل "Write me a web page with a form to gather profile information"، من المفترَض أن تكون النتيجة مشابهة لما يلي:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Get Profile Information</title>
</head>
<body>
<h2>Get Profile Information</h2>
<form method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="address">Address:</label>
<input type="text" id="address" name="address" required>
<input type="submit" value="Save Profile">
</form>
</body>
</html>
3- تطبيق المواد
يمكنك الطلب من Gemini تنفيذ "التصميم المتعدد الأبعاد" على صفحة الويب الخاصة بنا من خلال توجيه طلب على النحو التالي:Can you apply material design styles to this page?
ملاحظة: جميع الطلبات المقدّمة في هذا الدرس التطبيقي حول الترميز هي أمثلة. لا تتردد في استخدامها كمصدر إلهام لاقتباساتك الخاصة، وتضمين سياق من مشروعك للحصول على أفضل النتائج.
يجب أن يكون الرد مشابهًا لما يلي:
يُستخدَم التصميم المتعدد الأبعاد لغرض هذا التمرين، ولكن يمكنك أن تطلب من Gemini تنفيذ المكتبة التي تختارها. إذا كان Gemini يستورد إصدارًا من المادة مختلفًا عن الإصدار الذي كنت تتوقعه، حاوِل إرسال النسخة المطلوبة في طلبك.
4. التكرار التحسيني على التصميم
يمكن أن يساعدك Gemini أيضًا في تحسين تصميم صفحة الويب بدون الحاجة إلى البحث في CSS يدويًا. يمكنك ابتكار طلبك لتطلب من Gemini تكرار هذا التصميم. للحصول على أفضل النتائج في مهام مثل هذه، ركز على وصف العناصر التي تهتم بتغييرها والنتيجة المرجوة بإيجاز قدر الإمكان:
Can we center the content on this page?
يمكنك أيضًا الطلب من Gemini إضافة عناصر وظيفية إلى صفحتنا. اطلب من Gemini إضافة المزيد من الحقول إلى النموذج أو إضافة وظائف أخرى:
Can we add some more fields to this form, like phone number, email address?
5- المؤسسة
يمكنك أيضًا أن تطلب من Gemini تنظيم نتائجه في المكان الأكثر قابلية للاستخدام في مشروعنا. في هذه الحالة، بما أنّ التركيز ينصب على التكرار التحسيني على التصميم في هذا الملف الواحد، يُعتبر استخدام علامة style مثاليًا. اطلب من Gemini إدراج ردوده في علامة نمط لتجنُّب تطبيق تغييراته على عدّة عناصر أثناء العملية:
Can you put this css in a style tag? I'd like to keep everything in this HTML page.
6- تسهيل الاستخدام
كما هو مذكور في التصميم المتعدد الأبعاد، تُعد إمكانية الوصول وسهولة الاستخدام من العناصر الأساسية في التصميم. من هذا المنطلق، يمكنك أن تطلب من Gemini التأكّد من أنّ البيانات التي أدخلناها تستخدم الأنواع الصحيحة. سيضمن ذلك الحصول عليها بشكل صحيح من خلال أدوات إمكانية الوصول مثل برامج قراءة الشاشة.
Can you make sure to use the right types of inputs for each field? Tel for telephone, email for email, etc.
7. الخاتمة
تهانينا على إكمال هذا الدرس التطبيقي حول الترميز. لقد تعرفت على كيفية استخدام Gemini لتنفيذ "التصميم المتعدد الأبعاد" على صفحة ويب. لقد تعلمت أيضًا كيفية التكرار التحسيني على التصميم وتنظيم التعليمة البرمجية التي تم إنشاؤها. ستسمح لك هذه المهارة الجديدة بإنشاء صفحات ويب سهلة الاستخدام وسهلة الاستخدام باستخدام التصميم المتعدد الأبعاد أو مكتبات مماثلة مع الحد الأدنى من الإعداد.