Thoải mái nhờ Trợ lý mã Gemini

Tạo kiểu bằng tính năng Trợ giúp mã của Gemini

Thông tin về lớp học lập trình này

subjectLần cập nhật gần đây nhất: thg 6 20, 2024
account_circleTác giả: Aaron Wanjala

1. Trước khi bắt đầu

Lớp học lập trình này hướng dẫn cách sử dụng tính năng Hỗ trợ mã Gemini để triển khai Material Design trên trang web. Sau khi triển khai Material Design, bạn sẽ lặp lại thiết kế, thực hiện các thay đổi để cải thiện trải nghiệm người dùng và thêm chức năng. Khi kết thúc hội thảo này, bạn sẽ có thể sử dụng Gemini để tạo các trang web hữu ích, thân thiện với người dùng bằng Material Design hoặc một thư viện tương tự mà không cần viết CSS.

Điều kiện tiên quyết

  • Hiểu biết về HTML, CSS và JavaScript
  • Có kiến thức cơ bản về thiết kế web

Kiến thức bạn sẽ học được

  • Cách triển khai thư viện định kiểu bằng tính năng Trợ giúp mã Gemini
  • Cách lặp lại một thiết kế bằng tính năng Hỗ trợ mã Gemini thay vì điều chỉnh CSS theo cách thủ công
  • Cách hiệu quả để nhắc Gemini Code Assist đóng góp mã theo kiểu bạn muốn

Bạn cần có

  • Quyền truy cập vào một dự án trên Google Cloud đã bật Gemini cho Google Cloud
  • Một trang web để tạo kiểu hoặc ít nhất là một thư mục để tạo trang web

2. Thiết lập

Đối với lớp học lập trình này, bạn cần có hai thứ: quyền truy cập vào một dự án Google Cloud đã bật Gemini và một trang web để chúng ta tạo kiểu. Bạn có thể bật Gemini trong một dự án mới bằng cách nhấp vào nút Gemini ở trên cùng bên phải của Bảng điều khiển Google Cloud, sau đó nhấp vào bật trên bảng điều khiển bên dưới.

Bật Gemini

Đối với trang web cần tạo kiểu, bạn có thể sử dụng bất kỳ trang web nào mà bạn có sẵn. Ngoài ra, vì Gemini đang bật nên bạn có thể yêu cầu công cụ này tạo một mã xác minh cho bạn. Nếu bạn đưa ra cho Gemini một yêu cầu như Write me a web page with a form to gather profile information, kết quả sẽ tương tự như sau:

<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. Tài liệu triển khai

Bắt đầu bằng cách yêu cầu Gemini triển khai Material Design trên trang web của chúng ta bằng một câu lệnh như sau:
Can you apply material design styles to this page?

LƯU Ý: Tất cả câu lệnh trong lớp học lập trình này đều là ví dụ. Bạn có thể sử dụng những câu nói này làm nguồn cảm hứng cho câu nói của riêng mình và thêm bối cảnh từ dự án của bạn để đạt được kết quả tốt nhất.

Phản hồi sẽ tương tự như sau:

Triển khai Material Design

Material Design được dùng cho mục đích của lớp học lập trình này, nhưng bạn có thể yêu cầu Gemini triển khai thư viện mà bạn chọn. Nếu Gemini nhập một phiên bản Material khác với phiên bản bạn mong đợi, hãy thử cung cấp phiên bản mong muốn trong câu lệnh của bạn.

4. Lặp lại thiết kế

Gemini cũng có thể giúp bạn lặp lại thiết kế của một trang web mà không cần phải tìm hiểu CSS theo cách thủ công. Hãy tự tạo câu lệnh để yêu cầu Gemini lặp lại thiết kế này. Để có kết quả tốt nhất trong các nhiệm vụ như thế này, hãy tập trung mô tả các phần tử mà bạn muốn thay đổi và kết quả mong muốn của chúng một cách ngắn gọn nhất có thể:

Can we center the content on this page?

Lặp lại thiết kế

Bạn cũng có thể yêu cầu Gemini thêm các thành phần chức năng vào trang của chúng tôi. Yêu cầu Gemini thêm các trường khác vào biểu mẫu hoặc thêm chức năng khác:

Can we add some more fields to this form, like phone number, email address?

Thêm các phần tử chức năng vào trang

5. Tổ chức

Bạn cũng có thể yêu cầu Gemini sắp xếp kết quả vào vị trí phù hợp nhất với dự án của chúng ta. Trong trường hợp này, vì trọng tâm là lặp lại thiết kế trong một tệp này, nên thẻ style là lý tưởng. Yêu cầu Gemini đưa các câu trả lời vào một thẻ kiểu để tránh phải áp dụng các thay đổi cho nhiều thẻ:

Can you put this css in a style tag? I'd like to keep everything in this HTML page.

Triển khai Material Design

6. Hỗ trợ tiếp cận

Như đã nêu trong Material Design, khả năng hỗ trợ tiếp cận và khả năng hữu dụng là những yếu tố thiết yếu của thiết kế. Do đó, hãy thử yêu cầu Gemini đảm bảo rằng dữ liệu đầu vào của chúng ta đang sử dụng đúng loại. Điều này sẽ đảm bảo rằng các thành phần đó được các công cụ hỗ trợ tiếp cận như trình đọc màn hình phát hiện đúng cách.

Can you make sure to use the right types of inputs for each field? Tel for telephone, email for email, etc.

Thay đổi về hỗ trợ tiếp cận

7. Kết luận

HTML hoàn thiện – Triển khai Material DesignTrang web hoàn thiện – Triển khai Material Design

Chúc mừng bạn đã hoàn thành lớp học lập trình này! Bạn đã tìm hiểu cách sử dụng Gemini để triển khai Material Design trên một trang web. Bạn cũng đã tìm hiểu cách lặp lại thiết kế và sắp xếp mã được tạo. Kỹ năng mới này sẽ giúp bạn tạo các trang web hữu ích, thân thiện với người dùng bằng Material Design hoặc các thư viện tương tự với mức thiết lập tối thiểu.