1. قبل البدء
يوضّح هذا الدرس التطبيقي حول الترميز كيفية استخدام Gemini Code Assist لتنفيذ "التصميم المتعدد الأبعاد" على موقع إلكتروني. بعد تنفيذ التصميم المتعدد الأبعاد، ستكرّر التصميم، وتجري تغييرات لتحسين تجربة المستخدم وإضافة وظائف. في نهاية ورشة العمل هذه، ستتمكّن من استخدام 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?
ملاحظة: جميع الطلبات المقدَّمة في هذا الدرس التطبيقي حول الترميز هي أمثلة. يمكنك الاستفادة منها كمصدر إلهام لاقتباساتك الخاصة، وتضمين سياق من مشروعك للحصول على أفضل النتائج.
يجب أن تكون الاستجابة مشابهة لما يلي:
يتم استخدام Material Design لأغراض هذا المختبر، ولكن يمكنك أن تطلب من 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 لتنفيذ التصميم المتعدد الأبعاد على صفحة ويب. تعرّفت أيضًا على كيفية تكرار التصميم وتنظيم الرمز البرمجي الذي تم إنشاؤه. ستتيح لك هذه المهارة الجديدة إنشاء صفحات ويب سهلة الاستخدام باستخدام التصميم المتعدد الأبعاد أو مكتبات مشابهة بأقل قدر من الإعداد.