1. ก่อนเริ่มต้น
Codelab นี้แสดงวิธีใช้ Gemini Code Assist เพื่อติดตั้งใช้งาน Material Design บนเว็บไซต์ เมื่อใช้ Material Design แล้ว คุณจะสามารถทำซ้ำการออกแบบ ทำการเปลี่ยนแปลงเพื่อปรับปรุงประสบการณ์ของผู้ใช้ และเพิ่มฟังก์ชันการทำงานได้ เมื่อจบเวิร์กช็อปนี้ คุณจะใช้ Gemini เพื่อสร้างหน้าเว็บที่ใช้งานได้และเป็นมิตรกับผู้ใช้โดยใช้ Material Design หรือไลบรารีที่คล้ายกันได้โดยไม่ต้องเขียน CSS
ข้อกำหนดเบื้องต้น
- ความเข้าใจเกี่ยวกับ HTML, CSS และ JavaScript
- ความเข้าใจพื้นฐานเกี่ยวกับการออกแบบเว็บ
สิ่งที่คุณจะได้เรียนรู้
- วิธีใช้ไลบรารีการจัดรูปแบบด้วย Gemini Code Assist
- วิธีทำซ้ำการออกแบบโดยใช้ Gemini Code Assist แทนการปรับแต่ง CSS ด้วยตนเอง
- วิธีพรอมต์ Gemini Code Assist อย่างมีประสิทธิภาพเพื่อช่วยเขียนโค้ดในสไตล์ที่คุณต้องการ
สิ่งที่ต้องมี
- สิทธิ์เข้าถึงโปรเจ็กต์ Google Cloud ที่เปิดใช้ Gemini สำหรับ Google Cloud
- หน้าเว็บที่จะจัดรูปแบบ หรืออย่างน้อยก็โฟลเดอร์ที่จะสร้างหน้าเว็บ
2. ตั้งค่า
สำหรับโค้ดแล็บนี้ คุณต้องมี 2 สิ่ง ได้แก่ สิทธิ์เข้าถึงโปรเจ็กต์ Google Cloud ที่เปิดใช้ Gemini และหน้าเว็บเพื่อให้เราจัดรูปแบบ คุณเปิดใช้ Gemini ในโปรเจ็กต์ใหม่ได้โดยคลิกปุ่ม Gemini ที่ด้านขวาบนของ Cloud Console แล้วคลิกเปิดใช้ในแผงด้านล่าง
สำหรับหน้าเว็บที่จะจัดรูปแบบ คุณสามารถใช้หน้าเว็บใดก็ได้ที่คุณมี หรือเนื่องจากเปิดใช้ 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>
3. สื่อการเรียนการสอน
เริ่มด้วยการขอให้ Gemini ใช้ Material Design ในหน้าเว็บของเราด้วยพรอมต์ในลักษณะต่อไปนี้Can you apply material design styles to this page?
หมายเหตุ: พรอมต์ทั้งหมดที่ระบุใน Codelab นี้เป็นเพียงตัวอย่าง คุณสามารถใช้คำพูดเหล่านี้เป็นแรงบันดาลใจในการสร้างคำพูดของคุณเองได้ และอย่าลืมใส่บริบทจากโปรเจ็กต์ของคุณเพื่อให้ได้ผลลัพธ์ที่ดีที่สุด
คำตอบควรมีลักษณะคล้ายกับตัวอย่างต่อไปนี้
เราใช้ Material Design เพื่อวัตถุประสงค์ของฟีเจอร์ทดลองนี้ แต่คุณสามารถขอให้ Gemini ใช้ไลบรารีที่คุณเลือกได้ หาก Gemini นำเข้าเวอร์ชันของ Material ที่แตกต่างจากที่คุณคาดไว้ ให้ลองระบุเวอร์ชันที่ต้องการในพรอมต์
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. การช่วยเหลือพิเศษ
ตามที่ระบุไว้ใน 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. บทสรุป
ขอแสดงความยินดีที่ทำ Codelab นี้เสร็จสมบูรณ์ คุณได้เรียนรู้วิธีใช้ Gemini เพื่อใช้ Material Design ในหน้าเว็บแล้ว นอกจากนี้ คุณยังได้เรียนรู้วิธีทำซ้ำการออกแบบและจัดระเบียบโค้ดที่สร้างขึ้นด้วย ทักษะใหม่นี้จะช่วยให้คุณสร้างหน้าเว็บที่ใช้งานได้และเป็นมิตรกับผู้ใช้โดยใช้ Material Design หรือไลบรารีที่คล้ายกันได้โดยมีการตั้งค่าเพียงเล็กน้อย