لمحة عن هذا الدرس التطبيقي حول الترميز
1. قبل البدء
يوضّح هذا الدرس التطبيقي حول الترميز كيفية استخدام ميزة "مساعدة الترميز" في Gemini لتنفيذ التصميم المتعدد الأبعاد على موقع إلكتروني. بعد تنفيذ أسلوب Material Design، ستعيد تصميم التطبيق، وستُجري تغييرات لتحسين تجربة المستخدم وإضافة وظائف. بحلول نهاية هذه الورشة، ستتمكّن من استخدام Gemini لإنشاء صفحات ويب قابلة للاستخدام وسهلة الاستخدام باستخدام Material Design أو مكتبة مشابهة بدون الحاجة إلى كتابة CSS.
المتطلبات الأساسية
- فهم لغات HTML وCSS وJavaScript
- فهم أساسي لتصميم الويب
ما ستتعرّف عليه
- كيفية تنفيذ مكتبات الأنماط باستخدام ميزة Gemini Code Assist
- كيفية إجراء تكرار على تصميم باستخدام ميزة "مساعدة الرموز البرمجية" في Gemini بدلاً من تعديل CSS يدويًا
- كيفية توجيه Gemini Code Assist بفعالية إلى المساهمة برمز برمجي بالأسلوب المطلوب
ما تحتاج إليه
- الوصول إلى مشروع على Google Cloud تم تفعيل Gemini فيه
- صفحة ويب لتطبيق أسلوب عليها، أو على الأقل مجلد لإنشاء صفحة فيه
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 تنفيذ أسلوب Material Design على صفحتنا الإلكترونية باستخدام طلب على النحو التالي:Can you apply material design styles to this page?
ملاحظة: جميع الطلبات المقدَّمة في هذا الدرس التطبيقي هي أمثلة. يمكنك استخدامها كمصدر إلهام لإنشاء اقتباساتك الخاصة، مع تضمين سياق من مشروعك للحصول على أفضل النتائج.
من المفترض أن تظهر الاستجابة على النحو التالي:
يتم استخدام تصميم Material Design بغرض هذا البرنامج التجريبي، ولكن يمكنك أن تطلب من Gemini تنفيذ المكتبة التي تختارها. إذا استورد Gemini إصدارًا مختلفًا من Material عن الإصدار المتوقّع، حاوِل تقديم الإصدار المطلوب في الطلب.
4. تكرار التصميم
يمكن أن يساعدك Gemini أيضًا في إجراء تكرارات على تصميم صفحة ويب بدون الحاجة إلى الاطّلاع على CSS يدويًا. يمكنك إنشاء طلبك الخاص لطلب إجراء تكرار على هذا التصميم. للحصول على أفضل النتائج في مهام مثل هذه، ركِّز على وصف العناصر التي تهمّك بتغييرها والنتيجة المطلوبة منها بأكبر قدر ممكن من الإيجاز:
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. تسهيل الاستخدام
كما هو موضّح في Material Design، تشكّل سهولة الاستخدام وإمكانية الوصول إلى المحتوى عنصرَين أساسيَين في التصميم. مع أخذ ذلك في الاعتبار، جرِّب طلب المساعدة من Gemini للتأكّد من أنّ مدخلاتنا تستخدم الأنواع الصحيحة. سيضمن ذلك رصدها بشكل صحيح من خلال أدوات تسهيل الاستخدام، مثل برامج قراءة الشاشة.
Can you make sure to use the right types of inputs for each field? Tel for telephone, email for email, etc.
7. الخاتمة
تهانينا على إكمال هذا الدرس التطبيقي حول الترميز. تعرّفت على كيفية استخدام Gemini لتنفيذ أسلوب Material Design على صفحة ويب. لقد تعلمت أيضًا كيفية تكرار التصميم وتنظيم الرمز الذي تم إنشاؤه. ستتيح لك هذه المهارة الجديدة إنشاء صفحات ويب قابلة للاستخدام وسهلة الاستخدام باستخدام أسلوب Material Design أو المكتبات المشابهة مع الحد الأدنى من الإعداد.