เกี่ยวกับ Codelab นี้
1 ก่อนเริ่มต้น
โค้ดแล็บนี้แสดงวิธีใช้ฟีเจอร์ช่วยเขียนโค้ดของ Gemini เพื่อติดตั้งใช้งาน Material Design ในเว็บไซต์ เมื่อใช้ Material Design แล้ว คุณจะต้องทําซ้ำการออกแบบ เปลี่ยนแปลงเพื่อปรับปรุงประสบการณ์ของผู้ใช้ และเพิ่มฟังก์ชันการทำงาน เมื่อจบเวิร์กช็อปนี้ คุณจะใช้ Gemini เพื่อสร้างหน้าเว็บที่ใช้งานได้และใช้งานง่ายโดยใช้ Material Design หรือไลบรารีที่คล้ายกันโดยไม่ต้องเขียน CSS
ข้อกำหนดเบื้องต้น
- ความเข้าใจเกี่ยวกับ HTML, CSS และ JavaScript
- ความเข้าใจพื้นฐานเกี่ยวกับการออกแบบเว็บไซต์
สิ่งที่คุณเรียนรู้
- วิธีใช้ไลบรารีการจัดรูปแบบด้วย Gemini Code Assist
- วิธีปรับปรุงการออกแบบโดยใช้ฟีเจอร์ช่วยเขียนโค้ดของ Gemini แทนการปรับแต่ง CSS ด้วยตนเอง
- วิธีกระตุ้นให้ Gemini Code Assist เขียนโค้ดในสไตล์ที่ต้องการอย่างมีประสิทธิภาพ
สิ่งที่ต้องมี
- สิทธิ์เข้าถึงโปรเจ็กต์ Google Cloud ที่เปิดใช้ Gemini สำหรับ Google Cloud
- หน้าเว็บที่จะจัดสไตล์ หรืออย่างน้อยต้องมีโฟลเดอร์ที่จะสร้างหน้าเว็บ
2 ตั้งค่า
สําหรับโค้ดแล็บนี้ คุณต้องมี 2 อย่าง ได้แก่ สิทธิ์เข้าถึงโปรเจ็กต์ Google Cloud ที่เปิดใช้ Gemini และหน้าเว็บให้เราจัดสไตล์ คุณเปิดใช้ Gemini ในโปรเจ็กต์ใหม่ได้โดยคลิกปุ่ม Gemini ที่ด้านขวาบนของคอนโซล Cloud แล้วคลิก "เปิดใช้" ในแผงด้านล่าง
สำหรับหน้าเว็บที่จะจัดสไตล์ คุณสามารถใช้หน้าเว็บใดก็ได้ที่มี หรือจะขอให้ Gemini สร้างให้คุณก็ได้เนื่องจากเปิดใช้อยู่ หากคุณส่งคําขออย่าง Write me a web page with a form to gather profile information
ไปยัง Gemini ผลลัพธ์ที่ได้ควรมีลักษณะคล้ายกับตัวอย่างต่อไปนี้
<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 นำเข้าเนื้อหาเวอร์ชันอื่นที่ไม่ใช่เวอร์ชันที่คุณคาดไว้ ให้ลองระบุเวอร์ชันที่ต้องการในพรอมต์
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 หรือไลบรารีที่คล้ายกันโดยใช้เวลาในการตั้งค่าเพียงเล็กน้อย