۱. قبل از شروع
این کارگاه آموزشی نحوه استفاده از Gemini Code Assist برای پیاده‌سازی طراحی متریال در یک وب‌سایت را نشان می‌دهد. پس از پیاده‌سازی طراحی متریال، شما طراحی را تکرار خواهید کرد و تغییراتی را برای بهبود تجربه کاربری و افزودن قابلیت‌ها ایجاد خواهید کرد. در پایان این کارگاه، شما قادر خواهید بود از Gemini برای ایجاد صفحات وب کاربرپسند و قابل استفاده با استفاده از طراحی متریال یا یک کتابخانه مشابه بدون نیاز به نوشتن CSS استفاده کنید.
پیش‌نیازها
- درک HTML، CSS و جاوا اسکریپت
- درک اولیه از طراحی وب
آنچه یاد می‌گیرید
- نحوه پیاده‌سازی کتابخانه‌های استایل‌بندی با Gemini Code Assist
- چگونه به جای تغییر دستی CSS، با استفاده از Gemini Code Assist روی یک طرح کار کنیم؟
- چگونه به طور موثر Gemini Code Assist را وادار کنیم تا کد را به سبک دلخواه شما ارائه دهد
آنچه شما نیاز دارید
- دسترسی به یک پروژه گوگل کلود با فعال بودن Gemini برای گوگل کلود
- یک صفحه وب برای استایل‌دهی، یا حداقل پوشه‌ای که در آن یک صفحه وب ایجاد شود
۲. راه‌اندازی
برای این آزمایشگاه کد، دو چیز ضروری است: دسترسی به یک پروژه Google Cloud که Gemini در آن فعال باشد، و یک صفحه وب برای استایل‌دهی. می‌توانید با کلیک روی دکمه Gemini در سمت راست بالای کنسول Cloud و کلیک روی enable در پنل زیر، Gemini را در یک پروژه جدید فعال کنید.
برای استایل‌دهی به صفحه وب، می‌توانید از هر صفحه وبی که دم دست دارید استفاده کنید. از طرف دیگر، از آنجایی که 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>
۳. مواد اجرایی
با درخواست از Gemini برای پیاده‌سازی طراحی متریال در صفحه وب ما با یک پیام در این راستا شروع کنید:
Can you apply material design styles to this page?
توجه: تمام دستورالعمل‌های ارائه شده در این آزمایشگاه کد، نمونه هستند. می‌توانید از آنها به عنوان الهام‌بخش برای نقل قول‌های خود استفاده کنید و برای بهترین نتیجه، زمینه‌ای از پروژه خود را نیز در آنها بگنجانید.
پاسخ باید مشابه این باشد:
برای این آزمایش از طراحی متریال استفاده شده است، اما می‌توانید از Gemini بخواهید کتابخانه مورد نظر شما را پیاده‌سازی کند. اگر Gemini نسخه‌ای متفاوت از Material را نسبت به نسخه مورد انتظار شما وارد می‌کند، سعی کنید نسخه مورد نظر را در اعلان خود ارائه دهید.
۴. تکرار در طراحی
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?
۵. سازماندهی
همچنین می‌توانید از Gemini بخواهید نتایج خود را در جایی که برای پروژه ما بیشترین کاربرد را دارد، سازماندهی کند. در این حالت، از آنجایی که تمرکز بر تکرار طراحی در این فایل است، یک تگ style ایده‌آل است. از Gemini بخواهید پاسخ‌های خود را در یک تگ style قرار دهد تا از اعمال تغییرات خود در چندین فایل در حین کار جلوگیری شود:
Can you put this css in a style tag? I'd like to keep everything in this HTML page.
۶. دسترسی‌پذیری
همانطور که در طراحی متریال گفته شد ، دسترسی‌پذیری و کاربردپذیری عناصر ضروری طراحی هستند. با در نظر گرفتن این نکته، سعی کنید از Gemini بخواهید تا مطمئن شود ورودی‌های ما از انواع صحیح استفاده می‌کنند. این کار تضمین می‌کند که آنها به درستی توسط ابزارهای دسترسی‌پذیری مانند صفحه‌خوان‌ها دریافت می‌شوند.
Can you make sure to use the right types of inputs for each field? Tel for telephone, email for email, etc.
۷. نتیجه‌گیری
تبریک می‌گویم که این Codelab را به پایان رساندید! شما یاد گرفتید که چگونه از Gemini برای پیاده‌سازی طراحی متریال در یک صفحه وب استفاده کنید. همچنین یاد گرفتید که چگونه روی طراحی تکرار کنید و کد تولید شده را سازماندهی کنید. این مهارت جدید به شما امکان می‌دهد صفحات وب قابل استفاده و کاربرپسندی را با استفاده از طراحی متریال یا کتابخانه‌های مشابه با حداقل تنظیمات ایجاد کنید.