เปลี่ยนสไตล์ด้วย Gemini Code Assist

แต่งสไตล์ด้วยฟีเจอร์ช่วยเขียนโค้ดของ Gemini

เกี่ยวกับ Codelab นี้

subjectอัปเดตล่าสุดเมื่อ มิ.ย. 20, 2024
account_circleเขียนโดย Aaron Wanjala

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

สำหรับหน้าเว็บที่จะจัดสไตล์ คุณสามารถใช้หน้าเว็บใดก็ได้ที่มี หรือจะขอให้ 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

เราได้นํา 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.

การใช้ดีไซน์ Material

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 บทสรุป

HTML ขั้นสุดท้าย - การใช้การออกแบบเชิงวัสดุหน้าเว็บเวอร์ชันสุดท้าย - การใช้ Material Design

ยินดีด้วยที่ผ่าน Codelab นี้ คุณได้เรียนรู้วิธีใช้ Gemini เพื่อติดตั้งใช้งาน Material Design ในหน้าเว็บแล้ว นอกจากนี้ คุณยังได้เรียนรู้วิธีปรับปรุงการออกแบบและจัดระเบียบโค้ดที่สร้างขึ้น ทักษะใหม่นี้จะช่วยให้คุณสร้างหน้าเว็บที่ใช้งานได้และใช้งานง่ายโดยใช้ Material Design หรือไลบรารีที่คล้ายกันโดยใช้เวลาในการตั้งค่าเพียงเล็กน้อย